Merge pull request #90 from sourcefuse/UI_Changes

feat(arc-saas): UI design changes of SaaS Admin Portal

Author: yeshamavani

projects/saas-ui/src/app/main/components/add-plan/add-plan.component.html

@@ -251,7 +251,7 @@ <h3>Plan Configuration</h3>
             <button
               nbButton
               size="medium"
-              status="danger"
+              class="btn-danger"
               (click)="cancelEdit()"
             >
               Cancel
@@ -260,7 +260,7 @@ <h3>Plan Configuration</h3>
             <button
               nbButton
               size="medium"
-              status="danger"
+              class="btn-danger"
               (click)="isEditMode ? editPlan() : addPlan()"
             >
               {{ isEditMode ? 'Save' : 'Add Plan' }}

projects/saas-ui/src/app/main/components/add-plan/add-plan.component.scss

@@ -119,6 +119,10 @@ h3 {
   text-align: right;
   margin: 10px;
   padding: 10px;
+  .btn-danger{
+    background-color: #f00a18 !important;
+    color: white !important;
+  }
 }
 
 input.ng-invalid.ng-touched {
@@ -176,8 +180,11 @@ ul {
 .details-wrapeer {
   border: 1px solid #cecece;
   padding: 20px;
-  border-radius: 4px;
-  margin-bottom: 20px;
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    border: none;
+    border-radius: 10px;
+    margin: 20px 0 35px 0;
+   
 }
 
 .input-box-wrapper {
@@ -268,5 +275,6 @@ ul {
     color: #007bff;
     font-size: 18px;
     z-index: 1;
+    margin-right:10px;
   }
 }

projects/saas-ui/src/app/main/components/button-renderer/button-renderer.component.scss

@@ -1,7 +1,7 @@
 .edit-icon {
-  color: #ff3d71;
+  color: #ef0b16;
   margin-right: 13px;
 }
 .delete-icon {
-  color: #ff3d71;
+  color: #ef0b16;
 }

projects/saas-ui/src/app/main/components/lead-list/lead-list.component.scss

@@ -1 +1,24 @@
 @use '../../styles/grid-styles.scss' as *;
+
+.header-wrapper{
+    color: red($color: #000000);
+}
+
+.header-bold {
+    font-weight: bold;    
+    font-family: 'Arial, sans-serif'; 
+    font-size: 14px;     
+    color: #333;       
+  }
+
+  .ag-theme-quartz .ag-header-group-cell {
+    font-weight: normal;
+    font-size: 22px;
+
+    .ag-header-cell-sortable .ag-header-cell-label {
+        cursor: pointer;
+        font-weight: bold;
+        font-size: 16px;
+    }
+
+}

projects/saas-ui/src/app/main/components/lead-list/lead-list.component.ts

@@ -23,7 +23,12 @@ import {HttpClient} from '@angular/common/http';
 export class LeadListComponent extends RouteComponentBaseDirective {
   // defining column names here
   colDefs: ColDef[] = [
-    {field: 'firstName', width: 250, minWidth: 20},
+    {
+      field: 'firstName',
+      width: 250,
+      minWidth: 20,
+      headerClass: 'header-bold',
+    },
     {field: 'lastName', width: 250, minWidth: 20},
     {field: 'companyName', width: 250, minWidth: 20},
     {field: 'email', width: 300, minWidth: 20},

projects/saas-ui/src/app/main/components/manage-plans/manage-plans.component.html

@@ -6,6 +6,7 @@ <h2 class="heading">Manage Plan</h2>
         <div class="regbtn">
           <button
             nbButton
+            class="btn-danger"
             size="medium"
             status="basic"
             (click)="showManagePlan()"

projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.html

@@ -7,8 +7,8 @@ <h2 class="heading">Onboarded Tenant List</h2>
         <div class="regbtn">
           <button
             nbButton
+            class="btn-danger"
             size="medium"
-            status="danger"
             (click)="registerTenantPage()"
           >
             Add tenant

projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.scss

@@ -1,3 +1,4 @@
+
 @use '../../styles/grid-styles.scss' as *;
 
 .ag-theme-alpine {
@@ -12,7 +13,12 @@
   align-items: center;
 }
 
-.a {
+a {
+  text-decoration: none;
+  color: #19a5ff;
+}
+
+.ag-cell-value a{
   text-decoration: none;
   color: #19a5ff;
 }

projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.ts

@@ -242,9 +242,10 @@ export class OnboardingTenantListComponent extends RouteComponentBaseDirective {
       '//',
       `//${params.data?.key}.`,
     );
-    return `<a href="${url}" target="_blank" class="company-link">
-      ${params.value}
-    </a>`;
+    return `<a href="${url}" target="_blank" 
+    style="color: #007bff; text-decoration: none;">
+   ${params.value}
+ </a>`;
   }
 
   registerTenantPage() {

projects/saas-ui/src/app/main/components/tenant-registration/tenant-registration.component.html

@@ -306,26 +306,35 @@ <h3>Subscription Plan</h3>
                 <div class="plan-card-wrapper">
                   <nb-card
                     class="plan-card-box"
-                    accent="danger"
                     *ngFor="let plan of subscriptionPlans"
                   >
                     <nb-card-header class="plan-card-header">
                       <h5>{{ plan.name }}</h5>
+                      <nb-icon
+                        class="edit-icon"
+                        icon="file-text-outline"
+                        pack="eva"
+                        size="large"
+                      ></nb-icon>
                     </nb-card-header>
                     <nb-card-body class="plan-card-body">
                       <p class="plan-description">{{ plan.description }}</p>
                       <p class="plan-price" *ngIf="plan.tier || plan.size">
                         {{ plan.tier }}
                         <ng-container *ngIf="plan.size">
                           <nb-tag
+                            class="size-tag-wrapper"
                             *ngIf="plan.size"
                             status="basic"
                             appearance="filled"
                             text="{{ plan.size }}"
                           ></nb-tag>
                         </ng-container>
                       </p>
-                      <p class="plan-price">${{ plan.price }}</p>
+                      <p class="numeric-plan-price">
+                        <span class="doller-wrapper">$</span>
+                        {{ plan.price }}
+                      </p>
                     </nb-card-body>
                     <nb-card-footer class="plan-card-footer">
                       <label class="plan-radio">
@@ -347,17 +356,17 @@ <h5>{{ plan.name }}</h5>
                 <div class="btn regbtn">
                   <button
                     nbButton
+                    class="btn-danger"
                     size="medium"
-                    status="danger"
                     (click)="backToPriviousPage()"
                   >
                     Cancel
                   </button>
 
                   <button
                     nbButton
+                    class="btn-danger"
                     size="medium"
-                    status="danger"
                     [disabled]="!tenantRegForm.valid"
                     type="submit"
                   >