feat(arc-saas): uI design changes

UI design changes

GH-87

Author: Deepika516

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

@@ -176,8 +176,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 +271,6 @@ ul {
     color: #007bff;
     font-size: 18px;
     z-index: 1;
+    margin-right:10px;
   }
 }

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/onboarding-tenant-list/onboarding-tenant-list.component.scss

@@ -1,17 +1,23 @@
+
 @use '../../styles/grid-styles.scss' as *;
 
 .ag-theme-quartz {
   width: 100%;
   height: 400;
 }
 
-.header-wrapper{
+.header-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-.a {
+a {
+  text-decoration: none;
+  color: #19a5ff;
+}
+
+.ag-cell-value a{
   text-decoration: none;
   color: #19a5ff;
 }
@@ -41,11 +47,19 @@
 }
 
 @-webkit-keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }

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

@@ -148,9 +148,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>`;
   }
 
   getTotal() {

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">

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

@@ -18,6 +18,41 @@
   }
 }
 
+.card-row {
+  .sign-in-title {
+    p {
+      font-size: 16px;
+      margin: 0 0 15px 0 !important;
+      .size-tag-wrapper{
+        font-weight: 500;
+    font-size: 13px;
+    border: 1px solid #ded5d5;
+    padding: 2px 12px;
+    margin-left: 5px;
+      }
+    }
+
+   h2 {
+      font-size: 34px;
+      font-weight: 700;
+      margin: 50px 0 10px 0;
+   }
+    .plan-price{
+      color: #535050;
+      font-size: 15px;
+      gap: 4px;
+      align-items: center;
+      display: flex;
+    }
+    .numeric-plan-price{
+      color: #535050;
+      font-size: 20px;
+      gap: 4px;
+      align-items: center;
+      display: flex;
+    }
+  }
+}
 .info-icon {
   margin-left: 8px;
   cursor: pointer;
@@ -35,31 +70,46 @@
       border: 1px solid #dcdcdc;
     }
   }
+  .input-title{
+    span {
+      font-size: 15px;
+      font-weight: 500;  
+  }
+  margin-bottom: 5px !important;
+  } 
+
 }
-.input-box{
-  .input{
-    .payment-comment-box{
+
+
+.input-box {
+  .input {
+    .payment-comment-box {
       min-width: 100%;
       border: 1px solid #dcdcdc;
-     }     
+    }
   }
 }
 
-.input-wrapper{
-  .input-box{
-    .select{
-      .dropdown-wrapper{
+.input-wrapper {
+  .input-box {
+    .select {
+      .dropdown-wrapper {
         min-width: 100%;
         margin-top: 5px;
         border: 1px solid #dcdcdc;
-    border-radius: 3px;
+        border-radius: 3px;
       }
     }
   }
 }
 
-nb-select{
-  .select-button{
+.card-row{
+  border-radius: 16px;
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 
+  }
+
+nb-select {
+  .select-button {
     height: 46px !important;
     margin-top: 5px !important;
   }
@@ -81,8 +131,6 @@ nb-select{
   }
 }
 
-
-
 .error-msg {
   color: red;
   font-size: 14px;
@@ -140,7 +188,7 @@ input.ng-invalid.ng-touched {
     gap: 20px;
 
     .plan-card-box {
-      min-width: 23%;
+      min-width: 32%;
       justify-content: space-between;
     }
   }
@@ -234,6 +282,10 @@ input[nbInput] {
   color: #007bff;
 }
 
+.doller-wrapper{
+  color: #f00a19;
+  font-size: 16px;
+}
 // testing design card
 .plan-card-container {
   display: flex;
@@ -260,7 +312,7 @@ input[nbInput] {
 
 .plan-card-box {
   width: 300px;
-  border-radius: 8px;
+  border-radius: 18px;
   overflow: hidden;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
@@ -271,14 +323,23 @@ input[nbInput] {
   }
 
   .plan-card-header {
-    background: #e85b7b26;
+    background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgb(234 81 116));
     color: #fff;
     padding: 15px;
-    text-align: center;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
     h5 {
       font-size: 1.25em;
       margin: 0;
+      display: inline-block;
+    width: 95%;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    font-size: 16px;
     }
   }
 
@@ -294,6 +355,8 @@ input[nbInput] {
     .plan-price {
       font-size: 1.5em;
       font-weight: bold;
+      font-size: 20px;
+    color: #535050;
     }
   }
 
@@ -334,9 +397,9 @@ input[nbInput] {
         }
       }
 
-      input[type='radio']:checked+.radio-checkmark::after {
+      input[type='radio']:checked + .radio-checkmark::after {
         opacity: 1;
       }
     }
   }
-}
+}

projects/saas-ui/src/app/main/main.component.scss

@@ -16,6 +16,7 @@
   .column-wrapper {
     height: calc(100vh - 100px);
     overflow: hidden;
+    padding:15px !important;
   }
   .logo-container {
     display: flex;

projects/saas-ui/src/app/main/styles/grid-styles.scss

@@ -9,15 +9,27 @@
   justify-content: center;
   display: flex;
   width: 100%;
+  border-radius:16px;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }
 .card-style {
   width: 100%;
   overflow: auto;
   height: calc(100vh - 120px);
+  border-radius: 15px;
 }
 .ag-theme-quartz {
   width: 100%;
   height: 650px;
+  --ag-font-family:  sans-serif;
+  --ag-font-size: 16px;
+  .ag-header {
+    font-family: cursive;
+}
+.ag-header-group-cell {
+  font-weight: bold;
+  font-size: 22px;
+}
 }
 
 .regbtn {

projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.html

@@ -1,4 +1,4 @@
-<nb-card class="h-100 card-row">
+<nb-card class="card-row">
   <nb-card-body class="m-0">
     <div class="main-wrapper add-lead-wrapper">
       <div>
@@ -215,6 +215,9 @@ <h3>Signup to ARC-SaaS</h3>
 
           <!-- signup button -->
           <div class="btn">
+            <button nbButton size="medium" status="danger" (click)="onCancel()">
+              Cancel
+            </button>
             <button
               nbButton
               size="medium"