From 289c0b1e77a9061f6ed56f62a55377ea283bf189 Mon Sep 17 00:00:00 2001
From: Saurabh186 <sawrabhsharma1234@gmail.com>
Date: Wed, 1 Apr 2026 13:30:35 +0530
Subject: [PATCH] fix disign issue

---
 .../create-feature.component.html             | 18 ++++++-------
 .../features/feature/feature.component.html   |  2 +-
 .../src/app/layout/layout.component.html      | 11 ++++----
 .../src/app/layout/layout.component.scss      | 12 +++++++++
 .../management/management.component.html      | 27 +++++++++----------
 .../users/management/management.component.ts  |  2 ++
 .../src/assets/scss/theme/_default-theme.scss |  4 +++
 apps/36-blocks/src/styles.scss                |  1 +
 8 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
index 0fc04aac..2996f617 100644
--- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
+++ b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
@@ -42,7 +42,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
     @if (!isEditMode) {
     <mat-stepper
         #stepper
-        class="rounded-lg border grow mat-stepper-starched shadow-sm"
+        class="rounded-lg grow mat-stepper-starched shadow-sm"
         labelPosition="bottom"
         [animationDuration]="0"
         [linear]="true"
@@ -79,7 +79,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
             <ng-template matStepLabel>Block Name</ng-template>
             <div #blockNameStepContent class="flex flex-col h-full">
                 <ng-container *ngTemplateOutlet="blockCreationStepOne; context: { nameControl }"></ng-container>
-                <div class="flex items-center justify-end pt-4 border-t border-outline/20">
+                <div class="flex items-center justify-end pt-4">
                     <button type="button" matButton="filled" (click)="validateFirstStepAndNext(nameControl)">
                         Next
                         <mat-icon class="material-icons-outlined mat-icon-18 mat-icon-suffix">navigate_next</mat-icon>
@@ -92,7 +92,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
             <ng-template matStepLabel>Configure Method</ng-template>
             <div class="flex flex-col h-full">
                 <ng-container *ngTemplateOutlet="createBlockConfigureMethodTemplate"></ng-container>
-                <div class="flex items-center justify-between pt-4 border-t border-outline/20">
+                <div class="flex items-center justify-between pt-4">
                     <button type="button" matButton="filled" class="flat-default" matStepperPrevious>
                         <mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">navigate_before</mat-icon
                         >Back
@@ -110,7 +110,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
             <ng-template matStepLabel>Authorization Setup</ng-template>
             <div #authorizationStepContent class="flex flex-col h-full">
                 <ng-container *ngTemplateOutlet="authorizationSetup"></ng-container>
-                <div class="flex items-center justify-between pt-4 border-t border-outline/20">
+                <div class="flex items-center justify-between pt-4">
                     <button type="button" matButton="filled" class="flat-default" matStepperPrevious>
                         <mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">navigate_before</mat-icon
                         >Back
@@ -136,7 +136,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
             <ng-template matStepLabel>Branding</ng-template>
             <div class="flex flex-col h-full">
                 <ng-container *ngTemplateOutlet="brandingStepContent"></ng-container>
-                <div class="flex items-center justify-between pt-4 border-t border-outline/20">
+                <div class="flex items-center justify-between pt-4">
                     <button type="button" matButton="filled" (click)="updateFeature('branding')">Update</button>
                     <button type="button" matButton="filled" matStepperNext>
                         Next<mat-icon class="material-icons-outlined mat-icon-18 mat-icon-suffix"
@@ -154,7 +154,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
             <ng-template matStepLabel>Integration Choice</ng-template>
             <div class="flex flex-col justify-between h-full">
                 <ng-container *ngTemplateOutlet="integrationChoice"></ng-container>
-                <div class="flex items-center justify-between pt-4 border-t border-outline/20">
+                <div class="flex items-center justify-between pt-4">
                     <button type="button" matButton="filled" class="flat-default" matStepperPrevious>
                         <mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">navigate_before</mat-icon
                         >Back
@@ -172,7 +172,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
             <ng-template matStepLabel>Organization Details</ng-template>
             <div class="flex flex-col justify-between h-full">
                 <ng-container *ngTemplateOutlet="organizationDetails"></ng-container>
-                <div class="flex items-center justify-between pt-4 border-t border-outline/20">
+                <div class="flex items-center justify-between pt-4">
                     <button type="button" matButton="filled" class="flat-default" matStepperPrevious>
                         <mat-icon class="material-icons-outlined mat-icon-18 mat-icon-prefix">navigate_before</mat-icon
                         >Back
@@ -736,10 +736,9 @@ <h2 mat-dialog-title class="m-0">{{ getSelectedServiceName() }}</h2>
     </div>
     }
 </ng-template>
-
 <ng-template #previewAuthorization let-authorizationDetails="authorizationDetails" let-previewVersion="previewVersion">
     <div
-        class="auth-credentials px-6 w-[350px] border rounded-8 max-h-[650px] overflow-y-auto max-lg:w-full"
+        class="auth-credentials px-6 w-[350px] border border-color rounded-8 max-h-[650px] overflow-y-auto max-lg:w-full"
         [class.dark]="featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark"
         [style.--branding-primary-color]="getEffectivePrimaryColor()"
         [style.--branding-button-color]="featureForm.get('brandingDetails.button_color')?.value || '#19E6CE'"
@@ -1096,6 +1095,7 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
     <div class="flex items-center justify-start mt-6">
         <button type="button" matButton="filled" (click)="previewFeature()">Preview</button>
     </div>
+    <!-- <div id="userProxyContainer"></div> -->
     }
 </ng-template>
 
diff --git a/apps/36-blocks/src/app/features/feature/feature.component.html b/apps/36-blocks/src/app/features/feature/feature.component.html
index f3f59f57..c04f457c 100644
--- a/apps/36-blocks/src/app/features/feature/feature.component.html
+++ b/apps/36-blocks/src/app/features/feature/feature.component.html
@@ -76,7 +76,7 @@ <h4 class="my-0 text-secondary mat-body-1 font-semibold">Blocks</h4>
                                 <span
                                     [matTooltip]="element.reference_id"
                                     matTooltipPosition="above"
-                                    class="cursor-pointer font-mono text-xs px-2 py-0.5 rounded-4 min-w-[150px]"
+                                    class="cursor-default"
                                 >
                                     {{
                                         element.reference_id?.length > 15
diff --git a/apps/36-blocks/src/app/layout/layout.component.html b/apps/36-blocks/src/app/layout/layout.component.html
index 2f25f06c..67fee5f5 100644
--- a/apps/36-blocks/src/app/layout/layout.component.html
+++ b/apps/36-blocks/src/app/layout/layout.component.html
@@ -4,11 +4,12 @@
         [class.mat-drawer-toggle-btn-hover]="isSideNavOpen()"
         [class]="!isSideNavOpen() ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[246px]'"
     >
-        <div class="flex items-center py-2" [class]="!isSideNavOpen() ? 'flex-col gap-2' : ''">
+        <div class="flex items-center pt-2" [class]="!isSideNavOpen() ? 'flex-col gap-2' : ''">
             <div
-                class="flex items-center grow gap-2 mat-drawer-header-title px-4"
+                class="flex items-center grow gap-2 mat-drawer-header-title pr-2"
                 #clientsMenuTrigger="matMenuTrigger"
                 [matMenuTriggerFor]="clientsMenu"
+                [class]="!isSideNavOpen() ? 'pl-2' : 'pl-4'"
             >
                 @if (!isSideNavOpen()) {
                 <mat-icon class="mat-icon-22">apps</mat-icon>
@@ -65,14 +66,14 @@
                 </div>
             </div>
             <button
-                matButton="tonal"
-                class="mat-drawer-toggle-btn mat-icon-32 !p-0 !min-w-0"
+                matIconButton
+                class="sidebar-toggle-btn"
                 (click)="toggleSideBarEvent()"
                 [matTooltip]="isSideNavOpen() ? 'Collapse Menu' : 'Expand Menu'"
                 matTooltipPosition="right"
                 type="button"
             >
-                <mat-icon class="!m-0">{{
+                <mat-icon>{{
                     isSideNavOpen() ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'
                 }}</mat-icon>
             </button>
diff --git a/apps/36-blocks/src/app/layout/layout.component.scss b/apps/36-blocks/src/app/layout/layout.component.scss
index 015ae483..15a92c26 100644
--- a/apps/36-blocks/src/app/layout/layout.component.scss
+++ b/apps/36-blocks/src/app/layout/layout.component.scss
@@ -1,3 +1,15 @@
+:not(.collapsed-sidebar) {
+    .mat-drawer-content {
+        .sidebar-toggle-btn {
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        &:hover .sidebar-toggle-btn {
+            opacity: 1;
+        }
+    }
+}
 :not(.collapsed-sidebar) {
     @media (max-width: 992px) {
         .mat-drawer-content {
diff --git a/apps/36-blocks/src/app/users/management/management.component.html b/apps/36-blocks/src/app/users/management/management.component.html
index 4b794a2a..0daf2bb5 100644
--- a/apps/36-blocks/src/app/users/management/management.component.html
+++ b/apps/36-blocks/src/app/users/management/management.component.html
@@ -63,11 +63,13 @@
                             <ng-container matColumnDef="permissions">
                                 <th mat-header-cell *matHeaderCellDef>Permissions</th>
                                 <td mat-cell *matCellDef="let element" data-label="Permissions">
-                                    <div class="flex flex-wrap gap-1.5 py-2">
+                                    <mat-chip-set>
                                         @for (permission of element.permissionsList; track permission.name) {
-                                        {{ permission.name }}
+                                        <mat-chip>
+                                            {{ permission.name }}
+                                        </mat-chip>
                                         }
-                                    </div>
+                                    </mat-chip-set>
                                 </td>
                             </ng-container>
 
@@ -235,11 +237,11 @@
 
             <!-- ── Snippet Tab ── -->
             @if (selectedSectionIndex === 2) {
-            <div class="flex flex-col gap-4 max-w-2xl">
+            <div class="flex flex-col gap-4">
                 <div class="card-with-header">
                     <div class="card-with-header--header justify-between">
                         <div class="flex items-center gap-2">
-                            <mat-icon class="!text-base !w-4 !h-4 secondary-text-color opacity-70">code</mat-icon>
+                            <mat-icon class="!text-base !w-4 mt-1">code</mat-icon>
                             <span class="mat-body-2 font-semibold">Integration Script</span>
                         </div>
                         <proxy-copy-button [copyData]="userManagementScript" tooltip="Copy Script"></proxy-copy-button>
@@ -247,19 +249,14 @@
                     <div class="bg-color overflow-auto code-snippet-view">
                         <markdown [data]="userManagementScript | language: 'javascript'"></markdown>
                     </div>
-                    <div class="bg-color flex gap-2 px-4 py-3 border-t border-color bg-color">
-                        <mat-icon class="!text-sm !w-3.5 !h-3.5 secondary-text-color opacity-60 shrink-0 mt-0.5"
-                            >info</mat-icon
-                        >
-                        <p class="mat-body-2 text-secondary m-0 text-xs">
-                            Add this script to your page to integrate the user management component.
-                        </p>
-                    </div>
+                    <p class="mat-body-2 text-color px-4 py-3 m-0 text-xs">
+                        Add this script to your page to integrate the user management component.
+                    </p>
                 </div>
                 <div class="card-with-header">
                     <div class="card-with-header--header justify-between">
                         <div class="flex items-center gap-2">
-                            <mat-icon class="!text-base !w-4 !h-4 secondary-text-color opacity-70">html</mat-icon>
+                            <mat-icon>html</mat-icon>
                             <span class="mat-body-2 font-semibold">Container HTML</span>
                         </div>
                         <proxy-copy-button [copyData]="userProxyContainerHtml" tooltip="Copy Code"></proxy-copy-button>
@@ -275,7 +272,7 @@
             <!-- ── Settings Tab ── -->
             @if (selectedSectionIndex === 3) {
             <div class="max-w-xl">
-                <p class="mat-body-2 text-secondary font-medium mb-6">Default Roles</p>
+                <p class="mat-body-2 font-medium mb-6">Default Roles</p>
                 <form [formGroup]="defaultRolesForm" class="flex flex-col gap-6">
                     <mat-card class="outline-card p-5">
                         <mat-card-content class="flex items-start gap-3 !p-0">
diff --git a/apps/36-blocks/src/app/users/management/management.component.ts b/apps/36-blocks/src/app/users/management/management.component.ts
index 98fe4e72..3f934021 100644
--- a/apps/36-blocks/src/app/users/management/management.component.ts
+++ b/apps/36-blocks/src/app/users/management/management.component.ts
@@ -40,6 +40,7 @@ import { IPaginatedResponse } from '@proxy/models/root-models';
 import { UserComponentStore } from '../user/user.store';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { PROXY_DOM_ID } from '@proxy/constant';
+import { MatChipsModule } from '@angular/material/chips';
 
 interface IRole {
     id: number;
@@ -72,6 +73,7 @@ interface IRole {
         ServiceListComponent,
         CopyButtonComponent,
         MarkdownModule,
+        MatChipsModule,
     ],
     templateUrl: './management.component.html',
     styleUrls: ['./management.component.scss'],
diff --git a/apps/36-blocks/src/assets/scss/theme/_default-theme.scss b/apps/36-blocks/src/assets/scss/theme/_default-theme.scss
index a27aea54..93edda4c 100644
--- a/apps/36-blocks/src/assets/scss/theme/_default-theme.scss
+++ b/apps/36-blocks/src/assets/scss/theme/_default-theme.scss
@@ -13,6 +13,7 @@ html {
     @include mat.system-level-typography(theme.$light-theme);
     --mat-sys-outline: var(--color-common-border);
     --mat-sys-on-surface: var(--proxy-neutral-40);
+    --mat-list-list-item-label-text-size: 0.875rem;
 }
 
 /* System default: follow OS dark mode when body has no theme class */
@@ -22,6 +23,7 @@ html {
         @include mat.system-level-colors(theme.$dark-theme);
         --mat-sys-outline: var(--color-common-border);
         --mat-sys-on-surface: var(--proxy-neutral-80);
+        --mat-list-list-item-label-text-size: 0.875rem;
     }
 }
 
@@ -31,6 +33,7 @@ body.dark-theme {
     @include mat.system-level-colors(theme.$dark-theme);
     --mat-sys-outline: var(--color-common-border);
     --mat-sys-on-surface: var(--proxy-neutral-80);
+    --mat-list-list-item-label-text-size: 0.875rem;
 }
 
 /* Force light theme (overrides OS dark preference) */
@@ -39,4 +42,5 @@ body.light-theme {
     @include mat.system-level-colors(theme.$light-theme);
     --mat-sys-outline: var(--color-common-border);
     --mat-sys-on-surface: var(--proxy-neutral-40);
+    --mat-list-list-item-label-text-size: 0.875rem;
 }
diff --git a/apps/36-blocks/src/styles.scss b/apps/36-blocks/src/styles.scss
index 1d53fa33..64bb564d 100644
--- a/apps/36-blocks/src/styles.scss
+++ b/apps/36-blocks/src/styles.scss
@@ -16,6 +16,7 @@
 body {
     background: var(--mat-sys-surface);
     color: var(--mat-sys-on-surface);
+    font-size: 0.875rem;
 }
 .text-color {
     color: var(--mat-sys-on-surface);