Added new color palette options with main #002337. Also introducted/c…

…hanged z-index of the elements such as:

- both layouts(1),
- sidebar (0 or 3 when collapsed),
- and hamburger menu(2) at (dashboard)

Need to move both Headbar and Sidebar classes into globals.css because of the dark-mode integration in near future, to be managed in the same file like body, .root, .header, and .footer.

client/app/components/(Layout)/(dashboard)/Body/Main/Title/PageTitleWrapper.module.css

@@ -1,9 +1,33 @@
 .wrapper {
+  --single-hue-main: #002337;
+  --single-hue-2: #495a6b;
+  --single-hue-3: #6e7c8c;
+  --single-hue-4: #939ea9;
+  --single-hue-5: #b8c1c9;
+  --single-hue-6: #dcdfe4;
+  --single-hue-7: #f1f3f4;
+  --single-hue-8: #f7f8f9;
+  --single-hue-9: #fcfcfd;
+
   display: flex;
   align-items: center;
   padding: 12px 16px 11px 64px;
   /* z-index: 4; */
-  background-color: #fff;
+  /* background-color: #fff; */
+  /* Fibonacci numbers */
+  background: linear-gradient(
+    352deg,
+    var(--single-hue-main),
+    var(--single-hue-2) calc(6%),
+    var(--single-hue-3) calc(14%),
+    var(--single-hue-4) calc(16%),
+    var(--single-hue-5) calc(35%),
+    var(--single-hue-6) calc(45%),
+    var(--single-hue-7) calc(61%),
+    var(--single-hue-8) calc(64%),
+    var(--single-hue-9) calc(80%)
+  );
+  /* background-blend-mode: color; */
   border-bottom: 1px solid #e8e8e8;
   width: 100%;
 }

client/app/components/(Layout)/(dashboard)/Sidebar/HamburgerWrapper.module.css

@@ -1,13 +1,15 @@
 .hamburger-wrapper {
+  z-index: 2;
+
   display: flex;
   position: absolute;
   left: 16px;
   top: 12px;
-  z-index: 1;
 }
 
 @media (min-width: 40rem) {
   .hamburger-wrapper {
     display: none;
+    z-index: 0;
   }
 }

client/app/components/(Layout)/(dashboard)/Sidebar/SidebarContainer.module.css

@@ -1,5 +1,5 @@
 .sidebar-container {
-  z-index: 9996;
+  z-index: 0;
   /* font-size: 1.25em; */
   font-size: 1em;
 
@@ -15,25 +15,34 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
-  transform: translate(-100%);
-  transition: transform 0.26s ease-in-out;
+
   padding: 0 1em;
   box-shadow: 0px 0px 8px 0px var(--text-primary);
+
+  /* Animation & Transition */
+  transform: translate(-100%);
+  opacity: 0.1;
+  transition: transform ease-in-out, z-index ease-in-out, opacity ease-in-out;
+  transition-duration: calc(var(--global-transition-duration));
 }
 
 .collapsed {
+  z-index: 3;
   transform: translate(0%);
+  opacity: 1;
 }
 
 @media (min-width: 40rem) {
   .sidebar-container,
   .collapsed {
+    z-index: 0;
     width: var(--sidebar-width-larger-screens);
     font-size: 0.875em;
     flex: 0 0 auto;
     /* position: relative; */
     position: sticky;
     transform: none;
+    opacity: 1;
     /* height: 100%; */
   }
   /* 

client/app/components/(Users)/PropertyDevelopers/CRUD/create/CreatePropertyDeveloperContainer.tsx

@@ -38,7 +38,7 @@ const CreatePropertyDeveloperContainer = () => {
 
       // const resData = await response.data
     } catch (error: any) {
-      console.error('SignupForm error response: ', error)
+      console.error('CreatePropertyDeveloperContainer error response: ', error)
       throw error
     }
 

client/app/globals.css

@@ -6,30 +6,25 @@
   --gradient-light-start-color: hsl(210, 38%, 95%);
   --gradient-light-end-color: hsl(208.24deg 33.33% 90%);
 
+  --unused-color-palette-start: #002337;
+  --unused-color-palette-2: #3c5062;
+  --unused-color-palette-3: #738391;
+  --unused-color-palette-4: #afb9c3;
+  --unused-color-palette-end: #edf2f7;
+
+  --text-primary-single-hue-main: #002337;
+  --text-primary-single-hue-2: #19384d;
+  --text-primary-single-hue-3: #314e64;
+  --text-primary-single-hue-4: #48657c;
+  --text-primary-single-hue-5: #5f7d95;
+  --text-primary-single-hue-6: #7796ae;
+  --text-primary-single-hue-7: #90b0c9;
+  --text-primary-single-hue-8: #aacbe4;
+  --text-primary-single-hue-9: #c4e6ff;
+
   /** Background  **/
-  /* --header-background-light: hsl(210, 100%, 95%); */
-  /* --header-box-shadow-light: 0px 2px 3px 2px var(--header-background-light); */
-  /* --header-background-light: linear-gradient(
-    to top,
-    hsl(190.99, 91.61%, 71.96%) 0%,
-    hsla(191.27, 91.34%, 71.77%, 0.996) 8.1%,
-    hsla(192.03, 90.61%, 71.22%, 0.985) 15.5%,
-    hsla(193.19, 89.54%, 70.35%, 0.968) 22.5%,
-    hsla(194.67, 88.25%, 69.2%, 0.946) 29%,
-    hsla(196.36, 86.87%, 67.8%, 0.92) 35.3%,
-    hsla(198.18, 85.49%, 66.17%, 0.891) 41.2%,
-    hsla(200.02, 84.2%, 64.34%, 0.86) 47.1%,
-    hsla(201.82, 83.07%, 62.33%, 0.83) 52.9%,
-    hsla(203.46, 82.14%, 60.17%, 0.799) 58.8%,
-    hsla(204.86, 81.45%, 57.87%, 0.77) 64.7%,
-    hsla(205.93, 81.02%, 55.46%, 0.744) 71%,
-    hsla(206.57, 80.87%, 52.96%, 0.722) 77.5%,
-    hsla(206.69, 81%, 50.39%, 0.705) 84.5%,
-    hsla(206.19, 89.06%, 47.76%, 0.694) 91.9%,
-    hsla(205.04, 100%, 45.1%, 0.69) 100%
-  ); */
   --header-background-light: var(--gradient-light-start-color);
-  /* 33 steps - rgb */
+  /* 33 steps - rgb - to right */
   --headbar-collapsed-background-light: linear-gradient(
     to right,
     hsl(210, 38.46%, 94.9%) 0%,
@@ -99,7 +94,7 @@
     hsl(208.24, 33.33%, 90%) 97%,
     hsl(208.24, 33.33%, 90%) 100%
   );
-  /* 7 steps - rgb */
+  /* 7 steps - rgb - to right */
   --sidebar-background-light: linear-gradient(
     to right,
     hsl(210, 38.46%, 94.9%) 0%,
@@ -368,6 +363,7 @@ body {
 .layout-dashboard {
   font-size: 1rem;
   flex-grow: 1;
+  z-index: 1;
 }
 
 .layout-public {