From 430807b487c1201f890b685239be63498c38c71c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 11 Dec 2020 16:19:15 +0200 Subject: [PATCH 1/6] Add / edit dictionary dialog update --- apps/red-ui/src/app/icons/icons.module.ts | 1 - .../add-edit-dictionary-dialog.component.html | 53 ++++++++++++------- .../add-edit-dictionary-dialog.component.scss | 23 ++++++-- .../add-edit-dictionary-dialog.component.ts | 31 +++++++---- .../watermark-screen.component.ts | 2 +- .../base-screen/base-screen.component.html | 2 +- apps/red-ui/src/assets/i18n/en.json | 4 +- .../src/assets/icons/general/back-arrow.svg | 9 ---- .../src/assets/styles/red-breadcrumbs.scss | 3 +- .../src/assets/styles/red-controls.scss | 4 -- apps/red-ui/src/assets/styles/red-dialog.scss | 4 +- apps/red-ui/src/assets/styles/red-input.scss | 13 ++--- apps/red-ui/src/assets/styles/red-theme.scss | 1 + .../src/assets/styles/red-toggle-button.scss | 14 +++++ 14 files changed, 100 insertions(+), 64 deletions(-) delete mode 100644 apps/red-ui/src/assets/icons/general/back-arrow.svg create mode 100644 apps/red-ui/src/assets/styles/red-toggle-button.scss diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index f7a9696b5..8f3a5b189 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -18,7 +18,6 @@ export class IconsModule { 'arrow-right', 'assign', 'assign-me', - 'back-arrow', 'calendar', 'check', 'close', diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html index 99f6d4412..6521a7792 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html @@ -5,26 +5,41 @@
-
- - +
+
+ + +
+ +
+ + +
+
+
-
- - -
- -
-
@@ -34,18 +49,16 @@
- + {{ 'add-edit-dictionary.form.case-sensitive' | translate }}
- +
- + diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss index f9cbd4ec1..404b84fe2 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss @@ -2,21 +2,30 @@ .w-300 { max-width: 300px; + width: 300px; } .w-150 { max-width: 150px; + width: 150px; +} + +.first-row { + display: flex; + + > *:not(last-child) { + margin-right: 24px; + } + + .red-input-group { + margin-top: 0; + } } .slider-row { display: flex; flex-direction: row; align-items: center; - - > mat-slide-toggle { - margin-left: 4px; - margin-right: 4px; - } } .mat-button-toggle-checked { @@ -24,3 +33,7 @@ transition: background-color 0.25s ease; color: $white; } + +.hex-color-input { + padding-right: 40px; +} diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts index 9635bb5ab..c6b9704b3 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts @@ -12,7 +12,7 @@ import { TranslateService } from '@ngx-translate/core'; templateUrl: './add-edit-dictionary-dialog.component.html', styleUrls: ['./add-edit-dictionary-dialog.component.scss'] }) -export class AddEditDictionaryDialogComponent implements OnInit { +export class AddEditDictionaryDialogComponent { dictionaryForm: FormGroup; constructor( @@ -23,21 +23,34 @@ export class AddEditDictionaryDialogComponent implements OnInit { private readonly _translateService: TranslateService, public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public dictionary: TypeValue - ) {} - - ngOnInit(): void { + ) { this.dictionaryForm = this._formBuilder.group({ type: [this.dictionary?.type, Validators.required], rank: [this.dictionary?.rank, Validators.required], - hexColor: [this.dictionary?.hexColor, Validators.required], + hexColor: [this.dictionary?.hexColor, [Validators.required, Validators.minLength(7)]], hint: [!!this.dictionary?.hint], - caseSensitive: [this.dictionary ? !this.dictionary.caseInsensitive : false] + caseSensitive: [this.dictCaseSensitive] }); + } - // edit mode, cannot change type value - if (!!this.dictionary) { - this.dictionaryForm.get('type').disable(); + public get dictCaseSensitive() { + return this.dictionary ? !this.dictionary.caseInsensitive : false; + } + + public get changed(): boolean { + if (!this.dictionary) return true; + + for (const key of Object.keys(this.dictionaryForm.getRawValue())) { + if (key === 'caseSensitive') { + if (this.dictCaseSensitive !== this.dictionaryForm.get(key).value) { + return true; + } + } else if (this.dictionary[key] !== this.dictionaryForm.get(key).value) { + return true; + } } + + return false; } async saveDictionary() { diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts index 088b5fe6e..2dee11c24 100644 --- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts @@ -46,7 +46,7 @@ export class WatermarkScreenComponent implements OnInit { this._loadViewer(); } - public get changed() { + public get changed(): boolean { for (const key of Object.keys(this._initialConfig)) { if (this._initialConfig[key] !== this.configForm.get(key).value) { return true; diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html index 7209002fc..7e7ded941 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html @@ -35,7 +35,7 @@ *ngIf="settingsView" [routerLinkActiveOptions]="{ exact: true }" > - + {{ 'top-bar.navigation-items.back-to-projects' | translate }} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 3304587a5..ac6413949 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -487,8 +487,8 @@ "new": "Create Dictionary" }, "form": { - "type": "Type", - "type-placeholder": "Enter Type Name", + "name": "Dictionary Name", + "name-placeholder": "Enter Name", "rank": "Rank", "rank-placeholder": "1000", "color": "Hex Color", diff --git a/apps/red-ui/src/assets/icons/general/back-arrow.svg b/apps/red-ui/src/assets/icons/general/back-arrow.svg deleted file mode 100644 index 5dbf99f08..000000000 --- a/apps/red-ui/src/assets/icons/general/back-arrow.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss index 30e0cc5ad..d6d0613f2 100644 --- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss +++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss @@ -22,8 +22,7 @@ align-items: center; mat-icon { - margin-right: 4px; - color: $primary; + margin-right: 8px; } } diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss index 461f5a222..f8ac880d9 100644 --- a/apps/red-ui/src/assets/styles/red-controls.scss +++ b/apps/red-ui/src/assets/styles/red-controls.scss @@ -36,7 +36,3 @@ width: 10px; height: 10px; } - -.transform-180 { - transform: rotate(180deg); -} diff --git a/apps/red-ui/src/assets/styles/red-dialog.scss b/apps/red-ui/src/assets/styles/red-dialog.scss index cddf6e42d..fe4161ca1 100644 --- a/apps/red-ui/src/assets/styles/red-dialog.scss +++ b/apps/red-ui/src/assets/styles/red-dialog.scss @@ -17,11 +17,11 @@ } .dialog-header { - padding: 32px 32px 16px 32px; + padding: 32px 32px 0 32px; } .dialog-content { - padding: 0 32px; + padding: 24px 32px 40px; } .dialog-actions { diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss index be4b52a67..ff5b2f140 100644 --- a/apps/red-ui/src/assets/styles/red-input.scss +++ b/apps/red-ui/src/assets/styles/red-input.scss @@ -4,7 +4,7 @@ .red-input-group { display: flex; flex-direction: column; - margin-top: 13px; + margin-top: 24px; position: relative; .input-icon { @@ -12,14 +12,11 @@ right: 1px; bottom: 1px; background: $grey-5; - height: 30px; - display: flex; - justify-content: center; - align-items: center; + height: 32px; width: 32px; - border: 1px solid $grey-5; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; + border-left: 1px solid $grey-5; + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; cursor: pointer; transition: background-color 0.25s ease; diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 27f7daf06..3b3ad8f44 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -11,6 +11,7 @@ @import 'red-list'; @import 'red-checkbox'; @import 'red-toggle'; +@import 'red-toggle-button'; @import 'red-menu'; @import 'red-media-queries'; @import 'red-tables'; diff --git a/apps/red-ui/src/assets/styles/red-toggle-button.scss b/apps/red-ui/src/assets/styles/red-toggle-button.scss new file mode 100644 index 000000000..7091b475f --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-toggle-button.scss @@ -0,0 +1,14 @@ +@import './red-variables'; + +.mat-button-toggle-standalone, +.mat-button-toggle-group { + border-radius: 100px !important; + box-shadow: none; + + .mat-button-toggle:not(.mat-button-toggle-checked) { + .mat-button-toggle-button { + background: $grey-6; + color: $grey-7; + } + } +} From e32003c13e286b63e84b20fcea56073799df69b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 11 Dec 2020 16:43:33 +0200 Subject: [PATCH 2/6] Manage project team dialog fixes --- .../assign-owner-dialog.component.html | 5 ++++- .../assign-owner-dialog.component.scss | 12 ++++++++++++ apps/red-ui/src/assets/i18n/en.json | 3 ++- apps/red-ui/src/assets/styles/red-text-styles.scss | 11 +++++++++++ 4 files changed, 29 insertions(+), 2 deletions(-) diff --git a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html index c787272c3..48abc3a49 100644 --- a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html +++ b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html @@ -14,7 +14,7 @@
-
+
+ + 

+
                 

                     

                         
Date: Fri, 11 Dec 2020 19:46:49 +0200
Subject: [PATCH 3/6] Project due date

---
 apps/red-ui/src/app/app.module.ts             |  12 +-
 .../add-edit-project-dialog.component.html    |  23 +-
 .../add-edit-project-dialog.component.scss    |  14 ++
 .../add-edit-project-dialog.component.ts      |  44 +++-
 apps/red-ui/src/assets/styles/red-input.scss  |  32 +++
 package.json                                  | 207 +++++++++---------
 yarn.lock                                     |   7 +
 7 files changed, 220 insertions(+), 119 deletions(-)

diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 54ed157a4..7591df031 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -17,6 +17,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { MatMenuModule } from '@angular/material/menu';
 import { languageInitializer } from './i18n/language.initializer';
 import { LanguageService } from './i18n/language.service';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { MatIconModule } from '@angular/material/icon';
 import { IconsModule } from './icons/icons.module';
 import { AddEditProjectDialogComponent } from './dialogs/add-edit-project-dialog/add-edit-project-dialog.component';
@@ -55,7 +56,7 @@ import { RedRoleGuard } from './auth/red-role.guard';
 import { MatListModule } from '@angular/material/list';
 import { AssignOwnerDialogComponent } from './dialogs/assign-owner-dialog/assign-owner-dialog.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatNativeDateModule } from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
 import { MatInputModule } from '@angular/material/input';
 import { HumanizePipe } from './utils/humanize.pipe';
 import { CommentsComponent } from './components/comments/comments.component';
@@ -315,6 +316,15 @@ const matImports = [
             multi: true,
             useFactory: languageInitializer,
             deps: [LanguageService]
+        },
+        { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
+        {
+            provide: MAT_DATE_FORMATS,
+            useValue: {
+                display: {
+                    dateInput: 'DD/MM/YY'
+                }
+            }
         }
     ],
     bootstrap: [AppComponent]
diff --git a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
index 0fce1b796..2fb7b3f28 100644
--- a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
@@ -27,17 +27,24 @@
                 
             

 
-            
-                {{ 'project-listing.add-edit-dialog.form.due-date' | translate }}
-                
-                
-                
-            
+            

+                
+                    {{ 'project-listing.add-edit-dialog.form.due-date' | translate }}
+                
+
+                

+                    
+                    
+                        
+                    
+                    
+                

+            

         
 
         

             
 
             

diff --git a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
index 48abc3a49..25c33a2a0 100644
--- a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
@@ -52,7 +52,7 @@
                 {{ 'assign-' + data.type + '-owner.dialog.save' | translate }}
             
 
-            

+            

         
     

 
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
index 7924a8beb..3bf16b4a2 100644
--- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html
@@ -49,7 +49,7 @@
                     {{ 'watermark-screen.action.save' | translate }}
                 
 
-                

+                

             
         
     
diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss
index b41467770..28648588e 100644
--- a/apps/red-ui/src/assets/styles/red-text-styles.scss
+++ b/apps/red-ui/src/assets/styles/red-text-styles.scss
@@ -55,6 +55,11 @@ pre {
     font-weight: 600;
     letter-spacing: 0;
     line-height: 14px;
+    transition: opacity 0.2s;
+
+    &.cancel:hover {
+        opacity: 1;
+    }
 }
 
 .small-label {

From b005ef66459034cd1c45689a0dd40a02db2f9c14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= 
Date: Fri, 11 Dec 2020 20:00:30 +0200
Subject: [PATCH 5/6] Change text in create project dialog

---
 .../add-edit-project-dialog.component.html                  | 6 +++---
 apps/red-ui/src/assets/i18n/en.json                         | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
index 2fb7b3f28..bb450147a 100644
--- a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
@@ -13,9 +13,9 @@
 
             

                 
-                    {{ 'project-listing.add-edit-dialog.form.rule-set' | translate }}
-                    
-                        
+                    {{ 'project-listing.add-edit-dialog.form.template' | translate }}
+                    
+                        
                             {{ type }}
                         
                     
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 654de2b99..b084734a5 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -103,7 +103,7 @@
                 "description": "Description",
                 "name": "Name",
                 "due-date": "Due Date",
-                "rule-set": "Rule Set"
+                "template": "Project Template"
             },
             "actions": {
                 "save": "Save",

From e4b34f69291769d23df3f70d5db37ecf61e6471b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= 
Date: Fri, 11 Dec 2020 20:25:09 +0200
Subject: [PATCH 6/6] More cancel styles, save and add members button with icon

---
 .../buttons/icon-button/icon-button.component.html |  2 +-
 .../buttons/icon-button/icon-button.component.scss | 14 ++++----------
 .../buttons/icon-button/icon-button.component.ts   |  2 +-
 .../add-edit-project-dialog.component.html         | 13 ++++++-------
 .../dictionary-overview-screen.component.html      |  7 +------
 .../admin/rules-screen/rules-screen.component.html |  7 +------
 apps/red-ui/src/assets/styles/red-button.scss      |  4 ++++
 7 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
index dc429e50f..b6f760eec 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
@@ -1,4 +1,4 @@
-
diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss
index 92a3847fd..8f44b4566 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss
@@ -3,17 +3,11 @@
 button {
     padding: 0 14px 0 10px;
 
+    &.show-bg {
+        background-color: $grey-6;
+    }
+
     mat-icon {
         width: 14px;
     }
 }
-
-.link-button {
-    text-transform: uppercase;
-    opacity: 0.7;
-    color: $accent;
-    font-size: 11px;
-    letter-spacing: 0;
-    line-height: 14px;
-    font-weight: 600 !important;
-}
diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
index 46598d416..acbc8958b 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
@@ -10,8 +10,8 @@ export class IconButtonComponent implements OnInit {
     @Input() text: string;
     @Input() showDot = false;
     @Input() primary = false;
-    @Input() linkButton = false;
     @Input() disabled = false;
+    @Input() type: 'default' | 'show-bg' = 'default';
     @Output() action = new EventEmitter();
 
     constructor() {}
diff --git a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
index bb450147a..71df39fbd 100644
--- a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
@@ -51,15 +51,14 @@
                 type="submit"
             >
 
-            
+                text="project-listing.add-edit-dialog.actions.save-and-add-members"
+                icon="red:assign"
+                type="show-bg"
+            >
         

     
 
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
index a745b3f31..67abc10e6 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
@@ -99,12 +99,7 @@
                     text="dictionary-overview.save-changes"
                     [primary]="true"
                 >
-                
+                

             
         
 
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
index b8f9f38a3..1a5d45b49 100644
--- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
@@ -54,12 +54,7 @@
                 text="rules-screen.save-changes"
                 [primary]="true"
             >
-            
+            

         
     
 
diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss
index 57f561203..008154754 100644
--- a/apps/red-ui/src/assets/styles/red-button.scss
+++ b/apps/red-ui/src/assets/styles/red-button.scss
@@ -18,6 +18,10 @@
             margin-right: 6px;
         }
     }
+
+    &.mat-button-disabled {
+        background-color: $grey-6 !important;
+    }
 }
 
 .cdk-program-focused .mat-button-focus-overlay {