fix: some styles

inertia/components/dashboard/link/link_favicon.tsx

@@ -17,11 +17,13 @@ const Favicon = styled.div({
   alignItems: 'center',
   justifyContent: 'center',
 });
+
 const FaviconLoader = styled.div(({ theme }) => ({
   position: 'absolute',
   top: 0,
   left: 0,
-  backgroundColor: theme.colors.white,
+  color: theme.colors.font,
+  backgroundColor: theme.colors.secondary,
 
   '& > *': {
     animation: `${rotate} 1s both reverse infinite linear`,

inertia/components/dashboard/link_list/link_controls.tsx

@@ -69,7 +69,7 @@ export default function LinkControls({ link }: { link: Link }) {
   console.log(link.favorite, link.favorite ? 'oui' : 'non');
   return (
     <Dropdown
-      label={<BsThreeDotsVertical />}
+      label={<BsThreeDotsVertical css={{ color: theme.colors.grey }} />}
       css={{ backgroundColor: theme.colors.secondary }}
     >
       <StartItem onClick={onFavorite}>

inertia/components/dashboard/link_list/link_item.tsx

@@ -13,7 +13,6 @@ const LinkWrapper = styled.li(({ theme }) => ({
   color: theme.colors.primary,
   backgroundColor: theme.colors.secondary,
   padding: '0.75em 1em',
-  border: `1px solid ${theme.colors.lightGrey}`,
   borderRadius: theme.border.radius,
 
   '&:hover': {

inertia/components/dashboard/link_list/link_list.tsx

@@ -20,8 +20,8 @@ const LinksWrapper = styled.div({
 
 const CollectionHeaderWrapper = styled.h2(({ theme }) => ({
   fontWeight: 400,
-  color: theme.colors.primary,
-  paddingInline: '1em',
+  color: theme.colors.font,
+  paddingInline: '0.8em 1.1em',
   display: 'flex',
   gap: '0.4em',
   alignItems: 'center',

inertia/pages/dashboard.tsx

@@ -18,18 +18,17 @@ import GlobalHotkeysContext from '~/contexts/global_hotkeys_context';
 import { useMediaQuery } from '~/hooks/use_media_query';
 import useToggle from '~/hooks/use_modal';
 
-interface HomePageProps {
+interface DashboardPageProps {
   collections: Collection[];
   activeCollection: Collection;
 }
 
 const SideBar = styled.div(({ theme }) => ({
-  paddingRight: '0.75em',
   borderRight: `1px solid ${theme.colors.lightGrey}`,
   marginRight: '5px',
 }));
 
-export default function HomePage(props: Readonly<HomePageProps>) {
+export default function DashboardPage(props: Readonly<DashboardPageProps>) {
   const isMobile = useMediaQuery('(max-width: 768px)');
   const { isShowing, open, close } = useToggle();
   const handlers = useSwipeable({
@@ -45,7 +44,7 @@ export default function HomePage(props: Readonly<HomePageProps>) {
 
   return (
     <DashboardLayout>
-      <HomeProviders
+      <DashboardProviders
         collections={props.collections}
         activeCollection={props.activeCollection}
       >
@@ -57,11 +56,11 @@ export default function HomePage(props: Readonly<HomePageProps>) {
           )}
           <Links isMobile={isMobile} openSideMenu={open} />
         </SwiperHandler>
-      </HomeProviders>
+      </DashboardProviders>
     </DashboardLayout>
   );
 }
-function HomeProviders(
+function DashboardProviders(
   props: Readonly<{
     children: ReactNode;
     collections: Collection[];

inertia/styles/theme.ts

@@ -8,8 +8,6 @@ const darkBlue = primaryDarkColor;
 
 const lightRed = '#FF5A5A';
 
-const yellow = '#ffc107';
-
 const border: Theme['border'] = {
   radius: '3px',
 };
@@ -45,7 +43,7 @@ export const lightTheme: Theme = {
 
     lightRed,
 
-    yellow,
+    yellow: '#FF8A08',
 
     boxShadow: '0 0 1em 0 rgba(102, 102, 102, 0.25)',
   },
@@ -73,7 +71,7 @@ export const darkTheme: Theme = {
 
     lightRed,
 
-    yellow,
+    yellow: '#ffc107',
 
     boxShadow: '0 0 1em 0 rgb(40 40 40)',
   },