component-fix

Author: Adithya Thejas

component/Button/Button.module.scss

@@ -6,9 +6,9 @@
 
 Button.button {
   border: none;
-  padding: $p-10 $p-20; // $p-10 $p-20
-  border-radius: $p-5;
-  font-size: $p-15; //$p-15
+  padding: 10px 20px; // $p-10 $p-20
+  border-radius: 5px;
+  font-size: 15px; //$p-15
   cursor: pointer;
   display: flex;
   align-items: center;

component/Input/Input.module.scss

@@ -15,7 +15,7 @@
   border-width: 1px;
   display: flex;
   height: 2.5rem;
-  width: 350rem;
+  // width: 350rem;
   color: $input-text;
   &:focus {
     outline-width: 2px;

component/Input/Input.tsx

@@ -8,6 +8,7 @@ interface Props {
   placeholder: string;
   id: string;
   value?: string;
+  size: string;
 }
 
 function Input({
@@ -17,6 +18,7 @@ function Input({
   placeholder,
   id,
   value,
+  size,
 }: Props): JSX.Element {
   // const className =
   //   variant === "primary"
@@ -26,7 +28,7 @@ function Input({
   //     : styles.error;
   return (
     <input
-      className={styles["form-input"]}
+      className={`${styles["form-input"]} ${size}`}
       onClick={onChange}
       disabled={disabled}
       type={type}

component/NavigationMenu/NavigationMenu.module.scss

@@ -59,17 +59,16 @@
   justify-content: center;
   width: 100vw;
   z-index: 1;
-  border-color: hsl(214.3 31.8% 91.4%);
+  //
 }
 
 .navgation-menu-list {
   display: flex;
   justify-content: center;
-  background-color: white;
+  background-color: $navigation-background-secondary;
   padding: 4px;
   border-radius: 6px;
   list-style: none;
-  // box-shadow: 0 2px 10px var(--blackA7);
   margin: 0;
 }
 
@@ -80,23 +79,27 @@
   font-weight: 500;
   line-height: 1;
   border-radius: 4px;
+  border: none;
   font-size: 15px;
-  color: black;
+  color: $navigation-text-primary;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  background-color: $navigation-background-secondary;
   gap: 2px;
-  :focus {
+  &:focus {
     outline: 0;
-    box-shadow: 0 0 0 2px red;
   }
-  :hover {
-    background-color: gray;
+  &:hover {
+    background-color: $navigation-hover-primary;
   }
-  :disabled {
+  &:disabled {
     pointer-events: none;
     opacity: 0.5;
   }
+  &[data-state="open"] > svg {
+    transform: rotate(180deg);
+  }
   .chevrondown {
     position: relative;
     margin-left: 0.25rem;
@@ -106,9 +109,6 @@
     width: 0.75rem;
     height: 0.75rem;
     top: 1px;
-    &[data-state="open"] > svg {
-      transform: rotate(180deg);
-    }
   }
 }
 
@@ -120,28 +120,28 @@
   line-height: 1;
   border-radius: 4px;
   font-size: 15px;
-  color: black;
+  color: $navigation-text-primary;
   display: block;
   text-decoration: none;
   font-size: 15px;
   line-height: 1;
-  :focus {
+  &:focus {
     outline: 0;
-    box-shadow: 0 0 0 2px red;
   }
-  :hover {
-    background-color: gray;
+  &:hover {
+    background-color: $navigation-hover-primary;
   }
 }
 
 .navigation-menu-content {
   //animation
   position: absolute;
   top: 0;
-  left: 0;
-  width: 100%;
+  // left: 0;
+  width: 25%;
   animation-duration: 250ms;
   animation-timing-function: ease;
+  // background-color: red;
   &[data-motion="from-start"] {
     animation-name: enterFromLeft;
   }
@@ -165,22 +165,23 @@
   position: absolute;
   display: flex;
   justify-content: center;
-  width: 100%;
+  width: 40%;
   top: 100%;
-  left: 0;
+  // left: 0;
   perspective: 2000px;
   .navigation-menu-primitive-viewport {
     // animate. datastate,media
+    border: 2px;
+    border-style: solid;
+    border-color: $navigation-border-primary; // #e2e8f0
     position: relative;
     transform-origin: top center;
     margin-top: 10px;
     width: 100%;
-    background-color: white;
+    background-color: $navigation-background-secondary;
     border-radius: 6px;
     overflow: hidden;
-    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
-      hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
-    height: var(--radix-navigation-menu-viewport-height);
+    height: 300px;
     transition: width, height, 300ms ease;
     [data-state="open"] {
       animation: scaleIn 200ms ease;
@@ -212,10 +213,6 @@
     --transform-rotate: 45deg;
     width: 0.5rem;
     height: 0.5rem;
-    border-top-left-radius: 0.125rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    top: 60%;
   }
 }
 
@@ -240,9 +237,9 @@
     display: flex;
     justify-content: flex-end;
     flex-direction: column;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(135deg, var(--purple9) 0%, var(--indigo9) 100%);
+    width: 75%;
+    height: 75%;
+    background: $navigation-background-primary;
     border-radius: 6px;
     padding: 25px;
     text-decoration: none;
@@ -253,19 +250,21 @@
   .demo-menu-logo {
     width: 1.5rem;
     height: 1.5rem;
-    .demo-menu-icons {
-      color: white;
-      font-size: 18px;
-      font-weight: 500;
-      line-height: 1.2;
-      margin-top: 16px;
-      margin-bottom: 7px;
-    }
-    .demo-menu-para {
-      color: pink;
-      font-size: 14px;
-      line-height: 1.3;
-    }
+    color: $navigation-icon-color;
+    padding-bottom: 10px;
+  }
+  .demo-menu-icons {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1.2;
+    margin-top: 16px;
+    margin-bottom: 7px;
+    color: $navigation-text-secondary;
+  }
+  .demo-menu-para {
+    color: $navigation-text-danger;
+    font-size: 14px;
+    line-height: 1.3;
   }
 }
 
@@ -292,24 +291,27 @@
   outline: none;
   text-decoration: none;
   user-select: none;
-  padding: 12px;
+  padding: 3px;
   border-radius: 6px;
   font-size: 15px;
   line-height: 1;
-  :focus {
-    box-shadow: 0 0 0 2px violet;
-  }
-  :hover {
-    background-color: red;
+  flex-direction: column;
+  justify-content: space-between;
+  &:hover {
+    background-color: $navigation-hover-primary;
+    color: $navigation-text-primary;
   }
   .demo-menu-title {
     font-weight: 500;
     line-height: 1.2;
-    margin-bottom: 5px;
-    color: violet;
+    margin-bottom: 3px;
+    color: $navigation-text-secondary;
+    &:hover {
+      color: $navigation-text-primary;
+    }
   }
   .demo-menu-children {
-    color: yellow;
+    color: $navigation-text-danger;
     line-height: 1.4;
     font-weight: initial;
   }