Style tweaks: slightly lighter base-300 colors and padding around tab icons in sidebar (#183)

apps/readest-app/src/app/reader/components/Reader.tsx

@@ -33,7 +33,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   return (
     library.length > 0 &&
     settings.globalReadSettings && (
-      <div className='reader-page rounded-window bg-base-100 text-base-content h-dvh select-none'>
+      <div className='reader-page rounded-window bg-base-100 text-base-content select-none'>
         <Suspense>
           <ReaderContent ids={ids} settings={settings} />
           <AboutWindow />

apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx

@@ -122,12 +122,16 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
               )}
               onClick={editNote.bind(null, item)}
             >
-              <div className={clsx(
-                'align-bottom text-blue-400',
-                'transition duration-300 ease-in-out',
-                'group-hover:opacity-100 opacity-0',
-                'hover:text-blue-600',
-              )}>{_('Edit')}</div>
+              <div
+                className={clsx(
+                  'align-bottom text-blue-400',
+                  'transition duration-300 ease-in-out',
+                  'opacity-0 group-hover:opacity-100',
+                  'hover:text-blue-600',
+                )}
+              >
+                {_('Edit')}
+              </div>
             </button>
           )}
           <button
@@ -137,12 +141,16 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
             )}
             onClick={deleteNote.bind(null, item)}
           >
-            <div className={clsx(
-              'align-bottom text-red-400',
-              'transition duration-300 ease-in-out',
-              'group-hover:opacity-100 opacity-0',
-              'hover:text-red-600',
-            )}>{_('Delete')}</div>
+            <div
+              className={clsx(
+                'align-bottom text-red-400',
+                'transition duration-300 ease-in-out',
+                'opacity-0 group-hover:opacity-100',
+                'hover:text-red-600',
+              )}
+            >
+              {_('Delete')}
+            </div>
           </button>
         </div>
       </div>

apps/readest-app/src/app/reader/components/sidebar/TabNavigation.tsx

@@ -13,42 +13,41 @@ const TabNavigation: React.FC<{
   const tabs = ['toc', 'annotations', 'bookmarks'];
 
   return (
-    <div className="bottom-tab border-base-300/50 flex w-full border-t relative">
+    <div className='bottom-tab border-base-300/50 relative flex w-full border-t'>
       <div
         className={clsx(
-          'absolute bottom-0 left-0 h-full w-1/3 bg-base-300 -z-10',
-          'transition-transform duration-300 transform',
+          'bg-base-300 absolute bottom-1.5 left-1 -z-10 h-[calc(100%-12px)] w-[calc(33.3%-8px)] rounded-lg',
+          'transform transition-transform duration-300',
           activeTab === 'toc' && 'translate-x-0',
-          activeTab === 'annotations' && 'translate-x-full',
-          activeTab === 'bookmarks' && 'translate-x-[200%]',
+          activeTab === 'annotations' && 'translate-x-[calc(100%+8px)]',
+          activeTab === 'bookmarks' && 'translate-x-[calc(200%+16px)]',
         )}
       />
       {tabs.map((tab) => (
-          <div
-            key={tab}
-            className='tooltip z-50 tooltip-top m-1.5 flex-1 rounded-md p-2 cursor-pointer'
-            data-tip={tab === 'toc' ? _('Table of Contents') : tab === 'annotations' ? _('Annotate') : _('Bookmark')}
-          >
-            <div
-              className={clsx(
-                '',
-              )}
-              onClick={() => onTabChange(tab)}
-            >
-              {
-                tab === 'toc' ? (
-                  <MdToc size={20} className='mx-auto' />
-                ) : tab === 'annotations' ? (
-                  <MdEditNote size={20} className='mx-auto' />
-                ) : (
-                  <MdBookmarkBorder size={20} className='mx-auto' />
-                )
-              }
-            </div>
+        <div
+          key={tab}
+          className='tooltip tooltip-top z-50 m-1.5 flex-1 cursor-pointer rounded-md p-2'
+          data-tip={
+            tab === 'toc'
+              ? _('Table of Contents')
+              : tab === 'annotations'
+                ? _('Annotate')
+                : _('Bookmark')
+          }
+        >
+          <div className={clsx('')} onClick={() => onTabChange(tab)}>
+            {tab === 'toc' ? (
+              <MdToc size={20} className='mx-auto' />
+            ) : tab === 'annotations' ? (
+              <MdEditNote size={20} className='mx-auto' />
+            ) : (
+              <MdBookmarkBorder size={20} className='mx-auto' />
+            )}
           </div>
+        </div>
       ))}
     </div>
-  )
+  );
 };
 
 export default TabNavigation;

apps/readest-app/src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import { AppProps } from 'next/app';
+import Head from 'next/head';
 import Providers from '@/components/Providers';
 
 import '../styles/globals.css';
@@ -6,9 +7,17 @@ import '../styles/fonts.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <Providers>
-      <Component {...pageProps} />
-    </Providers>
+    <>
+      <Head>
+        <meta
+          name='viewport'
+          content='width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no'
+        />
+      </Head>
+      <Providers>
+        <Component {...pageProps} />
+      </Providers>
+    </>
   );
 }
 

apps/readest-app/src/styles/themes.ts

@@ -11,7 +11,7 @@ const generateLightPalette = ({ bg, fg, primary }: BaseColor) => {
   return {
     'base-100': bg, // Main background
     'base-200': tinycolor(bg).darken(5).toHexString(), // Slightly darker
-    'base-300': tinycolor(bg).darken(15).toHexString(), // More darker
+    'base-300': tinycolor(bg).darken(12).toHexString(), // More darker
     'base-content': fg, // Main text color
     neutral: tinycolor(bg).darken(15).desaturate(20).toHexString(), // Muted neutral
     'neutral-content': tinycolor(fg).lighten(20).desaturate(20).toHexString(), // Slightly lighter text
@@ -25,7 +25,7 @@ const generateDarkPalette = ({ bg, fg, primary }: BaseColor) => {
   return {
     'base-100': bg, // Main background
     'base-200': tinycolor(bg).lighten(5).toHexString(), // Slightly lighter
-    'base-300': tinycolor(bg).lighten(15).toHexString(), // More lighter
+    'base-300': tinycolor(bg).lighten(12).toHexString(), // More lighter
     'base-content': fg, // Main text color
     neutral: tinycolor(bg).lighten(15).desaturate(20).toHexString(), // Muted neutral
     'neutral-content': tinycolor(fg).darken(20).desaturate(20).toHexString(), // Darkened text