From c0946f0b271b09835701c3985448ec04e17db22a Mon Sep 17 00:00:00 2001 From: Saurabh186 Date: Tue, 31 Mar 2026 14:44:20 +0530 Subject: [PATCH 1/3] fix side bar select --- .../main-left-side-nav.component.html | 2 +- .../main-left-side-nav.component.scss | 6 - .../assets/scss/theme/_custom-palette.scss | 176 +++++++++--------- 3 files changed, 89 insertions(+), 95 deletions(-) diff --git a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html index f99d729b..80d07a87 100644 --- a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html +++ b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html @@ -4,7 +4,7 @@ diff --git a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss index 8fe41612..e69de29b 100644 --- a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss +++ b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss @@ -1,6 +0,0 @@ -:host { - a.active-list-item::before { - background-color: var(--mat-list-list-item-hover-state-layer-color, var(--mat-sys-on-surface)); - opacity: var(--mat-list-list-item-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity)); - } -} diff --git a/apps/36-blocks/src/assets/scss/theme/_custom-palette.scss b/apps/36-blocks/src/assets/scss/theme/_custom-palette.scss index 07bd90bc..115477e0 100644 --- a/apps/36-blocks/src/assets/scss/theme/_custom-palette.scss +++ b/apps/36-blocks/src/assets/scss/theme/_custom-palette.scss @@ -4,119 +4,119 @@ @use 'sass:map'; @use '@angular/material' as mat; -// Note: Color palettes are generated from primary: #19E6CE +// Note: Color palettes are generated from primary: #0F766E, secondary: #0F766E, tertiary: #0EA5E9, neutral: #FFFFFF, neutral variant: #E5E7EB, error: #DC2626 $_palettes: ( primary: ( 0: #000000, - 10: #00201c, - 20: #003730, - 25: #00443c, - 30: #005047, - 35: #005d53, - 40: #006b5f, - 50: #008677, - 60: #00a391, - 70: #00c0ac, - 80: #00dfc7, - 90: #46fce3, - 95: #b5fff0, - 98: #e5fff8, - 99: #f3fffb, + 10: #00201d, + 20: #003733, + 25: #00433e, + 30: #00504a, + 35: #005d56, + 40: #006a63, + 50: #27847c, + 60: #479e96, + 70: #64bab0, + 80: #80d5cb, + 90: #9cf2e8, + 95: #b2fff5, + 98: #e4fffa, + 99: #f2fffc, 100: #ffffff, ), secondary: ( 0: #000000, - 10: #00201c, - 20: #003730, - 25: #00443c, - 30: #105047, - 35: #205c52, - 40: #2e685e, - 50: #488177, - 60: #629b90, - 70: #7db6ab, - 80: #97d2c6, - 90: #b3eee2, - 95: #c1fdf0, - 98: #e5fff8, - 99: #f3fffb, + 10: #00201d, + 20: #003733, + 25: #00433e, + 30: #00504a, + 35: #005d56, + 40: #006a63, + 50: #27847c, + 60: #479e96, + 70: #64bab0, + 80: #80d5cb, + 90: #9cf2e8, + 95: #b2fff5, + 98: #e4fffa, + 99: #f2fffc, 100: #ffffff, ), tertiary: ( 0: #000000, - 10: #071942, - 20: #1f2f58, - 25: #2b3a64, - 30: #364570, - 35: #42517c, - 40: #4e5d89, - 50: #6776a4, - 60: #808fbf, - 70: #9baadb, - 80: #b6c5f8, - 90: #dbe1ff, - 95: #eef0ff, - 98: #faf8ff, - 99: #fefbff, + 10: #001e2f, + 20: #00344d, + 25: #00405d, + 30: #004c6e, + 35: #00587f, + 40: #006591, + 50: #007fb5, + 60: #009ada, + 70: #34b5fa, + 80: #89ceff, + 90: #c9e6ff, + 95: #e5f2ff, + 98: #f6faff, + 99: #fcfcff, 100: #ffffff, ), neutral: ( 0: #000000, - 10: #151d1b, - 20: #2a3230, - 25: #353d3b, - 30: #404846, - 35: #4c5452, - 40: #58605e, - 50: #707976, - 60: #8a9390, - 70: #a5adaa, - 80: #c0c8c5, - 90: #dce4e1, - 95: #eaf3ef, - 98: #f3fbf8, - 99: #f6fefb, + 10: #1a1c1c, + 20: #2f3131, + 25: #3a3c3c, + 30: #454747, + 35: #515353, + 40: #5d5f5f, + 50: #767777, + 60: #909191, + 70: #aaabab, + 80: #c6c6c7, + 90: #e2e2e2, + 95: #f0f1f1, + 98: #f9f9f9, + 99: #fcfcfc, 100: #ffffff, - 4: #08100e, - 6: #0d1513, - 12: #19211f, - 17: #242c2a, - 22: #2e3634, - 24: #333b39, - 87: #d3dcd9, - 92: #e2eae7, - 94: #e7f0ec, - 96: #edf5f2, + 4: #0c0f0f, + 6: #121414, + 12: #1e2020, + 17: #282a2b, + 22: #333535, + 24: #37393a, + 87: #dadada, + 92: #e8e8e8, + 94: #eeeeee, + 96: #f3f3f4, ), neutral-variant: ( 0: #000000, - 10: #101e1b, - 20: #253330, - 25: #303e3b, - 30: #3b4a46, - 35: #465552, - 40: #52625e, - 50: #6b7a76, - 60: #849490, - 70: #9eafaa, - 80: #bacac5, - 90: #d5e6e1, - 95: #e4f4ef, - 98: #ecfdf8, - 99: #f3fffb, + 10: #191c1f, + 20: #2d3134, + 25: #383c3f, + 30: #44474a, + 35: #505356, + 40: #5c5f62, + 50: #74777b, + 60: #8e9195, + 70: #a9abaf, + 80: #c4c7ca, + 90: #e0e2e6, + 95: #eff1f5, + 98: #f7f9fd, + 99: #fcfcff, 100: #ffffff, ), error: ( 0: #000000, 10: #410002, 20: #690005, - 25: #7e0007, - 30: #93000a, - 35: #a80710, - 40: #ba1a1a, - 50: #de3730, - 60: #ff5449, - 70: #ff897d, + 25: #7d0008, + 30: #93000b, + 35: #a9000f, + 40: #bf0715, + 50: #e42c2a, + 60: #ff544a, + 70: #ff897e, 80: #ffb4ab, 90: #ffdad6, 95: #ffedea, From ce694e59fc76560e516c4bc5877ffefebe3d371c Mon Sep 17 00:00:00 2001 From: Giddh's Black Tiger Date: Tue, 31 Mar 2026 18:02:16 +0530 Subject: [PATCH 2/3] refactor: standardize card styling and remove redundant CSS classes - Replace `broder-color` typo with `border-color` throughout templates - Introduce `card-with-header` and `card-with-header--header` utility classes for consistent card styling - Remove inline background color utilities in favor of `bg-color` class - Remove unused `preview-input-field` styles from SCSS - Remove `max-width` constraint from code snippet view - Simplify chip and badge styling by removing redundant color utilities - Update --- .../create-feature.component.html | 126 +++++++++--------- .../create-feature.component.scss | 15 --- .../features/feature/feature.component.html | 16 +-- .../src/app/logs/log/log.component.html | 11 +- .../management/management.component.html | 38 ++---- .../src/app/users/user/user.component.html | 16 +-- .../scss/component/_utility-classes.scss | 19 +++ apps/36-blocks/src/styles.scss | 8 +- 8 files changed, 112 insertions(+), 137 deletions(-) create mode 100644 apps/36-blocks/src/assets/scss/component/_utility-classes.scss 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 f2263f20..f475e1f9 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 @@ -326,22 +326,20 @@

Add New Block

-
-
+
+
bolt Event Catalog
@if (webhookEventsData?.length) { - + {{ webhookEventsData.length }} events }
@if (webhookEventsData?.length) { -
+
@for (event of webhookEventsData; track event) { @@ -381,7 +379,7 @@

Add New Block
} @else { -
+
bolt

No events available

@@ -582,9 +580,9 @@

Custom Mapping

-
+
@if ((selectedMethod | async)?.method_services; as methodServices) { @if (!serviceForm) { -
+
tune Custom Mapping >
} @if (serviceForm ?? featureForm.get('serviceDetails')?.at(selectedServiceIndex); as formToUse) { -
+
@if (methodServices?.[selectedServiceIndex]?.requirements; as requirements) { @if ((formToUse.controls.requirements.controls | keyvalue)?.length) { @@ -632,7 +630,7 @@

Custom Mapping

} @if (isEditMode) { -
+
Enable Service
@@ -678,14 +676,14 @@

{{ getSelectedServiceName() }}

@if (configureMethodsTableData.length === 0) {
tune

No methods available

} @else { -
-
+
+
Method Enable{{ getSelectedServiceName() }}
@for (row of configureMethodsTableData; track row.index) {
{{ row.name }} @if (row.index === 0) { default @@ -813,11 +811,10 @@

Email or Phone - + @@ -963,13 +960,13 @@

-
-
-
+
+
+
settings Session & Token Settings
-
+
@if (isEditMode && featureForm.get('primaryDetails.feature_id')?.value === 1) { -
+
Block new user sign-ups Prevent new users from registering via this block @@ -1031,18 +1026,18 @@

-
+
+
data_object JWT Payload Format
-
+
-
+
info

JSON format you will receive after login as JWT in Authorization key @@ -1061,31 +1056,31 @@

-
-
+
+
code Integration Script
-
+
-
-
+
+
html Button Container Div
-
+
-
+
info

The social login button is shown in a dialog by default. Add this div to your UI to render it inline @@ -1106,12 +1101,12 @@

-
-
+
+
webhook Webhook Configuration
-
+
Billable Metrics / Items

{{ element.code }} Billable Metrics / Items

Aggregation {{ getAggregationLabel(element?.aggregation_type) }} @@ -1645,7 +1640,7 @@
Created Plans
{{ element.code }} Created Plans

Currency {{ element.amount_currency }} @@ -1691,7 +1686,7 @@
Created Plans
Status {{ getAggregationLabel(element?.aggregation_type) }} @@ -1760,7 +1755,7 @@
Taxes
Code {{ tax.code }} @@ -1769,8 +1764,7 @@
Taxes
Rate (%) {{ tax.rate - }}%{{ tax.rate }}% @@ -1871,14 +1865,14 @@
Taxes
-
+
-
-
+
+
image Logo
-
+
Taxes

-
-
+
+
tune Appearance
-
+
Taxes @if (featureForm.get('primaryDetails.feature_id')?.value === 1) { -
-
+
+
toggle_on Display Options
-
+
Show social login as icon Taxes } -
-
+
+
palette Colors
-
+
@@ -2054,7 +2048,7 @@
Taxes
}} Taxes }} Taxes }} Taxes }} Taxes }} Blocks Name @if (!loading.dataLoading) { - {{ element.name }} + {{ element.name }} } @else { } @@ -76,7 +76,7 @@

Blocks

{{ element.reference_id?.length > 15 @@ -102,11 +102,7 @@

Blocks

Method @if (!loading.dataLoading) { @if (element.method?.name) { - - {{ element.method?.name }} - + {{ element.method?.name }} } } @else { } @@ -118,11 +114,7 @@

Blocks

Type @if (!loading.dataLoading) { @if (element.feature?.name) { - - {{ element.feature?.name }} - + {{ element.feature?.name }} } } @else { } diff --git a/apps/36-blocks/src/app/logs/log/log.component.html b/apps/36-blocks/src/app/logs/log/log.component.html index 140b5110..ee1b44e0 100644 --- a/apps/36-blocks/src/app/logs/log/log.component.html +++ b/apps/36-blocks/src/app/logs/log/log.component.html @@ -217,10 +217,7 @@ User IP - {{ element.user_ip }} + {{ element.user_ip }} @@ -228,9 +225,7 @@ Endpoint - {{ - element.endpoint - }} + {{ element.endpoint }} @@ -267,7 +262,7 @@ Response time @if (element.response_time != null) { - {{ element.response_time }}ms } 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 47e58963..4b794a2a 100644 --- a/apps/36-blocks/src/app/users/management/management.component.html +++ b/apps/36-blocks/src/app/users/management/management.component.html @@ -55,7 +55,7 @@ Role - {{ element.role }} + {{ element.role }} @@ -65,11 +65,7 @@
@for (permission of element.permissionsList; track permission.name) { - - {{ permission.name }} - + {{ permission.name }} }
@@ -168,9 +164,9 @@ Permission -

{{ element.name }}

+

{{ element.name }}

@if (element.description) { -

+

{{ element.description }}

} @@ -240,18 +236,18 @@ @if (selectedSectionIndex === 2) {
-
-
+
+
code Integration Script
-
+
-
+
info @@ -260,15 +256,15 @@

-
-
+
+
html Container HTML
-
+
@@ -283,9 +279,7 @@ -
+
person_add @@ -307,9 +301,7 @@ -
+
group_add @@ -331,9 +323,7 @@ -
+
visibility_off diff --git a/apps/36-blocks/src/app/users/user/user.component.html b/apps/36-blocks/src/app/users/user/user.component.html index 313a7ba7..52291482 100644 --- a/apps/36-blocks/src/app/users/user/user.component.html +++ b/apps/36-blocks/src/app/users/user/user.component.html @@ -82,7 +82,7 @@ Name @if (!loading.dataLoading) { - {{ element.name }} + {{ element.name }} } @else { } @@ -94,7 +94,7 @@ Email @if (!loading.dataLoading) { - {{ element.email }} + {{ element.email }} } @else { } @@ -106,9 +106,7 @@ Phone Number @if (!loading.dataLoading) { - {{ - element.mobile ?? '-' - }} + {{ element.mobile ?? '-' }} } @else { } @@ -124,7 +122,7 @@ {{ element?.id?.length > 15 @@ -148,11 +146,7 @@ Block Name @if (!loading.dataLoading) { @if (element?.feature_configuration?.name) { - - {{ element.feature_configuration.name }} - + {{ element.feature_configuration.name }} } @else { - } } @else { diff --git a/apps/36-blocks/src/assets/scss/component/_utility-classes.scss b/apps/36-blocks/src/assets/scss/component/_utility-classes.scss new file mode 100644 index 00000000..639a11e5 --- /dev/null +++ b/apps/36-blocks/src/assets/scss/component/_utility-classes.scss @@ -0,0 +1,19 @@ +// ───────────────────────────────────────────────────────────────────────────── +// Utility Classes — Project-wide reusable semantic classes +// +// Use these classes to maintain visual consistency across the app. +// Colors are driven by --mat-sys-* and --color-common-* CSS custom properties +// so they automatically adapt to light / dark theme. +// ───────────────────────────────────────────────────────────────────────────── + +// ─── Card ──────────────────────────────────────────────────────────────────── +.card-with-header { + @apply rounded-xl border overflow-hidden; + border-color: var(--color-common-border); + + &--header { + @apply flex items-center gap-2 px-4 py-3 border-b; + background-color: var(--color-common-bg) !important; + border-color: inherit !important; + } +} diff --git a/apps/36-blocks/src/styles.scss b/apps/36-blocks/src/styles.scss index 0a282700..04e6beb0 100644 --- a/apps/36-blocks/src/styles.scss +++ b/apps/36-blocks/src/styles.scss @@ -11,6 +11,7 @@ @use 'assets/scss/component/loader'; @use 'assets/scss/component/icon'; @use 'assets/scss/component/animation'; +@use 'assets/scss/component/utility-classes'; @use '../../shared/scss/global'; body { background: var(--mat-sys-surface); @@ -22,7 +23,7 @@ body { .bg-color { background-color: var(--color-common-bg) !important; } -.broder-color { +.border-color { border-color: var(--color-common-border) !important; } .secondary-text-color { @@ -52,3 +53,8 @@ body { width: 100%; } } + +pre[class*='language-'] { + margin: 0 !important; + border-radius: 0 !important; +} From e86949bbe4a7d6abcb5304df7a6ffa2ec7874a92 Mon Sep 17 00:00:00 2001 From: Saurabh186 Date: Tue, 31 Mar 2026 18:05:00 +0530 Subject: [PATCH 3/3] fix sidebar --- .../create-project.component.html | 2 +- .../create-feature.component.html | 2 +- .../app/features/feature/feature.component.html | 2 +- .../src/app/layout/layout.component.html | 17 ++++++++--------- .../main-left-side-nav.component.html | 3 ++- .../main-left-side-nav.component.scss | 7 +++++++ .../src/app/logs/log/log.component.html | 2 +- .../src/app/register/register.component.html | 2 +- .../src/app/users/user/user.component.html | 2 +- apps/36-blocks/src/styles.scss | 2 +- 10 files changed, 24 insertions(+), 17 deletions(-) diff --git a/apps/36-blocks/src/app/create-project/create-project.component.html b/apps/36-blocks/src/app/create-project/create-project.component.html index b5099f6c..ba3f0942 100644 --- a/apps/36-blocks/src/app/create-project/create-project.component.html +++ b/apps/36-blocks/src/app/create-project/create-project.component.html @@ -1,4 +1,4 @@ -
+
@if (currentstep === 1) {
+
@if ((isLoading$ | async) || (loadingScript | async)) { }
@@ -126,7 +125,7 @@

{{ user.displayName }}

}
-
+
diff --git a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html index 80d07a87..3d407cbf 100644 --- a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html +++ b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.html @@ -7,8 +7,9 @@ routerLinkActive="mdc-list-item--activated" [matTooltipPosition]="'right'" [matTooltip]="isSideNavOpen() ? item.label : ''" + [style.padding]="isSideNavOpen() ? '10px' : ''" > - {{ item.icon }} + {{ item.icon }} {{ item.label }} } diff --git a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss index e69de29b..7b74e3b3 100644 --- a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss +++ b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss @@ -0,0 +1,7 @@ +.service-list { + .mat-mdc-list-item { + border-radius: 8px !important; + height: 42px !important; + margin-bottom: 2px; + } +} diff --git a/apps/36-blocks/src/app/logs/log/log.component.html b/apps/36-blocks/src/app/logs/log/log.component.html index 140b5110..bddf9bde 100644 --- a/apps/36-blocks/src/app/logs/log/log.component.html +++ b/apps/36-blocks/src/app/logs/log/log.component.html @@ -1,4 +1,4 @@ -
+
@if (isLoading$ | async) { } diff --git a/apps/36-blocks/src/app/register/register.component.html b/apps/36-blocks/src/app/register/register.component.html index 5888541a..da5b1aa2 100644 --- a/apps/36-blocks/src/app/register/register.component.html +++ b/apps/36-blocks/src/app/register/register.component.html @@ -1,4 +1,4 @@ -
+

Register

diff --git a/apps/36-blocks/src/app/users/user/user.component.html b/apps/36-blocks/src/app/users/user/user.component.html index 313a7ba7..547b6d6f 100644 --- a/apps/36-blocks/src/app/users/user/user.component.html +++ b/apps/36-blocks/src/app/users/user/user.component.html @@ -1,5 +1,5 @@ @if (loading$ | async; as loading) { -
+
diff --git a/apps/36-blocks/src/styles.scss b/apps/36-blocks/src/styles.scss index 38e3c0ff..f4d0597e 100644 --- a/apps/36-blocks/src/styles.scss +++ b/apps/36-blocks/src/styles.scss @@ -51,7 +51,7 @@ body { } /*Main*/ .app-content { - padding: 16px; + padding: 24px; min-height: 100%; height: 100vh; overflow-y: auto;