WEB-321 - Review changes

Santhosh-testsigma · Santhosh-testsigma · commit c9beb65d715e · 2023-03-21T12:04:25.000+05:30
diff --git a/src/components/LeftNav.scss b/src/components/LeftNav.scss
@@ -296,7 +296,7 @@
 .homepage_btn{
   font-weight: 600;
   &:hover{
-    color: #1AA874;
+    color: $Mountain_Meadow;
   }
 }
 
diff --git a/src/components/_variables.scss b/src/components/_variables.scss
@@ -22,6 +22,12 @@ $warning-yellow: #FFB400;
 
 $footer-color: #32ABCB;
 
+$light-grey: #DDDDDD;
+$black_haze: #F2F3F3;
+$Mountain_Meadow: #1AA874;
+$dark_blue: #183247;
+$nile_blue: #183E46;
+
 // 2021 Refresh variables
 
 // ORANGE
@@ -74,4 +80,8 @@ $yellow_05: #FFFEF9;
 
 // Fonts
 $degular: "degular_displaysemibold";
-$ibm: 'IBM Plex Mono', SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
+$ibm: 'IBM Plex Mono', SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace !important;
+
+// Screen Size
+$screen_425: 425px;
+$screen_768: 768px;
diff --git a/src/components/navcards.jsx b/src/components/navcards.jsx
@@ -52,8 +52,8 @@ const Card = ({ title, description, path }) => {
     return (
         <a href={path} className="card md:w-5/12 p-7 cursor-pointer justify-between flex mr-2 mb-2 w-full ">
             <div className="w-fit">
-                <h2 className="card_heading">{title}</h2>
-                <p className="card_desc">{description}</p>
+                <span className="card_heading">{title}</span><br/>
+                <span className="card_desc">{description}</span>
             </div>
             <div className="w-fit content-center grid">
                 <a className="block p-4 right-arrow">
diff --git a/src/components/navcards.scss b/src/components/navcards.scss
@@ -2,19 +2,19 @@
 
 .card{
   width: 48%;
-  border: 1px solid #DDDDDD;
+  border: .1rem solid $light-grey;
   border-radius: 2px;
-  @media (max-width: 425px) {
+  @media (max-width: $screen_425) {
     width: 100%;
   }
   &:hover{
-    background: #F2F3F3;
+    background: $black_haze;
     .right-arrow {
       background-color: $white;
       box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.12);
       svg{
         path{
-          fill: #1AA874;
+          fill: $Mountain_Meadow;
         }
       }
     }
@@ -26,14 +26,14 @@
     font-weight: 600;
     font-size: 18px;
     line-height: 45px;
-    color: #183247;
-    margin-bottom: 0 !important;
+    color: $dark_blue;
+    margin-bottom: 0;
   }
   .card_desc{
     font-weight: 400;
     font-size: 15px;
-    color: #183247;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
+    color: $dark_blue;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 }
diff --git a/src/templates/page.scss b/src/templates/page.scss
@@ -535,7 +535,7 @@ code[class*="language-"] {
 .chat_btn{
   padding: 1rem;
   margin-right: 1rem;
-  background: linear-gradient(0deg, #183E46, #183E46), #03A973;
+  background: linear-gradient(0deg, $nile_blue, $nile_blue), #03A973;
   border-radius: .2rem;
   span{
     padding-left: .5rem;
@@ -546,15 +546,15 @@ code[class*="language-"] {
 }
 .community_btn{
   padding: 1rem;
-  border: 1px solid #183E46;
+  border: 1px solid $nile_blue;
   border-radius: 2px;
   span{
     padding-left: .5rem;
-    color: #183E46;
+    color: $nile_blue;
     font-weight: 600;
     font-size: 17px;
   }
-  @media (max-width: 425px) {
+  @media (max-width: $screen_425) {
     margin-top: 1rem;
   }
 }
@@ -563,13 +563,13 @@ code[class*="language-"] {
   justify-content: space-between;
   margin-bottom: 4rem;
   .pagination_buttons{
-    @media (min-width: 768px) {
+    @media (min-width: $screen_768) {
       margin: 0;
     }
   }
   .next_button{
     width: fit-content;
-    @media (min-width: 768px) {
+    @media (min-width: $screen_768) {
       margin-top: 1rem;
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -296,7 +296,7 @@`
`296`	`296`	`.homepage_btn{`
`297`	`297`	`font-weight: 600;`
`298`	`298`	`&:hover{`
`299`		`- color: #1AA874;`
	`299`	`+ color: $Mountain_Meadow;`
`300`	`300`	`}`
`301`	`301`	`}`
`302`	`302`
Original file line number	Diff line number	Diff line change
`@@ -535,7 +535,7 @@ code[class*="language-"] {`
`535`	`535`	`.chat_btn{`
`536`	`536`	`padding: 1rem;`
`537`	`537`	`margin-right: 1rem;`
`538`		`- background: linear-gradient(0deg, #183E46, #183E46), #03A973;`
	`538`	`+ background: linear-gradient(0deg, $nile_blue, $nile_blue), #03A973;`
`539`	`539`	`border-radius: .2rem;`
`540`	`540`	`span{`
`541`	`541`	`padding-left: .5rem;`
`@@ -546,15 +546,15 @@ code[class*="language-"] {`
`546`	`546`	`}`
`547`	`547`	`.community_btn{`
`548`	`548`	`padding: 1rem;`
`549`		`- border: 1px solid #183E46;`
	`549`	`+ border: 1px solid $nile_blue;`
`550`	`550`	`border-radius: 2px;`
`551`	`551`	`span{`
`552`	`552`	`padding-left: .5rem;`
`553`		`- color: #183E46;`
	`553`	`+ color: $nile_blue;`
`554`	`554`	`font-weight: 600;`
`555`	`555`	`font-size: 17px;`
`556`	`556`	`}`
`557`		`- @media (max-width: 425px) {`
	`557`	`+ @media (max-width: $screen_425) {`
`558`	`558`	`margin-top: 1rem;`
`559`	`559`	`}`
`560`	`560`	`}`
`@@ -563,13 +563,13 @@ code[class*="language-"] {`
`563`	`563`	`justify-content: space-between;`
`564`	`564`	`margin-bottom: 4rem;`
`565`	`565`	`.pagination_buttons{`
`566`		`- @media (min-width: 768px) {`
	`566`	`+ @media (min-width: $screen_768) {`
`567`	`567`	`margin: 0;`
`568`	`568`	`}`
`569`	`569`	`}`
`570`	`570`	`.next_button{`
`571`	`571`	`width: fit-content;`
`572`		`- @media (min-width: 768px) {`
	`572`	`+ @media (min-width: $screen_768) {`
`573`	`573`	`margin-top: 1rem;`
`574`	`574`	`}`
`575`	`575`	`}`