fix: move timer position

marespopa · Jun 26, 2024 · 745c7c5 · 745c7c5
1 parent dd65385
commit 745c7c5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/client/components/landing/HeroSection.tsx b/client/components/landing/HeroSection.tsx
@@ -23,8 +23,8 @@ const HeroSection = () => {
         </h2>
         <div className="mt-4 sm:mt-8 md:mt-10">
           <ButtonPrimary action={goToTask}>
-            Try Dolooper{' '}
-            <span className="text-xs align-super rotate-45">for free</span>
+            Start{' '}
+            <span className="text-xs align-super rotate-45">100% free</span>
           </ButtonPrimary>
         </div>
       </div>

diff --git a/client/components/overview/OverviewSection.tsx b/client/components/overview/OverviewSection.tsx
@@ -117,7 +117,7 @@ const OverviewSection = ({ handleReset }: Props) => {
           {!isFocused && renderTask(isFocused)}
         </div>
         {renderInfoMessages()}
-        <Timer />
+        {!isFocused && <Timer />}
         <div className="grid mb-16 md:grid-cols-2 md:gap-8">
           <SubtasksSection />
           <NotesSection />
@@ -137,7 +137,7 @@ const OverviewSection = ({ handleReset }: Props) => {
       <div className="w-full flex gap-4 items-center justify-between">
         <div className="flex gap-2">
           <ButtonCircle
-            action={() => setIsFocused(!isFocused)}
+            action={() => {setIsFocused(!isFocused);}}
             title={isPreview ? 'Close' : 'Focus'}
           >
             {isFocused ? <FaTimes /> : <FaExpand />}

diff --git a/client/components/timer/Timer.component.tsx b/client/components/timer/Timer.component.tsx
@@ -107,7 +107,7 @@ function Timer() {
   )
 
   const getTitle = useCallback(
-    (isWorking: boolean, isBreak: boolean) => {
+    (isWorking: boolean, isBreak: boolean, isTimer = false ) => {
       if (isWorking) {
         return getFormattedTimeFromMs(counter)
       }
@@ -116,7 +116,7 @@ function Timer() {
         return `Timer expired`
       }
 
-      return OVERVIEW_PAGE_TITLE
+      return isTimer ? 'Timer' : OVERVIEW_PAGE_TITLE
     },
     [counter],
   )
@@ -131,7 +131,7 @@ function Timer() {
         className="font-bold flex justify-between cursor-pointer"
         onClick={() => toggleTimerWindow()}
       >
-        <span className="font-mono">{getTitle(isWorking, isBreak)}</span>
+        <span className="font-mono">{getTitle(isWorking, isBreak, true)}</span>
 
         {isTimerMinimized && isRunning && (
           <ButtonLink action={handleStop}>
@@ -140,7 +140,7 @@ function Timer() {
         )}
 
         <ButtonIcon
-          variant={isTimerMinimized ? 'maximize' : 'minimize'}
+          variant={isTimerMinimized ? 'minimize' : 'maximize'}
           action={() => toggleTimerWindow()}
         />
       </h2>
@@ -268,8 +268,8 @@ function Timer() {
   }
 }
 
-const timerPopStyles = `bg-amber-200 shadow-sm px-2 md:px-4 py-3 my-4 rounded-md
-                        w-full sm:w-1/2 z-10 md:w-1/4 sm:fixed sm:right-4 sm:bottom-2
+const timerPopStyles = `bg-amber-300 shadow-sm px-2 md:px-4 py-3 my-4 rounded-md
+                        w-full sm:w-1/2 z-10 md:w-1/4 sm:fixed sm:mx-auto sm:inset-x-0 sm:top-1
                         dark:bg-gray-800 dark:text-white dark:border-gray-600 sm:opacity-95`
 
 export default Timer