Issue#SH-154 UI - Creation of Managed User Accounts (MUA) by logged in User...

Issue#SH-154 UI - Creation of Managed User Accounts (MUA)  by logged in User accounts (LIUA) - Portal & App

src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html

@@ -5,57 +5,78 @@
   </div>
   ​
   <form class="sb-form my-16">
-    <div class="sb-field">
-      <label class="font-weight-normal">Name<span>*</span></label>
-      <input class="sb-form-control" type="text" placeholder="Enter user name">
+    <div class="ui stackable grid m-0">
+
+      <div class="twelve wide column p-0">
+        <div class="fields-selection p-0">
+          <div class="sb-field field-focus mb-8">
+        <input class="sb-form-control selection fields-dropdown ui dropdown" type="text" placeholder="Enter user name">
+        <label class="font-weight-normal">Name<span>*</span></label>
+      </div>
+      </div>
     </div>
-    <div class="d-flex flex-jc-space-between">
-      <div class="sb-field my-8 w-50">
-        <label class="font-weight-normal">Board:</label>
-<!--        <sui-select class="selection" name="state" labelField="name" placeholder="Select State">
-          <sui-select-option *ngFor="let state of states" [value]="state"></sui-select-option>
-        </sui-select>-->
+
+      <div class="six wide column p-0">
+        <div class="fields-selection p-0">
+          <div class="sb-field field-focus my-8">
+            <!-- <sui-select class="selection fields-dropdown" name="state" labelField="name" placeholder="Select State">
+              <sui-select-option *ngFor="let state of states" [value]="state"></sui-select-option>
+            </sui-select> -->
+            <label class="font-weight-normal">Board</label>
+          </div>
+        </div>
       </div>
 
-      <div class="sb-field my-8 ml-16 w-50">
-        <label class="font-weight-normal">Medium:</label>
-        <div class="sb-field">
-<!--          <sui-multi-select class="selection" name="district" labelField="name" placeholder="Select district">
-            <sui-select-option *ngFor="let district of districts" [value]="district"></sui-select-option>
-          </sui-multi-select>-->
+      <div class="six wide column p-0">
+        <div class="fields-selection p-0">
+          <div class="sb-field field-focus my-8 onboard-content">
+            <!-- <sui-multi-select class="selection fields-dropdown" name="district" labelField="name"
+              placeholder="Select district">
+              <sui-select-option *ngFor="let district of districts" [value]="district"></sui-select-option>
+            </sui-multi-select> -->
+            <label class="font-weight-normal">Medium</label>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="sb-field mb-16">
-      <label class="font-weight-normal">Class:</label>
-      <div class="sb-field">
-<!--        <sui-multi-select class="selection" name="district" labelField="name" placeholder="Select district">
-          <sui-select-option *ngFor="let district of districts" [value]="district"></sui-select-option>
-        </sui-multi-select>-->
+
+      <div class="twelve wide column p-0">
+        <div class="fields-selection p-0">
+          <div class="sb-field field-focus mt-8 mb-16">
+            <!-- <sui-multi-select class="selection fields-dropdown" name="district" labelField="name"
+              placeholder="Select district">
+              <sui-select-option *ngFor="let district of districts" [value]="district"></sui-select-option>
+            </sui-multi-select> -->
+            <label class="font-weight-normal">Class</label>
+          </div>
+        </div>
       </div>
-    </div>
 
-    <div class="fields-selection d-flex flex-jc-space-between w-100">
-      <div class="sb-field field-focus w-50">
-<!--        <select class="ui dropdown selection fields-dropdown" [(ngModel)]="selectState">
-          <option [ngValue]="option" *ngFor="let option of selectStateOption" [value]="option">{{option?.name}}
-          </option>
-        </select>-->
-        <label class="d-flex font-weight-normal">State</label>
+      <div class="six wide column p-0">
+        <div class="fields-selection p-0">
+          <div class="sb-field field-focus">
+            <!-- <select class="ui dropdown selection fields-dropdown" [(ngModel)]="selectState">
+              <option [ngValue]="option" *ngFor="let option of selectStateOption" [value]="option">{{option?.name}}
+              </option>
+            </select> -->
+            <label class="d-flex font-weight-normal">State</label>
+          </div>
+        </div>
       </div>
-      <div class="sb-field field-focus onboard-content w-50 ml-16">
-<!--        <select class="ui dropdown selection fields-dropdown" name="district" labelField="name"
-                placeholder="Select district">
-          <option [ngValue]="district" *ngFor="let district of districts" [value]="district">{{district?.name}}
-          </option>
-        </select>-->
-        <label class="d-flex font-weight-normal">District</label>
+      <div class="six wide column p-0">
+        <div class="fields-selection p-0">
+          <div class="sb-field field-focus onboard-content">
+            <!-- <select class="ui dropdown selection fields-dropdown" name="district" labelField="name"
+              placeholder="Select district">
+              <option [ngValue]="district" *ngFor="let district of districts" [value]="district">{{district?.name}}
+              </option>
+            </select> -->
+            <label class="d-flex font-weight-normal">District</label>
+          </div>
+        </div>
       </div>
     </div>
-
   </form>
 
-  ​
   <div class="required sb-checkbox sb-checkbox-primary sb-field">
     <input type="checkbox" role="checkbox" name="checkbox">
     <label class="fsmall mx-8 font-weight-normal">I understand and accept the

src/app/client/src/app/plugins/profile/components/create-user/create-user.component.scss

@@ -27,11 +27,6 @@
 :host {
   .fields-selection {
     display: flex;
-    flex-direction: column;
-
-    @include respond-above(sm) {
-      flex-direction: row;
-    }
 
     .sb-field .ui.selection.active.dropdown {
       border-color: #96c8da;
@@ -45,23 +40,13 @@
       margin-bottom: calculateRem(16px) 0px;
       width: 100%;
 
+      @include respond-below(sm) {}
+
       label {
         font-size: 14px;
       }
     }
 
-    .onboard-content {
-      @include respond-above(sm) {
-        margin-left: 2rem;
-        html[dir="rtl"] & {
-          margin-right: 2rem;
-        }
-      }
-    }
-
-    .textColorChange {
-      color: #0076FE;
-    }
   }
 }
 
@@ -71,26 +56,6 @@
   align-items: flex-start;
 }
 
-.ui.selection.dropdown.fields-dropdown {
-  height: 2rem !important;
-
-  &:focus {
-    border: calculateRem(1px) solid #0076FE;
-    color: #0076FE !important;
-  }
-}
-
-.ui.selection.dropdown.fields-dropdown:focus ~ label {
-  border: 0px;
-  color: #0076FE;
-  font-weight: normal;
-}
-
-.ui.selection.dropdown.fields-dropdown option {
-  background: var(--white);
-  color: var(--black);
-}
-
 .sb-profile-btn {
   border-radius: 40px;
 }

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

@@ -96,3 +96,35 @@
      float:right;
     }
   }
+
+  .sb-form{
+    .ui.selection.dropdown.fields-dropdown {
+       min-height: 2rem !important;
+        &:focus{
+            border: calculateRem(1px) solid #0076FE;  
+            color:#0076FE !important;
+        }
+      }
+      
+      .ui.selection.dropdown.fields-dropdown:focus~label {
+        border: 0px;
+        color: #0076FE;
+        font-weight: normal;
+      }
+      
+      .ui.selection.dropdown.fields-dropdown option{
+      background: var(--white);
+      color:var(--black);
+      }
+      
+  .onboard-content {
+    margin-left: 0;
+    @include respond-above(sm) {
+      margin-left:1rem ;
+      html[dir="rtl"] & {
+        margin-left:0 ;
+        margin-right:1rem ;
+      }
+    }
+  }
+}
\ No newline at end of file