From e82333787de47ca3522b136efb0a51bdbd6e747c Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 13 Dec 2024 12:53:21 -0800 Subject: [PATCH] Clean up icon styles --- src/components/app-header.tsx | 4 +-- src/components/checkbox.tsx | 5 ++-- src/components/dropdown-menu.tsx | 5 +--- src/components/github-auth.tsx | 27 ----------------- src/components/github-avatar.tsx | 2 +- src/components/icon-button.tsx | 4 +-- src/components/icons.tsx | 47 +++++++++++++++++------------- src/components/markdown.tsx | 19 +++++------- src/components/nav-items.tsx | 16 ++++------ src/components/note-favicon.tsx | 35 ++++++++++------------ src/components/note-list.tsx | 5 +--- src/components/radio-group.tsx | 2 +- src/components/search-input.tsx | 2 +- src/components/website-favicon.tsx | 2 +- src/routes/settings.tsx | 2 +- src/styles/variables.css | 7 ++++- tailwind.config.cjs | 2 ++ 17 files changed, 74 insertions(+), 112 deletions(-) diff --git a/src/components/app-header.tsx b/src/components/app-header.tsx index 834e99c6..2cd0c183 100644 --- a/src/components/app-header.tsx +++ b/src/components/app-header.tsx @@ -73,9 +73,7 @@ export function AppHeader({ title, icon, className, actions }: AppHeaderProps) {
{icon ? ( -
- {icon} -
+
{icon}
) : null}
{title}
diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx index 77c5a730..26540836 100644 --- a/src/components/checkbox.tsx +++ b/src/components/checkbox.tsx @@ -12,14 +12,13 @@ export const Checkbox = React.forwardRef< - + )) diff --git a/src/components/dropdown-menu.tsx b/src/components/dropdown-menu.tsx index 5d0abed7..b0c4cba7 100644 --- a/src/components/dropdown-menu.tsx +++ b/src/components/dropdown-menu.tsx @@ -69,10 +69,7 @@ const Item = React.forwardRef( > {icon ? (
{icon}
diff --git a/src/components/github-auth.tsx b/src/components/github-auth.tsx index be96d515..4f1d96f1 100644 --- a/src/components/github-auth.tsx +++ b/src/components/github-auth.tsx @@ -38,33 +38,6 @@ export function SignInButton(props: ButtonProps) { ) } -export function SignedInUser() { - const githubUser = useAtomValue(githubUserAtom) - const signOut = useSignOut() - const { online } = useNetworkState() - - if (!githubUser) { - return
You're not signed in.
- } - - return ( -
-
- Account - - {online ? ( - - ) : null} - {githubUser.login} - -
- -
- ) -} - export function useSignOut() { const send = useSetAtom(globalStateMachineAtom) diff --git a/src/components/github-avatar.tsx b/src/components/github-avatar.tsx index 0a098795..df9b9fb4 100644 --- a/src/components/github-avatar.tsx +++ b/src/components/github-avatar.tsx @@ -10,7 +10,7 @@ export function GitHubAvatar({ login, size = 32, className, style, ...props }: G
( ref={ref} type="button" className={cx( - "focus-ring inline-flex items-center justify-center rounded text-text-secondary hover:bg-bg-secondary active:bg-bg-tertiary disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-bg-secondary [&_svg]:h-4 [&_svg]:w-4", - "coarse:h-10 coarse:w-10 coarse:[&_svg]:h-5 coarse:[&_svg]:w-5", + "focus-ring inline-flex items-center justify-center rounded text-text-secondary hover:bg-bg-secondary active:bg-bg-tertiary disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-bg-secondary", + "coarse:h-10 coarse:w-10", size === "small" && "h-6 w-8", size === "medium" && "h-8 w-8", className, diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 09b080c6..9a25bf4f 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -10,7 +10,12 @@ function Icon({ size, className, ...props }: IconProps & { size: number }) { viewBox={`0 0 ${size} ${size}`} fill="currentColor" aria-hidden - className={cx("flex-shrink-0 overflow-visible", className)} + className={cx( + "flex-shrink-0 overflow-visible", + // 16px icons scale to 20px on touch devices + size === 16 && "size-icon", + className, + )} {...props} /> ) @@ -433,11 +438,11 @@ export function MessageIcon16(props: IconProps) { ) } -export function GlobeIcon16() { +export function GlobeIcon16(props: IconProps) { return ( - + - + ) } @@ -453,20 +458,20 @@ export function MailIcon16(props: IconProps) { ) } -export function MapIcon16() { +export function MapIcon16(props: IconProps) { return ( - + - + ) } -export function LinkIcon16() { +export function LinkIcon16(props: IconProps) { return ( - + - + ) } @@ -654,19 +659,19 @@ export function OfflineIcon16(props: IconProps) { ) } -export function MaximizeIcon16({ className }: { className?: string }) { +export function MaximizeIcon16(props: IconProps) { return ( - + - + ) } -export function MinimizeIcon16({ className }: { className?: string }) { +export function MinimizeIcon16(props: IconProps) { return ( - + - + ) } @@ -802,7 +807,7 @@ export function SignOutIcon16(props: IconProps) { export function GitHubIcon16({ className }: { className?: string }) { return ( + ) @@ -822,7 +827,7 @@ export function TwitterIcon16({ className }: { className?: string }) { export function YouTubeIcon16({ className }: { className?: string }) { return ( - + + @@ -852,7 +857,7 @@ export function InstagramIcon16({ className }: { className?: string }) { export function BlueskyIcon16({ className }: { className?: string }) { return ( - + - +
) : null}
@@ -338,7 +338,7 @@ function FrontmatterValue({ entry: [key, value] }: { entry: [string, unknown] }) if (typeof value !== "string") break return (
- + - + - + - + - + ) { )} > {isFirst && online ? ( - + ) : null} {children} @@ -767,7 +764,7 @@ function NoteLink({ id, text }: NoteLinkProps) { ) : null} diff --git a/src/components/nav-items.tsx b/src/components/nav-items.tsx index c260d1b1..fe878810 100644 --- a/src/components/nav-items.tsx +++ b/src/components/nav-items.tsx @@ -132,7 +132,7 @@ export function NavItems({ size = "medium" }: { size?: "medium" | "large" }) {
{!online ? (
- + Offline
) : null} @@ -142,7 +142,7 @@ export function NavItems({ size = "medium" }: { size?: "medium" | "large" }) { data-size={size} onClick={() => send({ type: "SYNC" })} > - + {syncText} ) : null} @@ -186,13 +186,11 @@ function NavLink({ {...props} > {activeIcon ? ( - - {activeIcon} - + {activeIcon} ) : null} *]:h-full [&>*]:w-full", + "flex flex-shrink-0 text-text-secondary", activeIcon && "[[aria-current=page]>&]:hidden", )} > @@ -221,11 +219,7 @@ function ExternalLink({ rel="noopener noreferrer" {...props} > - *]:h-full [&>*]:w-full")} - > - {icon} - + {icon} {children} ) diff --git a/src/components/note-favicon.tsx b/src/components/note-favicon.tsx index 90e30b26..bdb0cc40 100644 --- a/src/components/note-favicon.tsx +++ b/src/components/note-favicon.tsx @@ -24,8 +24,14 @@ export const NoteFavicon = React.memo( const leadingEmoji = getLeadingEmoji(note.title) if (leadingEmoji) { icon = ( - - + + {leadingEmoji} @@ -35,34 +41,23 @@ export const NoteFavicon = React.memo( // Daily note if (note.type === "daily") { icon = ( - + ) } // Weekly note if (note.type === "weekly") { - icon = + icon = } // GitHub if (typeof note.frontmatter.github === "string" && online) { - icon = ( - - ) + icon = } // URL if (note.url && online) { - icon = + icon = } // Book @@ -70,7 +65,7 @@ export const NoteFavicon = React.memo( icon = (
+ icon = } if (!icon) { @@ -91,7 +86,7 @@ export const NoteFavicon = React.memo( return ( - + {note.pinned ? ( ) : null} diff --git a/src/components/radio-group.tsx b/src/components/radio-group.tsx index c296a883..0a436fa2 100644 --- a/src/components/radio-group.tsx +++ b/src/components/radio-group.tsx @@ -7,7 +7,7 @@ function Item({ className, ...props }: RadixRadioGroup.RadioGroupItemProps) { return (
- +
Account - {online ? : null} + {online ? : null} {githubUser.login}
diff --git a/src/styles/variables.css b/src/styles/variables.css index c2f1ca6f..fa0a5132 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -78,6 +78,9 @@ --border-radius-lg: 12px; /* base + 4px */ --border-radius-xl: 16px; /* base + 8px */ --border-radius-full: 9999px; + + /* Icons */ + --icon-size: 16px; } @media (prefers-color-scheme: dark) { @@ -101,7 +104,6 @@ } } -/* Adjust font sizes and weights for touch devices */ @media (pointer: coarse) { :root { /* Font sizes */ @@ -113,5 +115,8 @@ /* Font weights */ --font-weight-normal: 450; --font-weight-bold: 600; + + /* Icons */ + --icon-size: 20px; } } diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 61d4bd44..094738e1 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -15,6 +15,7 @@ module.exports = { normal: "var(--font-weight-normal)", bold: "var(--font-weight-bold)", }, + size: {}, }, fontFamily: { body: ['"iA Writer Quattro"', "system-ui", "sans-serif"], @@ -99,6 +100,7 @@ module.exports = { 72: "288px", 80: "320px", 96: "384px", + icon: "var(--icon-size)", }, lineHeight: { none: "1",