New dark dialog design

raiden-network · Mar 2, 2021 · c0bf3a1 · c0bf3a1
1 parent 23d2e83
commit c0bf3a1
Show file tree

Hide file tree

Showing 41 changed files with 439 additions and 323 deletions.
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -224,7 +224,6 @@ describe('AppComponent', () => {
         expect(dialogSpy).toHaveBeenCalledTimes(1);
         expect(dialogSpy).toHaveBeenCalledWith(ErrorComponent, {
             data: payload,
-            width: '500px',
             disableClose: true,
             panelClass: 'grey-dialog',
         });
@@ -243,7 +242,6 @@ describe('AppComponent', () => {
         expect(dialogSpy).toHaveBeenCalledTimes(1);
         expect(dialogSpy).toHaveBeenCalledWith(ErrorComponent, {
             data: payload,
-            width: '500px',
             disableClose: true,
             panelClass: 'grey-dialog',
         });

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -233,7 +233,6 @@ export class AppComponent implements OnInit, OnDestroy {
         } else {
             this.errorDialog = this.dialog.open(ErrorComponent, {
                 data: payload,
-                width: '500px',
                 disableClose: true,
                 panelClass: 'grey-dialog',
             });

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -176,8 +176,9 @@ export function ConfigLoader(raidenConfig: RaidenConfig) {
             provide: MAT_DIALOG_DEFAULT_OPTIONS,
             useValue: Object.assign(new MatDialogConfig(), {
                 maxWidth: '90vw',
-                width: '360px',
+                width: '490px',
                 autoFocus: false,
+                backdropClass: 'dialog-backdrop',
             }),
         },
         RaidenService,

diff --git a/src/app/components/add-edit-contact-dialog/add-edit-contact-dialog.component.scss b/src/app/components/add-edit-contact-dialog/add-edit-contact-dialog.component.scss
@@ -4,20 +4,20 @@
 .label-input {
     z-index: 1;
     position: relative;
-    height: 32px;
+    height: 40px;
 
     &__field {
-        border-radius: 25px;
-        background-color: $light-grey;
+        border-radius: 100px;
+        background-color: $bg-grey;
         border: none;
         box-shadow: none;
         font-family: $main-font;
-        padding: 0 18px;
+        padding: 0 16px;
         height: 100%;
-        font-size: 13px;
-        line-height: 15px;
-        letter-spacing: 0.35px;
-        color: $black;
+        font-size: 14px;
+        line-height: 16px;
+        font-weight: 500;
+        color: $grey;
         width: 100%;
     }
 }
diff --git a/src/app/components/address-input/address-input.component.html b/src/app/components/address-input/address-input.component.html
@@ -3,12 +3,12 @@
         type="text"
         placeholder="{{ placeholder }} address / ENS name"
         aria-label="Address input"
+        [disabled]="disabled"
         class="input__field"
         [matAutocomplete]="auto"
         [matAutocompleteDisabled]="!userAccount"
         (input)="onChange($event.target.value)"
         (focus)="onTouched()"
-        fxFlex="0 1 226px"
         spellcheck="false"
         #input
     />
@@ -33,8 +33,8 @@
     </mat-autocomplete>
 
     <div
-        fxFlex="0 1 80px"
-        fxLayoutAlign="center"
+        fxLayout="row"
+        fxLayoutAlign="start center"
         class="icon-box"
         *ngIf="displayIdenticon"
     >
@@ -48,13 +48,19 @@
             <mat-progress-spinner
                 diameter="24"
                 mode="indeterminate"
+                color="accent"
                 *ngIf="searching"
             ></mat-progress-spinner>
         </ng-template>
     </div>
 </div>
 
-<div class="info-box" fxLayout="column" fxLayoutAlign="center">
+<div
+    *ngIf="!disabled"
+    class="info-box"
+    fxLayout="column"
+    fxLayoutAlign="center"
+>
     <span
         *ngIf="errors && touched && input.value.length > 0; else hint_text"
         [@fallDown]="'in'"
@@ -107,25 +113,28 @@
 
     <div
         *ngIf="showContactLabelInput"
-        class="input input--contact"
         fxLayout="row"
         fxLayoutAlign="start center"
+        fxFlexOffset="16px"
         [@stretchVertically]="'in'"
     >
         <mat-icon svgIcon="go" aria-hidden="true" class="icon"> </mat-icon>
-        <input
-            fxFlexOffset="6px"
-            placeholder="Contact name"
-            aria-label="Contact name input for address"
-            class="input__field"
-            [formControl]="contactLabelFc"
-            type="text"
-            fxFlex="0 1 196px"
-            (keyup.enter)="labelFieldOnEnter($event)"
-            spellcheck="false"
-        />
-        <div class="icon-box">
+        <div class="input">
+            <input
+                fxFlexOffset="6px"
+                placeholder="Contact name"
+                aria-label="Contact name input for address"
+                class="input__field input__field--contact"
+                [formControl]="contactLabelFc"
+                type="text"
+                fxFlex="0 1 194px"
+                (keyup.enter)="labelFieldOnEnter($event)"
+                spellcheck="false"
+            />
+        </div>
+        <div fxFlex="0 1 80px" fxLayoutAlign="center center">
             <button
+                class="add-contact-button"
                 mat-icon-button
                 (click)="saveContact()"
                 [disabled]="contactLabelFc.invalid"

diff --git a/src/app/components/address-input/address-input.component.scss b/src/app/components/address-input/address-input.component.scss
@@ -4,36 +4,42 @@
 .input {
     z-index: 1;
     position: relative;
-    height: 32px;
-
-    &--contact {
-        margin-top: 20px;
-    }
+    border-radius: 100px;
+    background-color: $bg-grey;
+    height: 40px;
 
     &__field {
-        border-radius: 25px;
-        background-color: $light-grey;
+        background: none;
         border: none;
         box-shadow: none;
         font-family: $main-font;
-        padding: 0 18px;
+        padding: 0 42px 0 16px;
         height: 100%;
-        font-size: 13px;
-        line-height: 15px;
-        letter-spacing: 0.35px;
-        color: $black;
+        width: 100%;
+        font-size: 14px;
+        line-height: 16px;
+        font-weight: 500;
+        color: $grey;
         min-width: 0;
 
         &:disabled {
             color: $dark-grey;
             background: none;
             border: 1px solid $dark-grey;
         }
+
+        &--contact {
+            padding: 0 16px;
+        }
     }
 }
 
 .icon-box {
-    height: 100%;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    right: 0;
+    margin-right: 10px;
 
     &__identicon {
         border-radius: 50%;
@@ -43,14 +49,13 @@
 
 .info-box {
     min-height: 32px;
-    font-size: 13px;
+    font-size: 12px;
     line-height: 15px;
-    letter-spacing: 0.35px;
 
     &__text {
         overflow: hidden;
         text-overflow: ellipsis;
-        margin-left: 18px;
+        margin-left: 16px;
 
         &--error {
             color: $red;
@@ -74,6 +79,10 @@
 }
 
 .icon {
-    height: 20px !important;
-    line-height: 20px;
+    height: 16px !important;
+    line-height: 16px;
+}
+
+.add-contact-button {
+    background-color: $bg-grey;
 }
diff --git a/src/app/components/address-input/address-input.component.ts b/src/app/components/address-input/address-input.component.ts
@@ -77,6 +77,7 @@ export class AddressInputComponent
     readonly network$: Observable<Network>;
     showContactLabelInput = false;
     contactLabelFc: FormControl;
+    disabled = false;
 
     private ngUnsubscribe = new Subject();
     private inputSubject: BehaviorSubject<string> = new BehaviorSubject('');
@@ -124,7 +125,7 @@ export class AddressInputComponent
     }
 
     setDisabledState(isDisabled: boolean) {
-        this.inputElement.nativeElement.disabled = isDisabled;
+        this.disabled = isDisabled;
     }
 
     onChange(value: string) {

diff --git a/src/app/components/channel-list/channel-list.component.html b/src/app/components/channel-list/channel-list.component.html
@@ -26,6 +26,7 @@
                 </ng-template>
             </div>
             <app-token-network-selector
+                [value]="selectedToken"
                 [showChannelBalance]="true"
                 [setSelectedToken]="true"
                 placeholder="Select Network"

diff --git a/src/app/components/confirmation-dialog/confirmation-dialog.component.scss b/src/app/components/confirmation-dialog/confirmation-dialog.component.scss
@@ -1,6 +1,6 @@
 .message {
-    font-size: 13px;
-    line-height: 15px;
-    letter-spacing: 0.35px;
+    font-size: 14px;
+    line-height: 16px;
     overflow-wrap: break-word;
+    text-align: center;
 }
diff --git a/src/app/components/deposit-withdraw-dialog/deposit-withdraw-dialog.component.html b/src/app/components/deposit-withdraw-dialog/deposit-withdraw-dialog.component.html
@@ -9,6 +9,7 @@
     <app-token-input
         formControlName="amount"
         [onChainInput]="withdraw ? false : true"
+        fxFlexAlign="center"
     >
     </app-token-input>
 </app-raiden-dialog>
diff --git a/src/app/components/error/error.component.html b/src/app/components/error/error.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column" fxLayoutGap="33px" fxLayoutAlign="center center">
+<div fxLayout="column" fxLayoutGap="32px" fxLayoutAlign="center center">
     <mat-icon class="icon" aria-hidden="true" svgIcon="error"></mat-icon>
     <ng-container *ngIf="isRpcError(); else api_error">
         <div class="title">JSON RPC connection error!</div>
@@ -19,21 +19,26 @@
             {{ data.errorContent }}
         </div>
     </div>
-    <div class="actions" fxLayout="row" fxLayoutAlign="space-between">
+    <div
+        class="actions"
+        fxLayout="row"
+        fxLayoutAlign="space-between"
+        fxLayoutGap="32px"
+    >
         <button
-            class="actions__button actions__button--white"
+            class="actions__button actions__button--dark"
             id="show-error"
             mat-flat-button
-            color="accent"
+            color="primary"
             (click)="showError = !showError"
         >
             {{ showError ? 'Hide Error' : 'Show Error' }}
         </button>
         <button
-            class="actions__button actions__button--black"
+            class="actions__button actions__button--white"
             id="retry"
             mat-flat-button
-            color="primary"
+            color="accent"
             (click)="retry()"
         >
             Retry

diff --git a/src/app/components/error/error.component.scss b/src/app/components/error/error.component.scss
@@ -3,31 +3,34 @@
 
 .icon {
     width: 69px;
+    height: 69px;
 }
 
 .title {
+    color: $black;
     font-size: 19px;
     line-height: 23px;
     font-weight: 500;
 }
 
 .description {
-    font-size: 13px;
+    color: $black;
+    font-size: 12px;
     line-height: 15px;
     width: 68%;
     text-align: center;
 }
 
 .content {
     width: 84%;
-    background-color: $white;
+    background-color: $bg-grey;
     border-radius: 15px;
     padding: 15px 33px;
     font-family: $mono-font;
     font-size: 13px;
     line-height: 18px;
+    color: $light-grey;
     text-align: center;
-    opacity: 0.65;
     overflow: hidden;
 
     &__text {
@@ -39,22 +42,25 @@
 }
 
 .actions {
-    height: 40px;
-    width: 68%;
-
     &__button {
-        height: 100%;
+        background-color: $bg-grey;
+        height: 38px !important;
         width: 140px;
-        font-size: 13px;
-        line-height: 15px;
+        letter-spacing: 0.01em;
+        font-size: 12px !important;
+        line-height: 15px !important;
+
+        &--dark {
+            color: $grey !important;
+        }
 
         &--white {
-            border: 2px solid $black;
-            background: none;
+            background-color: $white;
+            color: $black;
         }
 
-        --black {
-            color: $white;
+        &--wide {
+            width: 224px;
         }
     }
 }