From 14495709ee959bb2d7de2994ce7477ced7ad7ef0 Mon Sep 17 00:00:00 2001
From: AccessiT3ch <accessiT3ch@gmail.com>
Date: Tue, 13 Dec 2022 15:54:16 -0800
Subject: [PATCH 1/4] Move About content into Modal component

---
 src/components/AboutModal/AboutModal.tsx | 78 +++++++++++++++++++
 src/components/AboutModal/index.ts       |  2 +
 src/components/Header/Header.tsx         |  4 +-
 src/components/Sidebar/Sidebar.tsx       | 98 +++---------------------
 src/strings.ts                           |  2 +-
 5 files changed, 95 insertions(+), 89 deletions(-)
 create mode 100644 src/components/AboutModal/AboutModal.tsx
 create mode 100644 src/components/AboutModal/index.ts

diff --git a/src/components/AboutModal/AboutModal.tsx b/src/components/AboutModal/AboutModal.tsx
new file mode 100644
index 0000000..8d05ddd
--- /dev/null
+++ b/src/components/AboutModal/AboutModal.tsx
@@ -0,0 +1,78 @@
+import React, { FC, ReactElement } from "react";
+import { Modal } from "react-bootstrap";
+import { ABOUT_APP_HEADER } from "../../strings";
+
+export const ABOUT_BODY =
+  "This is a simple app to help you keep track of your logs. Highly customizable logs allow you to track anything you want!";
+export const ABOUT_DATA_HEADER = "Data Usage";
+export const ABOUT_DATA_BODY_1 =
+  "This app uses local storage to store your logs, no data is sent to a server. Your data is never sold to anyone, EVER.";
+export const ABOUT_DATA_BODY_2 =
+  "If you want to delete your personal data, just delete the Log / Entry. To completely clear the App data, clear your browser's local storage via the browser inspector tools.";
+export const ABOUT_ISSUES_HEADER = "Report Issues";
+export const ABOUT_ISSUES_BODY =
+  "If you find any issues with the app, please report them on the GitHub issues page.";
+export const ABOUT_ISSUES_LINK =
+  "https://github.com/AccessiTech/tracker/issues";
+export const ABOUT_FEATURES_HEADER = "Feature Requests";
+export const ABOUT_FEATURES_BODY =
+  "If you have any feature requests, please feel free to start (or join) a discussion on Github!";
+export const ABOUT_FEATURES_LINK =
+  "https://github.com/AccessiTech/tracker/discussions";
+export const GITHUB_ISSUES = "GitHub Issues";
+export const GITHUB_DISCUSSIONS = "GitHub Discussions";
+
+export interface AboutModalProps {
+  show: boolean;
+  onHide: () => void;
+}
+export const AboutModal: FC<AboutModalProps> = ({
+  show,
+  onHide,
+}): ReactElement => {
+  return (
+    <Modal id="aboutModal" show={show} onHide={onHide}>
+      <Modal.Header closeButton>
+        <h3>{ABOUT_APP_HEADER}</h3>
+      </Modal.Header>
+      <Modal.Body>
+        <p>{ABOUT_BODY}</p>
+        <h4>{ABOUT_DATA_HEADER}</h4>
+        <p>{ABOUT_DATA_BODY_1}</p>
+        <p>{ABOUT_DATA_BODY_2}</p>
+        <h4>{ABOUT_ISSUES_HEADER}</h4>
+        <p>
+          {ABOUT_ISSUES_BODY}
+          <a
+            href={ABOUT_ISSUES_LINK}
+            title={GITHUB_ISSUES}
+            target={"_blank"}
+            rel={"noreferrer"}
+          >
+            <i
+              className="fa fa-arrow-up-right-from-square"
+              aria-hidden="true"
+            ></i>
+            <span className="visible_hidden">{GITHUB_ISSUES}</span>
+          </a>
+        </p>
+        <h4>{ABOUT_FEATURES_HEADER}</h4>
+        <p>
+          {ABOUT_FEATURES_BODY}
+          <a
+            href={ABOUT_FEATURES_LINK}
+            title={GITHUB_DISCUSSIONS}
+            target={"_blank"}
+            rel={"noreferrer"}
+          >
+            <i
+              className="fa fa-arrow-up-right-from-square"
+              aria-hidden="true"
+            ></i>
+            <span className="visible_hidden">{GITHUB_DISCUSSIONS}</span>
+          </a>
+        </p>
+      </Modal.Body>
+    </Modal>
+  );
+};
diff --git a/src/components/AboutModal/index.ts b/src/components/AboutModal/index.ts
new file mode 100644
index 0000000..f0e22ce
--- /dev/null
+++ b/src/components/AboutModal/index.ts
@@ -0,0 +1,2 @@
+export { AboutModal } from "./AboutModal";
+export type { AboutModalProps } from "./AboutModal";
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index b61e336..3a55cde 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FC, ReactElement } from "react";
 import { Button } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
-import { OUTLINE_SECONDARY, SIDEBAR_HEADER } from "../../strings";
+import { OUTLINE_SECONDARY, ABOUT_APP_HEADER } from "../../strings";
 import { ToggleSidebar } from "../Sidebar";
 import "./header.scss";
 
@@ -44,7 +44,7 @@ export const Header: FC<HeaderProps> = ({
         className="sidebar__button_toggle"
         variant={OUTLINE_SECONDARY}
         onClick={() => toggleSidebar(true)}
-        title={SIDEBAR_HEADER}
+        title={ABOUT_APP_HEADER}
       >
         <i>i</i>
       </Button>
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index f223446..c61e754 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,29 +1,10 @@
 import React, { useState } from "react";
 import { FC, ReactElement } from "react";
-import { Accordion, Offcanvas } from "react-bootstrap";
-import { END, SIDEBAR_HEADER } from "../../strings";
+import { Button, Offcanvas } from "react-bootstrap";
+import { END } from "../../strings";
 import "./sidebar.scss";
 import { GoogleAuthButton } from "../GoogleAuth";
-
-export const SIDEBAR_BODY =
-  "This is a simple app to help you keep track of your logs. Highly customizable logs allow you to track anything you want!";
-export const SIDEBAR_DATA_HEADER = "Data Usage";
-export const SIDEBAR_DATA_BODY_1 =
-  "This app uses local storage to store your logs, no data is sent to a server. Your data is never sold to anyone, EVER.";
-export const SIDEBAR_DATA_BODY_2 =
-  "If you want to delete your personal data, just delete the Log / Entry. To completely clear the App data, clear your browser's local storage via the browser inspector tools.";
-export const SIDEBAR_ISSUES_HEADER = "Report Issues";
-export const SIDEBAR_ISSUES_BODY =
-  "If you find any issues with the app, please report them on the GitHub issues page.";
-export const SIDEBAR_ISSUES_LINK =
-  "https://github.com/AccessiTech/tracker/issues";
-export const SIDEBAR_FEATURES_HEADER = "Feature Requests";
-export const SIDEBAR_FEATURES_BODY =
-  "If you have any feature requests, please feel free to start (or join) a discussion on Github!";
-export const SIDEBAR_FEATURES_LINK =
-  "https://github.com/AccessiTech/tracker/discussions";
-export const GITHUB_ISSUES = "GitHub Issues";
-export const GITHUB_DISCUSSIONS = "GitHub Discussions";
+import { AboutModal } from "../AboutModal";
 
 /**
  * Sidebar Component
@@ -44,7 +25,7 @@ export const Sidebar: FC<SidebarProps> = ({
   toggleSidebar,
 }): ReactElement => {
   const [credentials, setCredentials] = useState(null) as any;
-
+  const [showAbout, setShowAbout] = useState(false) as any;
   return (
     <Offcanvas
       show={showSidebar}
@@ -63,69 +44,14 @@ export const Sidebar: FC<SidebarProps> = ({
         />
       </Offcanvas.Header>
       <Offcanvas.Body className="sidebar__body_container">
-        <Accordion flush defaultActiveKey={"0"}>
-          <Accordion.Item eventKey="0">
-            <Accordion.Header>
-              <h4>{SIDEBAR_HEADER}</h4>
-            </Accordion.Header>
-            <Accordion.Body>
-              <p>{SIDEBAR_BODY}</p>
-            </Accordion.Body>
-          </Accordion.Item>
-          <Accordion.Item eventKey="1">
-            <Accordion.Header>
-              <h4>{SIDEBAR_DATA_HEADER}</h4>
-            </Accordion.Header>
-            <Accordion.Body>
-              <p>{SIDEBAR_DATA_BODY_1}</p>
-              <p>{SIDEBAR_DATA_BODY_2}</p>
-            </Accordion.Body>
-          </Accordion.Item>
-          <Accordion.Item eventKey="2">
-            <Accordion.Header>
-              <h4>{SIDEBAR_ISSUES_HEADER}</h4>
-            </Accordion.Header>
-            <Accordion.Body>
-              <p>
-                {SIDEBAR_ISSUES_BODY}
-                <a
-                  href={SIDEBAR_ISSUES_LINK}
-                  title={GITHUB_ISSUES}
-                  target={"_blank"}
-                  rel={"noreferrer"}
-                >
-                  <i
-                    className="fa fa-arrow-up-right-from-square"
-                    aria-hidden="true"
-                  ></i>
-                  <span className="visible_hidden">{GITHUB_ISSUES}</span>
-                </a>
-              </p>
-            </Accordion.Body>
-          </Accordion.Item>
-          <Accordion.Item eventKey="3">
-            <Accordion.Header>
-              <h4>{SIDEBAR_FEATURES_HEADER}</h4>
-            </Accordion.Header>
-            <Accordion.Body>
-              <p>
-                {SIDEBAR_FEATURES_BODY}
-                <a
-                  href={SIDEBAR_FEATURES_LINK}
-                  title={GITHUB_DISCUSSIONS}
-                  target={"_blank"}
-                  rel={"noreferrer"}
-                >
-                  <i
-                    className="fa fa-arrow-up-right-from-square"
-                    aria-hidden="true"
-                  ></i>
-                  <span className="visible_hidden">{GITHUB_DISCUSSIONS}</span>
-                </a>
-              </p>
-            </Accordion.Body>
-          </Accordion.Item>
-        </Accordion>
+        <Button
+          variant="primary"
+          onClick={() => {
+            setShowAbout(true);
+          }}
+          className="sidebar__button"
+        >About</Button>
+        <AboutModal show={showAbout} onHide={() => setShowAbout(false)} />
       </Offcanvas.Body>
       <p className="sidebar__p_version text-muted">
         Version: {process.env.REACT_APP_VERSION}
diff --git a/src/strings.ts b/src/strings.ts
index 6ed2dec..ec59860 100644
--- a/src/strings.ts
+++ b/src/strings.ts
@@ -96,7 +96,7 @@ export const NONE_LABEL = "None";
 export const STEPS_LABEL = "Steps";
 export const CREATE_LABEL = "Create";
 export const UPDATE_LABEL = "Update";
-export const SIDEBAR_HEADER = "About the App";
+export const ABOUT_APP_HEADER = "About the App";
 export const OOPS = "Oops!";
 export const LOG_NOT_FOUND = "Log not found";
 export const DATA = "Data";

From 6ab38d21c334d2e6320dc68102cba08c45c8fd49 Mon Sep 17 00:00:00 2001
From: AccessiT3ch <accessiT3ch@gmail.com>
Date: Tue, 13 Dec 2022 16:30:48 -0800
Subject: [PATCH 2/4] Move about button into sidebar header

---
 src/components/Sidebar/Sidebar.tsx  | 16 ++++++++++------
 src/components/Sidebar/sidebar.scss | 21 +++++++++++++++++++++
 src/strings.ts                      |  2 ++
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index c61e754..f139364 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { FC, ReactElement } from "react";
 import { Button, Offcanvas } from "react-bootstrap";
-import { END } from "../../strings";
+import { ABOUT_APP_HEADER, END, LINK_SECONDARY } from "../../strings";
 import "./sidebar.scss";
 import { GoogleAuthButton } from "../GoogleAuth";
 import { AboutModal } from "../AboutModal";
@@ -31,6 +31,7 @@ export const Sidebar: FC<SidebarProps> = ({
       show={showSidebar}
       onHide={() => toggleSidebar(false)}
       placement={END}
+      className="sidebar"
     >
       <Offcanvas.Header closeButton>
         <GoogleAuthButton
@@ -42,15 +43,18 @@ export const Sidebar: FC<SidebarProps> = ({
             setCredentials(null);
           }}
         />
-      </Offcanvas.Header>
-      <Offcanvas.Body className="sidebar__body_container">
         <Button
-          variant="primary"
+          variant={LINK_SECONDARY}
           onClick={() => {
             setShowAbout(true);
           }}
-          className="sidebar__button"
-        >About</Button>
+          className="sidebar__about_btn"
+          title={ABOUT_APP_HEADER}
+        >
+          <i className="fa fa-info fa-lg" aria-hidden="true"></i>
+        </Button>
+      </Offcanvas.Header>
+      <Offcanvas.Body className="sidebar__body_container">
         <AboutModal show={showAbout} onHide={() => setShowAbout(false)} />
       </Offcanvas.Body>
       <p className="sidebar__p_version text-muted">
diff --git a/src/components/Sidebar/sidebar.scss b/src/components/Sidebar/sidebar.scss
index d2178ae..07458bc 100644
--- a/src/components/Sidebar/sidebar.scss
+++ b/src/components/Sidebar/sidebar.scss
@@ -1,4 +1,25 @@
 @import "../../variables.scss";
+.sidebar {
+  .offcanvas-header {
+    justify-content: flex-end;
+
+    button:first-of-type {
+      margin-right: auto;
+    }
+
+    .sidebar__about_btn {
+      margin-right: 0.25rem;
+      color: #6c757d;
+      i {
+        vertical-align: 0;
+      }
+      &:hover,
+      &:active {
+        color: black;
+      }
+    }
+  }
+}
 .sidebar__p_version {
   font-size: 0.9rem;
   margin: 1rem 1rem 0.75rem;
diff --git a/src/strings.ts b/src/strings.ts
index ec59860..3437e0b 100644
--- a/src/strings.ts
+++ b/src/strings.ts
@@ -11,9 +11,11 @@ export const OUTLINE_PRIMARY = `outline-${PRIMARY}`;
 export const OUTLINE_SECONDARY = `outline-${SECONDARY}`;
 export const OUTLINE_DANGER = `outline-${DANGER}`;
 export const OUTLINE_DARK = `outline-${DARK}`;
+export const OUTLINE_INFO = `outline-${INFO}`;
 export const TEXT_DANGER = `text-${DANGER}`;
 export const TEXT_MUTED = `text-${MUTED}`;
 export const TEXT_SUCCESS = `text-${SUCCESS}`;
+export const LINK_SECONDARY = `link-${SECONDARY}`;
 export const TYPE = "type";
 export const SUBMIT = "submit";
 export const RESET = "reset";

From ddd26b3887174d50312b789f57d619237da6da73 Mon Sep 17 00:00:00 2001
From: AccessiT3ch <accessiT3ch@gmail.com>
Date: Tue, 13 Dec 2022 16:31:01 -0800
Subject: [PATCH 3/4] Change menu icon to bars

---
 src/components/Header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 3a55cde..847b6e4 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -46,7 +46,7 @@ export const Header: FC<HeaderProps> = ({
         onClick={() => toggleSidebar(true)}
         title={ABOUT_APP_HEADER}
       >
-        <i>i</i>
+        <i className="fa fa-bars fa-lg" aria-hidden="true"></i>
       </Button>
     </header>
   );

From f31e03d043dd96e3e055380f57f64f88597c17a7 Mon Sep 17 00:00:00 2001
From: AccessiT3ch <accessiT3ch@gmail.com>
Date: Tue, 13 Dec 2022 16:35:55 -0800
Subject: [PATCH 4/4] Add focus styling to about app button

---
 src/components/Sidebar/sidebar.scss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar/sidebar.scss b/src/components/Sidebar/sidebar.scss
index 07458bc..33f640c 100644
--- a/src/components/Sidebar/sidebar.scss
+++ b/src/components/Sidebar/sidebar.scss
@@ -9,13 +9,17 @@
 
     .sidebar__about_btn {
       margin-right: 0.25rem;
-      color: #6c757d;
+      opacity: 0.5;
       i {
         vertical-align: 0;
       }
       &:hover,
-      &:active {
-        color: black;
+      &:active,
+      &:focus {
+        opacity: 1;
+      }
+      &:focus {
+        box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
       }
     }
   }