From 7c6858ec227a0c0eeb726b9069bcabc4108c9c24 Mon Sep 17 00:00:00 2001
From: Hamzat Victor <oluwaborihamzat@gmail.com>
Date: Wed, 22 Nov 2023 22:56:50 +0100
Subject: [PATCH] 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
---
 src/components/inc/widgets/Time.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/inc/widgets/Time.tsx b/src/components/inc/widgets/Time.tsx
index 0f46b28..c731498 100644
--- 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>
       )}