fix: compact mode layout broke with 120 minutes max timer config (#393)

* enhance: hide zero (0) in hours in compact mode * enhance: decrease compact mode icon size in compact mode * enhance: decrease timer font size in compact mode --------- Co-authored-by: = <=>
zidoro · Jun 15, 2023 · c8c3c66 · c8c3c66
1 parent a5b147f
commit c8c3c66
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/app/renderer/src/routes/Timer/Counter/CounterTimer.tsx b/app/renderer/src/routes/Timer/Counter/CounterTimer.tsx
@@ -28,7 +28,7 @@ const CounterTimer: React.FC<Props> = ({
     >
       {Number(hours) > 0 && (
         <>
-          <span>{hours}</span>
+          <span>{compact ? hours[hours.length - 1] : hours}</span>
           <span>:</span>
         </>
       )}

diff --git a/app/renderer/src/styles/routes/timer/control.ts b/app/renderer/src/styles/routes/timer/control.ts
@@ -156,6 +156,10 @@ export const StyledMainButton = styled.button`
 export const StyledCompactButton = styled.button<{ compact?: boolean }>`
   ${ControlButton}
   padding-right: ${(p) => (p.compact ? "1.6rem" : 0)};
+
+  & > svg {
+    width: ${(p) => (p.compact ? "1.6rem" : "inherit")};
+  }
 `;
 
 export const StyledSkipButton = styled.button`

diff --git a/app/renderer/src/styles/routes/timer/counter.ts b/app/renderer/src/styles/routes/timer/counter.ts
@@ -152,7 +152,7 @@ export const StyledCounterTimer = styled.h3<TimerProps>`
   }
 
   &.compact {
-    font-size: ${(p) => (p.fullscreen ? "4rem" : "2.5rem")};
+    font-size: ${(p) => (p.fullscreen ? "4rem" : "2.3rem")};
     width: unset;
     display: flex;
     gap: 0.25rem;