Merge pull request #861 from AOT-Technologies/V8Feature/FWF-5338-Edit_Settings_Page_Layout

FWF-5338:[V8Feature] - Edit settings page layout

Author: fahad-aot

forms-flow-nav/src/sidenav/Sidebar.scss

@@ -64,11 +64,20 @@ $animSpeed: 300ms;
   position: fixed;
   z-index: 1050;
   left: 0;
-  background-color: var(--navbar-bg-color);
+  background-color: var(--nav-bg-color);
   display: flex;
   flex-direction: column;
   // justify-content: space-between;
   // box-shadow: var(--shadow-nav);
+   transition: width 0.1s ease-in; // expand takes 3s
+
+  &:not(:hover) {
+    transition: width 0.6s ease-out; // collapse takes 6s
+  }
+
+  &:hover {
+    width: var(--navbar-width); // expanded width
+  }
 
   .logo-container {
     display: flex;
@@ -102,7 +111,7 @@ $animSpeed: 300ms;
     padding-left: 0;
     // font-weight: 700;
 
-    background-color: var(--navbar-bg-color);
+    background-color: var(--nav-bg-color);
     box-shadow: none;
 
     &:focus {
@@ -130,7 +139,7 @@ $animSpeed: 300ms;
         // }
         @include font-style(0.938rem,500,var(--navbar-menu-font-color));
 
-      background-color: var(--navbar-bg-color);
+      background-color: var(--nav-bg-color);
       box-shadow: none;
     }
 
@@ -142,7 +151,7 @@ $animSpeed: 300ms;
   }
 
   .accordion-item {
-    background-color: var(--navbar-bg-color);
+    background-color: var(--nav-bg-color);
     border: none;
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-sm);
@@ -311,7 +320,7 @@ $animSpeed: 300ms;
     //   font-weight: var(--font-weight-sm);
     //   line-height: var(--text-line-height);
     //   letter-spacing: var(--text-space-xs);
-    //   background-color: var(--navbar-bg-color) !important;
+    //   background-color: var(--nav-bg-color) !important;
     //   text-align: left;
     //   margin-left: var(--spacer-050) !important;
     //   margin: 0;
@@ -375,7 +384,7 @@ $animSpeed: 300ms;
 .multitenancy-header {
   height: var(--client-nav);
   box-shadow: var(--shadow-lg);
-  background-color: var(--navbar-bg-color);
+  background-color: var(--nav-bg-color);
   display: flex;
   align-items: center;
   padding: 0 var(--spacer-100);

forms-flow-theme/scss/index.scss

@@ -57,3 +57,4 @@
 @import "./v8-scss/table";
 @import "./v8-scss/checkbox";
 @import "./v8-scss/breadCrumbs";
+@import "./v8-scss/formEditSettings";

forms-flow-theme/scss/v8-scss/_formCreateLayout.scss

@@ -7,13 +7,13 @@ $white-100-color: var(--white-100);
 $gray-medium-dark-color: var(--gray-medium-dark);
 $font-weight-medium: var(--font-weight-medium);
 
-.edit-setiings {
+.form-create-cards {
   @include mixins.vertical-padding();
   overflow: auto;
   //height: 80vh;
 
   .create-header {
-    @include mixins.font-style($header-font-size, $header-font-weight, );
+    @include mixins.font-style($header-font-size, $header-font-weight );
   }
 
   .create-from-scratch {

forms-flow-theme/scss/v8-scss/_formEditSettings.scss

@@ -0,0 +1,22 @@
+.form-edit-setiings {
+    @include vertical-padding();
+    overflow: auto;
+  
+    .grid-section {
+      @include grid-layout();
+      @include vertical-padding();
+      border-top: 1px solid $border-color;
+      margin-top: 17px;
+      margin-bottom: 18px;
+  
+      .settings-header {
+        grid-row: 1;
+        @include section-header();
+      }
+  
+      .settings-contents {
+        grid-row: 2;
+        @include section-content();
+      }
+    }
+  }

forms-flow-theme/scss/v8-scss/_mixins.scss

@@ -26,8 +26,8 @@ $font-color: var(--secondary-dark);
   border-bottom: none;
   transition: 
     max-height 0.3s ease, 
-    padding 0.3s ease, 
-    border-bottom 0.3s ease;
+    padding 0.5s ease, 
+    border-bottom 0.5s ease;
   &:not(:empty) {
     max-height: $maxHeight;      
     padding: 1rem 0;
@@ -42,19 +42,20 @@ $font-color: var(--secondary-dark);
   width: 100%;
 }
 
+//Align items at the flex center
 @mixin centerAlign {
   display: flex;
   align-items: center;
   justify-content: space-around;
 }
 
+//vertical padding at the top and bottom.
 @mixin vertical-padding {
   padding: var(--spacer-100) 0 ;
 }
 
 
-//Settings Card Mixins
-
+//----- Create form Card Mixins ------->
 @mixin create-grid($gap: 21px, $border-color: #E5E5E5, $padding: 18px 0) {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -79,4 +80,42 @@ $font-color: var(--secondary-dark);
     border: 1px solid $hover-border;
     box-shadow: 0 0.125rem 0.5rem rgba(137, 105, 242, 0.15);
   }
-}
+}
+
+//-------- Edit settings grid structure ----------->
+
+@mixin grid-layout($header-height: 50px, $gap: 1rem) {
+  display: grid;
+  grid-template-rows: $header-height 1fr;
+  gap: $gap;
+  width: 100%;
+}
+
+// Header section 
+@mixin section-header(
+  $border-color: #e5e5e5,
+  $bg-color: #fff,
+  $padding: 13px 0
+) {
+  width: 100%;
+  border-bottom: 1px solid $border-color;
+  background-color: $bg-color;
+  padding: $padding;
+}
+
+// Content area
+@mixin section-content(
+  $height: 300px,
+  $padding: 34px 32px,
+  $bg-color: #fff,
+  $border-color: #e5e5e5,
+  $radius: 5px
+) {
+  width: 100%;
+  height: $height;
+  padding: $padding;
+  background-color: $bg-color;
+  border: 1px solid $border-color;
+  border-radius: $radius;
+}
+

forms-flow-theme/scss/v8-scss/_theme.scss

@@ -90,7 +90,8 @@ $font-tokens: (
 :root {
 
   // //for navbar
-  --nav-bg-color: var(-- white-100);
+  
+  --nav-bg-color: var(--white-100);
   --navbar-menu-font-color: var(--secondary-dark);
   --navbar-submenu-font-color: var(--gray-dark);
 
@@ -239,9 +240,9 @@ $font-tokens: (
       height: 100vh;
       display: flex;
       flex-direction: column;
-      transition: width 0.3s ease;
+      transition: width 0.5s ease;
       overflow: hidden;
-      width: 12rem;               // need to be replaced with variable
+      width: var(--navbar-width);
     }
 
     .page-container {