UI updates

apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss

@@ -5,6 +5,10 @@ button {
 
     &.show-bg {
         background-color: $grey-6;
+
+        &:not(.mat-button-disabled):hover {
+            background-color: $grey-4;
+        }
     }
 
     mat-icon {

apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss

@@ -45,7 +45,7 @@
 
 .red-input-group {
     margin-bottom: 16px;
-    max-width: 450px;
+    max-width: 300px;
 
     input {
         padding-right: 32px;

apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html

@@ -71,11 +71,16 @@
             </form>
 
             <div class="actions-container">
-                <button color="primary" mat-flat-button (click)="save()" [disabled]="configForm.invalid || !changed" class="red-button">
+                <button
-                    {{ 'watermark-screen.action.save' | translate }}
+                    color="primary"
-                </button>
+                    mat-flat-button
+                    (click)="save()"
+                    [disabled]="configForm.invalid || !changed"
+                    class="red-button"
+                    translate="watermark-screen.action.save"
+                ></button>
 
-                <div class="all-caps-label pointer cancel" [class.disabled]="!changed" (click)="revert()" [translate]="'watermark-screen.action.revert'"></div>
+                <div class="all-caps-label pointer cancel" [class.disabled]="!changed" (click)="revert()" translate="watermark-screen.action.revert"></div>
             </div>
         </div>
     </div>

apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html

@@ -95,7 +95,7 @@
     </div>
     <div class="red-content-inner">
         <div class="left-container" [class.extended]="collapsedDetails">
-            <div *ngIf="!appStateService.activeProject?.hasFiles" class="no-data">
+            <div *ngIf="!appStateService.activeProject?.hasFiles" class="empty-state">
                 <mat-icon svgIcon="red:document"></mat-icon>
                 <div class="heading-l" translate="project-overview.no-data.title"></div>
                 <redaction-icon-button (action)="fileInput.click()" icon="red:upload" text="project-overview.no-data.action" type="primary">

apps/red-ui/src/assets/styles/red-button.scss

@@ -13,6 +13,7 @@
         display: flex;
         align-items: center;
         line-height: 34px;
+        transition: opacity 0.2s;
 
         > *:not(last-child) {
             margin-right: 6px;
@@ -20,17 +21,25 @@
     }
 
     &.mat-button-disabled {
-        background-color: $grey-6 !important;
+        .mat-button-wrapper {
+            opacity: 0.3;
+        }
     }
 }
 
-.cdk-program-focused .mat-button-focus-overlay {
+.mat-button-focus-overlay {
     opacity: 0 !important;
 }
 
-.mat-flat-button.mat-primary.red-button {
+.mat-flat-button.mat-primary {
     padding: 0 14px;
-    transition: background-color 0.2s;
+    transition: background-color 0.2s, color 0.2s;
+    background-color: $red-1;
+
+    &.mat-button-disabled {
+        background-color: $red-1;
+        color: rgba($white, 0.5);
+    }
 
     &:not(.mat-button-disabled):hover {
         background-color: $red-2;
@@ -42,10 +51,10 @@ redaction-chevron-button,
 redaction-circle-button {
     position: relative;
     display: flex;
-    transition: background-color 0.2s;
 
     button {
         font-weight: 400 !important;
+        transition: background-color 0.2s;
 
         &.overlay {
             background: rgba($primary, 0.1);

apps/red-ui/src/assets/styles/red-input.scss

@@ -173,6 +173,7 @@
 
         .mat-datepicker-input {
             margin-top: 0;
+            width: 120px;
         }
 
         .mat-datepicker-toggle {

apps/red-ui/src/assets/styles/red-page-layout.scss

@@ -82,7 +82,7 @@ body {
             height: 4px;
         }
 
-        .no-data {
+        .empty-state {
             display: flex;
             flex-direction: column;
             align-items: center;