fix(pages): restore proper icon sizes

Author: jhb-dev

pages/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- fix: restore proper icon sizes for the slug sync button and the slug-change info banner after the Geist icon standardization
+
 ## 0.7.0
 
 - feat: add request-scoped ancestor caching to avoid redundant DB queries when computing virtual fields for sibling pages

pages/src/components/client/SlugFieldClient.tsx

@@ -174,13 +174,12 @@ export const SlugFieldClient = (clientProps: SlugFieldProps & TextFieldClientPro
                   onMouseEnter={(_) => setShowSyncButtonTooltip(true)}
                   onMouseLeave={(_) => setShowSyncButtonTooltip(false)}
                   style={{
+                    alignItems: 'center',
                     background: 'none',
                     border: 'none',
-                    color: 'var(--theme-elevation-500)',
                     cursor: 'pointer',
+                    display: 'flex',
                     padding: 0,
-                    transform: 'scale(0.5)',
-                    transition: 'color 0.2s',
                   }}
                   type="button"
                 >
@@ -252,11 +251,11 @@ export const SlugFieldClient = (clientProps: SlugFieldProps & TextFieldClientPro
 const InfoIcon = () => (
   <svg
     data-testid="geist-icon"
-    height="16"
+    height="20"
     strokeLinejoin="round"
-    style={{ color: 'currentcolor' }}
-    viewBox="0 0 16 16"
-    width="16"
+    style={{ color: 'var(--theme-elevation-800)', flexShrink: 0 }}
+    viewBox="-4 -4 24 24"
+    width="20"
   >
     <path
       clipRule="evenodd"

pages/src/icons/BreadcrumbsIcon.tsx

@@ -4,15 +4,15 @@ export const BreadcrumbsIcon: React.FC<{
   readonly ariaLabel?: string
   readonly className?: string
   readonly size?: number
-}> = ({ ariaLabel, className, size = 16 }) => {
+}> = ({ ariaLabel, className, size = 20 }) => {
   return (
     <svg
       aria-label={ariaLabel}
       className={className}
       data-testid="geist-icon"
       height={size}
       strokeLinejoin="round"
-      style={{ color: 'currentcolor' }}
+      style={{ color: 'var(--theme-elevation-800)' }}
       viewBox="0 0 16 16"
       width={size}
     >

pages/src/icons/HomeIcon.tsx

@@ -4,16 +4,16 @@ export const HomeIcon: React.FC<{
   readonly ariaLabel?: string
   readonly className?: string
   readonly size?: number
-}> = ({ ariaLabel, className, size = 16 }) => {
+}> = ({ ariaLabel, className, size = 20 }) => {
   return (
     <svg
       aria-label={ariaLabel}
       className={className}
       data-testid="geist-icon"
       height={size}
       strokeLinejoin="round"
-      style={{ color: 'currentcolor' }}
-      viewBox="0 0 16 16"
+      style={{ color: 'var(--theme-elevation-800)' }}
+      viewBox="-2 -2 20 20"
       width={size}
     >
       <path

pages/src/icons/RefreshIcon.tsx

@@ -4,16 +4,16 @@ export const RefreshIcon: React.FC<{
   readonly ariaLabel?: string
   readonly className?: string
   readonly size?: number
-}> = ({ ariaLabel, className, size = 16 }) => {
+}> = ({ ariaLabel, className, size = 20 }) => {
   return (
     <svg
       aria-label={ariaLabel}
       className={className}
       data-testid="geist-icon"
       height={size}
       strokeLinejoin="round"
-      style={{ color: 'currentcolor' }}
-      viewBox="0 0 16 16"
+      style={{ color: 'var(--theme-elevation-800)' }}
+      viewBox="-4 -4 24 24"
       width={size}
     >
       <path