From 7bca8aba3ef22f4b4438b2ec4cb9320e27148c54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 16 Dec 2020 14:37:06 +0200
Subject: [PATCH] UI updates

---
 .../add-edit-project-dialog.component.html    |  6 +-
 .../assign-owner-dialog.component.html        |  4 +-
 .../manual-annotation-dialog.component.html   | 10 +--
 .../add-edit-dictionary-dialog.component.html | 18 ++---
 .../dictionary-overview-screen.component.html | 47 ++++++-----
 .../dictionary-overview-screen.component.scss | 80 +++++++++++--------
 .../dictionary-overview-screen.component.ts   |  1 +
 .../watermark-screen.component.html           | 10 +--
 .../project-listing-screen.component.html     |  4 +-
 .../project-listing-screen.component.ts       |  2 +-
 .../project-overview-screen.component.html    | 10 +--
 apps/red-ui/src/assets/i18n/en.json           |  3 +-
 .../assets/icons/general/case-sensitive.svg   | 20 +++--
 apps/red-ui/src/assets/styles/red-editor.scss |  8 +-
 apps/red-ui/src/assets/styles/red-input.scss  | 74 +++++++++--------
 .../src/assets/styles/red-text-styles.scss    |  2 +
 16 files changed, 164 insertions(+), 135 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 a5ffd8362..966f47acc 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
@@ -6,7 +6,7 @@
         ></div>
 
         <div class="dialog-content">
-            <div class="red-input-group required">
+            <div class="red-input-group required w-300">
                 <label translate="project-listing.add-edit-dialog.form.name.label"></label>
                 <input
                     formControlName="projectName"
@@ -16,7 +16,7 @@
                 />
             </div>
 
-            <div class="red-input-group required">
+            <div class="red-input-group required w-400">
                 <mat-form-field floatLabel="always">
                     <mat-label>{{ 'project-listing.add-edit-dialog.form.template' | translate }}</mat-label>
                     <mat-select value="EFSA 1 (Vertebrate Authors)" style="width: 100%;" [disabled]="project?.hasFiles">
@@ -27,7 +27,7 @@
                 </mat-form-field>
             </div>
 
-            <div class="red-input-group">
+            <div class="red-input-group w-400">
                 <label translate="project-listing.add-edit-dialog.form.description.label"></label>
                 <textarea
                     redactionHasScrollbar
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 c67810280..2cbcc116c 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
@@ -3,10 +3,10 @@
 
     <form (submit)="saveUsers()" [formGroup]="usersForm">
         <div class="dialog-content" [class.no-padding-bottom]="data.type === 'project'">
-            <div class="red-input-group">
+            <div class="red-input-group w-300">
                 <mat-form-field floatLabel="always">
                     <mat-label>{{ 'assign-' + data.type + '-owner.dialog.single-user' | translate }}</mat-label>
-                    <mat-select formControlName="singleUser" class="w-300">
+                    <mat-select formControlName="singleUser">
                         <mat-option *ngFor="let userId of singleUsersSelectOptions" [value]="userId">
                             {{ userService.getNameForId(userId) }}
                         </mat-option>
diff --git a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 0b6a89394..1ef91cfa3 100644
--- a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -16,7 +16,7 @@
                 </div>
             </ng-container>
 
-            <div class="red-input-group required" *ngIf="!isDictionaryRequest">
+            <div class="red-input-group required w-400" *ngIf="!isDictionaryRequest">
                 <label translate="manual-annotation.dialog.content.reason"></label>
                 <mat-select formControlName="reason" class="full-width" [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate">
                     <mat-option *ngFor="let option of legalOptions" [value]="option">
@@ -25,17 +25,17 @@
                 </mat-select>
             </div>
 
-            <div class="red-input-group" *ngIf="!isDictionaryRequest">
+            <div class="red-input-group w-400" *ngIf="!isDictionaryRequest">
                 <label translate="manual-annotation.dialog.content.legalBasis"></label>
                 <input type="text" [value]="redactionForm.get('reason').value?.legalBasis" disabled />
             </div>
 
-            <div class="red-input-group" [class.required]="!isDocumentAdmin">
+            <div class="red-input-group w-300" [class.required]="!isDocumentAdmin">
                 <label translate="manual-annotation.dialog.content.comment"></label>
-                <textarea redactionHasScrollbar class="w-300" formControlName="comment" name="comment" type="text" rows="4"></textarea>
+                <textarea redactionHasScrollbar formControlName="comment" name="comment" type="text" rows="4"></textarea>
             </div>
 
-            <div class="red-input-group required" *ngIf="isDictionaryRequest && !isFalsePositiveRequest">
+            <div class="red-input-group required w-300" *ngIf="isDictionaryRequest && !isFalsePositiveRequest">
                 <label translate="manual-annotation.dialog.content.dictionary"></label>
 
                 <mat-select formControlName="dictionary">
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 72b0407d3..2f7fa0f80 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
@@ -1,9 +1,9 @@
 <section class="dialog">
-    <form (submit)="saveDictionary()" [formGroup]="dictionaryForm">
-        <div class="dialog-header heading-l">
-            {{ (dictionary ? 'add-edit-dictionary.title.edit' : 'add-edit-dictionary.title.new') | translate: { name: dictionary?.type | humanize } }}
-        </div>
+    <div class="dialog-header heading-l">
+        {{ (dictionary ? 'add-edit-dictionary.title.edit' : 'add-edit-dictionary.title.new') | translate: { name: dictionary?.type | humanize } }}
+    </div>
 
+    <form (submit)="saveDictionary()" [formGroup]="dictionaryForm">
         <div class="dialog-content">
             <ng-container *ngIf="!!dictionary">
                 <div class="red-input-group mb-14">
@@ -19,15 +19,9 @@
                     <span class="hint" translate="add-edit-dictionary.form.name-hint"></span>
                 </div>
 
-                <div class="red-input-group required">
+                <div class="red-input-group required w-75">
                     <label translate="add-edit-dictionary.form.rank"></label>
-                    <input
-                        formControlName="rank"
-                        class="w-75"
-                        name="rank"
-                        type="number"
-                        placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}"
-                    />
+                    <input formControlName="rank" name="rank" type="number" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" />
                 </div>
 
                 <div class="red-input-group required">
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 7f9b4b906..2365f33b6 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
@@ -52,30 +52,37 @@
 
     <div class="flex red-content-inner">
         <div class="left-container">
-            <div class="red-input-group">
-                <input
-                    [class.with-matches]="searchText.length > 0"
-                    type="text"
-                    [(ngModel)]="searchText"
-                    (keyup)="searchChanged(searchText)"
-                    #inputElement
-                    placeholder="{{ 'dictionary-overview.search' | translate }}"
-                />
+            <div class="actions-bar">
+                <div class="red-input-group flex-1 mr-32">
+                    <input
+                        [class.with-matches]="searchText.length > 0"
+                        type="text"
+                        [(ngModel)]="searchText"
+                        (keyup)="searchChanged(searchText)"
+                        #inputElement
+                        placeholder="{{ 'dictionary-overview.search' | translate }}"
+                    />
 
-                <div class="input-icons">
-                    <div class="no-input" *ngIf="searchText.length === 0">
-                        <mat-icon svgIcon="red:search"></mat-icon>
-                    </div>
-                    <div class="with-input" *ngIf="searchText.length > 0">
-                        <div class="search-match-text">
-                            {{ currentMatch + '/' + searchPositions.length }}
+                    <div class="input-icons">
+                        <div class="no-input" *ngIf="searchText.length === 0">
+                            <mat-icon svgIcon="red:search"></mat-icon>
+                        </div>
+                        <div class="with-input" *ngIf="searchText.length > 0">
+                            <div class="search-match-text">
+                                {{ currentMatch + '/' + searchPositions.length }}
+                            </div>
+                            <mat-icon svgIcon="red:arrow-up" class="pointer" (click)="previousSearchMatch()"></mat-icon>
+                            <mat-icon svgIcon="red:arrow-down" class="pointer" (click)="nextSearchMatch()"></mat-icon>
+                            <mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.focus()" class="pointer"></mat-icon>
                         </div>
-                        <mat-icon svgIcon="red:arrow-up" class="pointer" (click)="previousSearchMatch()"></mat-icon>
-                        <mat-icon svgIcon="red:arrow-down" class="pointer" (click)="nextSearchMatch()"></mat-icon>
-                        <mat-icon svgIcon="red:close" (click)="searchChanged(''); inputElement.focus()" class="pointer"></mat-icon>
                     </div>
                 </div>
+                <div class="red-input-group mr-16">
+                    <mat-checkbox [(ngModel)]="compareActive" color="primary"> {{ 'dictionary-overview.compare' | translate }} </mat-checkbox>
+                </div>
+                <div class="flex-1"></div>
             </div>
+
             <div class="editor-container">
                 <ace-editor
                     #editorComponent
@@ -94,7 +101,7 @@
             <div class="changes-box" *ngIf="hasChanges">
                 <redaction-icon-button
                     *ngIf="permissionsService.isAdmin()"
-                    icon="red:check"
+                    icon="red:check-alt"
                     (action)="saveEntries()"
                     text="dictionary-overview.save-changes"
                     type="primary"
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss
index 28ba1375a..e427f5dce 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.scss
@@ -13,6 +13,52 @@
     width: calc(100vw - 353px);
     padding: 15px;
     @include inset-shadow;
+
+    .actions-bar {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .mr-32 {
+            margin-right: 32px;
+        }
+
+        .mr-16 {
+            margin-right: 16px;
+            //opacity: 0; // TODO: Hidden for now
+        }
+
+        .red-input-group {
+            input {
+                padding-right: 32px;
+
+                &.with-matches {
+                    padding-right: 108px;
+                }
+            }
+
+            .input-icons {
+                position: absolute;
+                right: 12px;
+                top: 8px;
+                color: $grey-1;
+
+                .with-input {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    .search-match-text {
+                    }
+                }
+
+                mat-icon {
+                    max-width: 14px;
+                    margin-left: 8px;
+                }
+            }
+        }
+    }
 }
 
 .right-container {
@@ -42,37 +88,3 @@
         margin-right: 8px;
     }
 }
-
-.red-input-group {
-    margin-bottom: 16px;
-    max-width: 300px;
-
-    input {
-        padding-right: 32px;
-
-        &.with-matches {
-            padding-right: 108px;
-        }
-    }
-
-    .input-icons {
-        position: absolute;
-        right: 12px;
-        top: 8px;
-        color: $grey-1;
-
-        .with-input {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            .search-match-text {
-            }
-        }
-
-        mat-icon {
-            max-width: 14px;
-            margin-left: 8px;
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
index d396d207d..e7e1843b7 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.ts
@@ -20,6 +20,7 @@ declare var ace;
 })
 export class DictionaryOverviewScreenComponent {
     static readonly MIN_WORD_LENGTH: number = 3;
+    public compareActive = false;
 
     @ViewChild('editorComponent')
     editorComponent: AceEditorComponent;
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 152a9d25b..0feb10c9f 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
@@ -23,7 +23,7 @@
         <div class="right-container">
             <div class="heading-xl" [translate]="'watermark-screen.title'"></div>
             <form [formGroup]="configForm" (keyup)="configChanged()">
-                <div class="red-input-group required">
+                <div class="red-input-group required w-300">
                     <label translate="watermark-screen.form.text"></label>
                     <textarea
                         redactionHasScrollbar
@@ -58,14 +58,14 @@
                     </div>
                 </div>
 
-                <div class="red-input-group required">
+                <div class="red-input-group required w-75">
                     <label translate="watermark-screen.form.opacity"></label>
-                    <input class="w-75" formControlName="opacity" name="opacity" type="number" (change)="configChanged()" />
+                    <input formControlName="opacity" name="opacity" type="number" (change)="configChanged()" />
                 </div>
 
-                <div class="red-input-group required">
+                <div class="red-input-group required w-75">
                     <label translate="watermark-screen.form.font-size"></label>
-                    <input class="w-75" formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" />
+                    <input formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" />
                 </div>
             </form>
 
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index e589200c3..359e6707a 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -22,8 +22,8 @@
                 [icon]="'red:needs-work'"
             ></redaction-filter>
             <form [formGroup]="searchForm">
-                <div class="red-input-group">
-                    <input [placeholder]="'project-listing.search' | translate" class="w-250 with-icon mt-0" formControlName="query" name="query" type="text" />
+                <div class="red-input-group w-250">
+                    <input [placeholder]="'project-listing.search' | translate" class="with-icon mt-0" formControlName="query" name="query" type="text" />
                     <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
                 </div>
             </form>
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
index fac5b49ed..89b958e6b 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
@@ -64,6 +64,7 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
         private readonly _formBuilder: FormBuilder,
         private readonly _fileManagementControllerService: FileManagementControllerService
     ) {
+        this.appStateService.reset();
         this.searchForm = this._formBuilder.group({
             query: ['']
         });
@@ -72,7 +73,6 @@ export class ProjectListingScreenComponent implements OnInit, OnDestroy {
     }
 
     public ngOnInit(): void {
-        this.appStateService.reset();
         this.projectAutoUpdateTimer = timer(0, 10000)
             .pipe(
                 tap(async () => {
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 258ef523d..85e021cb7 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -22,14 +22,8 @@
                 [icon]="'red:needs-work'"
             ></redaction-filter>
             <form [formGroup]="searchForm">
-                <div class="red-input-group">
-                    <input
-                        [placeholder]="'project-overview.search' | translate"
-                        formControlName="query"
-                        name="query"
-                        type="text"
-                        class="w-250 with-icon mt-0"
-                    />
+                <div class="red-input-group w-250">
+                    <input [placeholder]="'project-overview.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
                     <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
                 </div>
             </form>
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 98ca3210d..e34ab389a 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -560,7 +560,8 @@
         },
         "search": "Search...",
         "save-changes": "Save Changes",
-        "revert-changes": "Revert"
+        "revert-changes": "Revert",
+        "compare": "Compare"
     },
     "dictionary-listing": {
         "action": {
diff --git a/apps/red-ui/src/assets/icons/general/case-sensitive.svg b/apps/red-ui/src/assets/icons/general/case-sensitive.svg
index 641e34f8c..077e3b18c 100644
--- a/apps/red-ui/src/assets/icons/general/case-sensitive.svg
+++ b/apps/red-ui/src/assets/icons/general/case-sensitive.svg
@@ -1,10 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Case Sensitive</title>
-    <g id="Case-Sensitive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-3" transform="translate(0.000000, 18.000000)" fill="currentColor">
-            <polygon id="Fill-1" points="100 8.36744942 79.9984 8.36744942 79.9984 64 69.4984 64 69.4984 8.36744942 55 8.36744942 55 0 100 0"></polygon>
-            <polygon id="Fill-2" points="45 8.36744942 29.9999996 8.36744942 29.9999996 64 19.4999993 64 19.4999993 8.36744942 0 8.36744942 0 0 45 0"></polygon>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>5331E3A6-DD6D-43B9-9CA0-C8B876D10B59</title>
+    <g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02.3-Dictionary-Details" transform="translate(-1111.000000, -204.000000)">
+            <rect x="0" y="0" width="1440" height="705"></rect>
+            <g id="Group-9" transform="translate(1086.000000, 111.000000)" fill="currentColor" opacity="0.5">
+                <g id="Group-8" transform="translate(25.000000, 69.000000)">
+                    <g id="Group-19" transform="translate(0.000000, 22.000000)">
+                        <g id="status" transform="translate(0.000000, 2.000000)">
+                            <path d="M6.72413793,0.7 C7.00968966,0.7 7.24137931,0.931689655 7.24137931,1.21724138 L7.24137931,1.21724138 L7.24137931,2.76896552 L6.20689655,2.76896552 L6.20689655,1.73448276 L4.13793103,1.73448276 L4.13793103,8.2862069 L5.51724138,8.2862069 L5.51724138,9.32068966 L1.72413793,9.32068966 L1.72413793,8.2862069 L3.10344828,8.2862069 L3.10344828,1.73448276 L1.03448276,1.73448276 L1.03448276,2.76896552 L7.01660952e-15,2.76896552 L7.01660952e-15,1.21724138 C7.01660952e-15,0.931689655 0.231689655,0.7 0.517241379,0.7 L0.517241379,0.7 Z M8.27586207,4.14834483 L8.27586207,5.52765517 L9.82758621,5.52765517 L9.82758621,6.56213793 L8.27586207,6.56213793 L8.27586207,7.90844828 C8.27586207,8.11722931 8.44491379,8.28627586 8.65368966,8.28627586 L8.65368966,8.28627586 L10,8.28627586 L10,9.32075862 L8.65368966,9.32075862 C7.8737931,9.32075862 7.24137931,8.68834483 7.24137931,7.90844828 L7.24137931,7.90844828 L7.24137931,6.56213793 L5.86206897,6.56213793 L5.86206897,5.52765517 L7.24137931,5.52765517 L7.24137931,4.14834483 L8.27586207,4.14834483 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
         </g>
     </g>
 </svg>
diff --git a/apps/red-ui/src/assets/styles/red-editor.scss b/apps/red-ui/src/assets/styles/red-editor.scss
index 49e912190..bc9583aa6 100644
--- a/apps/red-ui/src/assets/styles/red-editor.scss
+++ b/apps/red-ui/src/assets/styles/red-editor.scss
@@ -3,7 +3,7 @@
 
 .changed-row-marker {
     position: absolute;
-    background: rgba($orange-1, 0.4);
+    background: rgba($primary, 0.1);
     z-index: 20;
 }
 
@@ -83,8 +83,12 @@
     justify-content: space-between;
     bottom: 40px;
     border-radius: 8px;
-    padding: 16px;
+    padding: 16px 32px 16px 16px;
     background-color: $white;
     box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
     z-index: 5000;
+
+    > *:not(last-child) {
+        margin-right: 24px;
+    }
 }
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
index 0d14cf579..6aea18834 100644
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@@ -1,10 +1,15 @@
 @import 'red-variables';
 @import 'red-mixins';
 
+form {
+    .red-input-group:not(first-of-type) {
+        margin-top: 24px;
+    }
+}
+
 .red-input-group {
     display: flex;
     flex-direction: column;
-    margin-top: 24px;
     position: relative;
     height: fit-content;
 
@@ -96,42 +101,14 @@
             color: $grey-1;
             opacity: 0.7;
         }
-
-        &.w-75 {
-            width: 75px;
-            max-width: 75px;
-        }
-
-        &.w-250 {
-            width: 250px;
-            max-width: 250px;
-        }
-
-        &.w-300 {
-            width: 300px;
-            max-width: 300px;
-        }
-
-        &.w-full {
-            width: 100%;
-            max-width: 100%;
-        }
     }
 
-    input {
-        max-width: 300px;
-        width: 300px;
-
-        &.hex-color-input {
-            width: 150px;
-            max-width: 150px;
-        }
+    .hex-color-input {
+        width: 150px;
+        max-width: 150px;
     }
 
     mat-select {
-        width: 400px;
-        max-width: 400px;
-
         .mat-select-trigger {
             height: 32px;
         }
@@ -146,8 +123,6 @@
         padding-top: 7px;
         padding-bottom: 7px;
         @include scroll-bar;
-        width: 400px;
-        max-width: 400px;
 
         &.has-scrollbar {
             border-top-right-radius: 0;
@@ -165,6 +140,7 @@
 
         &.mat-checkbox-layout {
             opacity: 1;
+            margin-bottom: 0;
         }
     }
 
@@ -205,4 +181,34 @@
             }
         }
     }
+
+    &.w-75 {
+        width: 75px;
+        max-width: 75px;
+    }
+
+    &.w-250 {
+        width: 250px;
+        max-width: 250px;
+    }
+
+    &.w-300 {
+        width: 300px;
+        max-width: 300px;
+    }
+
+    &.w-400 {
+        width: 400px;
+        max-width: 400px;
+    }
+
+    &.w-450 {
+        width: 450px;
+        max-width: 450px;
+    }
+
+    &.w-full {
+        width: 100%;
+        max-width: 100%;
+    }
 }
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 dddc7c5dc..8cf7aed66 100644
--- a/apps/red-ui/src/assets/styles/red-text-styles.scss
+++ b/apps/red-ui/src/assets/styles/red-text-styles.scss
@@ -58,6 +58,8 @@ pre {
     transition: opacity 0.2s;
 
     &.cancel {
+        cursor: pointer;
+
         &:hover {
             opacity: 1;
         }