Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-08 22:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: some styles

Browse Source
This commit is contained in:
Sonny
2024-05-13 00:16:53 +02:00
committed by Sonny
parent 2f0e1dd375
commit 56aade5222
6 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
inertia/components/dashboard/link/link_favicon.tsx
View File

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

2
inertia/components/dashboard/link_list/link_controls.tsx
View File

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

1
inertia/components/dashboard/link_list/link_item.tsx
View File

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

4
inertia/components/dashboard/link_list/link_list.tsx
View File

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

11
inertia/pages/dashboard.tsx
View File

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

6
inertia/styles/theme.ts
View File

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