fix(ui): adjust styling of clock in Navbar

f-eld-ch · Feb 2, 2024 · 75fbe84 · 75fbe84
1 parent f747093
commit 75fbe84
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -15,11 +15,11 @@ $weight-semibold: 600;
 $weight-bold: 700;
 
 $warning: rgb(236, 180, 25%);
-$primary: hsl(18, 100%, 52%);
+$primary: hsl(18, 90%, 60%);
 $danger: rgb(214, 0, 0%);
-$info: hsl(226, 100%, 47%);
-$link: hsl(226, 100%, 39%);
-$link-hover: hsl(18, 100%, 52%);
+$info: hsl(226, 100%, 40%);
+$link: hsl(226, 100%, 25%);
+$link-hover: hsl(18, 90%, 60%);
 
 $section-padding: 0.5rem 0.5rem;
 $section-padding-desktop: 0.5rem 3rem;

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -5,7 +5,6 @@ import {
   faClipboardCheck,
   faClipboardList,
   faClipboardQuestion,
-  faClock,
   faCodeBranch,
   faCog,
   faExplosion,
@@ -20,6 +19,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import { FunctionComponent, useContext, useState } from "react";
 
+import { faCalendar, faClock } from "@fortawesome/free-regular-svg-icons";
 import logo from "assets/logo.svg";
 import { useTranslation } from "react-i18next";
 import { NavLink, useParams } from "react-router-dom";
@@ -101,9 +101,7 @@ const Navbar: FunctionComponent<{ isActive?: boolean }> = ({ isActive = false })
           <MapNavBar />
         </div>
         <div className="navbar-end">
-          <div className="navbar-item is-left is-hoverable mr-3">
-            <CurrentTime />
-          </div>
+          <CurrentTime />
           <hr className="navbar-divider" />
           <UserNavBar />
         </div>
@@ -113,15 +111,28 @@ const Navbar: FunctionComponent<{ isActive?: boolean }> = ({ isActive = false })
 };
 
 function CurrentTime() {
-  const { time } = useDate();
+  const { time, date } = useDate();
 
   return (
-    <span className="icon-text is-flex-wrap-nowrap">
-      <span className="icon">
-        <FontAwesomeIcon icon={faClock} />
-      </span>
-      <span><strong>{time}</strong></span>
-    </span>
+    <>
+      <div className="navbar-item is-right is-hidden-touch">
+        <span className="icon-text is-size-7">
+          <span className="icon">
+            <FontAwesomeIcon icon={faCalendar} />
+          </span>
+          <span>{date}</span>
+        </span>
+      </div>
+      <div className="navbar-item is-right  is-hidden-touch">
+        <span className="icon-text is-size-7">
+          <span className="icon">
+            <FontAwesomeIcon icon={faClock} />
+          </span>
+          <span>{time}</span>
+        </span>
+      </div>
+
+    </>
   )
 }
 
@@ -145,7 +156,7 @@ function UserNavBar() {
   if (!userState.isLoggedin) return <></>;
 
   return (
-    <div className="navbar-item has-dropdown is-hoverable is-left">
+    <div className="navbar-item has-dropdown is-hoverable is-left ml-3">
       <div className="navbar-link">
         <FontAwesomeIcon icon={faCog} />
       </div>

diff --git a/src/utils/useDate.tsx b/src/utils/useDate.tsx
@@ -6,14 +6,14 @@ export const useDate = () => {
     useEffect(() => {
         const timer = setInterval(() => {
             setNow(new Date());
-        }, 10 * 1000);
+        }, 1 * 1000);
         return () => {
             clearInterval(timer);
         }
     }, []);
 
     const date = dayjs(now).format("LL")
-    const time = dayjs(now).format("LT")
+    const time = dayjs(now).format("LTS")
 
     return {
         date,