Issue #SH-102 UI fixes (#4101)

* Issue:SH-43 and SH-62 Register Page - add age validation

* Issue:SH-102 UI fixes

* en json file merge issue

* Issue:SH-102 UI fixes

* Issue:SH-102 UI fixes

* Issue:SH-102 UI fixes

Co-authored-by: Srinivasan <srinivasan@Admins-MacBook-Pro.local>

src/app/client/src/app/modules/core/components/main-menu/main-menu.component.html

@@ -12,7 +12,7 @@
 		</a>
 		<a class="item py-8 pl-0 pr-24" [class.active]="router.isActive('/groups')"
 			appTelemetryInteract [telemetryInteractEdata]="groupsMenuIntractEdata" routerLink="/groups">
-			{{resourceService?.frmelmnts?.tab?.mygroups}}
+			{{resourceService?.frmelmnts?.tab?.mygroups}} <sup class="sb-color-tertiary pt-4">*</sup>
 		</a>
 		<a *ngIf="showContributeTab" class="item py-8 pl-0 pr-24" [class.active]="router.isActive('/contribute')"
 			routerLink="/contribute" appTelemetryInteract [telemetryInteractEdata]="contributeMenuEdata"
@@ -54,7 +54,7 @@
 			[class.active]="router.isActive('/explore-groups', true)"
 			*ngIf="!router.isActive('', true)" [routerLink]="['/explore-groups']"
 			appTelemetryInteract [telemetryInteractEdata]="groupsMenuIntractEdata">
-			{{resourceService?.frmelmnts?.tab?.mygroups}}
+			{{resourceService?.frmelmnts?.tab?.mygroups}} <sup class="sb-color-tertiary pt-4">*</sup>
 		</a>
 		<span class="item divider">|</span>
 		<a class="item font-weight-bold sb-color-primary pr-0" href={{hrefPath}} appTelemetryInteract
@@ -84,7 +84,7 @@
 			<a class="item" [class.active]="router.isActive('/groups')"
 				(click)="showSideBar()" appTelemetryInteract [telemetryInteractEdata]="groupsMenuIntractEdata"
 				routerLink="/groups">
-				{{resourceService?.frmelmnts?.tab?.mygroups}}
+				{{resourceService?.frmelmnts?.tab?.mygroups}} <sup class="sb-color-tertiary pt-4">*</sup>
 			</a>
 			<a class="item" [class.active]="router.isActive('/search/Library') || router.isActive('/resources')"
 				(click)="showSideBar()" appTelemetryInteract [telemetryInteractEdata]="libraryMenuIntractEdata"
@@ -129,7 +129,7 @@
 				[class.active]="router.isActive('/explore-groups')"
 				[routerLink]="['/explore-groups']" (click)="showSideBar()"
 				*ngIf="!router.isActive('', true)">
-				{{resourceService?.frmelmnts?.tab?.mygroups}}
+				{{resourceService?.frmelmnts?.tab?.mygroups}} <sup class="sb-color-tertiary pt-4">*</sup>
 			</a>
 			<a class="item"
 				[class.active]="router.isActive('/search/explore') || router.isActive('explore')"				

src/app/client/src/app/modules/groups/components/add-member/add-member.component.html

@@ -24,7 +24,7 @@
     </div>
      <div class="sb-field">
       <label for="id">Member ID</label>
-      <input type="id" name="id" class="sb-form-control mb-8 is-invalid" placeholder="Enter member ID">
+      <input type="id" name="id" class="sb-form-control is-invalid" placeholder="Enter member ID">
       <small class="message sb-color-error font-weight-bold">Invalid member ID</small>
     </div>
     <button type="button" class="sb-btn sb-btn-primary sb-btn-normal sb-btn-md mt-16 w-100">
@@ -39,7 +39,7 @@
     </div>
      <div class="sb-field">
         <label for="id">Member ID</label>
-        <input type="id" name="id" class="sb-form-control mb-8 is-invalid" placeholder="Enter member ID">
+        <input type="id" name="id" class="sb-form-control is-invalid" placeholder="Enter member ID">
       <small class="message sb-color-error font-weight-bold hide">Invalid member ID</small>
     </div>
     <div class="d-flex flex-jc-center flex-ai-center add-member-content py-24">

src/app/client/src/app/modules/groups/components/create-group/create-group.component.html

@@ -25,10 +25,9 @@
         <!--  grouplist from CC-->
 
         <!-- sb-pageSection, sb-grid section demo purpose  grouplist -->
-        <div class="sb-pageSection">
-          <div class="sb-pageSection-header pt-24">
-            <h4 class="sb-pageSection-title m-0 mr-5">My Groups</h4>
-            <span class="sb-pageSection-count">12</span>
+        <div class="section-header mt-24 mb-16">
+          <div class="section-header__title">
+            <i class="icon-svg icon-svg--sm mr-4"><svg class="icon"><use xlink:href="assets/common-consumption/images/sprite.svg#book"></use></svg></i> My Groups<span class="badge">25</span>
           </div>
         </div>
         <div class="sbgrid">

src/app/client/src/app/modules/groups/components/create-group/create-group.component.scss

 @import"variables";
 @import 'mixins/mixins';
 
+.section-header {
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+  align-items: center;
+  &__title {
+  font-family: inherit;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: 1;
+  height: 1.5rem;
+  color: var(--primary-color);
+  font-size: 1.125rem;
+  font-weight: 700;
+  text-transform: capitalize;
+  line-height: 1.625rem;
+  display: flex;
+  align-items: center;
+  .badge {
+      display: inline-block;
+      background: #d4d3d3;
+      color: var(--gray-800);
+      text-align: center;
+      padding: 0 .75rem;
+      border-radius: .25rem;
+      height: 1.5rem;
+      line-height: 1.5rem;
+      font-size: 1rem;
+      font-weight: 400;
+      margin-left:8px;
+      html[dir="rtl"] & {
+          margin-right:8px;
+          margin-left: inherit;
+      }
+  }
+  }
+  
+}
+
 .create-group-container {
   max-width: 420px;
   width:100%;

src/app/client/src/app/modules/groups/components/group-header/group-header.component.html

@@ -4,7 +4,7 @@
     <div class="ui container py-8">
       <button type="button" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0">
         <i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
-            <use xlink:href="./assets/images/libdemo/sprite.svg#arrow-long-left"></use>
+            <use xlink:href="./assets/images/sprite.svg#arrow-long-left"></use>
           </svg></i> Back</button>
     </div>
   </div>
@@ -18,22 +18,11 @@
           </div>
         </div>
         <div class="d-flex flex-ai-end flex-w-wrap content-header__buttons">
-          <button class="sb-btn sb-btn-outline-error sb-left-icon-btn sb-btn-normal flex-ai-jc-center mr-8" 
-          (click)="showDeleteModal = !showDeleteModal">
-            <i class="icon-svg icon-svg--xs icon-delete mr-4">
-            <svg class="icon icon-svg--red">
-              <use xlink:href="./assets/images/libdemo/sprite.svg#delete"></use>
-            </svg></i> Delete</button>
-          <button type="button" class="sb-btn sb-btn-outline-primary sb-left-icon-btn sb-btn-normal mr-8 flex-ai-jc-center"
-          (click)="showPastMemberModal = !showPastMemberModal">
-            <i class="icon-svg icon-svg--xs icon-members mr-4">
-            <svg class="icon icon-svg--primary">
-              <use xlink:href="./assets/images/libdemo/sprite.svg#members"></use>
-            </svg></i> Show Past members</button>
-          <button class="sb-btn sb-btn-primary sb-btn-normal sb-left-icon-btn flex-ai-jc-center"><i class="icon-svg icon-svg--xs icon-edit mr-4">
-            <svg class="icon icon-svg--white">
-              <use xlink:href="./assets/images/libdemo/sprite.svg#edit"></use>
-            </svg></i> Edit</button>
+          <button class="sb-btn sb-btn-outline-error sb-left-icon-btn sb-btn-normal flex-ai-jc-center mr-8">
+            <img src="./assets/images/icon_delete.svg" class="mr-4" width="16" /> Delete</button>
+          <button type="button" class="sb-btn sb-btn-outline-primary sb-left-icon-btn sb-btn-normal mr-8 flex-ai-jc-center">
+          <img src="./assets/images/icon_members.svg" class="mr-4" width="16" /> Show Past members</button>
+          <button class="sb-btn sb-btn-primary sb-btn-normal sb-left-icon-btn flex-ai-jc-center"><img  width="16"  class="mr-4" src="./assets/images/icon_edit.svg" /> Edit</button>
         </div>
       </div>
     </div>

src/app/client/src/app/modules/groups/components/group-workspace/group-workspace.component.html

 <app-group-header></app-group-header>
 
 <!-- all lists shows members, courses -->
-<div class="ui container pb-24">
-  <div class="ui stackable grid m-0">
-    <div class="three wide column p-0">
-      <div class="flex-dc d-flex flex-jc-center p-24 sb-bg-color-white bs-3">
-        <app-add-member></app-add-member>
-      </div>
-    </div>
 
-    <div class="six wide column pt-0">
-      <!-- MembersList from CC -->
-      <div class="sb-pageSection">
-        <div class="sb-pageSection-header pt-24">
-          <h4 class="sb-pageSection-title m-0 mr-5">
-            Members
-          </h4>
-          <span class="sb-pageSection-count">25</span>
+
+<sui-tabset class="sb-tabs w-100">
+  <div class="ui pointing secondary menu sb-tabs__header p-0">
+    <div class="ui container">
+    <a class="item" suiTabHeader="1">Members</a>
+    <a class="item" suiTabHeader="2">Courses</a>
+  </div>
+  </div>
+
+  <div class="ui segment sb-tabs__content-container mt-0 pt-0 sb-bg-none" suiTabContent="1">
+    <div class="ui container pb-24">
+      <div class="ui stackable grid m-0">
+        <div class="nine wide column p-0 pr-16">
+          <div class="sb-search-box no-btn my-16">
+            <div class="input-div relative">
+              <i class="search icon"></i>
+              <input class="sb-search-input" type="text" placeholder="Search..." />
+              <i class="close icon"></i>
+            </div>
+            <button class="sb-btn sb-btn-normal">Search</button>
+          </div>
+          <div class="section-header mt-24 mb-16">
+            <div class="section-header__title">
+              <i class="icon-svg icon-svg--sm mr-4"><svg class="icon"><use xlink:href="assets/common-consumption/images/sprite.svg#book"></use></svg></i> Members<span class="badge">25</span>
+            </div>
+          </div>
+
+          <div class="no-result-container d-flex flex-dc flex-jc-center p-24 my-16">
+            <div class="d-flex flex-dc flex-jc-center flex-ai-center text-center">
+              <div class="no-result-container__icon">
+                <img src="./assets/images/no-text.svg" width="150px" height="125px">
+              </div>
+              <div class="mt-8 text-center no-result-container__para">
+                No member found</div>
+            </div>
+          </div>
+          <!-- Members List from cc -->
+          
+        </div>
+        <div class="three wide column p-0">
+          <div class="status-container flex-dc d-flex flex-jc-center p-24 sb-bg-color-white bs-3">
+            <app-add-member></app-add-member>
+          </div>
         </div>
       </div>
     </div>
 
-    <div class="three wide column p-0">
-      <!-- Courses List  from CC -->
+  </div>
+
+  <div class="ui segment sb-tabs__content-container  mt-0 pt-0 sb-bg-none" suiTabContent="2">
+    <div class="ui container">
+      <div class="sb-search-box no-btn my-16">
+        <div class="input-div relative">
+          <i class="search icon"></i>
+          <input class="sb-search-input" type="text" placeholder="Search..." />
+          <i class="close icon"></i>
+        </div>
+        <button class="sb-btn sb-btn-normal">Search</button>
+      </div>
+    <div class="section-header">
+      <div class="section-header__title">
+        <i class="icon-svg icon-svg--sm mr-4"><svg class="icon"><use xlink:href="assets/common-consumption/images/sprite.svg#book"></use></svg></i> Courses <span class="badge">25</span>
+      </div>
     </div>
   </div>
-</div>
+    <!-- Courses List  from CC -->
+  </div>
+
+</sui-tabset>

src/app/client/src/app/modules/groups/components/group-workspace/group-workspace.component.scss

 @import"variables";
 @import 'mixins/mixins';
+
+.section-header {
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    align-items: center;
+    &__title {
+    font-family: inherit;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 1;
+    height: 1.5rem;
+    color: var(--primary-color);
+    font-size: 1.125rem;
+    font-weight: 700;
+    text-transform: capitalize;
+    line-height: 1.625rem;
+    display: flex;
+    align-items: center;
+    .badge {
+        display: inline-block;
+        background: #d4d3d3;
+        color: var(--gray-800);
+        text-align: center;
+        padding: 0 .75rem;
+        border-radius: .25rem;
+        height: 1.5rem;
+        line-height: 1.5rem;
+        font-size: 1rem;
+        font-weight: 400;
+        margin-left:8px;
+        html[dir="rtl"] & {
+            margin-right:8px;
+            margin-left: inherit;
+        }
+    }
+    }
+    
+}
\ No newline at end of file

src/app/client/src/assets/images/icon_delete.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g id="Page-1">
+	<g id="Group-settings" transform="translate(-153.000000, -178.000000)">
+		<g id="Group-6" transform="translate(136.000000, 98.000000)">
+			<g id="delete-copy" transform="translate(17.000000, 80.000000)">
+				<path fill="#ff4558" id="Shape" d="M5.5,20.1c0,1.2,1,2.2,2.2,2.2h8.9c1.2,0,2.2-1,2.2-2.2V6.7H5.5V20.1L5.5,20.1z M19.9,3.4H16l-1.1-1.1H9.4
+					L8.3,3.4H4.4v2.2h15.6V3.4L19.9,3.4z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/app/client/src/assets/images/icon_edit.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g id="Page-1">
+	<g id="Group-settings" transform="translate(-152.000000, -114.000000)">
+		<g id="Group-6" transform="translate(136.000000, 98.000000)">
+			<g id="edit-details" transform="translate(16.000000, 16.000000)">
+				<path fill="#ffffff" id="Shape" d="M2,18.1v4.2h4.2L18.4,10l-4.2-4.2L2,18.1L2,18.1z M21.6,6.8c0.4-0.4,0.4-1.1,0-1.6L19,2.6
+					c-0.4-0.4-1.1-0.4-1.6,0l-2,2l4.2,4.2L21.6,6.8L21.6,6.8z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/app/client/src/assets/images/icon_leave_group.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>0F65280D-F094-4021-9133-080679133EB6hdpi/</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Assigned-mentor-view-settings" transform="translate(-196.000000, -122.000000)" fill="#FF4558">
+            <g id="Group-6-Copy" transform="translate(179.000000, 98.000000)">
+                <g id="leave-group" transform="translate(17.000000, 24.000000)">
+                    <path d="M10.09,15.59 L11.5,17 L16.5,12 L11.5,7 L10.09,8.41 L12.67,11 L3,11 L3,13 L12.67,13 L10.09,15.59 L10.09,15.59 Z M19,3 L5,3 C3.89,3 3,3.9 3,5 L3,9 L5,9 L5,5 L19,5 L19,19 L5,19 L5,15 L3,15 L3,19 C3,20.1 3.89,21 5,21 L19,21 C20.1,21 21,20.1 21,19 L21,5 C21,3.9 20.1,3 19,3 L19,3 Z" id="Shape"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/app/client/src/assets/images/icon_members.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g id="Page-1">
+	<g id="Group-settings" transform="translate(-153.000000, -146.000000)">
+		<g id="Group-6" transform="translate(136.000000, 98.000000)">
+			<g id="past-members" transform="translate(17.000000, 48.000000)">
+				<path id="Shape" fill="#024e9d" d="M16.5,12c1.4,0,2.5-1.1,2.5-2.5S17.9,7,16.5,7S14,8.1,14,9.5S15.1,12,16.5,12L16.5,12z M9,11
+					c1.7,0,3-1.3,3-3s-1.3-3-3-3S6,6.3,6,8S7.3,11,9,11L9,11z M16.5,14c-1.8,0-5.5,0.9-5.5,2.8V19h11v-2.2C22,14.9,18.3,14,16.5,14
+					L16.5,14z M9,13c-2.3,0-7,1.2-7,3.5V19h7v-2.2c0-0.9,0.3-2.3,2.4-3.5C10.5,13.1,9.7,13,9,13L9,13z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/app/client/src/assets/styles/base/_colors.scss

@@ -27,6 +27,9 @@ $colours: "gray-hs" var(--gray-hs), "gray" var(--gray), "gray-0" var(--gray-0),
 .sb-bg-white {
     background: $white;
 }
+.sb-bg-none {
+  background: none !important;
+}
 //to clean
 .color-3, .sb-text-gray-800 {
     color: $gray-800; 

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

@@ -178,6 +178,18 @@ $sb-label-status-indicator-error-background: $tertiary-color;
     border: none;
     height: auto;
 }
+.badge {
+    display: inline-block;
+    background: #d4d3d3;
+    color: var(--gray-800);
+    text-align: center;
+    padding: 0 .75rem;
+    border-radius: .25rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+    font-size: 1rem;
+    font-weight: 400;
+}
 .sb-section-title {
     font-size: $font-size-md;
     font-weight: 600;

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

+.ui.secondary.pointing.menu.sb-tabs__header {
+  height:56px;
+}
+.ui.secondary.pointing.menu.sb-tabs__header .item {
+  margin: 0 0 0px;
+}
+.ui.secondary.pointing.menu.sb-tabs__header .active.item, .ui.secondary.pointing.menu.sb-tabs__header .item:hover {
+  color: var(--primary-400);
+}
+
 .ui.secondary.pointing.menu .active.item,
 .ui.secondary.pointing.menu .active.item:hover {
     border-color: $sb-tabs-border-active-color;

src/app/client/src/assets/styles/global.scss

@@ -7,7 +7,7 @@ body {
 }
 
 body {
-  background: $body-background-color !important;
+  background: #E5EDF5 !important;
   position: relative;
   font-family: $font-stack-en;
   letter-spacing: 0.2px;
@@ -17,7 +17,7 @@ body {
   min-height: 100vh;
   text-rendering: optimizeLegibility;
   &.pushable {
-    background: $body-background-color !important;
+    background: #E5EDF5 !important;
     & > .pusher {
       background: transparent !important;
      // padding-bottom: 400px !important;