diff --git a/setup-wizard/src/app/app.component.html b/setup-wizard/src/app/app.component.html index fcdf9a8fe..3cdc8b392 100644 --- a/setup-wizard/src/app/app.component.html +++ b/setup-wizard/src/app/app.component.html @@ -1,12 +1,7 @@ - - - - Embassy Setup Wizard - - - - - - + + + + + diff --git a/setup-wizard/src/app/pages/home/home.page.html b/setup-wizard/src/app/pages/home/home.page.html index b4ec3e492..ef91a0d4d 100644 --- a/setup-wizard/src/app/pages/home/home.page.html +++ b/setup-wizard/src/app/pages/home/home.page.html @@ -1,76 +1,114 @@ - -
-
-

No data drives found

-

Please connect a data drive to your embassy and refresh the page.

-
-
-

Select Data Drive

- - - - {{drive.logicalname}} - {{drive.labels}} - - - - Currently using {{drive.used}} out of {{drive.capacity}} bytes. - - -
- - Next - -
-
-
-
- - - - - - Start Fresh - Get started with a brand new Embassy - - - - - - - Recover - Recover the data from an old embassy - - - - - + + + + -
+
+ +
+ + + + {{ stateService.dataDrive ? 'Startup Options' : 'Select Data Drive'}} + + + +
+
+

No data drives found

+

Please connect a data drive to your embassy and refresh the page.

+ + Refresh + +
+
+ + + {{drive.logicalname}} + {{drive.labels}} + + + + Using {{drive.used}} out of {{drive.capacity}} bytes. + + +
+ + Next + +
+
+
+
+ + + Start Fresh + Get started with a brand new Embassy + + + + + Recover + Recover the data from an old embassy + + +
+ + + + + +

+ Choose drive to save all Embassy data to. +

+

+ Spin up a brand new Embassy, or recover data from an old device. +

+ + + + + +
+ +
+

Contact/Community

+ + + + + + + +
+ + + diff --git a/setup-wizard/src/app/pages/home/home.page.scss b/setup-wizard/src/app/pages/home/home.page.scss index 4891cbf13..506e177dd 100644 --- a/setup-wizard/src/app/pages/home/home.page.scss +++ b/setup-wizard/src/app/pages/home/home.page.scss @@ -1,3 +1,43 @@ .selected { - border: 1px solid white; + border: 4px solid gray; } +ion-card-title { + margin: 24px 0; + font-family: 'Montserrat'; + font-size: x-large; + --color: var(--ion-color-light); +} + +ion-item { + --border-radius: 4px; + --border-style: solid; + --border-width: 1px; + --border-color: var(--ion-color-light); +} + +.input-label { + text-align: left; + padding-bottom: 2px; + font-size: small; + color: var(--ion-color-light); + font-weight: bold; +} + +.claim-button { + margin-inline-start: 0; + margin-inline-end: 0; + margin-top: 24px; + height: 48px; + --background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%); +} + +.card-footer { + text-align: left; + --background: rgb(222, 222, 222); + border-top: solid; + border-width: 1px; + border-color: var(--ion-color-medium); + ion-item { + --border-color: var(--ion-color-medium); + } +} \ No newline at end of file diff --git a/setup-wizard/src/app/pages/home/home.page.ts b/setup-wizard/src/app/pages/home/home.page.ts index a151d55a0..1ccbd65a1 100644 --- a/setup-wizard/src/app/pages/home/home.page.ts +++ b/setup-wizard/src/app/pages/home/home.page.ts @@ -10,8 +10,9 @@ import { PasswordPage } from '../password/password.page' styleUrls: ['home.page.scss'], }) export class HomePage { - dataDrives = null + dataDrives = [] selectedDrive: DataDrive = null + console = console constructor( private readonly apiService: ApiService, @@ -22,9 +23,6 @@ export class HomePage { ) {} async ngOnInit() { - const loader = await this.loadingCtrl.create({ - message: 'Selecting data drive' - }) if(!this.stateService.dataDrive) { const loader = await this.loadingCtrl.create({ message: 'Fetching data drives' @@ -47,7 +45,7 @@ export class HomePage { const alert = await this.alertController.create({ cssClass: 'my-custom-class', header: 'Warning!', - message: 'This drive will be entirely wiped of all memory.', + message: 'This drive will be entirely wiped of all existing memory.', backdropDismiss: false, buttons: [ { @@ -91,9 +89,11 @@ export class HomePage { cssClass: 'pw-modal', }) modal.onDidDismiss().then(ret => { - const pass = ret.data.password - if (pass) { - this.submitPassword(pass) + if(ret.data) { + const pass = ret.data.password + if (pass) { + this.submitPassword(pass) + } } }) await modal.present(); @@ -107,6 +107,7 @@ export class HomePage { try { await this.apiService.submitPassword(pw) + console.log('reloading') location.reload() } catch (e) { } finally { diff --git a/setup-wizard/src/app/pages/password/password.page.html b/setup-wizard/src/app/pages/password/password.page.html index f4845f94a..252465bde 100644 --- a/setup-wizard/src/app/pages/password/password.page.html +++ b/setup-wizard/src/app/pages/password/password.page.html @@ -1,5 +1,5 @@ - + Enter Password Create Password @@ -13,13 +13,13 @@
- Password: - Verify Password: + Password: + Verify Password:

{{error}}

- Cancel - Submit + Cancel + Submit
diff --git a/setup-wizard/src/app/pages/password/password.page.scss b/setup-wizard/src/app/pages/password/password.page.scss index e69de29bb..dae97d4ee 100644 --- a/setup-wizard/src/app/pages/password/password.page.scss +++ b/setup-wizard/src/app/pages/password/password.page.scss @@ -0,0 +1,7 @@ +.claim-button { + margin-inline-start: 0; + margin-inline-end: 0; + margin-top: 24px; + height: 48px; + --background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%); +} \ No newline at end of file diff --git a/setup-wizard/src/app/pages/password/password.page.ts b/setup-wizard/src/app/pages/password/password.page.ts index 8f18f000d..d457de8c7 100644 --- a/setup-wizard/src/app/pages/password/password.page.ts +++ b/setup-wizard/src/app/pages/password/password.page.ts @@ -26,11 +26,13 @@ export class PasswordPage { async submitPassword () { if(!this.needsVer) { - if (this.password.length < 12) { - this.error="*passwords must be 12 characters or greater" - } else if (this.password !== this.passwordVer) { - this.error="*passwords dont match" + this.validate() + if(!this.error) { + this.checkMatch() } + this.modalController.dismiss({ + password: this.password, + }) } else { this.modalController.dismiss({ password: this.password, @@ -38,6 +40,20 @@ export class PasswordPage { } } + validate () { + if (this.password.length < 12) { + this.error="*passwords must be 12 characters or greater" + } + } + + checkMatch () { + if (this.password !== this.passwordVer) { + this.error="*passwords dont match" + } else { + this.error = '' + } + } + cancel () { this.modalController.dismiss() } diff --git a/setup-wizard/src/app/pages/recover/recover.page.html b/setup-wizard/src/app/pages/recover/recover.page.html index ec3fc862d..9878e971f 100644 --- a/setup-wizard/src/app/pages/recover/recover.page.html +++ b/setup-wizard/src/app/pages/recover/recover.page.html @@ -1,53 +1,95 @@ - -
-
-

No recovery drives found

-

Please connect a recovery drive to your embassy and refresh the page.

-
-
-

Select Recovery Drive

- - - {{drive.logicalname}} - {{drive.name}} - - - - Currently running {{drive.version}} - - -
- - Next - -
-
- -
-
-

Recovery Progress: {{ 100 * stateService.dataProgress }}%

- - - Go To Embassy - -
+ + + + + +
+ +
+ + + + {{ stateService.recoveryDrive && stateService.polling ? 'Recovery Progress: ' + (100 * stateService.dataProgress) + '%' : 'Select Recovery Drive'}} + + + +
+

No recovery drives found

+

Please connect a recovery drive to your embassy and refresh the page.

+
+
+
+ + + {{drive.logicalname}} + {{drive.name}} + + + + Currently running {{drive.version}} + + +
+ + Next + +
+
+ +
+
+ + + Go To Embassy + +
+ + + + + +

+ Choose drive recover Embassy data from. +

+

+ Recovering old Embassy data. +

+ + + + + +
+ +
+

Contact/Community

+ + + + + + + +
+ + + diff --git a/setup-wizard/src/app/pages/recover/recover.page.scss b/setup-wizard/src/app/pages/recover/recover.page.scss index c596bc370..d8b406cba 100644 --- a/setup-wizard/src/app/pages/recover/recover.page.scss +++ b/setup-wizard/src/app/pages/recover/recover.page.scss @@ -1,3 +1,44 @@ .selected { - border: 1px solid white; + border: 4px solid gray; +} + +ion-card-title { + margin: 24px 0; + font-family: 'Montserrat'; + font-size: x-large; + --color: var(--ion-color-light); +} + +ion-item { + --border-radius: 4px; + --border-style: solid; + --border-width: 1px; + --border-color: var(--ion-color-light); +} + +.input-label { + text-align: left; + padding-bottom: 2px; + font-size: small; + color: var(--ion-color-light); + font-weight: bold; +} + +.claim-button { + margin-inline-start: 0; + margin-inline-end: 0; + margin-top: 24px; + height: 48px; + --background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%); +} + +.card-footer { + text-align: left; + --background: rgb(222, 222, 222); + border-top: solid; + border-width: 1px; + border-color: var(--ion-color-medium); + ion-item { + --border-color: var(--ion-color-medium); + } } \ No newline at end of file diff --git a/setup-wizard/src/app/pages/recover/recover.page.ts b/setup-wizard/src/app/pages/recover/recover.page.ts index 6434f991c..18512fa6d 100644 --- a/setup-wizard/src/app/pages/recover/recover.page.ts +++ b/setup-wizard/src/app/pages/recover/recover.page.ts @@ -10,8 +10,9 @@ import { PasswordPage } from '../password/password.page' styleUrls: ['recover.page.scss'], }) export class RecoverPage { - dataDrives = null + recoveryDrives = [] selectedDrive: RecoveryDrive = null + loading = true constructor( private readonly apiService: ApiService, @@ -27,10 +28,12 @@ export class RecoverPage { message: 'Fetching recovery drives' }) await loader.present() - this.dataDrives = await this.apiService.getRecoveryDrives() + this.recoveryDrives = await this.apiService.getRecoveryDrives() - loader.dismiss() + loader.dismiss() + this.loading = false } else { + this.loading = false this.stateService.pollDataTransferProgress() } } @@ -57,9 +60,11 @@ export class RecoverPage { } }) modal.onDidDismiss().then(ret => { - const pass = ret.data.password - if(pass) { - this.submitPWAndDrive(pass) + if(ret.data) { + const pass = ret.data.password + if(pass) { + this.submitPWAndDrive(pass) + } } }) await modal.present(); diff --git a/setup-wizard/src/app/services/api/mock-api.service.ts b/setup-wizard/src/app/services/api/mock-api.service.ts index 927a1a556..b53d9c2bf 100644 --- a/setup-wizard/src/app/services/api/mock-api.service.ts +++ b/setup-wizard/src/app/services/api/mock-api.service.ts @@ -15,13 +15,13 @@ export class MockApiService extends ApiService { await pauseFor(2000) return { 'data-drive': - null, - // { - // logicalname: 'name1', - // labels: ['label 1', 'label 2'], - // capacity: 1600, - // used: 200, - // }, + // null, + { + logicalname: 'name1', + labels: ['label 1', 'label 2'], + capacity: 1600, + used: 200, + }, 'recovery-drive': null, // { @@ -44,13 +44,13 @@ export class MockApiService extends ApiService { await pauseFor(2000) return [ { - logicalname: 'name1', + logicalname: 'Name1', labels: ['label 1', 'label 2'], capacity: 1600, used: 200, }, { - logicalname: 'name2', + logicalname: 'Name2', labels: [], capacity: 1600, used: 0, diff --git a/setup-wizard/src/app/services/state.service.ts b/setup-wizard/src/app/services/state.service.ts index de06b7cbb..86f26a2af 100644 --- a/setup-wizard/src/app/services/state.service.ts +++ b/setup-wizard/src/app/services/state.service.ts @@ -18,6 +18,7 @@ export class StateService { ) {} async getState() { + this.loading = true const state = await this.apiService.getState() if(state) { this.dataDrive = state['data-drive'] diff --git a/setup-wizard/src/assets/fonts/Benton_Sans/BentonSans-Regular.otf b/setup-wizard/src/assets/fonts/Benton_Sans/BentonSans-Regular.otf new file mode 100644 index 000000000..68c339480 Binary files /dev/null and b/setup-wizard/src/assets/fonts/Benton_Sans/BentonSans-Regular.otf differ diff --git a/setup-wizard/src/assets/fonts/Montserrat/Montserrat-Regular.ttf b/setup-wizard/src/assets/fonts/Montserrat/Montserrat-Regular.ttf new file mode 100644 index 000000000..8d443d5d5 Binary files /dev/null and b/setup-wizard/src/assets/fonts/Montserrat/Montserrat-Regular.ttf differ diff --git a/setup-wizard/src/assets/png/logo.png b/setup-wizard/src/assets/png/logo.png new file mode 100644 index 000000000..1ae99f9d2 Binary files /dev/null and b/setup-wizard/src/assets/png/logo.png differ diff --git a/setup-wizard/src/global.scss b/setup-wizard/src/global.scss index 1d7415e17..8597f7fd0 100644 --- a/setup-wizard/src/global.scss +++ b/setup-wizard/src/global.scss @@ -25,19 +25,48 @@ @import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/flex-utils.css"; -.cancel-button { - color: #FF4961 !important; + +.alert-error .alert-title { + color: var(--ion-color-danger) !important; } -.okay-button { - color: #00AACC !important; +.loader { + --spinner-color: var(--ion-color-light) !important; } -.wiz-card { - max-width: 800px; margin: auto; margin-bottom: 10px; +ion-avatar { + width: 27px; + height: 27px; } -.pw-modal .modal-wrapper{ - width: 400px; - height: 300px; +ion-action-sheet { + --backdrop-opacity: 0.75 !important; } + +ion-alert { + --backdrop-opacity: 0.75 !important; +} + +ion-loading { + --backdrop-opacity: 0.75 !important; +} + +ion-item { + --highlight-color-valid: transparent; + --highlight-color-invalid: transparent; + --highlight-color-focused: var(--ion-color-light); +} + +.divider { + margin: 50px 0; + height: 2px; + background: linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255, 255, 255, 0.31) 50%,rgba(255,255,255,0) 100%); +} + +.footer { + margin-bottom: 24px; + ion-icon { + font-size: 28px; + margin-right: 10px; + } +} \ No newline at end of file diff --git a/setup-wizard/src/theme/variables.scss b/setup-wizard/src/theme/variables.scss index 8c5dd65aa..b45f8d437 100644 --- a/setup-wizard/src/theme/variables.scss +++ b/setup-wizard/src/theme/variables.scss @@ -3,234 +3,90 @@ /** Ionic CSS Variables **/ :root { + --ion-font-family: 'Benton Sans'; /** primary **/ - --ion-color-primary: #007495; - --ion-color-primary-rgb: 56, 128, 255; + --ion-color-primary: #428cff; + --ion-color-primary-rgb: 66,140,255; --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; + --ion-color-primary-contrast-rgb: 255,255,255; + --ion-color-primary-shade: #3a7be0; + --ion-color-primary-tint: #5598ff; /** secondary **/ - --ion-color-secondary: #00AACC; - --ion-color-secondary-rgb: 61, 194, 255; + --ion-color-secondary: #50c8ff; + --ion-color-secondary-rgb: 80,200,255; --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; + --ion-color-secondary-contrast-rgb: 255,255,255; + --ion-color-secondary-shade: #46b0e0; + --ion-color-secondary-tint: #62ceff; /** tertiary **/ - --ion-color-tertiary: #FF4961; - --ion-color-tertiary-rgb: 82, 96, 255; + --ion-color-tertiary: #6a64ff; + --ion-color-tertiary-rgb: 106,100,255; --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #FF4961; - --ion-color-tertiary-tint: #FF4961; + --ion-color-tertiary-contrast-rgb: 255,255,255; + --ion-color-tertiary-shade: #5d58e0; + --ion-color-tertiary-tint: #7974ff; /** success **/ - --ion-color-success: #a5e77f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; + --ion-color-success: #2fdf75; + --ion-color-success-rgb: 47,223,117; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0,0,0; + --ion-color-success-shade: #29c467; + --ion-color-success-tint: #44e283; /** warning **/ - --ion-color-warning: #ffc409; - --ion-color-warning-rgb: 255, 196, 9; + --ion-color-warning: #ffd534; + --ion-color-warning-rgb: 255,213,52; --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0ac08; - --ion-color-warning-tint: #ffca22; + --ion-color-warning-contrast-rgb: 0,0,0; + --ion-color-warning-shade: #e0bb2e; + --ion-color-warning-tint: #ffd948; /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; + --ion-color-danger: #ff4961; + --ion-color-danger-rgb: 255,73,97; --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; + --ion-color-danger-contrast-rgb: 255,255,255; + --ion-color-danger-shade: #e04055; + --ion-color-danger-tint: #ff5b71; /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; + --ion-color-dark: #f4f5f8; + --ion-color-dark-rgb: 244,245,248; + --ion-color-dark-contrast: #000000; + --ion-color-dark-contrast-rgb: 0,0,0; + --ion-color-dark-shade: #d7d8da; + --ion-color-dark-tint: #f5f6f9; /** medium **/ - --ion-color-medium: #574141; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; + --ion-color-medium: #989aa2; + --ion-color-medium-rgb: 152,154,162; + --ion-color-medium-contrast: #000000; + --ion-color-medium-contrast-rgb: 0,0,0; + --ion-color-medium-shade: #86888f; + --ion-color-medium-tint: #a2a4ab; /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; + --ion-color-light: #25272b; + --ion-color-light-rgb: 34,36,40; + --ion-color-light-contrast: #ffffff; + --ion-color-light-contrast-rgb: 255,255,255; + --ion-color-light-shade: #1e2023; + --ion-color-light-tint: #383a3e; } -@media (prefers-color-scheme: dark) { - /* - * Dark Colors - * ------------------------------------------- - */ - - body { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #FF4961; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #FF4961; - --ion-color-tertiary-tint: #FF4961; - - --ion-color-success: #a5e77f; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #574141; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; - } - - /* - * iOS Dark Theme - * ------------------------------------------- - */ - - .ios body { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-item-background: #000000; - - --ion-card-background: #1c1c1d; - } - - .ios ion-modal { - --ion-background-color: var(--ion-color-step-100); - --ion-toolbar-background: var(--ion-color-step-150); - --ion-toolbar-border-color: var(--ion-color-step-250); - } - - - /* - * Material Design Dark Theme - * ------------------------------------------- - */ - - .md body { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; - - --ion-card-background: #1e1e1e; - } +@font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: normal; + src: url('../assets/fonts/Montserrat/Montserrat-Regular.ttf'); } + +@font-face { + font-family: 'Benton Sans'; + font-style: normal; + font-weight: normal; + src: url('../assets/fonts/Benton_Sans/BentonSans-Regular.otf'); +} \ No newline at end of file