Merge pull request #60 from Dev-Motion/fix/time-alignment

fix: improv layout & centering in Time widget(#59)
Dev-Motion · Nov 22, 2023 · e039720 · e039720
2 parents e271356 + 7c6858e
commit e039720
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/components/inc/widgets/Time.tsx b/src/components/inc/widgets/Time.tsx
@@ -25,7 +25,7 @@ const Time = () => {
       state.showTime,
       state.showGreeting,
     ],
-    shallow
+    shallow,
   );
   const timeDate = new Date(time);
   useEffect(() => {
@@ -61,7 +61,12 @@ const Time = () => {
       }}
     >
       {showTime && (
-        <Box css={{}}>
+        <Box
+          css={{
+            mx: "auto",
+            width: "min-content",
+          }}
+        >
           <Box
             css={{
               position: "relative",
@@ -70,8 +75,10 @@ const Time = () => {
             <Text
               as="h1"
               fs="6xl"
+              // ta="center"
               css={{
                 fontWeight: 700,
+                width: "min-content",
               }}
             >
               {timeString}
@@ -104,7 +111,11 @@ const Time = () => {
         </Box>
       )}
       {showGreeting && (
-        <Text fs="2xl" ta="center" css={{ mt: "$2", fontWeight: 600 }}>
+        <Text
+          fs="2xl"
+          ta="center"
+          css={{ mt: "$2", fontWeight: 600, maxWidth: 480, mx: "auto" }}
+        >
           Good {getDaySegment(timeDate)}, {name}
         </Text>
       )}