change in design

Surbhi-sharma1 · Surbhi-sharma1 · commit e6ee5d6ab919 · 2024-05-16T13:41:02.000+05:30
diff --git a/projects/saas-ui/src/app/main/components/add-plan/add-plan.component.html b/projects/saas-ui/src/app/main/components/add-plan/add-plan.component.html
@@ -123,12 +123,12 @@ <h2>{{ isEditMode ? 'Edit Plan' : 'Add New Plan' }}</h2>
             </div>
           </div>
           <!-- signup button -->
-          <div class="btn regbtn">
+          <div class="regbtn">
             <button
               nbButton
               shape="round"
               size="medium"
-              status="basic"
+              status="danger"
               [disabled]="!addPlanForm.valid"
               (click)="isEditMode ? editPlan() : addPlan()"
             >
diff --git a/projects/saas-ui/src/app/main/components/add-plan/add-plan.component.scss b/projects/saas-ui/src/app/main/components/add-plan/add-plan.component.scss
@@ -1,3 +1,5 @@
+@use '../../../../styles.scss' as *;
+@use '../../styles/grid-styles.scss' as *;
 .input-wrapper {
   display: flex;
   gap: 10px;
@@ -41,7 +43,10 @@
 }
 .regbtn {
   text-align: right;
+  margin: 10px;
+  padding: 10px;
 }
+
 input.ng-invalid.ng-touched {
   border: 1px solid red;
 }
diff --git a/projects/saas-ui/src/app/main/components/add-plan/add-plan.component.ts b/projects/saas-ui/src/app/main/components/add-plan/add-plan.component.ts
@@ -36,7 +36,7 @@ export class AddPlanComponent implements OnInit {
     this.addPlanForm = this.fb.group({
       name: ['', Validators.required],
       description: ['', Validators.required],
-      price: ['', Validators.pattern('[0-9]')],
+      price: [''],
       currencyId: ['', Validators.required],
       billingCycleId: [null, Validators.required],
       tier: [null, Validators.required],
diff --git a/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.html b/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.html
@@ -1,15 +1,16 @@
 <div>
-  <nb-card accent="danger">
+  <nb-card accent="danger" class="card-style">
     <nb-card-body>
-      <h2>Billing Details</h2>
+      <h2 class="heading">Billing Details</h2>
       <!-- ag-grid -->
-      <ag-grid-angular
-        style="width: 1200px; height: 700px"
-        class="ag-theme-quartz"
-        [rowData]="rowData"
-        [columnDefs]="colDefs"
-      >
-      </ag-grid-angular>
+      <div class="grid">
+        <ag-grid-angular
+          class="ag-theme-quartz"
+          [rowData]="rowData"
+          [columnDefs]="colDefs"
+        >
+        </ag-grid-angular>
+      </div>
     </nb-card-body>
   </nb-card>
 </div>
diff --git a/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.scss b/projects/saas-ui/src/app/main/components/billing-plan/billing-plan.component.scss
@@ -0,0 +1 @@
+@use '../../styles/grid-styles.scss' as *;
diff --git a/projects/saas-ui/src/app/main/components/button-renderer/button-renderer.component.html b/projects/saas-ui/src/app/main/components/button-renderer/button-renderer.component.html
@@ -1,12 +1,14 @@
 <div class="btns">
   <nb-icon
+    class="edit-icon"
     icon="edit-outline"
     pack="eva"
     status="success"
     size="large"
     (click)="editPlan($event)"
   ></nb-icon>
   <nb-icon
+    class="delete-icon"
     icon="trash-2-outline"
     pack="eva"
     status="success"
diff --git a/projects/saas-ui/src/app/main/components/button-renderer/button-renderer.component.scss b/projects/saas-ui/src/app/main/components/button-renderer/button-renderer.component.scss
@@ -0,0 +1,7 @@
+.edit-icon {
+  color: #ff3d71;
+  margin-right: 13px;
+}
+.delete-icon {
+  color: #ff3d71;
+}
diff --git a/projects/saas-ui/src/app/main/components/lead-list/lead-list.component.html b/projects/saas-ui/src/app/main/components/lead-list/lead-list.component.html
@@ -1,15 +1,16 @@
 <div>
-  <nb-card accent="danger">
+  <nb-card accent="danger" class="card-style">
     <nb-card-body>
-      <h2>Lead Listing</h2>
-      <!-- ag-grid -->
-      <ag-grid-angular
-        style="width: 1200px; height: 700px"
-        class="ag-theme-quartz"
-        [rowData]="rowData"
-        [columnDefs]="colDefs"
-      >
-      </ag-grid-angular>
+      <h2 class="heading">Lead List</h2>
+      <div class="grid">
+        <!-- ag-grid -->
+        <ag-grid-angular
+          class="ag-theme-quartz"
+          [rowData]="rowData"
+          [columnDefs]="colDefs"
+        >
+        </ag-grid-angular>
+      </div>
     </nb-card-body>
   </nb-card>
 </div>
diff --git a/projects/saas-ui/src/app/main/components/lead-list/lead-list.component.scss b/projects/saas-ui/src/app/main/components/lead-list/lead-list.component.scss
@@ -0,0 +1 @@
+@use '../../styles/grid-styles.scss' as *;
diff --git a/projects/saas-ui/src/app/main/components/lead-list/lead-list.component.ts b/projects/saas-ui/src/app/main/components/lead-list/lead-list.component.ts
@@ -19,11 +19,11 @@ export class LeadListComponent
 {
   // defining column names here
   colDefs: ColDef[] = [
-    {field: 'firstName', width: 200, minWidth: 20},
-    {field: 'lastName', width: 200, minWidth: 20},
-    {field: 'companyName', width: 200, minWidth: 20},
+    {field: 'firstName', width: 250, minWidth: 20},
+    {field: 'lastName', width: 250, minWidth: 20},
+    {field: 'companyName', width: 250, minWidth: 20},
     {field: 'email', width: 300, minWidth: 20},
-    {field: 'country', width: 200, minWidth: 20},
+    {field: 'country', width: 250, minWidth: 20},
   ];
 
   rowData = [];
diff --git a/projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.html b/projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.html
@@ -1,21 +1,22 @@
 <div>
-  <nb-card accent="danger">
+  <nb-card accent="danger" class="card-style">
     <nb-card-body>
-      <h2>Manage Plan</h2>
+      <h2 class="heading">Manage Plan</h2>
       <!-- ag-grid -->
-      <ag-grid-angular
-        style="width: 1200px; height: 700px"
-        class="ag-theme-quartz"
-        [rowData]="rowData"
-        [columnDefs]="colDefs"
-        [editType]="'fullRow'"
-        [rowSelection]="rowSelection"
-        (gridReady)="onGridReady($event)"
-        (rowEditingStopped)="(onRowEditingStopped)"
-      >
-      </ag-grid-angular>
+      <div class="grid">
+        <ag-grid-angular
+          class="ag-theme-quartz"
+          [rowData]="rowData"
+          [columnDefs]="colDefs"
+          [editType]="'fullRow'"
+          [rowSelection]="rowSelection"
+          (gridReady)="onGridReady($event)"
+          (rowEditingStopped)="(onRowEditingStopped)"
+        >
+        </ag-grid-angular>
+      </div>
       <!-- Add Plan Button-->
-      <div class="btn regbtn">
+      <div class="regbtn">
         <button
           nbButton
           shape="round"
diff --git a/projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.scss b/projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.scss
@@ -0,0 +1,12 @@
+@use '../../styles/grid-styles.scss' as *;
+.regbtn {
+  padding: 10px 0;
+  text-align: right;
+  button {
+    min-width: 200px;
+    &:hover {
+      background-color: #ff3d71;
+      color: white;
+    }
+  }
+}
diff --git a/projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.ts b/projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.ts
@@ -25,13 +25,14 @@ export class ManagePlansComponent
   colDefs: ColDef[] = [
     {field: 'name', headerName: 'Plan Name', width: 200, minWidth: 20},
     {field: 'description', width: 200, minWidth: 20},
-    {field: 'cycleName', width: 200, minWidth: 20},
-    {field: 'currencyName', width: 200, minWidth: 20},
-    {field: 'price', width: 200, minWidth: 20},
+    {field: 'cycleName', width: 250, minWidth: 20},
+    {field: 'currencyName', width: 250, minWidth: 20},
+    {field: 'price', width: 250, minWidth: 20},
     {
       field: 'actions',
       headerName: 'Actions',
       cellRenderer: ButtonRendererComponent,
+      width: 200,
     },
   ];
 
diff --git a/projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.html b/projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.html
@@ -1,15 +1,17 @@
 <div>
-  <nb-card accent="danger">
+  <nb-card accent="danger" class="card-style">
     <nb-card-body>
-      <h2>OnBoarded Tenant List</h2>
+      <h2 class="heading">Onboarded Tenant List</h2>
       <!-- ag-grid -->
-      <ag-grid-angular
-        style="width: 1200px; height: 700px"
-        class="ag-theme-quartz"
-        [rowData]="rowData"
-        [columnDefs]="colDefs"
-      >
-      </ag-grid-angular>
+      <div class="grid">
+        <ag-grid-angular
+          style="width: 1350px; height: 650px"
+          class="ag-theme-quartz"
+          [rowData]="rowData"
+          [columnDefs]="colDefs"
+        >
+        </ag-grid-angular>
+      </div>
     </nb-card-body>
   </nb-card>
 </div>
diff --git a/projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.scss b/projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.scss
@@ -0,0 +1 @@
+@use '../../styles/grid-styles.scss' as *;
diff --git a/projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.ts b/projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.ts
@@ -19,10 +19,10 @@ export class OnboardingTenantListComponent
   implements OnInit
 {
   colDefs: ColDef[] = [
-    {field: 'name', headerName: 'Company Name', width: 200, minWidth: 20},
-    {field: 'domains', width: 200, minWidth: 20},
-    {field: 'address', width: 300, minWidth: 20},
-    {field: 'status', width: 200, minWidth: 20},
+    {field: 'name', headerName: 'Company Name', width: 300, minWidth: 20},
+    {field: 'domains', width: 300, minWidth: 20},
+    {field: 'address', width: 400, minWidth: 20},
+    {field: 'status', width: 300, minWidth: 20},
   ];
 
   rowData = [];
diff --git a/projects/saas-ui/src/app/main/main.component.html b/projects/saas-ui/src/app/main/main.component.html
@@ -33,7 +33,7 @@
       </div>
     </div>
   </nb-layout-header>
-  <nb-sidebar>
+  <nb-sidebar class="sidebar">
     <nb-menu [items]="menu"> </nb-menu>
   </nb-sidebar>
 
diff --git a/projects/saas-ui/src/app/main/main.component.scss b/projects/saas-ui/src/app/main/main.component.scss
@@ -3,6 +3,10 @@
 @use '@nebular/theme/styles/theming' as *;
 
 @include nb-install-component() {
+  --menu-item-active-text-color: #ff3d71;
+  --menu-item-icon-active-color: #ff3d71;
+  --menu-item-hover-text-color: #ff3d71;
+  --menu-item-icon-hover-color: #ff3d71;
   .nav-container {
     display: flex;
     justify-content: space-between;
@@ -28,6 +32,18 @@
     .footer-divider {
       border-left: 0.063rem solid #1a69df;
     }
+
+    .sidebar {
+      ul.menu-items {
+        .menu-item {
+          a {
+            &.active {
+              color: red !important;
+            }
+          }
+        }
+      }
+    }
   }
 
   nb-action {
@@ -75,3 +91,7 @@
 .hi {
   text-align: center;
 }
+
+::ng-deep .menu-item a.active {
+  color: red;
+}
diff --git a/projects/saas-ui/src/app/main/styles/grid-styles.scss b/projects/saas-ui/src/app/main/styles/grid-styles.scss
@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '../../../../../arc-lib/src/lib/theme/styles/variables' as *;
+@use '@nebular/theme/styles/theming' as *;
+
+.heading {
+  text-align: center;
+}
+.grid {
+  justify-content: center;
+  display: flex;
+  width: 100%;
+}
+.card-style {
+  width: 100%;
+}
+.ag-theme-quartz {
+  width: 100%;
+  height: 650px;
+}
+
+.regbtn {
+  padding: 10px 0;
+  text-align: right;
+  button {
+    min-width: 200px;
+    &:hover {
+      background-color: #ff3d71;
+      color: white;
+    }
+  }
+}
diff --git a/projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.html b/projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.html
@@ -171,7 +171,7 @@ <h3>Signup to ARC-SaaS</h3>
               nbButton
               shape="round"
               size="medium"
-              status="basic"
+              status="danger"
               [disabled]="!addLeadForm.valid"
               type="submit"
             >
diff --git a/projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.html b/projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.html
@@ -80,7 +80,7 @@ <h2>Please Complete Your registration</h2>
                   nbButton
                   shape="round"
                   size="medium"
-                  status="basic"
+                  status="danger"
                   [disabled]="!addTenantForm.valid"
                   type="submit"
                 >
diff --git a/projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.scss b/projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.scss
@@ -24,8 +24,9 @@
 }
 
 .main-wrapper {
+  justify-content: center;
   .btn {
-    text-align: right;
+    text-align: center;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../styles.scss' as *;`
	`2`	`+@use '../../styles/grid-styles.scss' as *;`
`1`	`3`	`.input-wrapper {`
`2`	`4`	`display: flex;`
`3`	`5`	`gap: 10px;`
`@@ -41,7 +43,10 @@`
`41`	`43`	`}`
`42`	`44`	`.regbtn {`
`43`	`45`	`text-align: right;`
	`46`	`+ margin: 10px;`
	`47`	`+ padding: 10px;`
`44`	`48`	`}`
	`49`	`+`
`45`	`50`	`input.ng-invalid.ng-touched {`
`46`	`51`	`border: 1px solid red;`
`47`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+@use '../../styles/grid-styles.scss' as *;`