Issue #ED-1204 merge: Merge pull request #8551 from sri-pusuluri/ED-1…

…204-v2

Issue #ED-1204 fix:Radio Button and UI text are broken on sync teleme…

src/app/client/src/app/modules/shared/components/network-status/network-status.component.html

@@ -1,6 +1,6 @@
 <!--Online/Offline-->
 <div>
-  <div class="status-container p-8 mr-16 mb-16" *ngIf="isConnected">
+  <div class="status-container p-8 mr-16 my-16" *ngIf="isConnected">
     <div class="d-flex flex-ai-center flex-jc-center">
       <div class="status-container__icon mr-8">
         <img height="37px" src="assets/images/Online.svg" width="24px">
@@ -10,7 +10,7 @@
     </div>
   </div>
 
-  <div class="status-container p-8 mr-16 mb-16" *ngIf="!isConnected">
+  <div class="status-container p-8 mr-16 my-16" *ngIf="!isConnected">
     <div class="d-flex flex-ai-center flex-jc-center">
       <div class="status-container__icon mr-8">
         <img height="37px" src="assets/images/Offline.svg" width="24px">

src/app/client/src/assets/styles/components/_checkbox.scss

@@ -3,14 +3,14 @@
 // Checkbox
 $sb-checkbox-primary-background: var(--primary-color);
 $sb-radio-btn-primary-border: var(--primary-color);
-$sb-checkbox-border-width: calculateRem(1px);
+$sb-checkbox-border-width: 0.0625rem;
 $sb-checkbox-label-font-size: 0.8571rem;
-$sb-checkbox-border-radius: calculateRem(4px);
+$sb-checkbox-border-radius: 0.0625rem;
 $sb-checkbox-after-checked-color: var(--white);
 $sb-checkbox-before-checked-background-color: var(--white);
 
 // Radio buttons
-$sb-radio-btn-border: calculateRem(1px); //width of the border
+$sb-radio-btn-border: 0.0625rem;
 $sb-radio-btn-border-radius: 100%;
 $sb-radio-btn-disabled-opacity: 0.5;
 $sb-radio-btn-border-color: var(--primary-300);
@@ -24,21 +24,21 @@ $sb-radio-btn-border-disabled-color: var(--gray-100);
   backface-visibility: hidden;
   outline: 0;
   font-style: normal;
-  line-height: calculateRem(16px);
-  min-height: calculateRem(16px);
-  min-width: calculateRem(16px);
+  line-height: 1rem;
+  min-height: 1rem;
+  min-width: 1rem;
 
   label {
     cursor: pointer;
     position: relative;
     display: block;
-    padding-left: calculateRem(24px);
+    padding-left: 1.5rem;
     outline: 0;
     font-size: $sb-checkbox-label-font-size;
     font-weight: normal;
     margin-right: $base-block-space;
     html[dir='rtl'] & {
-      padding-right: calculateRem(24px);
+      padding-right: 1.5rem;
       padding-left: 0;
       margin-left: $base-block-space;
       margin-right: 0;
@@ -54,8 +54,8 @@ $sb-radio-btn-border-disabled-color: var(--gray-100);
       right: 0;
       left:inherit;
       }
-    width: calculateRem(16px);
-    height: calculateRem(16px);
+    width: 1rem;
+    height: 1rem;
     background: $sb-checkbox-before-checked-background-color;
     transition: border .1s ease, opacity .1s ease, transform .1s ease, box-shadow .1s ease, -webkit-transform .1s cubic-bezier(0.25, 0.1, 0.43, 0.82);
     border: $sb-checkbox-border-width solid $sb-radio-btn-border-color;
@@ -73,8 +73,8 @@ $sb-radio-btn-border-disabled-color: var(--gray-100);
     }
     opacity: 0;
     z-index: 3;
-    width: calculateRem(16px);
-    height: calculateRem(16px);
+    width: 1rem;
+    height: 1rem;
   }
 
   [disabled="disabled"]+label,
@@ -102,7 +102,7 @@ $sb-radio-btn-border-disabled-color: var(--gray-100);
         color: var(--primary-color);
       }
       label {
-        padding: 0 calculateRem(24px) 0 0;
+        padding: 0 1.5rem 0 0;
         margin-right: 0;
       }
       label:before, input:checked~label:before, input:checked~label:after {
@@ -131,8 +131,8 @@ $sb-radio-btn-border-disabled-color: var(--gray-100);
       right: 0;
       left:inherit;
       }
-    width: calculateRem(16px);
-    height: calculateRem(16px);
+    width: 1rem;
+    height: 1rem;
     text-align: center;
     opacity: 0;
     color: $sb-checkbox-after-checked-color;
@@ -162,7 +162,7 @@ $sb-radio-btn-border-disabled-color: var(--gray-100);
 
   &.sb-radio-btn-primary {
     label:before {
-      border: calculateRem(1px) solid $sb-radio-btn-primary-border;
+      border: 0.0625rem solid $sb-radio-btn-primary-border;
     }
 
     input:checked~label:after {
@@ -177,8 +177,8 @@ $sb-radio-btn-border-disabled-color: var(--gray-100);
 
   label:after {
     position: absolute;
-    left: $base-block-space/2;
-    top: $base-block-space/2;
+    left: 0.25rem;
+    top: 0.25rem;
     border-radius: 50%;
     height: $base-block-space;
     width: $base-block-space;
@@ -193,13 +193,13 @@ $sb-radio-btn-border-disabled-color: var(--gray-100);
 }
 
 .ui.checkbox {
-  font-size:calculateRem(14px);
+  font-size:0.875rem;
 }
 
 [dir="rtl"] {
   .sb-radio-btn-checkbox label {
     padding-left: 0;
-    padding-right: calculateRem(24px);
+    padding-right: 1.5rem;
 
     &::before {
       left: unset;
@@ -208,7 +208,7 @@ $sb-radio-btn-border-disabled-color: var(--gray-100);
 
     &::after {
       left: unset;
-      right: calculateRem(4px);
+      right: 0.25rem;
     }
   }
 }

src/app/client/src/assets/styles/components/_collection-tree.scss

@@ -2,9 +2,9 @@
 @use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
 @use "~@project-sunbird/sb-styles/assets/varSass" as *;
 // TOC or Collection Tree
-$sb-collectionTree-border-radius: ($base-block-space / 2);
+$sb-collectionTree-border-radius: 0.25rem;
 $sb-collectionTree-border: calculateRem(1px) solid var(--primary-200);
-$sb-collectionTree-padding: ($base-block-space * 2);
+$sb-collectionTree-padding: 1rem;
 $sb-collectionTree-margin: $base-block-space 0 0 0;
 $sb-collectionTree-background-color: var(--white);
 $sb-collectionTree-title-color: var(--gray-800);
@@ -43,8 +43,7 @@ $sb-fancyTree-inprogress-list-item-icon-color: var(--primary-color);
 $sb-fancyTree-disabled-list-item-icon-color: var(--gray-100);
 $sb-fancyTree-list-item-title-padding: 0 ($base-block-space);
 $sb-fancyTree-list-item-title-font-size: $h6-font-size;
-$sb-fancyTree-list-item-title-commingSoonMessage-spacing: 0
-  ($base-block-space / 2);
+$sb-fancyTree-list-item-title-commingSoonMessage-spacing: 0 0.25rem;
 
 .sb-collectionTree {
   width: 100%;

src/app/client/src/assets/styles/components/_form.scss

@@ -75,7 +75,7 @@ $sb-selection-line-height: calculateRem(18px);
     font-size: calculateRem(12px);
     width: 100%;
     min-height: $sb-selection-dropdown-min-height;
-    padding: ($base-block-space / 2) ($base-block-space * 1);
+    padding: 0.25rem 0.25rem;
     border-color: var(--gray-200);
     display: flex;
     align-items: center;

src/desktop/loading/style.css

@@ -16,8 +16,8 @@
  }
  .sb-loader:after {
   content: '';
-  width: $base-block-space * 4;
-  height: $base-block-space * 4;
+  width: 2rem;
+  height: 2rem;
   border-radius: 50%;
   border: 2px solid;
   border-color: $teal $teal transparent;