Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -876,13 +876,7 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
[class.dark-theme]="featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark"
>
<div class="auth-option-content">
<mat-icon
class="material-icons-outlined auth-option-icon"
[style.color]="
featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark ? '#ffffff' : '#000000'
"
>phone_android</mat-icon
>
<mat-icon class="material-icons-outlined auth-option-icon">phone_android</mat-icon>
<span
class="auth-option-text"
[class.dark-theme]="featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark"
Expand All @@ -897,13 +891,7 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
[class.dark-theme]="featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark"
>
<div class="auth-option-content">
<mat-icon
class="material-icons-outlined auth-option-icon"
[style.color]="
featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark ? '#ffffff' : '#000000'
"
>apple</mat-icon
>
<mat-icon class="material-icons-outlined auth-option-icon">apple</mat-icon>
<span
class="auth-option-text"
[class.dark-theme]="featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark"
Expand Down Expand Up @@ -934,13 +922,7 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
[class.dark-theme]="featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark"
>
<div class="auth-option-content">
<mat-icon
class="material-icons-outlined auth-option-icon"
[style.color]="
featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark ? '#ffffff' : '#000000'
"
>password</mat-icon
>
<mat-icon class="material-icons-outlined auth-option-icon">password</mat-icon>
<span
class="auth-option-text"
[class.dark-theme]="featureForm.get('brandingDetails.theme')?.value === WidgetTheme.Dark"
Expand Down Expand Up @@ -2106,26 +2088,20 @@ <h5 class="mat-h5 my-0">Taxes</h5>
<div class="branding-preview">
@if (isEditMode && featureForm.get('serviceDetails')?.at(3)?.controls?.is_enable?.value &&
featureForm.get('brandingDetails.version')?.value === 'v2') {
<div class="flex items-center justify-center w-full mb-6">
<div class="custom-toggle-group">
<button
type="button"
class="custom-toggle-btn"
[class.active]="previewInputPosition !== 'bottom'"
<section class="mb-6 flex items-center justify-center">
<mat-button-toggle-group>
<mat-button-toggle
[class.mat-button-toggle-checked]="previewInputPosition !== 'bottom'"
(click)="previewInputPosition = 'top'"
>Input on Top</mat-button-toggle
>
Input on Top
</button>
<button
type="button"
class="custom-toggle-btn"
[class.active]="previewInputPosition === 'bottom'"
<mat-button-toggle
[class.mat-button-toggle-checked]="previewInputPosition === 'bottom'"
(click)="previewInputPosition = 'bottom'"
>Input on Bottom</mat-button-toggle
>
Comment on lines +2093 to 2102
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using the [checked] property instead of [class.mat-button-toggle-checked] for consistency with Angular Material's API. For example:

Suggested change
<mat-button-toggle
[class.mat-button-toggle-checked]="previewInputPosition !== 'bottom'"
(click)="previewInputPosition = 'top'"
>Input on Top</mat-button-toggle
>
Input on Top
</button>
<button
type="button"
class="custom-toggle-btn"
[class.active]="previewInputPosition === 'bottom'"
<mat-button-toggle
[class.mat-button-toggle-checked]="previewInputPosition === 'bottom'"
(click)="previewInputPosition = 'bottom'"
>Input on Bottom</mat-button-toggle
>
<mat-button-toggle
[checked]="previewInputPosition !== 'bottom'"
(click)="previewInputPosition = 'top'"
>Input on Top</mat-button-toggle
>
<mat-button-toggle
[checked]="previewInputPosition === 'bottom'"
(click)="previewInputPosition = 'bottom'"
>Input on Bottom</mat-button-toggle
>

Input on Bottom
</button>
</div>
</div>
</mat-button-toggle-group>
</section>
}
<ng-container *ngTemplateOutlet="previewAuthorization; context: { previewVersion: 'v2' }"></ng-container>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -150,40 +150,6 @@
color: var(--color-common-primary) !important;
}

.custom-toggle-group {
display: inline-flex;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--color-common-border);
background-color: var(--color-common-bg);

.custom-toggle-btn {
padding: 8px 20px;
font-size: 13px;
font-weight: 500;
border: none;
background-color: transparent;
color: var(--color-common-secondary-text);
cursor: pointer;
transition: all 0.2s ease;
outline: none;

&:not(:last-child) {
border-right: 1px solid var(--color-common-border);
}

&:hover:not(.active) {
background-color: var(--color-common-hover);
}

&.active {
background-color: var(--color-common-white);
color: var(--color-common-primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
}
}

.social-login-icon-box {
border: 1px solid var(--color-common-border);
border-radius: 8px;
Expand All @@ -205,15 +171,15 @@
border-radius: 8px !important;
font-size: 14px;
font-weight: 600;
background-color: var(--color-common-white) !important;
// background-color: var(--color-common-white) !important;
display: flex;
align-items: center;
justify-content: center;

&.dark-theme {
background-color: transparent !important;
border-color: #ffffff !important;
}
// &.dark-theme {
// background-color: transparent !important;
border-color: #ffffff !important;
// }
Comment on lines +179 to +182
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The border-color property is now outside of any selector block after commenting out the .dark-theme class. This will cause CSS syntax errors and potentially break styles.

Suggested change
// &.dark-theme {
// background-color: transparent !important;
border-color: #ffffff !important;
// }
// &.dark-theme {
// background-color: transparent !important;
// border-color: #ffffff !important;
// }

}

.auth-option-content {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ import { CreateTaxDialogComponent } from './create-tax-dialog/create-tax-dialog.
import { ConfirmDialogComponent } from '@proxy/ui/confirm-dialog';
import { ServiceListComponent, ServiceListItem } from '@proxy/ui/service-list';
import { UiSettingsService } from '../../layout/ui-settings.service';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
type ServiceFormGroup = FormGroup<{
requirements: FormGroup<{
[key: string]: FormControl<any>;
Expand Down Expand Up @@ -135,6 +136,7 @@ export interface PeriodicElement {
MatExpansionModule,
MatRadioModule,
ServiceListComponent,
MatButtonToggleModule,
],
templateUrl: './create-feature.component.html',
styleUrls: ['./create-feature.component.scss'],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ 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';
import { SearchComponent } from '@proxy/ui/search';

interface IRole {
id: number;
Expand Down Expand Up @@ -76,6 +77,7 @@ interface IRole {
CopyButtonComponent,
MarkdownModule,
MatChipsModule,
SearchComponent,
],
templateUrl: './management.component.html',
styleUrls: ['./management.component.scss'],
Expand Down
5 changes: 4 additions & 1 deletion apps/shared/scss/component/_table.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
$border: 1px solid var(--color-common-border);
$border-radius: var(--border-common-radius-4);
.table-scroll {
@apply w-full overflow-x-auto grow;
@apply w-full overflow-x-auto;
&:has(proxy-no-record-found) {
flex-grow: 1;
}
@media screen and (min-width: 768px) {
border: $border;
border-radius: $border-radius;
Expand Down
6 changes: 2 additions & 4 deletions libs/ui/loader/src/lib/loader.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
imports: [MatProgressSpinnerModule],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div
class="h-screen content-loader absolute flex justify-center items-center bg-transparent top-0 left-0 right-0 bottom-0 bg-color rounded-lg"
>
<div class="loading-box flex items-center gap-4">
<div class="h-screen content-loader flex justify-center items-center bg-transparent">
<div class="flex gap-4 items-center loading-box p-1.5 rounded-lg bg-color">
<mat-spinner></mat-spinner>
<span class="text-color">{{ message() }}</span>
</div>
Expand Down
Loading