css->scss: experience form + map + footer

Author: ashuvssut

Diff for: src/components/Footer/footer.module.scss

@@ -1,3 +1,5 @@
+@use './../../scss/colors';
+
 .footerDiv {
   position: relative;
   margin-top: 2rem;
@@ -27,7 +29,7 @@
       overflow: hidden;
 
       .svgPath {
-        fill: #fff;
+        fill: colors.$white;
         -webkit-transform-origin: center;
         -ms-transform-origin: center;
         transform-origin: center;
@@ -42,12 +44,12 @@
     left: 0;
     height: 100%;
     width: 100%;
-    background: #0e1120de;
+    background: colors.$black_0-8;
   }
 
   .newsletter {
     position: relative;
-    color: white;
+    color: colors.$white;
     text-align: center;
     padding: 50px 0 70px 0;
 
@@ -76,7 +78,7 @@
 
         .box {
           height: 40px;
-          background-color: white;
+          background-color: colors.$white;
           border-radius: 30px 0 0 30px;
           display: flex;
           align-items: center;
@@ -85,7 +87,7 @@
 
           .icon {
             padding: 10px;
-            color: dodgerblue;
+            color: colors.$blue1;
             min-width: 40px;
           }
           input {
@@ -99,13 +101,13 @@
         .bsClass {
           border-radius: 0 30px 30px 0;
           padding: 6px 15px;
-          background-color: #4285f4;
-          border: 2px solid #4285f4;
-          color: white;
+          background-color: colors.$blue1;
+          border: 2px solid colors.$blue1;
+          color: colors.$white;
 
           &:hover {
-            background-color: #1963db;
-            border: 2px solid #1963db;
+            background-color: colors.$blue2;
+            border: 2px solid colors.$blue2;
           }
         }
       }
@@ -126,7 +128,7 @@
 
   .footerText {
     text-align: center;
-    color: white;
+    color: colors.$white;
     font-weight: 400;
     font-size: 1.2rem;
     padding: 30px;

Diff for: src/pages/Home/sections/Contact/components/ExperienceForm/experience-form.module.scss

@@ -1,9 +1,12 @@
+
+@use './../../../../../../scss/colors';
+
 .info {
   width: 350px;
 
   .general_info {
-    background: #3d1f90;
-    color: white;
+    background: colors.$blue3;
+    color: colors.$white;
     margin: 0.35rem 1rem;
     border-radius: 15px;
     & h2 {
@@ -36,7 +39,7 @@
           height: 500px;
           bottom: -250px;
           right: -250px;
-          background-color: #caebb7eb;
+          background-color: colors.$light-pink;
 
           .circle2 {
             position: absolute;
@@ -45,7 +48,7 @@
             height: 200px;
             top: -150px;
             left: -150px;
-            background-color: #7174ffeb;
+            background-color: colors.$blue1;
           }
         }
 
@@ -66,15 +69,15 @@
             input {
               width: 100%;
               border: 0;
-              background: #fcfcfc;
+              background: colors.$light-grey;
               height: 43px;
               padding: 0 20px;
               font-size: 16px;
               outline: none;
-              color: #7b7474;
+              color: colors.$grey;
               border-radius: 5px;
               &:focus {
-                border: 1px solid white;
+                border: 1px solid colors.$white;
                 border-radius: 20px;
               }
               &::placeholder {
@@ -89,24 +92,24 @@
             flex-wrap: wrap;
 
             span {
-              color: white;
+              color: colors.$white;
               font-weight: bold;
             }
           }
           textarea {
             border-radius: 8px;
             width: 100%;
             border: 0;
-            background: #fcfcfc;
+            background: colors.$white2;
             font-size: 16px;
             outline: none;
             resize: none;
             padding: 10px;
             height: 110px;
-            color: #7b7474;
+            color: colors.$grey;
           }
           .submit {
-            background: #3d1f90;
+            background: colors.$blue3;
             font-size: 14px;
             letter-spacing: 4px;
             font-family: "Open Sans", sans-serif;
@@ -119,17 +122,17 @@
             text-align: center;
             cursor: pointer;
             align-self: flex-end;
-            border: 1px #fff solid;
+            border: 1px colors.$white solid;
             position: relative;
             overflow: hidden;
-            box-shadow: inset 2px 0px 2px white;
+            box-shadow: inset 2px 0px 2px colors.$white;
             border-radius: 20px;
 
             .buttonText {
               position: relative;
               z-index: 1;
               font-weight: bolder;
-              color: #08fdd8;
+              color: colors.$light-blue;
             }
 
             .hoverEffect {
@@ -138,7 +141,7 @@
               top: 0;
               left: 0;
               border-radius: 0 50% 100% 0;
-              background-color: #fcfcfc;
+              background-color: colors.$white2;
               width: 500px;
               height: 100%;
               transform: scale(0, 1);
@@ -152,7 +155,7 @@
                 height: 200%;
               }
               & .buttonText {
-                color: #272727;
+                color: colors.$black_0-8;
               }
             }
           }

Diff for: src/pages/Home/sections/Contact/components/Map/map.scss

@@ -1,3 +1,5 @@
+@use './../../../../../../scss/colors';
+
 .leaflet-container {
   width: 100%;
   height: 98%;
@@ -9,23 +11,23 @@
 }
 
 .leaflet-popup-content-wrapper {
-  background-color: rgba(29, 24, 24, 0.9);
-  color: white;
+  background-color: colors.$black_0-8;
+  color: colors.$white;
 }
 
 .leaflet-popup-tip {
-  background-color: rgba(29, 24, 24, 0.9);
+  background-color: colors.$black_0-8;
 }
 
 .leaflet-control-layers.leaflet-control {
-  background: #1b1b1b;
+  background: colors.$black_0-8;
 }
 
 .leaflet-control-layers-base {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  color: white;
+  color: colors.$white;
   font-family: "Montserrat";
   padding: 0.5rem;
   gap: 8px;
@@ -54,8 +56,8 @@
   width: 230px;
   padding: 1.5rem;
   left: 10px;
-  background: rgba(29, 24, 24, 0.9);
-  color: #fff;
+  background: colors.$black_0-8;
+  color: colors.$white;
   border-radius: 5px;
 
   a {
@@ -66,9 +68,9 @@
 .reCenter {
   border-radius: 100%;
   right: 10px;
-  background: rgba(245, 245, 245, 0.9);
+  background: colors.$white2;
   padding: 5px;
   border: none;
-  box-shadow: 2px 2px 3px rgb(15, 14, 14);
+  box-shadow: 2px 2px 3px colors.$black_0-8;
 }
 

Diff for: src/pages/Home/sections/Contact/contact-us.module.scss

@@ -1,21 +1,20 @@
+@use './../../../../scss/mixin';
+@use './../../../../scss/colors';
+
 .ContactUs {
   text-align: center;
   margin-top: 5rem;
 
   .titleMain {
-    font-family: "Poppins", sans-serif;
-    color: #4e89ae;
-    font-size: 3rem;
-    font-weight: bold;
-    text-shadow: 3px 4px 2px #0000002e;
+    @include mixin.section-title;
   }
 
   .contact_and_info_container {
     display: flex;
     align-items: stretch;
     justify-content: center;
     flex-wrap: wrap;
-    background: #fff;
+    background: colors.$white;
     margin: 1rem 0 9rem;
 
     .map {

Diff for: src/scss/_colors.scss

@@ -1,11 +1,23 @@
 $white: #fff;
 $white1: #bcdbee;
+$white2:#fcfcfc;
+
 $black_0-3: #0000004d;
+$black_0-8: #000000de;
 $black: #000;
+
+$light-pink: #bfdbb4;
+
+$light-grey:#fcfcfc;
+$grey: grey;
+
 $light-purple: #376f92;
 $purple: #103f5f;
+
 $light-blue: #add8e6;
 $steel-blue: #4e89ae;
 $blue1:#4285f4;
-$grey: grey;
+$blue2:#1963db;
+$blue3:#3d1f90;
+
 $red: red;