fix(eink): more readability for progress info and section info in E-Ink mode, closes #2311 (#2313)

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

@@ -167,6 +167,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
                 showDoubleBorder={viewSettings.vertical && viewSettings.doubleBorder}
                 isScrolled={viewSettings.scrolled}
                 isVertical={viewSettings.vertical}
+                isEink={viewSettings.isEink}
                 horizontalGap={horizontalGapPercent}
                 contentInsets={contentInsets}
                 gridInsets={gridInsets}
@@ -177,6 +178,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
               showDoubleBorder={viewSettings.vertical && viewSettings.doubleBorder}
               isScrolled={viewSettings.scrolled}
               isVertical={viewSettings.vertical}
+              isEink={viewSettings.isEink}
               horizontalGap={horizontalGapPercent}
               contentInsets={contentInsets}
               gridInsets={gridInsets}

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

@@ -10,6 +10,7 @@ interface SectionInfoProps {
   showDoubleBorder: boolean;
   isScrolled: boolean;
   isVertical: boolean;
+  isEink: boolean;
   horizontalGap: number;
   contentInsets: Insets;
   gridInsets: Insets;
@@ -20,6 +21,7 @@ const HintInfo: React.FC<SectionInfoProps> = ({
   showDoubleBorder,
   isScrolled,
   isVertical,
+  isEink,
   horizontalGap,
   contentInsets,
   gridInsets,
@@ -94,7 +96,12 @@ const HintInfo: React.FC<SectionInfoProps> = ({
               }
         }
       >
-        <h2 className={clsx('text-neutral-content text-center font-sans text-xs font-light')}>
+        <h2
+          className={clsx(
+            'text-center font-sans',
+            isEink ? 'text-sm font-normal' : 'text-neutral-content text-xs font-light',
+          )}
+        >
           {hintMessage || ''}
         </h2>
       </div>

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

@@ -38,6 +38,7 @@ const ProgressInfoView: React.FC<PageInfoProps> = ({
   const showDoubleBorder = viewSettings.vertical && viewSettings.doubleBorder;
   const isScrolled = viewSettings.scrolled;
   const isVertical = viewSettings.vertical;
+  const isEink = viewSettings.isEink;
   const { progressStyle: readingProgressStyle } = viewSettings;
 
   const template =
@@ -72,8 +73,8 @@ const ProgressInfoView: React.FC<PageInfoProps> = ({
   return (
     <div
       className={clsx(
-        'progressinfo absolute bottom-0 flex items-center justify-between',
-        'text-neutral-content font-sans text-xs font-extralight',
+        'progressinfo absolute bottom-0 flex items-center justify-between font-sans',
+        isEink ? 'text-sm font-normal' : 'text-neutral-content text-xs font-extralight',
         isVertical ? 'writing-vertical-rl' : 'w-full',
         isScrolled && !isVertical && 'bg-base-100',
       )}

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

@@ -12,6 +12,7 @@ interface SectionInfoProps {
   showDoubleBorder: boolean;
   isScrolled: boolean;
   isVertical: boolean;
+  isEink: boolean;
   horizontalGap: number;
   contentInsets: Insets;
   gridInsets: Insets;
@@ -23,6 +24,7 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
   showDoubleBorder,
   isScrolled,
   isVertical,
+  isEink,
   horizontalGap,
   contentInsets,
   gridInsets,
@@ -49,8 +51,8 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
       />
       <div
         className={clsx(
-          'sectioninfo absolute flex items-center overflow-hidden',
-          'text-neutral-content font-sans text-xs font-light',
+          'sectioninfo absolute flex items-center overflow-hidden font-sans',
+          isEink ? 'text-sm font-normal' : 'text-neutral-content text-xs font-light',
           isVertical ? 'writing-vertical-rl max-h-[85%]' : 'top-0 h-[44px]',
           isScrolled && !isVertical && 'bg-base-100',
         )}