Style PR (#84)

* fixes for table values

* color tweaks rating

* inc legibility on aside active

* add tab separators

* fix hint icon

* fix header colors & remove custom balance

* Better mobile burger colors

* remove border from logofallback img

* style divider dark mode

* compact header + file + expandable hover + mt mobile nav

* testing file types

src/components/Header/CompactHeader.tsx

@@ -23,6 +23,7 @@ export function CompactHeader(props: {
         <div
             className={tcls(
                 'hidden',
+                'pr-4',
                 'lg:flex',
                 'lg:flex-col',
                 'flex-wrap',

src/components/Header/Header.tsx

@@ -93,16 +93,21 @@ export function Header(props: {
                             style={
                                 !isCustomizationDefault && withTopHeader
                                     ? [
-                                          'bg-header-background-400/6',
-                                          'text-header-background-200',
-                                          'ring-light/2',
-                                          '[&>span]:text-header-background-200',
-                                          '[&_svg]:stroke-header-background-200',
+                                          'bg-header-background-400/8',
+                                          'shadow-sm',
+                                          'text-header-link/8',
+                                          'ring-header-background-200/5',
+                                          '[&>span]:text-header-link/7',
+                                          '[&_svg]:stroke-header-link',
+                                          'dark:bg-header-link-600/3',
+                                          'dark:ring-header-link-600/2',
+                                          'dark:text-header-link/7',
+                                          'dark:[&_svg]:stroke-header-link/7',
                                       ]
                                     : null
                             }
                         >
-                            <span>{t(getSpaceLanguage(customization), 'search')}</span>
+                            <p>{t(getSpaceLanguage(customization), 'search')}</p>
                         </SearchButton>
                     </Suspense>
                 </div>

src/components/Header/HeaderLogo.tsx

@@ -1,4 +1,4 @@
-import { Collection, CustomizationSettings, Space } from '@gitbook/api';
+import { Collection, CustomizationHeaderPreset, CustomizationSettings, Space } from '@gitbook/api';
 import Link from 'next/link';
 
 import { HeaderMobileMenu } from '@/components/Header/HeaderMobileMenu';
@@ -17,12 +17,19 @@ interface HeaderLogoProps {
 /**
  * Render the logo for a space using the customization settings.
  */
+
 export function HeaderLogo(props: HeaderLogoProps) {
     const { customization } = props;
-
+    const isCustomizationDefault =
+        customization.header.preset === CustomizationHeaderPreset.Default;
     return (
         <div className={tcls('flex', 'flex-row', 'gap-3')}>
-            <HeaderMobileMenu className={tcls('lg:hidden')} />
+            <HeaderMobileMenu
+                className={tcls(
+                    'lg:hidden',
+                    isCustomizationDefault ? ['text-dark', 'dark:text-light'] : 'text-header-link',
+                )}
+            />
             <Link
                 href={absoluteHref('')}
                 className={tcls('group/headerlogo', 'flex', 'flex-row', 'items-center', 'shrink-0')}
@@ -104,12 +111,12 @@ function LogoFallback(props: HeaderLogoProps) {
                 }
                 sizes={[]}
                 fetchPriority="high"
-                style={['w-8', 'h-8', 'rounded', 'overflow-hidden', 'border', 'border-dark/2']}
+                style={['w-8', 'h-8']}
             />
 
             <h1
                 className={tcls(
-                    'textwrap-balance',
+                    'text-balance',
                     'flex',
                     'leading-tight',
                     'tracking-tight',

src/components/Header/HeaderMobileMenu.tsx

@@ -43,9 +43,10 @@ export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLB
         >
             <IconMenu
                 className={tcls(
-                    'w-8',
-                    'h-8',
+                    'w-7',
+                    'h-7',
                     'rounded',
+                    'text-inherit',
                     'hover:bg-dark/3',
                     'p-[0.25rem]',
                     'dark:hover:bg-light/2',