From b0ee6a4018e624090f007ccb2388fc4b38f99163 Mon Sep 17 00:00:00 2001
From: Ben Hall <benji2357@gmail.com>
Date: Mon, 11 Nov 2024 19:37:32 +0000
Subject: [PATCH] feat(QuickTrackNav): add settings link

---
 .../src/components/pages/Home/QuickTrackNav/index.tsx | 11 +++++++++--
 .../src/components/pages/Home/QuickTrackNav/style.css |  9 +++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/client/src/components/pages/Home/QuickTrackNav/index.tsx b/client/src/components/pages/Home/QuickTrackNav/index.tsx
index 7cca665b..7fa3faec 100644
--- a/client/src/components/pages/Home/QuickTrackNav/index.tsx
+++ b/client/src/components/pages/Home/QuickTrackNav/index.tsx
@@ -3,7 +3,7 @@ import { Button, Icon, Paper } from "eri";
 import { QuickTrackNavButton } from "./QuickTrackNavButton";
 import { TEST_IDS } from "../../../../constants";
 import appSlice from "../../../../store/appSlice";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 
 export function QuickTrackNav() {
@@ -12,7 +12,14 @@ export function QuickTrackNav() {
 
   return (
     <Paper data-test-id={TEST_IDS.moodList}>
-      <h2>Home</h2>
+      <h2 className="quick-track-nav__heading">
+        Home
+        <div className="quick-track-nav__settings-icon">
+          <Link to="/settings/events">
+            <Icon name="settings" />
+          </Link>
+        </div>
+      </h2>
       <div className="quick-track-nav__links">
         {(["moods", "sleeps", "weights"] as const)
           .filter((eventType) => eventTypeTracking[eventType])
diff --git a/client/src/components/pages/Home/QuickTrackNav/style.css b/client/src/components/pages/Home/QuickTrackNav/style.css
index c44fe296..e55cefa9 100644
--- a/client/src/components/pages/Home/QuickTrackNav/style.css
+++ b/client/src/components/pages/Home/QuickTrackNav/style.css
@@ -1,6 +1,15 @@
+.quick-track-nav__heading {
+  display: flex;
+  justify-content: space-between;
+}
+
 .quick-track-nav__links {
   display: grid;
   gap: var(--space-2);
   grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
   justify-content: center;
 }
+
+.quick-track-nav__settings-icon {
+  font-size: var(--font-size-1);
+}