From b3ce9c1ec8227758affd3a6ae2a69d7715671ebf Mon Sep 17 00:00:00 2001
From: Barbara Peric <b.peric10@gmail.com>
Date: Mon, 1 Apr 2024 09:30:21 +0200
Subject: [PATCH] improve color contrast for accessibility purpose

---
 components/Header.js | 10 ++++--
 pages/index.js       | 78 +++++++++++++++++++++-----------------------
 sass/_about.scss     | 14 ++++----
 sass/_buttons.scss   |  4 +--
 sass/_footer.scss    |  5 +++
 sass/_hero.scss      |  8 +++--
 sass/_search.scss    |  2 +-
 7 files changed, 66 insertions(+), 55 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index 569ff89..ee5fb16 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -51,7 +51,7 @@ function Header(props) {
     // trap focus in the burger menu for accessibility purposes
     const firstFocusableEl = burgerWrapper.querySelector('button:not([disabled])')
     const lastFocusableEl = burgerWrapper.querySelector('ul li:last-child a')
-    
+
     burgerWrapper.addEventListener("keydown", e => {
       if (e.key === 'Tab') {
         if (e.shiftKey)  {
@@ -165,8 +165,12 @@ function Header(props) {
         </div>
       </header>
       <nav className="mainMenu device">
-        <button tabIndex="0" className="noStyle navbar-toggle menuActive" onClick={toggleMenu}>
-        </button>
+        <button
+          aria-label="Dropdown menu"
+          tabIndex="0"
+          className="noStyle navbar-toggle menuActive"
+          onClick={toggleMenu}
+        ></button>
         <ul>
           <li>
             <a href="#" onClick={(e) => props.handelCloseScrollTo(e, "home")}>
diff --git a/pages/index.js b/pages/index.js
index e785b3d..f41a419 100755
--- a/pages/index.js
+++ b/pages/index.js
@@ -763,25 +763,25 @@ export default function Home(props) {
           slidesToShow: 3,
           slidesToScroll: 3,
           infinite: true,
-          dots: true
-        }
+          dots: true,
+        },
       },
       {
         breakpoint: 600,
         settings: {
           slidesToShow: 2,
           slidesToScroll: 2,
-          initialSlide: 2
-        }
+          initialSlide: 2,
+        },
       },
       {
         breakpoint: 480,
         settings: {
           slidesToShow: 1,
-          slidesToScroll: 1
-        }
-      }
-    ]
+          slidesToScroll: 1,
+        },
+      },
+    ],
   };
 
   return (
@@ -995,7 +995,6 @@ export default function Home(props) {
               <LookupBg />
             </div>
             <div className="dataRow">
-
               {/* Hide total indexed CIDs until there is an accurate measure. See:
                      * https://github.com/ipni/cid.contact/issues/17
                     
@@ -1075,12 +1074,13 @@ export default function Home(props) {
                     <img src="images/about-1.svg" alt="Map" />
                   </Col>
                   <Col xs={12} md={8} className="textCol">
-                  <p>
-                    <strong>Content routing</strong> is the a term used to
-                    describe the problem of finding providers for a given piece
-                    of content. If you have a hash, or CID of some data, how do
-                    you find who has it in the IPFS and Filecoin system?
-                  </p>
+                    <p>
+                      <strong>Content routing</strong> is the a term used to
+                      describe the problem of finding providers for a given
+                      piece of content. If you have a hash, or CID of some data,
+                      how do you find who has it in the IPFS and Filecoin
+                      system?
+                    </p>
                   </Col>
                 </Row>
                 <Row>
@@ -1088,15 +1088,15 @@ export default function Home(props) {
                     <img src="images/about-2.svg" alt="Solarsystem" />
                   </Col>
                   <Col xs={12} md={8} className="textCol">
-                  <p>
-                    In IPFS, a <strong>Distributed Hash Table</strong> (DHT) is
-                    used as a decentralized answer to content routing. However,
-                    when considering the number of records in Filecoin storage
-                    providers, it is clear that simply announcing these records
-                    to the DHT will place an undue burden on current DHT
-                    participants. It will take too much bandwidth and storage
-                    space to be practical.
-                  </p>
+                    <p>
+                      In IPFS, a <strong>Distributed Hash Table</strong> (DHT)
+                      is used as a decentralized answer to content routing.
+                      However, when considering the number of records in
+                      Filecoin storage providers, it is clear that simply
+                      announcing these records to the DHT will place an undue
+                      burden on current DHT participants. It will take too much
+                      bandwidth and storage space to be practical.
+                    </p>
                   </Col>
                 </Row>
                 <Row>
@@ -1104,16 +1104,17 @@ export default function Home(props) {
                     <img src="images/about-3.svg" alt="Connected Circles" />
                   </Col>
                   <Col xs={12} md={8} className="textCol">
-                  <p>
-                    CID Contact encompasses a number of work streams to increase
-                    the scalability and resilience of content routing.{" "}
-                    <strong>Network Indexer</strong> provides aggregated views
-                    of content routing, and harness the heterogeneity of network
-                    resources. <strong>Delegated Content Routing</strong>{" "}
-                    defines protocols for multiple content routing providers to
-                    be discovered and used safely, efficiently, and in a
-                    decentralized manner by clients.
-                  </p>
+                    <p>
+                      CID Contact encompasses a number of work streams to
+                      increase the scalability and resilience of content
+                      routing. <strong>Network Indexer</strong> provides
+                      aggregated views of content routing, and harness the
+                      heterogeneity of network resources.{" "}
+                      <strong>Delegated Content Routing</strong> defines
+                      protocols for multiple content routing providers to be
+                      discovered and used safely, efficiently, and in a
+                      decentralized manner by clients.
+                    </p>
                   </Col>
                 </Row>
               </div>
@@ -1123,12 +1124,9 @@ export default function Home(props) {
                   following CID:
                 </p>
                 <div className="inputWrapper">
-                  <input
-                    type="text"
-                    name="queryString"
-                    id="queryString"
-                    value="bafybeigvgzoolc3drupxhlevdp2ugqcrbcsqfmcek2zxiw5wctk3xjpjwy"
-                  />
+                  <p className="queryString">
+                    bafybeigvgzoolc3drupxhlevdp2ugqcrbcsqfmcek2zxiw5wctk3xjpjwy
+                  </p>
                 </div>
                 <a
                   href="https://docs.cid.contact/"
diff --git a/sass/_about.scss b/sass/_about.scss
index 77d89fe..6e7cc52 100644
--- a/sass/_about.scss
+++ b/sass/_about.scss
@@ -39,7 +39,7 @@
 
         strong {
           font-weight: 700;
-          color: $mdBlue;
+          color: $dkrBlue;
         }
       }
     }
@@ -87,15 +87,15 @@
     }
 
     .inputWrapper {
-      width: 60%;
+      width: 70%;
 
-      input {
+      .queryString {
+        border: 1px solid;
         width: 100%;
-        border-radius: 6px;
-        border: 2px solid $dkGrey;
-        padding: 6px;
         text-align: center;
-        color: $black;
+        padding: 6px;
+        border-radius: 6px;
+        margin: 0;
       }
     }
   }
diff --git a/sass/_buttons.scss b/sass/_buttons.scss
index e24cacc..0761250 100644
--- a/sass/_buttons.scss
+++ b/sass/_buttons.scss
@@ -83,14 +83,14 @@
 }
 
 .btn.btn-tertiary {
-  background-color: $blue;
+  background-color: $dkBlue;
   color: $white;
   line-height: normal;
 
   &:hover,
   &:active,
   &:focus {
-    background-color: $dkBlue;
+    background-color: $mdBlue;
   }
 }
 
diff --git a/sass/_footer.scss b/sass/_footer.scss
index 5b4b60c..ef027ea 100644
--- a/sass/_footer.scss
+++ b/sass/_footer.scss
@@ -18,6 +18,11 @@ footer {
       flex-direction: column;
       justify-content: space-between;
 
+      a {
+        color: $dkrBlue;
+        font-weight: 500;
+      }
+
       h5 {
         font-size: 1.2rem;
         font-weight: 500;
diff --git a/sass/_hero.scss b/sass/_hero.scss
index 915a32a..4bdcbd2 100644
--- a/sass/_hero.scss
+++ b/sass/_hero.scss
@@ -27,6 +27,10 @@
   > p {
     font-size: 0.8rem;
     font-weight: 400;
+
+    a {
+      color: $dkrBlue;
+    }
   }
 
   .dataRow {
@@ -90,7 +94,7 @@
           }
 
           &::before {
-            content: '';
+            content: "";
             position: absolute;
             top: 0;
             left: 0;
@@ -102,7 +106,7 @@
           }
 
           &::after {
-            content: '';
+            content: "";
             position: absolute;
             top: 3px;
             left: 4px;
diff --git a/sass/_search.scss b/sass/_search.scss
index c603034..b3db948 100644
--- a/sass/_search.scss
+++ b/sass/_search.scss
@@ -124,7 +124,7 @@
       width: 100%;
       padding: 2px;
       position: relative;
-      background: $mdBlue;
+      background: $dkBlue;
       color: $white;
       border-top-left-radius: 9.08778px;
       border-bottom-left-radius: 9.08778px;