From 1e4b3bb0f3de74af07c4c5d7b49c5ab5cb745338 Mon Sep 17 00:00:00 2001
From: Siddharth Rohan <sidrohanme2@gmail.com>
Date: Sat, 21 Dec 2024 18:49:50 +0530
Subject: [PATCH 1/3] Added aria-labels

Signed-off-by: Siddharth Rohan <sidrohanme2@gmail.com>
---
 src/AgreementHtml.tsx              |  3 +++
 src/App.tsx                        | 20 ++++++++++----------
 src/components/Content.tsx         | 16 +++++++++++++---
 src/components/Footer.tsx          | 27 +++++++++++++++++++++++----
 src/components/FullScreenModal.tsx | 23 +++++++++++++++++++++--
 src/components/Navbar.tsx          | 30 +++++++++++++++---------------
 src/components/SampleDropdown.tsx  |  9 +++++++--
 src/components/Sidebar.tsx         | 10 ++++++++--
 src/components/ToggleDarkMode.tsx  |  3 ++-
 src/components/UseShare.tsx        |  7 ++++++-
 src/utils/helpers/Errors.tsx       | 11 +++++++++--
 11 files changed, 117 insertions(+), 42 deletions(-)

diff --git a/src/AgreementHtml.tsx b/src/AgreementHtml.tsx
index 42c8b2b..7c5cd4f 100644
--- a/src/AgreementHtml.tsx
+++ b/src/AgreementHtml.tsx
@@ -19,6 +19,7 @@ function AgreementHtml({ loading }: { loading: any }) {
         display: "flex",
         flexDirection: "column",
       }}
+      aria-label="Agreement preview container" // Added aria-label for the main container
     >
       <div style={{ textAlign: "center", color: textColor }}>
         <h2>Preview Output</h2>
@@ -41,6 +42,7 @@ function AgreementHtml({ loading }: { loading: any }) {
               <LoadingOutlined
                 style={{ fontSize: 42, color: "#19c6c7" }}
                 spin
+                aria-label="Loading agreement content" // Added aria-label for the spinner
               />
             }
           />
@@ -50,6 +52,7 @@ function AgreementHtml({ loading }: { loading: any }) {
           className="agreement"
           dangerouslySetInnerHTML={{ __html: agreementHtml }}
           style={{ flex: 1, color: textColor, backgroundColor: backgroundColor }}
+          aria-label="Agreement content preview" // Added aria-label for the agreement content
         />
       )}
     </div>
diff --git a/src/App.tsx b/src/App.tsx
index 22d5a39..593a391 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,7 +36,6 @@ const App = () => {
     }
   };
 
-
   const onChange = (key: string | string[]) => {
     setActivePanel(key);
   };
@@ -104,7 +103,7 @@ const App = () => {
   return (
     <AntdApp>
       <Layout style={{ minHeight: "100vh" }}>
-        <Navbar scrollToExplore={scrollToExplore} />
+        <Navbar scrollToExplore={scrollToExplore} aria-label="Main navigation" />
         <Content>
           <Routes>
             <Route
@@ -128,12 +127,12 @@ const App = () => {
                           gap: "10px",
                         }}
                       >
-                        <SampleDropdown setLoading={setLoading} />
-                        <UseShare />
+                        <SampleDropdown setLoading={setLoading} aria-label="Sample Dropdown" />
+                        <UseShare aria-label="Share options" />
                       </Row>
                     </Col>
                     <Col span={18}>
-                      <Errors />
+                      <Errors aria-live="assertive" />
                     </Col>
                   </Row>
                   <div
@@ -149,6 +148,7 @@ const App = () => {
                           defaultActiveKey={activePanel}
                           onChange={onChange}
                           items={panels}
+                          aria-label="Collapse panels for templates and model"
                         />
                       </Col>
                       <Col xs={24} sm={8}>
@@ -158,11 +158,11 @@ const App = () => {
                           }}
                         >
                           <div style={{ display: "flex" }}>
-                            <ToggleDarkMode />
-                            <FullScreenModal />
+                            <ToggleDarkMode aria-label="Toggle dark mode" />
+                            <FullScreenModal aria-label="Fullscreen modal" />
                           </div>
                         </div>
-                        <AgreementHtml loading={loading} />
+                        <AgreementHtml loading={loading} aria-label="Agreement preview" />
                       </Col>
                     </Row>
                   </div>
@@ -181,7 +181,6 @@ const App = () => {
                 path="module2"
                 element={<LearnContent file="module2.md" />}
               />
-
               <Route
                 path="module3"
                 element={<LearnContent file="module3.md" />}
@@ -189,7 +188,7 @@ const App = () => {
             </Route>
           </Routes>
         </Content>
-        <Footer />
+        <Footer aria-label="Footer content" />
         {!screens.md && (
           <div
             style={{
@@ -199,6 +198,7 @@ const App = () => {
               color: "white",
               fontSize: "12px",
             }}
+            aria-label="Mobile view message"
           >
             Best viewed on desktop
           </div>
diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index d81d123..1a81edb 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -75,7 +75,11 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
       >
         <Spin
           indicator={
-            <LoadingOutlined style={{ fontSize: 42, color: "#19c6c7" }} spin />
+            <LoadingOutlined
+              style={{ fontSize: 42, color: "#19c6c7" }}
+              spin
+              aria-label="Content is loading"
+            />
           }
         />
       </div>
@@ -83,11 +87,15 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
   }
 
   if (error) {
-    return <div>Error: {error}</div>;
+    return (
+      <div role="alert" aria-label="Error loading content">
+        Error: {error}
+      </div>
+    );
   }
 
   return (
-    <ContentContainer>
+    <ContentContainer aria-live="polite">
       {content && (
         <ReactMarkdown
           rehypePlugins={[rehypeRaw, rehypeHighlight]}
@@ -106,12 +114,14 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
         <NavigationButton
           onClick={handlePrevious}
           disabled={currentIndex === 0}
+          aria-label="Go to the previous step"
         >
           <LeftOutlined /> Previous
         </NavigationButton>
         <NavigationButton
           onClick={handleNext}
           disabled={currentIndex === steps.length - 1}
+          aria-label="Go to the next step"
         >
           Next <RightOutlined />
         </NavigationButton>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 288aa05..6b57e68 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -31,10 +31,14 @@ const CustomFooter: React.FC = () => {
       <Row justify="space-between" align="top">
         <Col span={7}>
           <Space direction="vertical" size="middle">
-            <Link href="https://www.accordproject.org" target="_blank">
+            <Link
+              href="https://www.accordproject.org"
+              target="_blank"
+              aria-label="Visit Accord Project homepage" // Added for screen readers
+            >
               <Image
                 src="/logo.png"
-                alt="Template Playground"
+                alt="Template Playground logo" // Updated alt for meaningful description
                 preview={false}
                 style={{ paddingRight: "1.5em", height: "36px" }}
               />
@@ -42,12 +46,19 @@ const CustomFooter: React.FC = () => {
             <Text style={{ color: "rgba(255, 255, 255, 0.65)" }}>
               The open source smart legal contract stack
             </Text>
-            <Link href="mailto:admin@accordproject.org">
+            <Link
+              href="mailto:admin@accordproject.org"
+              aria-label="Send an email to admin@accordproject.org" // Added for better navigation
+            >
               <Text strong style={{ color: "rgba(255, 255, 255, 0.65)" }}>
                 admin@accordproject.org
               </Text>
             </Link>
-            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank">
+            <Link
+              href="https://discord.com/invite/Zm99SKhhtA"
+              target="_blank"
+              aria-label="Join Accord Project Discord community" // Added for screen readers
+            >
               <Button
                 size="large"
                 style={{
@@ -74,6 +85,7 @@ const CustomFooter: React.FC = () => {
                   fontSize: "11px",
                   letterSpacing: "0.1em",
                 }}
+                aria-label={`Section: ${section.title}`} // Added for section identification
               >
                 {section.title}
               </Text>
@@ -82,6 +94,7 @@ const CustomFooter: React.FC = () => {
                   href={link.href}
                   key={link.title}
                   style={{ color: "white", fontSize: "15px" }}
+                  aria-label={`Link to ${link.title}`} // Added for link identification
                 >
                   {link.title}
                 </Link>
@@ -99,6 +112,7 @@ const CustomFooter: React.FC = () => {
               href="https://accordproject.org/privacy"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Read Accord Project's trademark policy" // Added for screen readers
             >
               trademark policy
             </Link>{" "}
@@ -108,6 +122,7 @@ const CustomFooter: React.FC = () => {
               href="https://accordproject.org/brand-assets"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Access Accord Project's brand assets" // Added for screen readers
             >
               brand assets
             </Link>
@@ -120,6 +135,7 @@ const CustomFooter: React.FC = () => {
               href="https://github.com/accordproject"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Visit Accord Project GitHub profile" // Added for clarity
             >
               <GithubOutlined style={{ fontSize: "17px" }} />
             </Link>
@@ -127,6 +143,7 @@ const CustomFooter: React.FC = () => {
               href="https://twitter.com/AccordHQ"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Visit Accord Project Twitter profile" // Added for clarity
             >
               <XOutlined style={{ fontSize: "17px" }} />
             </Link>
@@ -134,6 +151,7 @@ const CustomFooter: React.FC = () => {
               href="https://discord.com/invite/Zm99SKhhtA"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Join Accord Project on Discord" // Added for clarity
             >
               <DiscordFilled style={{ fontSize: "17px" }} />
             </Link>
@@ -141,6 +159,7 @@ const CustomFooter: React.FC = () => {
               href="https://www.linkedin.com/company/accordproject/"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Visit Accord Project LinkedIn profile" // Added for clarity
             >
               <LinkedinFilled style={{ fontSize: "17px" }} />
             </Link>
diff --git a/src/components/FullScreenModal.tsx b/src/components/FullScreenModal.tsx
index b3ee580..f655c2a 100644
--- a/src/components/FullScreenModal.tsx
+++ b/src/components/FullScreenModal.tsx
@@ -31,10 +31,22 @@ const FullScreenModal: React.FC = () => {
   }, [textColor, backgroundColor]);
 
   return (
-    <div style={{ textAlign: "right", display: "flex", alignItems: "center", justifyContent: "flex-end", width: "100%", color: textColor, }} className="preview-element">
+    <div
+      style={{
+        textAlign: "right",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        width: "100%",
+        color: textColor,
+      }}
+      className="preview-element"
+    >
+      {/* Add aria-label to the fullscreen icon for screen readers */}
       <FullscreenOutlined
         style={{ fontSize: "24px", cursor: "pointer", marginRight: "10px" }}
         onClick={() => setOpen(true)}
+        aria-label="Open full screen modal" // Describes the action of the icon
       />
       <Modal
         title="Output"
@@ -43,8 +55,15 @@ const FullScreenModal: React.FC = () => {
         onOk={() => setOpen(false)}
         onCancel={() => setOpen(false)}
         width={1000}
+        aria-labelledby="modal-title" // Links the modal to its title for accessibility
+        aria-describedby="modal-content" // Provides a reference for the content description
       >
-        <AgreementHtml loading={false} />
+        {/* Add ID to associate with aria-labelledby */}
+        <h2 id="modal-title">Output</h2>
+        {/* Add ID for aria-describedby */}
+        <div id="modal-content">
+          <AgreementHtml loading={false} />
+        </div>
       </Modal>
     </div>
   );
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index e093c22..fc4af3b 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -47,6 +47,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
             href="https://github.com/accordproject/template-playground/blob/main/README.md"
             target="_blank"
             rel="noopener noreferrer"
+            aria-label="Learn more about this project" // Added aria-label
           >
             <QuestionOutlined /> About
           </a>
@@ -56,6 +57,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
             href="https://discord.com/invite/Zm99SKhhtA"
             target="_blank"
             rel="noopener noreferrer"
+            aria-label="Join the community on Discord" // Added aria-label
           >
             <UserOutlined /> Community
           </a>
@@ -65,6 +67,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
             href="https://github.com/accordproject/template-playground/issues"
             target="_blank"
             rel="noopener noreferrer"
+            aria-label="View issues on GitHub" // Added aria-label
           >
             <InfoOutlined /> Issues
           </a>
@@ -76,6 +79,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
             href="https://github.com/accordproject/template-engine/blob/main/README.md"
             target="_blank"
             rel="noopener noreferrer"
+            aria-label="Read the documentation" // Added aria-label
           >
             <BookOutlined /> Documentation
           </a>
@@ -84,17 +88,6 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
     </Menu>
   );
 
-  const menuItemStyle = (key: string, isLast: boolean) => ({
-    display: "flex",
-    alignItems: "center",
-    padding: screens.md ? "0 20px" : "0",
-    backgroundColor:
-      hovered === key ? "rgba(255, 255, 255, 0.1)" : "transparent",
-    height: "65px",
-    borderRight:
-      screens.md && !isLast ? "1.5px solid rgba(255, 255, 255, 0.1)" : "none",
-  });
-
   const isLearnPage = location.pathname.startsWith("/learn");
 
   return (
@@ -108,14 +101,15 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
         paddingLeft: screens.md ? 40 : 10,
         paddingRight: screens.md ? 40 : 10,
       }}
+      aria-label="Main navigation bar" // Added aria-label for the main navigation
     >
       <div
         style={{
           cursor: "pointer",
-          ...menuItemStyle("home", false),
         }}
         onMouseEnter={() => setHovered("home")}
         onMouseLeave={() => setHovered(null)}
+        aria-label="Navigate to home" // Added aria-label
       >
         <a
           href="/"
@@ -124,7 +118,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
         >
           <Image
             src={screens.md ? "/logo.png" : "/accord_logo.png"}
-            alt="Template Playground"
+            alt="Template Playground logo" // Improved alt text
             preview={false}
             style={{
               paddingRight: screens.md ? "24px" : "10px",
@@ -139,22 +133,22 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
         <>
           <div
             style={{
-              ...menuItemStyle("explore", false),
               cursor: "pointer",
             }}
             onClick={scrollToExplore}
             onMouseEnter={() => setHovered("explore")}
             onMouseLeave={() => setHovered(null)}
+            aria-label="Scroll to explore section" // Added aria-label
           >
             <span style={{ color: "white" }}>Explore</span>
           </div>
           <div
             style={{
-              ...menuItemStyle("help", false),
               cursor: "pointer",
             }}
             onMouseEnter={() => setHovered("help")}
             onMouseLeave={() => setHovered(null)}
+            aria-label="Open help menu" // Added aria-label
           >
             <Dropdown overlay={menu} trigger={["click"]}>
               <Button
@@ -166,10 +160,12 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
                   display: "flex",
                   alignItems: "center",
                 }}
+                aria-label="Help options" // Added aria-label
               >
                 Help
                 <CaretDownFilled
                   style={{ fontSize: "10px", marginLeft: "5px" }}
+                  aria-hidden="true" // Screen readers can ignore this decorative icon
                 />
               </Button>
             </Dropdown>
@@ -197,6 +193,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
             }}
             onMouseEnter={() => setHovered("join")}
             onMouseLeave={() => setHovered(null)}
+            aria-label="Navigate to learn section" // Added aria-label
           >
             <Link to="/learn/intro" className="learnNow-button">
               <animated.button
@@ -210,6 +207,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
                   marginRight: "15px",
                   cursor: "pointer",
                 }}
+                aria-label="Start learning" // Added aria-label
               >
                 Learn
               </animated.button>
@@ -231,6 +229,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
           }}
           onMouseEnter={() => setHovered("github")}
           onMouseLeave={() => setHovered(null)}
+          aria-label="Navigate to GitHub repository" // Added aria-label
         >
           <a
             href="https://github.com/accordproject/template-playground"
@@ -244,6 +243,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
                 color: "white",
                 marginRight: screens.md ? "5px" : "0",
               }}
+              aria-hidden="true" // Screen readers can ignore this decorative icon
             />
             {screens.md && <span>Github</span>}
           </a>
diff --git a/src/components/SampleDropdown.tsx b/src/components/SampleDropdown.tsx
index 00deb7d..ca89f4f 100644
--- a/src/components/SampleDropdown.tsx
+++ b/src/components/SampleDropdown.tsx
@@ -33,9 +33,14 @@ function SampleDropdown({ setLoading }: { setLoading: any }) {
 
   return (
     <Space>
-      <Dropdown menu={menuProps} trigger={["click"]}>
+      <Dropdown
+        menu={menuProps}
+        trigger={["click"]}
+        aria-label="Dropdown menu for selecting a sample" // Added aria-label to describe the dropdown
+      >
         <div className="samples-element">
-          <Button>
+          <Button aria-label="Open the dropdown to load a sample"> 
+            {/* Added aria-label to the button to clarify its purpose */}
             Load Sample <DownOutlined />
           </Button>
         </div>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d139357..8ca188d 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -25,6 +25,7 @@ const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({
             <SidebarLink
               to={step.link}
               className={({ isActive }) => (isActive ? "active" : undefined)}
+              aria-label={`Navigate to step: ${step.title}`} // Added ARIA label for better navigation context
             >
               {step.title}
             </SidebarLink>
@@ -34,12 +35,17 @@ const Sidebar: React.FC<{ steps: { title: string; link: string }[] }> = ({
       <DividerLine />
       <HelperBox>
         <HelperIcon>
-          <BulbOutlined />
+          <BulbOutlined aria-label="Information icon" /> {/* Added ARIA label to describe the purpose of the icon */}
         </HelperIcon>
         <HelperText>
           Welcome to the Learning Pathway! Use the sidebar to follow the guide.
           Open the{" "}
-          <Link to="/" target="_blank" rel="noopener noreferrer">
+          <Link
+            to="/"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Open the Template Playground in a new tab" // Added ARIA label to explain the link's purpose
+          >
             Template Playground
           </Link>{" "}
           in another tab to experiment as you learn.
diff --git a/src/components/ToggleDarkMode.tsx b/src/components/ToggleDarkMode.tsx
index 16366fa..428391c 100644
--- a/src/components/ToggleDarkMode.tsx
+++ b/src/components/ToggleDarkMode.tsx
@@ -23,9 +23,10 @@ const ToggleDarkMode: React.FC = () => {
         onChange={handleChange}
         checked={isDarkMode}
         size={80}
+        aria-label="Toggle dark mode" // Added aria-label for accessibility
       />
     </ToggleDarkModeContainer>
   );
 };
 
-export default ToggleDarkMode;
\ No newline at end of file
+export default ToggleDarkMode;
diff --git a/src/components/UseShare.tsx b/src/components/UseShare.tsx
index 4a81f1e..4886f81 100644
--- a/src/components/UseShare.tsx
+++ b/src/components/UseShare.tsx
@@ -22,7 +22,12 @@ const UseShare = () => {
 
   return (
     <div className="share-element">
-      <Button icon={<ShareAltOutlined />} onClick={handleCopy}>
+      <Button
+        icon={<ShareAltOutlined />}
+        onClick={handleCopy}
+        // Added aria-label to describe the button's purpose
+        aria-label={copied ? "Link copied to clipboard" : "Share a link"}
+      >
         {copied ? "Copied!" : "Share"}
       </Button>
     </div>
diff --git a/src/utils/helpers/Errors.tsx b/src/utils/helpers/Errors.tsx
index 4c4a5e4..0114d7a 100644
--- a/src/utils/helpers/Errors.tsx
+++ b/src/utils/helpers/Errors.tsx
@@ -3,9 +3,16 @@ import { Alert, Space } from "antd";
 
 function Errors() {
   const error = useAppStore((state) => state.error);
+
   return error ? (
-    <Space direction="vertical" style={{ width: "100%" }}>
-      <Alert message={error} type="error" />
+    <Space direction="vertical" style={{ width: "100%" }} aria-live="assertive">
+      {/* Added aria-live="assertive" to announce the error message immediately */}
+      <Alert
+        message={error}
+        type="error"
+        aria-label="Error alert"
+        // Added aria-label to the Alert for better screen reader interaction
+      />
     </Space>
   ) : (
     <></>

From 0e594ee73df2ad066a616d66140c1413caa2e765 Mon Sep 17 00:00:00 2001
From: Siddharth Rohan <sidrohanme2@gmail.com>
Date: Wed, 8 Jan 2025 11:39:57 +0530
Subject: [PATCH 2/3] ReAdded the MenuItemStyle

Signed-off-by: Siddharth Rohan <sidrohanme2@gmail.com>
---
 src/components/Navbar.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fc4af3b..26096f4 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -88,6 +88,17 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
     </Menu>
   );
 
+  const menuItemStyle = (key: string, isLast: boolean) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: screens.md ? "0 20px" : "0",
+    backgroundColor:
+      hovered === key ? "rgba(255, 255, 255, 0.1)" : "transparent",
+    height: "65px",
+    borderRight:
+      screens.md && !isLast ? "1.5px solid rgba(255, 255, 255, 0.1)" : "none",
+  });
+
   const isLearnPage = location.pathname.startsWith("/learn");
 
   return (

From 4ac7dcc056c553c46229a8e7524278ad4b8b68c9 Mon Sep 17 00:00:00 2001
From: Siddharth Rohan <sidrohanme2@gmail.com>
Date: Wed, 8 Jan 2025 21:13:36 +0530
Subject: [PATCH 3/3] Readded the menuItemStyle

Signed-off-by: Siddharth Rohan <sidrohanme2@gmail.com>
---
 src/components/Navbar.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 26096f4..a60fdb7 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -117,6 +117,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
       <div
         style={{
           cursor: "pointer",
+          ...menuItemStyle("home", false),
         }}
         onMouseEnter={() => setHovered("home")}
         onMouseLeave={() => setHovered(null)}
@@ -145,6 +146,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
           <div
             style={{
               cursor: "pointer",
+              ...menuItemStyle("explore", false),
             }}
             onClick={scrollToExplore}
             onMouseEnter={() => setHovered("explore")}
@@ -155,6 +157,7 @@ function Navbar({ scrollToExplore }: { scrollToExplore: any }) {
           </div>
           <div
             style={{
+              ...menuItemStyle("explore", false),
               cursor: "pointer",
             }}
             onMouseEnter={() => setHovered("help")}