TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-01-06 13:57:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): changes, project grant create, member add, org setup, project search autocomplete, grpc header url decoding (#303)

Browse Source 
* mobile max-width container

* fix project search autocomplete

* remove changes error, add bottom label

* fix project grant, contributor add
This commit is contained in:
Max Peintner 2020-06-26 16:45:18 +02:00 committed by GitHub
parent 63ccdb1147
commit 5fc250f046
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 167 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
console/src/app/app.component.html
View File

@ -59,7 +59,7 @@
<span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
</a>
<div class="divider"><span></span></div>
<div *ngIf="authService.authenticationChanged | async" class="divider"><span></span></div>
<a *ngIf="iamreadwrite" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/iam']">
<i class="icon las la-gem"></i>
@ -71,7 +71,7 @@
<span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
</a>
<div class="divider"><span></span></div>
<div *ngIf="showOrgSection" class="divider"><span></span></div>
<a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
[routerLink]="[ '/projects']">
@ -85,7 +85,7 @@
<span class="label">{{ 'MENU.GRANTEDPROJECT' | translate }}</span>
</a>
<div class="divider"><span></span></div>
<div *ngIf="showProjectSection" class="divider"><span></span></div>
<a *ngIf="showUserSection" class="nav-item" [routerLinkActive]="['active']"
[routerLink]="[ '/users']" [routerLinkActiveOptions]="{ exact: true }">

2
console/src/app/modules/changes/changes.component.html
View File

@ -11,5 +11,5 @@
<div class="sp-wrapper">
<mat-spinner *ngIf="loading | async" diameter="25"></mat-spinner>
</div>
<span class="err-container" *ngIf="errorMessage">{{errorMessage}}</span>
<span class="end-container" *ngIf="bottom">{{'CHANGES.BOTTOM' | translate}}</span>
</div>

6
console/src/app/modules/changes/changes.component.scss
View File

@ -39,8 +39,8 @@
justify-content: center;
}
.err-container {
font-size: 14px;
color: rgb(201,51,71);
.end-container {
font-size: 12px;
color: #81868a;
}
}

2
console/src/app/modules/changes/changes.component.ts
View File

@ -19,7 +19,6 @@ export class ChangesComponent implements OnInit {
@Input() public changeType: ChangeType = ChangeType.USER;
@Input() public id: string = '';
@Input() public sortDirectionAsc: boolean = true;
public errorMessage: string = '';
public bottom: boolean = false;
// Source data
@ -118,7 +117,6 @@ export class ChangesComponent implements OnInit {
catchError(err => {
console.error(err);
this._loading.next(false);
this.errorMessage = decodeURI(err.message);
this.bottom = true;
return of([]);
}),

6
console/src/app/modules/project-contributors/project-contributors.component.html
View File

@ -7,11 +7,15 @@
<ng-container *ngFor="let member of membersSubject | async">
<div (click)="showDetail()" class="avatar-circle"
matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
<app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
<app-avatar
*ngIf="member && (member.displayName || (member.firstName && member.lastName)); else thumbavatar"
class="avatar dontcloseonclick"
[name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
[size]="32">
</app-avatar>
<ng-template #thumbavatar>
<i class="avatar las la-tools"></i>
</ng-template>
</div>
</ng-container>
</ng-container>

1
console/src/app/modules/project-contributors/project-contributors.component.ts
View File

@ -56,6 +56,7 @@ export class ProjectContributorsComponent implements OnInit {
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
console.log(members);
});
}
}

1
console/src/app/modules/project-members/project-members-datasource.ts
View File

@ -42,6 +42,7 @@ export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject>
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
console.log(members);
});
}
}

7
console/src/app/modules/project-members/project-members.component.html
View File

@ -60,6 +60,13 @@
</td>
</ng-container>
<ng-container matColumnDef="userId">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userId}} </td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">

58
console/src/app/modules/project-members/project-members.component.ts
View File

@ -1,13 +1,15 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { tap } from 'rxjs/operators';
import { ProjectMember, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
import { ProjectMember, ProjectType, ProjectView, User } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import { CreationType, MemberCreateDialogComponent } from '../add-member-dialog/member-create-dialog.component';
import { ProjectMembersDataSource } from './project-members-datasource';
@Component({
@ -25,9 +27,11 @@ export class ProjectMembersComponent implements AfterViewInit {
public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
constructor(private projectService: ProjectService,
constructor(
private projectService: ProjectService,
private dialog: MatDialog,
private toast: ToastService,
private route: ActivatedRoute) {
this.route.params.subscribe(params => {
@ -88,33 +92,29 @@ export class ProjectMembersComponent implements AfterViewInit {
}
public openAddMember(): void {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.PROJECT_OWNED,
projectId: this.project.projectId,
},
width: '400px',
});
// TODO
// const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
// data: {
// creationType: this.project.type ===
// ProjectType.PROJECTTYPE_GRANTED ? CreationType.PROJECT_GRANTED :
// ProjectType.PROJECTTYPE_OWNED ? CreationType.PROJECT_OWNED : undefined,
// projectId: this.project.id,
// },
// width: '400px',
// });
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
const users: User.AsObject[] = resp.users;
const roles: string[] = resp.roles;
// dialogRef.afterClosed().subscribe(resp => {
// if (resp) {
// const users: User.AsObject[] = resp.users;
// const roles: string[] = resp.roles;
// if (users && users.length && roles && roles.length) {
// Promise.all(users.map(user => {
// return this.projectService.AddProjectMember(this.project.id, user.id, roles);
// })).then(() => {
// this.toast.showError('members added');
// }).catch(error => {
// this.toast.showError(error.message);
// });
// }
// }
// });
if (users && users.length && roles && roles.length) {
Promise.all(users.map(user => {
return this.projectService.AddProjectMember(this.project.projectId, user.id, roles);
})).then(() => {
this.toast.showError('members added');
}).catch(error => {
this.toast.showError(error.message);
});
}
}
});
}
}

4
console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.html
View File

@ -7,7 +7,7 @@
<mat-chip-list *ngIf="!singleOutput" #chipList aria-label="name selection">
<mat-chip class="chip" *ngFor="let selectedProject of projects" [selectable]="selectable"
[removable]="removable" (removed)="remove(selectedProject)">
{{selectedProject.name}}
{{selectedProject?.name ? selectedProject.name + ' (owned)' : selectedProject?.projectName ? selectedProject.projectName + ' (granted)': ''}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="{{'PROJECT.NAME' | translate}}" #nameInput [formControl]="myControl"
@ -21,7 +21,7 @@
<mat-spinner diameter="30"></mat-spinner>
</mat-option>
<mat-option *ngFor="let project of filteredProjects" [value]="project">
{{project.name}}
{{project?.name ? project.name + ' (owned)' : project?.projectName ? project.projectName + ' (granted)': ''}}
</mat-option>
</mat-autocomplete>
</mat-form-field>

54
console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
View File

@ -3,13 +3,13 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@
import { FormControl } from '@angular/forms';
import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material/chips';
import { from } from 'rxjs';
import { from, merge } from 'rxjs';
import { debounceTime, switchMap, tap } from 'rxjs/operators';
import {
Project,
ProjectGrantView,
ProjectSearchKey,
ProjectSearchQuery,
ProjectView,
SearchMethod,
} from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
@ -26,14 +26,18 @@ export class SearchProjectAutocompleteComponent {
public separatorKeysCodes: number[] = [ENTER, COMMA];
public myControl: FormControl = new FormControl();
public names: string[] = [];
public projects: Array<ProjectGrantView.AsObject> = [];
public filteredProjects: Array<ProjectGrantView.AsObject> = [];
public projects: Array<ProjectGrantView.AsObject | ProjectView.AsObject | any> = [];
public filteredProjects: Array<ProjectGrantView.AsObject | ProjectView.AsObject | any> = [];
public isLoading: boolean = false;
@ViewChild('nameInput') public nameInput!: ElementRef<HTMLInputElement>;
@ViewChild('auto') public matAutocomplete!: MatAutocomplete;
@Input() public singleOutput: boolean = false;
@Output() public selectionChanged: EventEmitter<ProjectGrantView.AsObject[] | ProjectGrantView.AsObject>
= new EventEmitter();
@Output() public selectionChanged: EventEmitter<
ProjectGrantView.AsObject[]
| ProjectGrantView.AsObject
| ProjectView.AsObject
| ProjectView.AsObject[]
> = new EventEmitter();
constructor(private projectService: ProjectService) {
this.myControl.valueChanges
.pipe(
@ -44,17 +48,22 @@ export class SearchProjectAutocompleteComponent {
query.setKey(ProjectSearchKey.PROJECTSEARCHKEY_PROJECT_NAME);
query.setValue(value);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
return from(this.projectService.SearchGrantedProjects(10, 0, [query]));
return merge(
from(this.projectService.SearchGrantedProjects(10, 0, [query])),
from(this.projectService.SearchProjects(10, 0, [query])),
);
}),
// finalize(() => this.isLoading = false),
).subscribe((projects) => {
this.isLoading = false;
this.filteredProjects = projects.toObject().resultList;
console.log(this.filteredProjects);
});
}
public displayFn(project?: Project.AsObject): string | undefined {
return project ? `${project.name}` : undefined;
public displayFn(project?: any): string | undefined {
return (project && project.projectName) ? `${project.projectName}` :
(project && project.name) ? `${project.name}` : undefined;
}
public add(event: MatChipInputEvent): void {
@ -64,8 +73,10 @@ export class SearchProjectAutocompleteComponent {
if ((value || '').trim()) {
const index = this.filteredProjects.findIndex((project) => {
if (project.projectName) {
if (project?.projectName) {
return project.projectName === value;
} else if (project?.name) {
return project.name === value;
}
});
if (index > -1) {
@ -92,22 +103,19 @@ export class SearchProjectAutocompleteComponent {
}
public selected(event: MatAutocompleteSelectedEvent): void {
const index = this.filteredProjects.findIndex((project) => project === event.option.value);
if (index !== -1) {
if (this.singleOutput) {
this.selectionChanged.emit(this.filteredProjects[index]);
console.log(event.option.value);
if (this.singleOutput) {
this.selectionChanged.emit(event.option.value);
} else {
if (this.projects && this.projects.length > 0) {
this.projects.push(event.option.value);
} else {
if (this.projects && this.projects.length > 0) {
this.projects.push(this.filteredProjects[index]);
} else {
this.projects = [this.filteredProjects[index]];
}
this.selectionChanged.emit(this.projects);
this.nameInput.nativeElement.value = '';
this.myControl.setValue(null);
this.projects = [event.option.value];
}
this.selectionChanged.emit(this.projects);
this.nameInput.nativeElement.value = '';
this.myControl.setValue(null);
}
}
}

2
console/src/app/pages/orgs/org-create/org-create.component.html
View File

@ -164,7 +164,7 @@
</div>
<div class="btn-container">
<button color="accent" class="continue-button" [disabled]="orgForm.invalid || userForm.invalid"
<button color="primary" class="continue-button" [disabled]="orgForm.invalid || userForm.invalid"
type="submit" mat-raised-button>{{ 'ACTIONS.FINISH' | translate }}</button>
</div>
</form>

2
console/src/app/pages/orgs/org-create/org-create.component.ts
View File

@ -68,7 +68,7 @@ export class OrgCreateComponent {
this.orgForm = this.fb.group({
name: ['', [Validators.required]],
domain: ['', [Validators.required]],
domain: [''],
});
this.orgService.GetPasswordComplexityPolicy().then(data => {
this.policy = data.toObject();

2
console/src/app/pages/orgs/org-grid/org-grid.component.html
View File

@ -37,7 +37,7 @@
</div>
<ng-template appHasRole [appHasRole]="['iam.write']">
<div class="card add-org-button" [routerLink]="[ '/orgs/create' ]">
<div class="card add-org-button" [routerLink]="[ '/org/create' ]">
<mat-icon class="icon">add</mat-icon>
<span>Add new organization</span>
</div>

2
console/src/app/pages/project-grant-create/project-grant-create.component.html
View File

@ -11,7 +11,7 @@
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{'PROJECT.GRANT.CREATE.SEL_ORG' | translate}}</h1>
<form (ngSubmit)="searchOrg(domain)">
<form (ngSubmit)="searchOrg(domain.value)">
<mat-form-field class="org-domain">
<mat-label>{{'PROJECT.GRANT.CREATE.SEL_ORG' | translate}}</mat-label>
<input #domain matInput />

8
console/src/app/pages/project-grant-create/project-grant-create.component.ts
View File

@ -42,15 +42,19 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
this.routeSubscription.unsubscribe();
}
public searchOrg(domain: any): void {
this.orgService.getOrgByDomainGlobal(domain.value).then((ret) => {
public searchOrg(domain: string): void {
console.log(domain);
this.orgService.getOrgByDomainGlobal(domain).then((ret) => {
const tmp = ret.toObject();
console.log(ret.toObject());
this.authService.GetActiveOrg().then((org) => {
console.log(org);
if (tmp !== org) {
this.org = tmp;
}
});
this.org = ret.toObject();
console.log(this.org);
}).catch(error => {
this.toast.showError(error.message);
});

4
console/src/app/pages/user-create/user-create.component.html
View File

@ -90,7 +90,7 @@
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield">
<!-- <mat-form-field class="formfield">
<mat-label>{{ 'USER.ADDRESS.STREET' | translate }}</mat-label>
<input matInput formControlName="streetAddress" />
<mat-error *ngIf="streetAddress?.invalid && streetAddress?.errors?.required">
@ -124,7 +124,7 @@
<mat-error *ngIf="country?.invalid && country?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
</mat-form-field>
</mat-form-field> -->
</div>
<div class="btn-container">
<button color="accent" [disabled]="userForm.invalid" type="submit"

6
console/src/app/pages/user-grant-create/user-grant-create.component.ts
View File

@ -3,7 +3,7 @@ import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs';
import { Org } from 'src/app/proto/generated/auth_pb';
import { Project, ProjectRole, UserGrant } from 'src/app/proto/generated/management_pb';
import { ProjectGrantView, ProjectRole, ProjectView, UserGrant } from 'src/app/proto/generated/management_pb';
import { AuthService } from 'src/app/services/auth.service';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { ToastService } from 'src/app/services/toast.service';
@ -56,8 +56,8 @@ export class UserGrantCreateComponent implements OnDestroy {
});
}
public selectProject(project: Project.AsObject): void {
this.projectId = project.id;
public selectProject(project: ProjectView.AsObject | ProjectGrantView.AsObject | any): void {
this.projectId = project.id ? project.id : project.projectId ? project.projectId : undefined;
}
public selectRoles(roles: ProjectRole.AsObject[]): void {

4
console/src/app/proto/generated/management_pb.d.ts vendored
View File

@ -52,6 +52,9 @@ export class ChangeRequest extends jspb.Message {
getSequenceOffset(): number;
setSequenceOffset(value: number): void;
getAsc(): boolean;
setAsc(value: boolean): void;
serializeBinary(): Uint8Array;
toObject(includeInstance?: boolean): ChangeRequest.AsObject;
static toObject(includeInstance: boolean, msg: ChangeRequest): ChangeRequest.AsObject;
@ -66,6 +69,7 @@ export namespace ChangeRequest {
secId: string,
limit: number,
sequenceOffset: number,
asc: boolean,
}
}

31
console/src/app/proto/generated/management_pb.js
View File

@ -3377,7 +3377,8 @@ proto.caos.zitadel.management.api.v1.ChangeRequest.toObject = function(includeIn
id: jspb.Message.getFieldWithDefault(msg, 1, ""),
secId: jspb.Message.getFieldWithDefault(msg, 2, ""),
limit: jspb.Message.getFieldWithDefault(msg, 3, 0),
sequenceOffset: jspb.Message.getFieldWithDefault(msg, 4, 0)
sequenceOffset: jspb.Message.getFieldWithDefault(msg, 4, 0),
asc: jspb.Message.getFieldWithDefault(msg, 5, false)
};
if (includeInstance) {
@ -3430,6 +3431,10 @@ proto.caos.zitadel.management.api.v1.ChangeRequest.deserializeBinaryFromReader =
var value = /** @type {number} */ (reader.readUint64());
msg.setSequenceOffset(value);
break;
case 5:
var value = /** @type {boolean} */ (reader.readBool());
msg.setAsc(value);
break;
default:
reader.skipField();
break;
@ -3487,6 +3492,13 @@ proto.caos.zitadel.management.api.v1.ChangeRequest.serializeBinaryToWriter = fun
f
);
}
f = message.getAsc();
if (f) {
writer.writeBool(
5,
f
);
}
};
@ -3550,6 +3562,23 @@ proto.caos.zitadel.management.api.v1.ChangeRequest.prototype.setSequenceOffset =
};
/**
* optional bool asc = 5;
* Note that Boolean fields may be set to 0/1 when serialized from a Java server.
* You should avoid comparisons like {@code val === true/false} in those cases.
* @return {boolean}
*/
proto.caos.zitadel.management.api.v1.ChangeRequest.prototype.getAsc = function() {
return /** @type {boolean} */ (jspb.Message.getFieldWithDefault(this, 5, false));
};
/** @param {boolean} value */
proto.caos.zitadel.management.api.v1.ChangeRequest.prototype.setAsc = function(value) {
jspb.Message.setProto3BooleanField(this, 5, value);
};
/**
* List of repeated fields within this message type.

4
console/src/app/services/grpc-org.interceptor.ts
View File

@ -21,10 +21,6 @@ export class GrpcOrgInterceptor implements GrpcInterceptor {
if (!metadata[orgKey] && org) {
metadata[orgKey] = org.id ?? '';
}
// metadata['x-zitadel-login'] = 'true';
// metadata['x-zitadel-userid'] = '58922557365027097';
// metadata['x-zitadel-orgid'] = '58922556878487833';
return await next.handle(req, metadata);
}
}

3
console/src/app/services/org.service.ts
View File

@ -6,6 +6,7 @@ import { ManagementServicePromiseClient } from '../proto/generated/management_gr
import {
AddOrgDomainRequest,
AddOrgMemberRequest,
Domain,
Iam,
Org,
OrgDomain,
@ -123,7 +124,7 @@ export class OrgService {
}
public async getOrgByDomainGlobal(domain: string): Promise<Org> {
const req = new OrgDomain();
const req = new Domain();
req.setDomain(domain);
return await this.request(
c => c.getOrgByDomainGlobal,

2
console/src/app/services/toast.service.ts
View File

@ -12,7 +12,7 @@ export class ToastService {
}
public showError(message: string): void {
this.showMessage(message, 'close');
this.showMessage(decodeURI(message), 'close');
}
private showMessage(message: string, action: string): void {

2
console/src/assets/environment.json
View File

@ -3,5 +3,5 @@
"mgmtServiceUrl": "https://api.zitadel.dev",
"adminServiceUrl":"https://api.zitadel.dev",
"issuer": "https://issuer.zitadel.dev",
"clientid": "60073514127912158@zitadel"
"clientid": "61542534056307917@zitadel"
}

4
console/src/assets/i18n/de.json
View File

@ -344,7 +344,8 @@
"FIRSTNAME": "Vorname",
"LASTNAME": "Nachname",
"EMAIL": "Email",
"ROLES": "Rollen"
"ROLES": "Rollen",
"USERID":"User Id"
},
"GRANT": {
"TITLE": "Grants",
@ -503,6 +504,7 @@
},
"CHANGES": {
"LISTTITLE":"Letzte Änderungen",
"BOTTOM":"Ende",
"ORG": {
"TITLE":"Aktivität",
"DESCRIPTION":"Hier sehen Sie die letzten Vorkommnisse die die Organisation betreffen"

4
console/src/assets/i18n/en.json
View File

@ -345,7 +345,8 @@
"FIRSTNAME": "Firstname",
"LASTNAME": "Lastname",
"EMAIL": "Email",
"ROLES": "Roles"
"ROLES": "Roles",
"USERID":"User Id"
},
"GRANT": {
"TITLE": "Grants",
@ -504,6 +505,7 @@
},
"CHANGES": {
"LISTTITLE":"Last Changes",
"BOTTOM":"Bottom",
"ORG": {
"TITLE":"Activity",
"DESCRIPTION":"Here you can see the latest events that have affected an organization change"

41
console/src/styles.scss
View File

@ -188,26 +188,35 @@ body {
"Droid Sans", "Helvetica Neue", sans-serif;
}
.max-width-container {
max-width: 1350px;
padding: 0 1.5rem;
padding-top: 4rem;
padding-left: 4rem;
@media only screen and (min-width: 1024px) {
max-width: 1120px;
}
@media only screen and (min-width: 899px) {
max-width: 899px;
}
}
.enlarged-container {
max-width: 1350px;
padding: 0 1.5rem;
padding-top: 4rem;
padding-left: 4rem;
}
@media only screen and (min-width: 1024px) {
max-width: 1120px;
}
@media only screen and (min-width: 899px) {
max-width: 899px;
}
@media only screen and (max-width: 500px) {
padding-left: 1.5rem;
}
}
.enlarged-container {
padding: 0 1.5rem;
padding-top: 4rem;
padding-left: 4rem;
@media only screen and (max-width: 500px) {
padding-left: 1.5rem;
}
}
.mat-dialog-container {
border-radius: 0.5rem;