fix(arc-saas): changes in UI designs

changes in UI designs

Author: Deepika516

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

@@ -227,16 +227,16 @@ <h3>Plan Configuration</h3>
             <button
               nbButton
               size="medium"
-              status="danger"
+              class="btn-danger"
               (click)="cancelEdit()"
             >
               Cancel
             </button>
-            
+
             <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 {

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/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,20 +7,15 @@ <h2 class="heading">Onboarded Tenant List</h2>
         <div class="regbtn">
           <button
             nbButton
+            class="btn-danger"
             size="medium"
-            status="danger"
             (click)="registerTenantPage()"
           >
             Add tenant
           </button>
         </div>
       </div>
 
-      <!-- loader -->
-      <!-- <div *ngIf="loading" class="loader-overlay">
-        <div class="loader"></div>
-      </div> -->
-
       <!-- ag-grid -->
       <div class="grid">
         <ag-grid-angular

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

@@ -356,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"
                   >

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

@@ -26,7 +26,7 @@
       .size-tag-wrapper{
         font-weight: 500;
     font-size: 13px;
-    border: 1px solid #ded5d5;
+    border: 1px solid #000;
     padding: 2px 12px;
     margin-left: 5px;
       }
@@ -157,6 +157,18 @@ input.ng-invalid.ng-touched {
   }
 }
 
+.btn {
+  text-align: right;
+  // for testing purpose
+  .btn-danger{
+    background-color: #f00a18 !important;
+    color: white !important;
+  }
+   // for testing purpose
+}
+
+
+
 .address-input-box {
   width: 100%;
 }
@@ -323,7 +335,9 @@ input[nbInput] {
   }
 
   .plan-card-header {
-    background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgb(234 81 116));
+    // background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgb(234 81 116));
+    background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgb(240 10 24));
+
     color: #fff;
     padding: 15px;
     text-align: left;
@@ -341,6 +355,9 @@ input[nbInput] {
     text-overflow: ellipsis;
     font-size: 16px;
     }
+    .edit-icon{
+      color: #000;
+    }
   }
 
   s .plan-card-body {

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

@@ -3,10 +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;
+  --menu-item-active-text-color: #ef0b16;
+  --menu-item-icon-active-color: #ef0b16;
+  --menu-item-hover-text-color: #ef0b16;
+  --menu-item-icon-hover-color: #ef0b16;
   .nav-container {
     display: flex;
     justify-content: space-between;
@@ -43,7 +43,8 @@
         .menu-item {
           a {
             &.active {
-              color: red !important;
+              // color: red !important;
+              color:  #f00a18 ;
             }
           }
         }

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

@@ -37,9 +37,9 @@
   text-align: right;
   button {
     min-width: 200px;
-    &:hover {
-      background-color: #ff3d71;
-      color: white;
+    .btn-danger{
+      background-color: #f00a18 !important;
+      color: white !important;
     }
   }
 }

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

@@ -215,13 +215,18 @@ <h3>Signup to ARC-SaaS</h3>
 
           <!-- signup button -->
           <div class="btn">
-            <button nbButton size="medium" status="danger" (click)="onCancel()">
+            <button
+              nbButton
+              size="medium"
+              class="btn-danger"
+              (click)="onCancel()"
+            >
               Cancel
             </button>
             <button
               nbButton
               size="medium"
-              status="danger"
+              class="btn-danger"
               [disabled]="!addLeadForm.valid"
               type="submit"
             >