fix: improv layout & centering in Time widget(#59)

The layout and centering in the Time widget have been improved. The time display is now centered horizontally, and the greeting text is also centered. This ensures a more visually balanced and appealing presentation. These changes enhance the user experience by providing a more aesthetically pleasing display of time and greetings. Fixes #59
Dev-Motion · Nov 22, 2023 · 7c6858e · 7c6858e
1 parent e271356
commit 7c6858e
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>
       )}