added new design to the cards

Author: shawon

eform-client/src/app/modules/advanced/components/folders/folder-edit-create/folder-edit-create.component.html

@@ -1,7 +1,7 @@
 <h3 mat-dialog-title>{{(edit ? 'Edit folder' : 'New folder') | translate}}</h3>
 <div mat-dialog-content>
   <div class="d-flex flex-column">
-    <mat-card class="mb-1">
+    <mat-card class="mb-1 card--no-border">
       <mat-card-content style="display: flex; flex-direction: row;">
         <mat-form-field [style]="selectedParentFolder ? 'padding-right: 0.5rem;' : 'padding-right: 0;'">
           <mat-label>{{'Selected language' | translate }}</mat-label>
@@ -36,7 +36,7 @@ <h3 mat-dialog-title>{{(edit ? 'Edit folder' : 'New folder') | translate}}</h3>
             let translationIndex = index
           "
     >
-      <mat-card class="mb-1" *ngIf="translation !== undefined && selectedLanguageId === translation.languageId">
+      <mat-card class="mb-1 card--no-border" *ngIf="translation !== undefined && selectedLanguageId === translation.languageId">
 <!--        <mat-card-header>{{ getLanguage(translation.languageId) | translate }}</mat-card-header>-->
         <mat-card-content>
           <div class="d-flex flex-column">

eform-client/src/app/modules/application-settings/components/admin-settings/admin-settings.component.html

@@ -11,21 +11,21 @@
   </button>
 </eform-new-subheader>
 
-<div class="d-flex flex-column">
-  <div class="flex-cards">
-    <mat-card class="mat-card-50">
+<div class="d-flex flex-column gap-24 px-3">
+  <div class="d-flex flex-row justify-content-between gap-24">
+    <mat-card class="card--rounded" style="width: 100%">
       <mat-card-header class="d-flex">
         <h4>
           {{ 'Login Page' | translate }}
         </h4>
         <span class="spacer"></span>
         <button
-          mat-icon-button
+          class="btn-cancel"
           id="loginPageReset"
           (click)="resetLoginPageSettings()"
-          matTooltip="{{ 'Reset' | translate }}"
         >
           <mat-icon>undo</mat-icon>
+          <span>{{ 'Reset' | translate }}</span>
         </button>
       </mat-card-header>
       <mat-card-content>
@@ -120,19 +120,19 @@ <h4>
         </div>
       </mat-card-content>
     </mat-card>
-    <mat-card class="mat-card-50">
+    <mat-card class="card--rounded" style="width: 100%">
       <mat-card-header>
         <h4 class="d-flex">
           {{ 'Site header' | translate }}
         </h4>
         <span class="spacer"></span>
         <button
-          mat-icon-button
+          class="btn-cancel"
           id="siteHeaderReset"
           (click)="resetHeaderSettings()"
-          matTooltip="{{ 'Reset' | translate }}"
         >
           <mat-icon>undo</mat-icon>
+          <span>{{ 'Reset' | translate }}</span>
         </button>
       </mat-card-header>
       <mat-card-content>
@@ -228,8 +228,8 @@ <h4 class="d-flex">
       </mat-card-content>
     </mat-card>
   </div>
-  <div class="flex-cards mt-4">
-    <mat-card class="mat-card-50">
+  <div class="d-flex flex-row justify-content-between gap-24">
+    <mat-card class="card--rounded" style="width: 100%" >
       <mat-card-header>
         <h4>
           {{ 'SDK information' | translate }}
@@ -273,7 +273,7 @@ <h4>
         </mat-form-field>
       </mat-card-content>
     </mat-card>
-    <mat-card class="mat-card-50">
+    <mat-card class="card--rounded" style="width: 100%" >
       <mat-card-header>
         <h4>{{ 'Languages' | translate }}</h4>
       </mat-card-header>

eform-client/src/scss/styles.scss

@@ -408,6 +408,10 @@ ngx-material-timepicker-container {
   gap: 12px;
 }
 
+.gap-24{
+  gap: 24px;
+}
+
 .line-vert{
   width: 1px;
   height: 20px;
@@ -962,3 +966,45 @@ eform-new-subheader{
     }
   }
 }
+.card{
+  &--no-border{
+    box-shadow: unset !important;
+    border: none !important;
+
+    .mat-mdc-card-content{
+      padding: 0!important;
+    }
+  }
+
+  &--rounded{
+    display: flex;
+    width: 788px;
+    padding: var(--520-px, 20px);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--624-px, 24px);
+    border-radius: var(--rounded-12, 12px)!important;
+    border: 1px solid var(--border, #EBEFF2);
+    background: var(--bg, #FFF);
+
+    .mat-mdc-card-header{
+      align-items: center;
+      width: 100%;
+      padding: 0!important;
+      text-align: left;
+
+      h4{
+        color: var(--text-header, #0F1316);
+        font-family: var(--font-family, "Nunito Sans");
+        font-size: var(--Header-size-sm, 20px);
+        font-style: normal;
+        font-weight: 600;
+        line-height: var(--Header-line-height-sm, 28px);
+      }
+    }
+    .mat-mdc-card-content{
+      padding: 0!important;
+      width: 100%;
+    }
+  }
+}