diff --git a/inertia/components/dashboard/link/link_favicon.tsx b/inertia/components/dashboard/link/link_favicon.tsx
index faa57af..805f26a 100644
--- a/inertia/components/dashboard/link/link_favicon.tsx
+++ b/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`,
diff --git a/inertia/components/dashboard/link_list/link_controls.tsx b/inertia/components/dashboard/link_list/link_controls.tsx
index 5d552b6..2be5887 100644
--- a/inertia/components/dashboard/link_list/link_controls.tsx
+++ b/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 (
}
+ label={}
css={{ backgroundColor: theme.colors.secondary }}
>
diff --git a/inertia/components/dashboard/link_list/link_item.tsx b/inertia/components/dashboard/link_list/link_item.tsx
index 1d36c7c..6433537 100644
--- a/inertia/components/dashboard/link_list/link_item.tsx
+++ b/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': {
diff --git a/inertia/components/dashboard/link_list/link_list.tsx b/inertia/components/dashboard/link_list/link_list.tsx
index d8791a3..58ef0ab 100644
--- a/inertia/components/dashboard/link_list/link_list.tsx
+++ b/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',
diff --git a/inertia/pages/dashboard.tsx b/inertia/pages/dashboard.tsx
index 1ce3be8..abfb9b7 100644
--- a/inertia/pages/dashboard.tsx
+++ b/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) {
+export default function DashboardPage(props: Readonly) {
const isMobile = useMediaQuery('(max-width: 768px)');
const { isShowing, open, close } = useToggle();
const handlers = useSwipeable({
@@ -45,7 +44,7 @@ export default function HomePage(props: Readonly) {
return (
-
@@ -57,11 +56,11 @@ export default function HomePage(props: Readonly) {
)}
-
+
);
}
-function HomeProviders(
+function DashboardProviders(
props: Readonly<{
children: ReactNode;
collections: Collection[];
diff --git a/inertia/styles/theme.ts b/inertia/styles/theme.ts
index 01d647d..b354e33 100644
--- a/inertia/styles/theme.ts
+++ b/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)',
},