Clean up icon styles

lumen-notes · Dec 13, 2024 · e823337 · e823337
1 parent 52115db
commit e823337
Show file tree

Hide file tree

Showing 17 changed files with 74 additions and 112 deletions.
diff --git a/src/components/app-header.tsx b/src/components/app-header.tsx
@@ -73,9 +73,7 @@ export function AppHeader({ title, icon, className, actions }: AppHeaderProps) {
         </div>
         <div className="flex w-0 flex-grow items-center gap-3 px-2">
           {icon ? (
-            <div className="flex h-4 w-4 flex-shrink-0 text-text-secondary coarse:h-5 coarse:w-5 [&>*]:h-full [&>*]:w-full">
-              {icon}
-            </div>
+            <div className="flex size-icon flex-shrink-0 text-text-secondary">{icon}</div>
           ) : null}
           <div className="truncate font-bold">{title}</div>
         </div>

diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx
@@ -12,14 +12,13 @@ export const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cx(
-      "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-border bg-transparent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus disabled:opacity-50 data-[state=checked]:border-border-focus data-[state=checked]:bg-border-focus data-[state=unchecked]:hover:bg-bg-secondary",
-      "coarse:h-5 coarse:w-5",
+      "flex size-icon shrink-0 items-center justify-center rounded-sm border border-border bg-transparent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-border-focus disabled:opacity-50 data-[state=checked]:border-border-focus data-[state=checked]:bg-border-focus data-[state=unchecked]:hover:bg-bg-secondary",
       className,
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator>
-      <CheckIcon8 className="text-bg" />
+      <CheckIcon8 className="text-bg coarse:size-2.5" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

diff --git a/src/components/dropdown-menu.tsx b/src/components/dropdown-menu.tsx
@@ -69,10 +69,7 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
         >
           {icon ? (
             <div
-              className={cx(
-                "flex h-4 w-4 text-text-secondary coarse:h-5 coarse:w-5 [&_svg]:h-full [&_svg]:w-full",
-                variant === "danger" && "text-text-danger",
-              )}
+              className={cx("flex text-text-secondary", variant === "danger" && "text-text-danger")}
             >
               {icon}
             </div>

diff --git 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 <div className="w-full text-center text-text-secondary">You're not signed in.</div>
-  }
-
-  return (
-    <div className="flex items-center justify-between">
-      <div className="flex flex-col gap-1 coarse:gap-2">
-        <span className="text-sm leading-3 text-text-secondary">Account</span>
-        <span className="leading-5">
-          {online ? (
-            <GitHubAvatar login={githubUser.login} size={16} className="mr-1 align-middle" />
-          ) : null}
-          {githubUser.login}
-        </span>
-      </div>
-      <Button className="flex-shrink-0" onClick={signOut}>
-        Sign out
-      </Button>
-    </div>
-  )
-}
-
 export function useSignOut() {
   const send = useSetAtom(globalStateMachineAtom)
 

diff --git 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
     <div
       aria-hidden
       className={cx(
-        "inline-block flex-shrink-0 rounded-full bg-[white] bg-cover ring-1 ring-inset ring-border-secondary",
+        "inline-block size-icon flex-shrink-0 rounded-full bg-[white] bg-cover ring-1 ring-inset ring-border-secondary",
         className,
       )}
       style={{

diff --git a/src/components/icon-button.tsx b/src/components/icon-button.tsx
@@ -34,8 +34,8 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
             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
@@ -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 (
-    <svg className="h-4 w-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+    <Icon size={16} {...props}>
       <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm2.001-1.814c1.032-1.636 1.607-3.522 1.726-5.436h2.73a6.507 6.507 0 0 1-4.456 5.436Zm-4.002 0A6.506 6.506 0 0 1 1.543 8.75h2.73c.12 1.914.694 3.8 1.726 5.436ZM5.777 8.75h4.446c-.145 2.046-.886 4.047-2.223 5.64-1.337-1.593-2.078-3.594-2.223-5.64Zm4.446-1.5H5.777C5.922 5.204 6.663 3.203 8 1.61c1.337 1.593 2.078 3.594 2.223 5.64Zm1.504 0c-.12-1.914-.694-3.8-1.726-5.436a6.507 6.507 0 0 1 4.456 5.436h-2.73ZM5.999 1.814C4.967 3.45 4.392 5.336 4.273 7.25h-2.73a6.507 6.507 0 0 1 4.456-5.436Z" />
-    </svg>
+    </Icon>
   )
 }
 
@@ -453,20 +458,20 @@ export function MailIcon16(props: IconProps) {
   )
 }
 
-export function MapIcon16() {
+export function MapIcon16(props: IconProps) {
   return (
-    <svg className="h-4 w-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+    <Icon size={16} {...props}>
       <path d="M5.744.142A1.25 1.25 0 0 0 4.712.18L1.078 1.998A1.95 1.95 0 0 0 0 3.742V14.44c0 .93.978 1.534 1.809 1.118l3.472-1.736 4.975 2.035c.334.137.71.123 1.032-.039l3.634-1.817A1.95 1.95 0 0 0 16 12.258V1.56A1.25 1.25 0 0 0 14.191.441l-3.472 1.736L5.744.142ZM4.5 1.964v10.572l-3 1.5V3.742a.45.45 0 0 1 .249-.403L4.5 1.964ZM6 12.496V1.867l4 1.637v10.629l-4-1.636Zm5.5-9.032 3-1.5v10.294a.45.45 0 0 1-.249.403L11.5 14.037V3.463Z" />
-    </svg>
+    </Icon>
   )
 }
 
-export function LinkIcon16() {
+export function LinkIcon16(props: IconProps) {
   return (
-    <svg className="h-4 w-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+    <Icon size={16} {...props}>
       <path d="m8.836 4.336 1.25-1.25a2 2 0 1 1 2.828 2.828l-2.5 2.5a2 2 0 0 1-2.828 0l-1.06 1.06a3.5 3.5 0 0 0 4.949 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.949l-1.25 1.25 1.06 1.06Z" />
       <path d="m7.164 11.664-1.25 1.25a2 2 0 0 1-2.828-2.828l2.5-2.5a2 2 0 0 1 2.828 0l1.06-1.06a3.5 3.5 0 0 0-4.949 0l-2.5 2.5a3.5 3.5 0 1 0 4.95 4.949l1.25-1.25-1.06-1.06Z" />
-    </svg>
+    </Icon>
   )
 }
 
@@ -654,19 +659,19 @@ export function OfflineIcon16(props: IconProps) {
   )
 }
 
-export function MaximizeIcon16({ className }: { className?: string }) {
+export function MaximizeIcon16(props: IconProps) {
   return (
-    <svg className={cx("h-4 w-4", className)} viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+    <Icon size={16} {...props}>
       <path d="M7 15H1V9h1.5v3.44l4-4L7.56 9.5l-4 4H7V15ZM9 1h6v6h-1.5V3.56l-4 4L8.44 6.5l4-4H9V1Z" />
-    </svg>
+    </Icon>
   )
 }
 
-export function MinimizeIcon16({ className }: { className?: string }) {
+export function MinimizeIcon16(props: IconProps) {
   return (
-    <svg className={cx("h-4 w-4", className)} viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+    <Icon size={16} {...props}>
       <path d="M9 7h6V5.5h-3.44l4-4L14.5.44l-4 4V1H9v6ZM7 9H1v1.5h3.44l-4 4 1.06 1.06 4-4V15H7V9Z" />
-    </svg>
+    </Icon>
   )
 }
 
@@ -802,7 +807,7 @@ export function SignOutIcon16(props: IconProps) {
 export function GitHubIcon16({ className }: { className?: string }) {
   return (
     <svg
-      className={cx("h-4 w-4", className)}
+      className={cx("size-icon", className)}
       viewBox="0 0 16 16"
       fill="var(--color-text)"
       aria-hidden
@@ -814,15 +819,15 @@ export function GitHubIcon16({ className }: { className?: string }) {
 
 export function TwitterIcon16({ className }: { className?: string }) {
   return (
-    <svg className={cx("h-4 w-4", className)} viewBox="0 0 16 16" fill="#1d9bf0" aria-hidden>
+    <svg className={cx("size-icon", className)} viewBox="0 0 16 16" fill="#1d9bf0" aria-hidden>
       <path d="M15.969 3.047a6.666 6.666 0 0 1-1.884.516 3.305 3.305 0 0 0 1.442-1.815c-.634.37-1.336.64-2.084.79a3.28 3.28 0 0 0-5.59 2.987 9.292 9.292 0 0 1-6.76-3.417c-.294.5-.447 1.07-.444 1.65 0 1.14.58 2.142 1.459 2.73a3.27 3.27 0 0 1-1.485-.41v.04a3.282 3.282 0 0 0 2.63 3.218 3.33 3.33 0 0 1-1.474.057 3.29 3.29 0 0 0 3.069 2.278A6.578 6.578 0 0 1 .78 13.074c-.26 0-.52-.015-.78-.045a9.33 9.33 0 0 0 5.038 1.473c6.035 0 9.332-4.997 9.332-9.323 0-.14 0-.28-.01-.42A6.623 6.623 0 0 0 16 3.06l-.031-.013Z" />
     </svg>
   )
 }
 
 export function YouTubeIcon16({ className }: { className?: string }) {
   return (
-    <svg className={cx("h-4 w-4", className)} viewBox="0 0 16 16" aria-hidden>
+    <svg className={cx("size-icon", className)} viewBox="0 0 16 16" aria-hidden>
       <path
         d="M15.665 4.124A2.01 2.01 0 0 0 14.251 2.7C13.003 2.363 8 2.363 8 2.363s-5.003 0-6.251.337A2.011 2.011 0 0 0 .335 4.124C0 5.38 0 8 0 8s0 2.62.335 3.876A2.01 2.01 0 0 0 1.749 13.3c1.248.337 6.251.337 6.251.337s5.003 0 6.251-.337a2.009 2.009 0 0 0 1.415-1.424C16 10.62 16 8 16 8s0-2.62-.335-3.876Z"
         fill="#ff0000"
@@ -834,7 +839,7 @@ export function YouTubeIcon16({ className }: { className?: string }) {
 
 export function InstagramIcon16({ className }: { className?: string }) {
   return (
-    <svg className={cx("h-4 w-4", className)} viewBox="0 0 16 16" aria-hidden>
+    <svg className={cx("size-icon", className)} viewBox="0 0 16 16" aria-hidden>
       <defs>
         <linearGradient id="myGradient" x1="0%" y1="100%" x2="100%" y2="0%">
           <stop offset="-10.92%" stopColor="#FFD522" />
@@ -852,7 +857,7 @@ export function InstagramIcon16({ className }: { className?: string }) {
 
 export function BlueskyIcon16({ className }: { className?: string }) {
   return (
-    <svg className={cx("h-4 w-4", className)} viewBox="0 0 16 16" aria-hidden>
+    <svg className={cx("size-icon", className)} viewBox="0 0 16 16" aria-hidden>
       <path
         d="M8 7.2C7.27533 5.79066 5.30267 3.16466 3.468 1.87C1.71067 0.629332 1.04067 0.843998 0.601333 1.04333C0.0926667 1.272 0 2.05333 0 2.512C0 2.972 0.252 6.27866 0.416 6.83133C0.959333 8.65533 2.89133 9.27133 4.67133 9.074C4.762 9.06066 4.85467 9.048 4.948 9.03666C4.856 9.05133 4.764 9.06333 4.67133 9.074C2.06333 9.46066 -0.253333 10.4107 2.78467 13.7927C6.12667 17.2527 7.36467 13.0507 8 10.9207C8.63533 13.0507 9.36667 17.1013 13.1553 13.7927C16 10.9207 13.9367 9.46066 11.3287 9.074C11.2362 9.06376 11.1439 9.05132 11.052 9.03666C11.1453 9.048 11.238 9.06066 11.3287 9.074C13.1087 9.272 15.0407 8.65533 15.584 6.83133C15.748 6.27933 16 2.97133 16 2.51266C16 2.05266 15.9073 1.272 15.3987 1.042C14.9593 0.843332 14.2893 0.628665 12.532 1.86866C10.6973 3.16533 8.72467 5.79133 8 7.2Z"
         fill="#0285FF"

diff --git a/src/components/markdown.tsx b/src/components/markdown.tsx
@@ -138,7 +138,7 @@ export const Markdown = React.memo(
               {typeof frontmatter?.github === "string" && online ? (
                 // If the note has a GitHub username, show the GitHub avatar
                 <div className="mb-3 inline-flex">
-                  <GitHubAvatar login={frontmatter.github} size={64} className="h-16 w-16" />
+                  <GitHubAvatar login={frontmatter.github} size={64} className="size-16" />
                 </div>
               ) : null}
               <div className="flex flex-col gap-4">
@@ -338,7 +338,7 @@ function FrontmatterValue({ entry: [key, value] }: { entry: [string, unknown] })
       if (typeof value !== "string") break
       return (
         <div className="flex items-center gap-2">
-          <GitHubIcon16 className="h-4 w-4 coarse:h-5 coarse:w-5" />
+          <GitHubIcon16 />
           <a
             className="link link-external"
             href={`https://github.com/${value}`}
@@ -354,7 +354,7 @@ function FrontmatterValue({ entry: [key, value] }: { entry: [string, unknown] })
       if (typeof value !== "string") break
       return (
         <div className="flex items-center gap-2">
-          <TwitterIcon16 className="h-4 w-4 coarse:h-5 coarse:w-5" />
+          <TwitterIcon16 />
           <a
             className="link link-external"
             href={`https://twitter.com/${value}`}
@@ -370,7 +370,7 @@ function FrontmatterValue({ entry: [key, value] }: { entry: [string, unknown] })
       if (typeof value !== "string") break
       return (
         <div className="flex items-center gap-2">
-          <BlueskyIcon16 className="h-4 w-4 coarse:h-5 coarse:w-5" />
+          <BlueskyIcon16 />
           <a
             className="link link-external"
             href={`https://bsky.app/profile/${value}`}
@@ -386,7 +386,7 @@ function FrontmatterValue({ entry: [key, value] }: { entry: [string, unknown] })
       if (typeof value !== "string") break
       return (
         <div className="flex items-center gap-2">
-          <YouTubeIcon16 className="h-4 w-4 coarse:h-5 coarse:w-5" />
+          <YouTubeIcon16 />
           <a
             className="link link-external"
             href={`https://youtube.com/@${value}`}
@@ -402,7 +402,7 @@ function FrontmatterValue({ entry: [key, value] }: { entry: [string, unknown] })
       if (typeof value !== "string") break
       return (
         <div className="flex items-center gap-2">
-          <InstagramIcon16 className="h-4 w-4 coarse:h-5 coarse:w-5" />
+          <InstagramIcon16 />
           <a
             className="link link-external"
             href={`https://instagram.com/${value}`}
@@ -582,10 +582,7 @@ function Anchor(props: React.ComponentPropsWithoutRef<"a">) {
       )}
     >
       {isFirst && online ? (
-        <WebsiteFavicon
-          url={props.href ?? ""}
-          className="mr-2 h-4 w-4 align-sub coarse:h-5 coarse:w-5 [h1>a>&]:align-baseline"
-        />
+        <WebsiteFavicon url={props.href ?? ""} className="mr-2 align-sub [h1>a>&]:align-baseline" />
       ) : null}
       {children}
     </a>
@@ -767,7 +764,7 @@ function NoteLink({ id, text }: NoteLinkProps) {
             <NoteFavicon
               note={note}
               content={note.content}
-              className="mr-2 h-4 w-4 align-sub coarse:h-5 coarse:w-5 [h1>a>&]:align-baseline"
+              className="mr-2 align-sub [h1>a>&]:align-baseline"
               defaultFavicon={null}
             />
           ) : null}

diff --git a/src/components/nav-items.tsx b/src/components/nav-items.tsx
@@ -132,7 +132,7 @@ export function NavItems({ size = "medium" }: { size?: "medium" | "large" }) {
         <div className="flex flex-col gap-1">
           {!online ? (
             <div className="nav-item text-text-secondary" data-size={size}>
-              <OfflineIcon16 className="h-4 w-4 coarse:h-5 coarse:w-5" />
+              <OfflineIcon16 />
               Offline
             </div>
           ) : null}
@@ -142,7 +142,7 @@ export function NavItems({ size = "medium" }: { size?: "medium" | "large" }) {
               data-size={size}
               onClick={() => send({ type: "SYNC" })}
             >
-              <SyncStatusIcon className="h-4 w-4 coarse:h-5 coarse:w-5" />
+              <SyncStatusIcon />
               {syncText}
             </button>
           ) : null}
@@ -186,13 +186,11 @@ function NavLink({
       {...props}
     >
       {activeIcon ? (
-        <span className="hidden h-4 w-4 flex-shrink-0 coarse:h-5 coarse:w-5 [&>*]:h-full [&>*]:w-full [[aria-current=page]>&]:flex">
-          {activeIcon}
-        </span>
+        <span className="hidden flex-shrink-0 [[aria-current=page]>&]:flex">{activeIcon}</span>
       ) : null}
       <span
         className={cx(
-          "flex h-4 w-4 flex-shrink-0 text-text-secondary coarse:h-5 coarse:w-5 [&>*]: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}
     >
-      <span
-        className={cx("flex h-4 w-4 flex-shrink-0 coarse:h-5 coarse:w-5 [&>*]:h-full [&>*]:w-full")}
-      >
-        {icon}
-      </span>
+      <span className="flex flex-shrink-0">{icon}</span>
       <span className="truncate">{children}</span>
     </a>
   )