new table design

Author: shawon

eform-client/src/app/common/modules/eform-shared/components/eform-new-subheader/eform-new-subheader.component.html

@@ -1,4 +1,4 @@
-<mat-card class="d-flex flex-row align-items-center mb-3 p-3">
+<mat-card class="eform-sub-header d-flex flex-row align-items-center mb-3 p-3 ">
   <div class="d-flex flex-column">
     <h2 style="margin: 0">
       {{

eform-client/src/app/components/layouts/full-layout/full-layout.component.html

@@ -1,15 +1,18 @@
 <div class="h-100 d-flex flex-column" *ngIf="selectIsAuth$ | async">
   <!--  <app-header></app-header>-->
-  <mat-toolbar style="padding-top: 5px; padding-bottom: 5px" class="d-flex align-items-center">
-    <div *ngIf="headerSettingsModel.imageLinkVisible" class="d-flex">
-      <div class="logo-container">
-        <img height="30px" id="site-header-image" [src]="logoImage | authImage | async"
-             *ngIf="headerSettingsModel.imageLinkVisible" alt="">
+  <mat-toolbar style="padding-top: 5px; padding-bottom: 5px" class="d-flex align-items-center nav-header">
+    <div class="d-flex align-items-center gap-12">
+      <button mat-icon-button (click)="toggleDrawer()" [hidden]="(selectConnectionStringExists$ | async) === false">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <div *ngIf="headerSettingsModel.imageLinkVisible" class="d-flex">
+        <div class="logo-container">
+          <img height="30px" id="site-header-image" [src]="logoImage | authImage | async"
+               *ngIf="headerSettingsModel.imageLinkVisible" alt="">
+        </div>
       </div>
     </div>
-    <button mat-icon-button (click)="toggleDrawer()" [hidden]="(selectConnectionStringExists$ | async) === false">
-      <mat-icon>menu</mat-icon>
-    </button>
+
     <span class="spacer"></span>
     <div class="tag">
       <mat-icon>account_circle</mat-icon>
@@ -30,15 +33,15 @@
       </mat-menu>
     </div>
   </mat-toolbar>
-  <mat-drawer-container autosize style="height: 100%;">
+  <mat-drawer-container autosize style="height: 100%;" class="mat-app-background">
     <mat-drawer
       #drawer
       [mode]="sidenavMode"
       [opened]="(selectSideMenuOpened$ | async) === true">
       <app-navigation (clickOnLink)="onClickOnLink()"></app-navigation>
       <app-footer></app-footer>
     </mat-drawer>
-    <div class="mb-auto p-4" *ngIf="selectIsAuth$ | async">
+    <div class="mb-auto mat-app-background" *ngIf="selectIsAuth$ | async">
       <app-userback-widget></app-userback-widget>
       <router-outlet></router-outlet>
     </div>

eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.html

@@ -45,8 +45,8 @@
 
 <!--Here you can choose approach as you like: container-row, or flex, or just element with required styles and markup-->
 <ng-template #toolbarTpl>
-  <div class="d-flex flex-row justify-content-start flex-nowrap">
-    <div class="d-flex flex-column mr-2 ml-2">
+  <div class="d-flex flex-row justify-content-start flex-nowrap align-items-center gap-12">
+    <div class="d-flex flex-column">
       <mat-form-field>
         <mat-label>{{ 'Search eForm' | translate }}</mat-label>
         <input
@@ -104,7 +104,7 @@
   actions: actionsTpl}"
   [showPaginator]="false"
   [pageOnFront]="false"
-  [rowStriped]="true"
+  [rowStriped]="false"
   [showToolbar]="true"
   [showColumnMenuButton]="false"
   [toolbarTemplate]="toolbarTpl"

eform-client/src/scss/styles.scss

@@ -68,6 +68,8 @@ body, .theme-light {
   --warning: #{$warning-light};
   --error: #{$error-light};
   --btn-delete-text: #{$text-header-dark};
+  --text-body: #{$text-body-light};
+  --card: #{$card-light};
 }
 
 body, .theme-dark {
@@ -85,6 +87,8 @@ body, .theme-dark {
   --warning: #{$warning-dark};
   --error: #{$error-dark};
   --btn-delete-text: #{$text-header-light};
+  --text-body: #{$text-body-dark};
+  --card: #{$card-dark};
 }
 
 a {
@@ -578,3 +582,119 @@ ngx-material-timepicker-container {
 }
 
 
+.eform-sub-header{
+  background: var(--bg)!important;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border: unset!important;
+  box-shadow: unset!important;
+}
+
+.mat-app-background{
+  background: var(--bg)!important;
+}
+.nav-header{
+  display: flex;
+  width: 1920px;
+  padding: var(--520-px, 20px);
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border, #EBEFF2);
+  background: var(--bg)!important;
+}
+
+
+.mat-mdc-form-field {
+
+  .mat-mdc-floating-label{
+    color: var(--text-body) !important;
+  }
+
+  .mat-mdc-form-field-focus-overlay {
+    background: unset !important;
+  }
+
+  .mdc-text-field {
+    border: 1px solid var(--border);
+    border-radius: 4px!important;
+
+    background-color: var(--bg) !important;
+
+    &__ripple{
+      ::before{
+        background-color: var(--bg) !important;
+      }
+      ::after{
+        background-color: var(--bg) !important;
+      }
+    }
+
+    &__input {
+      background-color: var(--bg) !important;
+    }
+
+    &--filled:not(.mdc-text-field--disabled) {
+      background-color: var(--bg) !important;
+      .mdc-line-ripple{
+        &::before {
+          border-bottom: unset !important;
+        }
+        &::after {
+          border-bottom-color: var(--bg) !important;
+        }
+      }
+
+      .mat-mdc-floating-label{
+        color: var(--text-body) !important;
+      }
+    }
+  }
+}
+
+.mat-drawer-inner-container{
+  background: var(--bg)!important;
+  .mat-tree, .mat-expansion-panel{
+    background: var(--bg)!important;
+
+    a{
+      color: var(--text-header, #0F1316);
+      font-family: var(--font-family, "Nunito Sans");
+      font-size: var(--Text-size-sm, 14px);
+      font-style: normal;
+      //font-weight: 600;
+      line-height: var(--Text-line-height-sm, 22px);
+    }
+
+    .nav-link{
+      color: var(--text-header, #0F1316);
+      font-family: var(--font-family, "Nunito Sans");
+      font-size: var(--Text-size-sm, 14px);
+      font-style: normal;
+      //font-weight: 600;
+      line-height: var(--Text-line-height-sm, 22px);
+    }
+  }
+}
+.mat-drawer-side{
+  background: var(--bg)!important;
+  border-right-color: var(--border) !important;
+}
+
+.mtx-grid{
+  outline: unset !important;
+  .mat-mdc-table{
+    background: var(--bg)!important;
+    .mat-mdc-header-row, thead{
+      border-bottom: 1px solid var(--border);
+      background: var(--card,);
+    }
+
+  }
+  thead{
+    border-bottom: 1px solid var(--border);
+    background: var(--card,);
+  }
+
+}

eform-client/src/scss/utilities/_colors.scss

@@ -47,3 +47,9 @@ $text-header-dark: #F3F5F7;
 
 $error-light: #F44336;
 $error-dark: #FF8282;
+
+$text-body-light: #7F868D;
+$text-body-dark: #C1C5C9;
+
+$card-light: #F7F9FA;
+$card-dark: #2D2F31;