improve assess component

alivarastepour · Nov 2, 2023 · 61098bc · 61098bc
1 parent 262f1f1
commit 61098bc
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 36 deletions.
diff --git a/components/HomePageWrapper/Asess/Assess.tsx b/components/HomePageWrapper/Asess/Assess.tsx
@@ -67,19 +67,21 @@ const Assess = () => {
           </div>
         </div>
         <div className={`${styles["assess-actions"]}`}>
-          <button className={styles["take"]}>
-            <div
-              data-test-id={"take-test-wrapper"}
-              className={styles["take-wrapper"]}
-            >
+          <Link href={"/RiskAssessment"}>
+            <button className={styles["take"]}>
               <div
-                className={`${montserrat.className} ${styles["take-content"]}`}
+                data-test-id={"take-test-wrapper"}
+                className={styles["take-wrapper"]}
               >
-                <Link href={"/RiskAssessment"}>take the test</Link>
+                <div
+                  className={`${montserrat.className} ${styles["take-content"]}`}
+                >
+                  take the test
+                </div>
+                <div className={styles["take-icon"]}></div>
               </div>
-              <div className={styles["take-icon"]}></div>
-            </div>
-          </button>
+            </button>
+          </Link>
           <button className={`${montserrat.className} ${styles["read"]}`}>
             read more about our approach
           </button>

diff --git a/styles/assess.module.scss b/styles/assess.module.scss
@@ -55,35 +55,46 @@
       font-weight: normal;
       cursor: pointer;
     }
-    .take {
-      padding: 0.4rem 1rem;
-      border-radius: 0.4rem;
-      // border: 1px solid $third_color;
-      background-color: $third_color;
-      font-size: 1.2rem;
+    a {
+      position: relative;
+      display: block;
+      position: relative;
+      color: #fff;
+      text-decoration: none;
 
-      .take-wrapper {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        .take-content {
-          a {
-            color: #fff;
-            text-decoration: none;
+      height: 100%;
+      .take {
+        padding: 1rem 2rem;
+
+        border-radius: 0.4rem;
+        background-color: $third_color;
+        font-size: 1.2rem;
+        color: #fff;
+
+        .take-wrapper {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          .take-content {
+            // a {
+            //   color: #fff;
+            //   text-decoration: none;
+            // }
+          }
+          .take-icon {
+            width: 15px;
+            height: 15px;
+            background-image: url("/arrow.svg");
+            background-size: 15px 15px;
+            background-repeat: no-repeat;
+            margin-left: 0.2rem;
+            transition: 0.3s all ease;
           }
-        }
-        .take-icon {
-          width: 15px;
-          height: 15px;
-          background-image: url("/arrow.svg");
-          background-size: 15px 15px;
-          background-repeat: no-repeat;
-          margin-left: 0.2rem;
-          transition: 0.3s all ease;
         }
       }
     }
+
     .read {
       margin-top: 0.5rem;
       font-size: 0.9rem;
@@ -180,7 +191,6 @@
     }
     .assess-actions {
       .take {
-        padding: 1rem 2rem;
         font-size: 1.4rem;
         .take-wrapper {
           .take-icon {
@@ -223,7 +233,7 @@
       height: calc(100% - 1rem);
     }
     .assess-actions {
-      .take {
+      a {
         :hover {
           .take-icon {
             transform: translateX(0.25rem);