diff --git a/frontend/angular.json b/frontend/angular.json index c262ba7..a8e7bf5 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -26,8 +26,14 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", - "assets": ["src/favicon.ico", "src/assets"], - "styles": ["src/styles.scss"], + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", + "src/styles.scss" + ], "scripts": [] }, "configurations": { @@ -84,7 +90,20 @@ "lint": { "builder": "@angular-eslint/builder:lint", "options": { - "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "inlineStyleLanguage": "scss", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", + "src/styles.scss" + ], + "scripts": [] } } } diff --git a/frontend/package-lock.json b/frontend/package-lock.json index db8618a..6c55598 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -15,11 +15,14 @@ "@angular/core": "^17.2.4", "@angular/forms": "^17.2.4", "@angular/material": "^17.2.2", + "@angular/material-moment-adapter": "^17.2.2", "@angular/platform-browser": "^17.2.4", "@angular/platform-browser-dynamic": "^17.2.4", "@angular/router": "^17.2.4", + "angular-iban": "^17.0.0", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", + "moment": "^2.30.1", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" @@ -1196,6 +1199,19 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material-moment-adapter": { + "version": "17.2.2", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-17.2.2.tgz", + "integrity": "sha512-1h8TnghXFpE3z8gWdANan400qtUQnYxRZoKmheN/y3qkTghfNAdGVYxttGE0FnX8Vj6qKURGFF8NsGByl4cmhg==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": "^17.0.0 || ^18.0.0", + "@angular/material": "17.2.2", + "moment": "^2.18.1" + } + }, "node_modules/@angular/platform-browser": { "version": "17.2.4", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz", @@ -7148,6 +7164,19 @@ "ajv": "^8.8.2" } }, + "node_modules/angular-iban": { + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/angular-iban/-/angular-iban-17.0.0.tgz", + "integrity": "sha512-8wnVH2nfMN3hk/5lWOmcCRA0RAVpCk49stCXkxiiMbXeRNd2pFBM+hlZIrhC+Nxhxf07KnQOpngmXGHiv29lug==", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^17.x", + "@angular/core": "^17.x", + "iban": "0.0.14" + } + }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -14821,6 +14850,14 @@ "node": ">=10" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/mrmime": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", @@ -20060,6 +20097,14 @@ "tslib": "^2.3.0" } }, + "@angular/material-moment-adapter": { + "version": "17.2.2", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-17.2.2.tgz", + "integrity": "sha512-1h8TnghXFpE3z8gWdANan400qtUQnYxRZoKmheN/y3qkTghfNAdGVYxttGE0FnX8Vj6qKURGFF8NsGByl4cmhg==", + "requires": { + "tslib": "^2.3.0" + } + }, "@angular/platform-browser": { "version": "17.2.4", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.4.tgz", @@ -24487,6 +24532,14 @@ "fast-deep-equal": "^3.1.3" } }, + "angular-iban": { + "version": "17.0.0", + "resolved": "https://registry.npmjs.org/angular-iban/-/angular-iban-17.0.0.tgz", + "integrity": "sha512-8wnVH2nfMN3hk/5lWOmcCRA0RAVpCk49stCXkxiiMbXeRNd2pFBM+hlZIrhC+Nxhxf07KnQOpngmXGHiv29lug==", + "requires": { + "tslib": "^2.3.0" + } + }, "ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -30150,6 +30203,11 @@ "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", "dev": true }, + "moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==" + }, "mrmime": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index fd32026..c188965 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -21,11 +21,14 @@ "@angular/core": "^17.2.4", "@angular/forms": "^17.2.4", "@angular/material": "^17.2.2", + "@angular/material-moment-adapter": "^17.2.2", "@angular/platform-browser": "^17.2.4", "@angular/platform-browser-dynamic": "^17.2.4", "@angular/router": "^17.2.4", + "angular-iban": "^17.0.0", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", + "moment": "^2.30.1", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 55e1b77..883dea2 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -3,11 +3,13 @@ import { RouterModule, Routes, provideRouter, withComponentInputBinding } from ' import { StudentListComponent } from './components/students/student-list/student-list.component'; import { VisitsComponent } from './components/visits/visits.component'; import { VisitsDatetimeComponent } from './components/visits/visits-datetime/visits-datetime.component'; +import { StudentRegisterComponent } from './components/students/student-register/student-register.component'; const routes: Routes = [ { path: 'students', component: StudentListComponent }, { path: 'visits', component: VisitsComponent }, { path: 'select', component: VisitsDatetimeComponent }, + { path: 'register', component: StudentRegisterComponent }, { path: 'visits/:date/:time', component: VisitsComponent }, { path: '**', redirectTo: 'students' }, ]; diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 59461c3..18b0b5b 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { FormsModule } from '@angular/forms'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { StudentListComponent } from './components/students/student-list/student-list.component'; @@ -20,6 +20,18 @@ import { VisitsDatetimeComponent } from './components/visits/visits-datetime/vis import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; +import {MY_DATE_FORMAT, StudentRegisterComponent} from './components/students/student-register/student-register.component'; +import { MatStepperModule } from '@angular/material/stepper'; +import { MatInputModule } from '@angular/material/input'; +import { MatButtonModule } from '@angular/material/button'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatSelectModule } from '@angular/material/select'; +import { MatIconModule } from '@angular/material/icon'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core'; +import { MomentDateAdapter } from '@angular/material-moment-adapter'; +import {AngularIbanModule} from "angular-iban"; @NgModule({ declarations: [ @@ -33,6 +45,7 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; VisitsComponent, StudentEnrollComponent, VisitsDatetimeComponent, + StudentRegisterComponent, ], imports: [ BrowserModule, @@ -47,8 +60,21 @@ import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; MatFormFieldModule, MatRippleModule, MatNativeDateModule, + MatStepperModule, + ReactiveFormsModule, + MatInputModule, + MatButtonModule, + MatRadioModule, + MatSelectModule, + MatCheckboxModule, + MatTooltipModule, + MatIconModule, + AngularIbanModule + ], + providers: [ + { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] }, + { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT } ], - providers: [], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/frontend/src/app/components/students/student-register/student-register.component.html b/frontend/src/app/components/students/student-register/student-register.component.html new file mode 100644 index 0000000..e5c5a72 --- /dev/null +++ b/frontend/src/app/components/students/student-register/student-register.component.html @@ -0,0 +1,163 @@ +
+ + + +
+ Persönliche Informationen +
+ + Name + + + + + Nachname + + + + + Geburtstag + + + + + + + Geschlecht + + männlich + weiblich + divers + + +
+
+ + Adresse + + + + + Postleitzahl + + + + + Telefon + + + + + E-Mail + + Ungültige E-Mail Adresse + +
+
+
+ +
+ + + +
+ Bank Informationen +
+
+ + Kontoinhaber + + + + + IBAN + + +
+ +
+ + BIC + + + + + Name der Bank + + +
+
+ +
+ + Einzugsermächtigung +
+
+ +
+ + +
+ + + +
+ Einwilligung +
+ + Einwilligung zur Erhebung, Speicherung, Verarbeitung und Nutzung von + personenbezogenen Daten + +
+
+
+ + Einverständniserklärung zur Nutzung von Bild- und Videomaterial + +
+
+ +
+ + +
+ + + +
diff --git a/frontend/src/app/components/students/student-register/student-register.component.scss b/frontend/src/app/components/students/student-register/student-register.component.scss new file mode 100644 index 0000000..b45bf5a --- /dev/null +++ b/frontend/src/app/components/students/student-register/student-register.component.scss @@ -0,0 +1,53 @@ +.stepperContainer { + display: flex; + justify-content: space-around; +} + +.mat-stepper-horizontal { + margin-top: 8px; + background-color: transparent; + min-width: 50%; +} + +.mat-form-field { + margin-top: 16px; +} + +.flexContainerRow { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.width20 { + width: 20%; +} +.width30 { + width: 30%; +} +.flexContainerColumn { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.leftContainer { + display: flex; + flex-direction: column; + width: 45%; +} +.rightContainer { + display: flex; + flex-direction: column; + width: 45%; +} + +.backButton { + margin-right: 10px; +} + +textarea { + font-family: inherit; + padding: 5px; + resize: none; +} + diff --git a/frontend/src/app/components/students/student-register/student-register.component.spec.ts b/frontend/src/app/components/students/student-register/student-register.component.spec.ts new file mode 100644 index 0000000..11107a6 --- /dev/null +++ b/frontend/src/app/components/students/student-register/student-register.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StudentRegisterComponent } from './student-register.component'; + +describe('StudentRegisterComponent', () => { + let component: StudentRegisterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [StudentRegisterComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(StudentRegisterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/students/student-register/student-register.component.ts b/frontend/src/app/components/students/student-register/student-register.component.ts new file mode 100644 index 0000000..9a804fa --- /dev/null +++ b/frontend/src/app/components/students/student-register/student-register.component.ts @@ -0,0 +1,138 @@ +import {Component, input, OnInit} from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import {ValidatorService} from "angular-iban"; +import {StudentRegistration} from "../../../models/student-registration"; +import {RegisterService} from "../../../services/register/register.service"; + +export const MY_DATE_FORMAT= { + parse: { + dateInput: 'DD.MM.YYYY' + }, + display: { + dateInput: 'DD.MM.YYYY', + monthYearLabel: 'MMM YYYY', + dateA11yLabel: 'DD.MM.YYYY', + monthYearA11yLabel: 'MMMM YYYY' + } +}; + +@Component({ + selector: 'li-student-register', + templateUrl: './student-register.component.html', + styleUrls: ['./student-register.component.scss'], +}) +export class StudentRegisterComponent implements OnInit { + firstFormGroup!: FormGroup; + secondFormGroup!: FormGroup; + thirdFormGroup!: FormGroup; + infoTextEinzugermaechtigung = + 'Hiermit ermächtige ich die Tanz- und Sportschule Li-Dance, Inh. Lydia Kolepp (nachfolgend Li-Dance) die Monatsbeiträge i.H.v. oben genannten Betrag, diverse Einmalzahlungen und sonstige' + + 'Verbindlichkeiten zu Lasten meines Kontos einzuziehen.' + + 'Bitte beachten Sie, dass im Falle einer unberechtigten Rücklastschrift Li-Dance ein' + + 'Verwaltungsaufwand entsteht und eine Gebühr i.H.v. derzeit 15,- € berechnet wird. Diese Gebühr' + + 'wird zusammen mit dem nachfolgenden Monatsbeitrag vom gleichen Konto abgebucht.'; + + infoTextEinwilligungserklaerung = + 'Ich bin darüber informiert worden, dass meine personenbezogenen Daten aufgrund rechtlicher' + + 'Vorgaben mindestens 10 Jahre nach Vertragsende aufbewahrt werden müssen.' + + 'Ich bin damit einverstanden, dass die oben genannten personenbezogenen Daten zu den oben' + + 'genannten Zwecken erhoben, gespeichert, verarbeitet, genutzt und ggfs. weitergegeben werden.' + + 'Ich bin darauf hingewiesen worden, dass die im Rahmen der vorstehend genannten Zwecke' + + 'erhobenen persönlichen Daten meiner Person unter Beachtung der EU-' + + 'Datenschutzgrundverordnung (DSGVO) erhoben, gespeichert, genutzt und übermittelt werden.' + + 'Ich bin zudem darauf hingewiesen worden, dass die Erhebung, Speicherung, Verarbeitung und' + + 'Nutzung meiner Daten auf freiwilliger Basis erfolgt.' + + 'Ich bin darüber informiert worden, dass diese Einverständniserklärung jederzeit mit sofortiger' + + 'Wirkung verweigert, bzw. jederzeit mit Wirkung für die Zukunft widerrufen werden kann. Meine' + + 'Widerrufserklärung werde ich richten an die unten angegebene Adresse'; + + infoTextEinverstaendniserklaerung = + 'Ich bin damit einverstanden, dass Bilder und Videos der Tanzschule und der Veranstaltungen,' + + 'die durch die Tanzschule organisiert sind und/oder an denen die Tanzschule teilnimmt, auf' + + 'denen ich selbst, mein Sohn oder meine Tochter zu sehen ist auf den Webseiten von Li-Dance und in anderen Online- und/oder Printmedien veröffentlicht' + + 'werden und für Werbezwecke von Li-Dance genutzt werden dürfen. Rechtsgrundlage: Das Recht am eigenen Bild ist ein Teil des vom Gesetz geschützten' + + 'allgemeinen Persönlichkeitsrechts (§22 Kunsturheberrechtsgesetz). Es gilt der Grundsatz, dass' + + 'Bild- und Video-Material nur mit Einwilligung des Abgebildeten verbreitet oder veröffentlicht' + + 'werden kann. Es handelt sich hierbei um eine rechtsgeschäftliche Willenserklärung. Deshalb' + + 'kann bei Minderjährigen eine Einwilligung nur durch den gesetzlichen Vertreter erfolgen.' + + 'Diese Einverständniserklärung kann mit sofortiger Wirkung verweigert, bzw. jederzeit mit' + + 'Wirkung für die Zukunft widerrufen werden. Ein Widerruf kann einen Ausschluss aus der' + + 'jeweiligen Veranstaltung zur Folge haben.' + + 'Ein späterer rückwirkender Widerruf für aktuell stattfindende bzw. bereits stattgefundene' + + 'Veranstaltungen ist ausgeschlossen.'; + + constructor(private _formBuilder: FormBuilder, private registerService: RegisterService) {} + + ngOnInit() { + + this.firstFormGroup = this._formBuilder.group({ + firstName: ['', Validators.required], + lastName: ['', Validators.required], + birthdate: ['', Validators.required], + postalCode: ['', [Validators.required, Validators.pattern(/^\d+$/)]], //^: Asserts the start of the string. \d+: Matches one or more digits.$: Asserts the end of the string. + address: ['', Validators.required], + phone: ['', [Validators.required, Validators.pattern(/^(\+?\d{1,3})?[ ]*\d{9,}$/)]], + gender: ['', Validators.required], + email: ['', [Validators.required, Validators.email]], + }); + + this.secondFormGroup = this._formBuilder.group({ + accountHolder: ['', Validators.required], + iban: ['', [Validators.required, ValidatorService.validateIban]], + bic: ['', [Validators.required, Validators.pattern(/^[A-Z]{6}[A-Z0-9]{2}([A-Z0-9]{3})?$/)]], + nameOfFinancialInstitute: ['', Validators.required], + directDebitAuthorization: ['', Validators.required], + }); + + this.thirdFormGroup = this._formBuilder.group({ + consent: ['', Validators.required], + declarationOfConsent: ['', Validators.required], + }); + + this.secondFormGroup.get("iban")?.valueChanges.subscribe(value => { + if(value) { + this.capitalizeFirstTwoLetters(); + } + }) + } + + capitalizeFirstTwoLetters() { + let ibanValue = this.secondFormGroup.get("iban")?.value + if(ibanValue.length >= 2) { + this.secondFormGroup.patchValue({ + iban: ibanValue.substring(0,2).toUpperCase()+ibanValue.substring(2) + },{emitEvent:false}) //Prevent circular change detection + } + } + + removeWhiteSpace(input:string):string { + return input.replace(/\s+/g, '') + } + + submit() { + const studentRegistration: StudentRegistration = { + // First Form Group + firstName: this.firstFormGroup.get('firstName')?.value, + lastName: this.firstFormGroup.get('lastName')?.value, + birthdate: this.firstFormGroup.get('birthdate')?.value, + postalCode: this.firstFormGroup.get('postalCode')?.value, + address: this.firstFormGroup.get('address')?.value, + phone: this.removeWhiteSpace(this.firstFormGroup.get('phone')?.value), + email: this.firstFormGroup.get('email')?.value, + + // Second Form Group + accountHolder: this.secondFormGroup.get('accountHolder')?.value, + iban: this.secondFormGroup.get('iban')?.value, + bic: this.secondFormGroup.get('bic')?.value, + nameOfFinancialInstitute: this.secondFormGroup.get('nameOfFinancialInstitute')?.value, + directDebitAuthorization: this.secondFormGroup.get('directDebitAuthorization')?.value, + + // Third Form Group + consent: this.thirdFormGroup.get('consent')?.value, + declarationOfConsent: this.thirdFormGroup.get('declarationOfConsent')?.value + }; + + this.registerService.set(studentRegistration); + + } +} diff --git a/frontend/src/app/components/visits/visits.component.html b/frontend/src/app/components/visits/visits.component.html index 786a3ec..471ce26 100644 --- a/frontend/src/app/components/visits/visits.component.html +++ b/frontend/src/app/components/visits/visits.component.html @@ -6,8 +6,8 @@

{{ courseVisit?.name }}

- {{ courseVisit?.date | date: 'dd.MM.yyyy' }}, {{ courseVisit?.begin }} - - {{ courseVisit?.end }} + {{ courseVisit.date | date: 'dd.MM.yyyy' }}, {{ courseVisit.begin }} - + {{ courseVisit.end }}

diff --git a/frontend/src/app/models/student-registration.ts b/frontend/src/app/models/student-registration.ts new file mode 100644 index 0000000..3f5d47e --- /dev/null +++ b/frontend/src/app/models/student-registration.ts @@ -0,0 +1,16 @@ +export interface StudentRegistration { + firstName: string; + lastName: string; + birthdate: Date; + postalCode: string; + address: string; + phone: string; + email: string; + accountHolder: string; + iban: string; + bic: string; + nameOfFinancialInstitute: string; + directDebitAuthorization: boolean; + consent: boolean; + declarationOfConsent: boolean; +} diff --git a/frontend/src/app/services/register/register.service.ts b/frontend/src/app/services/register/register.service.ts new file mode 100644 index 0000000..0cde0f8 --- /dev/null +++ b/frontend/src/app/services/register/register.service.ts @@ -0,0 +1,21 @@ +import { Injectable } from '@angular/core'; +import {HttpClient} from "@angular/common/http"; +import {StudentRegistration} from "../../models/student-registration"; +import {Observable} from "rxjs"; +import { environment } from 'src/environments/environment'; + +@Injectable({ + providedIn: 'root' +}) +export class RegisterService { + private readonly serviceName = 'register'; + constructor(private http: HttpClient) { } + + public set(registration: StudentRegistration): Observable { + const payload = JSON.stringify(registration); + + return this.http.post(`${environment.apiUrl}${this.serviceName}/set.php`, + payload + ); + } +} diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 7082521..949e7c4 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,67 +1,41 @@ /* Provide sufficient contrast against white background */ -@import '~bootstrap-icons/font/bootstrap-icons.css'; -a { - color: #0366d6; +@use "@angular/material" as mat; +@include mat.core(); + +$my-primary: mat.define-palette(mat.$blue-palette); +$my-accent: mat.define-palette(mat.$blue-palette); + + +$my-theme: mat.define-light-theme(( + color: ( + primary: $my-primary, + accent: $my-accent, + ), + typography: mat.define-typography-config(), + density: 0, +)); + +// Emit theme-dependent styles for common features used across multiple components. +@include mat.core-theme($my-theme); +@include mat.all-component-themes($my-theme); + +.mdc-button { + background: rgba(255, 255, 255, 0.82) !important; +} +.mat-horizontal-stepper-wrapper { + width: 100%; } -code { - color: #e01a76; -} -.btn-primary { - color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; + +body { + margin: 0; + font-family: Roboto, 'Helvetica Neue', sans-serif; + background-color: rgb(245, 126, 32); } html, body { height: 100%; } - -body { - background-color: rgb(245, 126, 32); - margin: 0; - font-family: Roboto, 'Helvetica Neue', sans-serif; -} - -.mat-calendar-body-cell-content { - background-color: #1861ac; - color: #fff; - font-weight: bold; - font-size: 2em; -} - -.mat-calendar-table { - border: 1px solid white; -} - -.mat-calendar-table-header { - tr { - th { - padding-top: 2em; - } - - th.mat-calendar-table-header-divider { - padding: 0; - } - } -} - -.mat-calendar-controls, -.mat-calendar-table-header, -.mat-calendar-body-label { - color: #fff; - font-size: 2em; -} - -.mat-calendar-previous-button, -.mat-calendar-next-button, -.mat-calendar-period-button { - font-size: 2em; - height: 2em; - color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; -}