From b78f8493d95d507979e1c87a64e7cdc198ee3bcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Sat, 24 Oct 2020 01:12:37 +0300
Subject: [PATCH] Some input styling

---
 .../add-edit-project-dialog.component.html    |  2 +-
 .../manual-redaction-dialog.component.html    | 16 ++--
 .../file-preview-screen.component.scss        |  8 +-
 apps/red-ui/src/assets/i18n/en.json           |  2 +-
 .../src/assets/styles/red-checkbox.scss       | 16 ++++
 apps/red-ui/src/assets/styles/red-dialog.scss |  4 +
 apps/red-ui/src/assets/styles/red-input.scss  | 80 +++++++++++--------
 apps/red-ui/src/assets/styles/red-menu.scss   | 21 +----
 apps/red-ui/src/assets/styles/red-mixins.scss |  9 +++
 9 files changed, 87 insertions(+), 71 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 a197c3a66..bf66f92d2 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
@@ -17,7 +17,7 @@
         <textarea formControlName="description" name="description" type="text" rows="5"></textarea>
       </div>
 
-      <mat-form-field>
+      <mat-form-field class="mt-20">
         <mat-label>{{'project-listing.add-edit-dialog.form.due-date.label' | translate}}</mat-label>
         <input matInput [matDatepicker]="picker" formControlName="dueDate">
         <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
diff --git a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-redaction-dialog.component.html b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-redaction-dialog.component.html
index 0be3a13ba..6bee578f6 100644
--- a/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-redaction-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-redaction-dialog.component.html
@@ -7,11 +7,11 @@
 
     <div class="dialog-content">
 
-      <div class="file-details">
-        <div class="detail-row"
-             [innerHTML]="'manual-redaction.dialog.content.text.label' | translate:addRedactionRequest">
-        </div>
+
+      <div class="red-input-group">
+        <label translate="manual-redaction.dialog.content.text.label"></label>
       </div>
+      {{ addRedactionRequest.value }}
 
       <div class="red-input-group">
         <label translate="manual-redaction.dialog.content.reason.label"></label>
@@ -23,17 +23,17 @@
         <textarea formControlName="comment" name="comment" type="text" rows="2"></textarea>
       </div>
 
-      <mat-form-field >
-        <mat-label>{{'manual-redaction.dialog.content.dictionary.label' | translate}}</mat-label>
+      <div class="red-input-group">
+        <label translate="manual-redaction.dialog.content.dictionary.label"></label>
         <mat-select formControlName="dictionary">
           <mat-option *ngFor="let dictionary of dictionaries | async" [value]="dictionary.type">
             {{dictionary.type}}
           </mat-option>
         </mat-select>
-      </mat-form-field>
+      </div>
 
       <div class="red-input-group">
-        <mat-checkbox
+        <mat-checkbox color="primary"
           formControlName="addToDictionary">{{'manual-redaction.dialog.content.dictionary.add.label' | translate}}</mat-checkbox>
       </div>
 
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index f2701b6c9..491fa77d4 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@@ -62,13 +62,7 @@ redaction-pdf-viewer {
 
     .pages, .annotations {
       overflow-y: scroll;
-
-      scrollbar-width: none; /* Firefox */
-      -ms-overflow-style: none; /* IE 10+ */
-      &::-webkit-scrollbar {
-        width: 0;
-        background: transparent; /* Chrome/Safari/Webkit */
-      }
+      @include no-scroll-bar();
 
       &.activePanel {
         background-color: #FAFAFA;
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 9b3ea77ee..39b152da1 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -52,7 +52,7 @@
       },
       "content": {
         "text": {
-          "label": "<strong>Selected Text: </strong> {{value}}"
+          "label": "Selected text:"
         },
         "dictionary": {
           "add": {
diff --git a/apps/red-ui/src/assets/styles/red-checkbox.scss b/apps/red-ui/src/assets/styles/red-checkbox.scss
index 919495916..febf4d51a 100644
--- a/apps/red-ui/src/assets/styles/red-checkbox.scss
+++ b/apps/red-ui/src/assets/styles/red-checkbox.scss
@@ -10,3 +10,19 @@
   width: 18px;
   height: 18px;
 }
+
+.mat-checkbox-layout {
+  .mat-checkbox-inner-container {
+    margin-left: 0;
+  }
+
+  .mat-checkbox-label {
+    font-family: 'Inter', sans-serif;
+    font-size: 13px;
+    color: $accent;
+
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}
diff --git a/apps/red-ui/src/assets/styles/red-dialog.scss b/apps/red-ui/src/assets/styles/red-dialog.scss
index 16ca57741..51388cc44 100644
--- a/apps/red-ui/src/assets/styles/red-dialog.scss
+++ b/apps/red-ui/src/assets/styles/red-dialog.scss
@@ -1,3 +1,7 @@
+.mat-dialog-container {
+  border-radius: 8px;
+}
+
 .dialog {
   position: relative;
   min-height: 80px;
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
index bb5b4ec4b..e60713169 100644
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ b/apps/red-ui/src/assets/styles/red-input.scss
@@ -1,53 +1,63 @@
 @import "red-variables";
+@import "red-mixins";
 
 .red-input-group {
-
   display: flex;
   flex-direction: column;
-  margin-top: 5px;
-  margin-bottom: 8px;
+  margin-top: 13px;
 
-  label {
-    height: 14px;
-    opacity: 0.6;
+  &:first-child {
+    margin-top: 0;
+  }
+
+  input, textarea, mat-select {
+    box-sizing: border-box;
+    width: 322px;
+    padding-left: 11px;
+    padding-right: 11px;
+    border: 1px solid $grey-5;
+    font-family: Inter, sans-serif;
     font-size: 11px;
-    font-weight: 500;
-    letter-spacing: 0;
     line-height: 14px;
-    margin-bottom: 5px;
+    background-color: #FFFFFF;
+    border-radius: 8px;
+    outline: none;
+    margin-top: 3px;
+    min-height: 34px;
+
+    &:focus {
+      border-color: $grey-1;
+    }
+  }
+
+  mat-select {
+    width: 220px;
+
+    .mat-select-trigger {
+      height: 32px;
+    }
+
+    .mat-select-value {
+      vertical-align: middle;
+    }
   }
 
   textarea {
     resize: none;
-    box-sizing: border-box;
-    padding-left: 11px;
-    padding-right: 11px;
-    width: 300px;
-    border: 1px solid $grey-3;
-    opacity: 0.4;
-    border-radius: 2px;
-    background-color: #FFFFFF;
-    outline: none;
-
-    &:focus {
-      border-color: $grey-1;
-    }
+    padding-top: 7px;
+    padding-bottom: 7px;
+    @include no-scroll-bar();
   }
 
-  input {
-    box-sizing: border-box;
-    padding-left: 11px;
-    padding-right: 11px;
-    height: 34px;
-    width: 300px;
-    border: 1px solid $grey-3;
-    opacity: 0.4;
-    border-radius: 2px;
-    background-color: #FFFFFF;
-    outline: none;
+  label {
+    opacity: 0.7;
+    font-size: 11px;
+    letter-spacing: 0;
+    line-height: 14px;
+    margin-bottom: 2px;
 
-    &:focus {
-      border-color: $grey-1;
+    &.mat-checkbox-layout {
+      opacity: 1;
     }
   }
 }
diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss
index 5b10ac247..14d760557 100644
--- a/apps/red-ui/src/assets/styles/red-menu.scss
+++ b/apps/red-ui/src/assets/styles/red-menu.scss
@@ -11,7 +11,8 @@
     color: $accent;
 
     .arrow-wrapper {
-      width: 24px;
+      width: 16px;
+      margin-right: 8px;
       text-align: center;
 
       mat-icon {
@@ -24,23 +25,5 @@
     &.padding-left {
       padding-left: 64px;
     }
-
-    .mat-checkbox-layout {
-      margin-left: 4px;
-
-      .mat-checkbox-inner-container {
-        margin-left: 0;
-      }
-
-      .mat-checkbox-label {
-        font-family: 'Inter', sans-serif;
-        font-size: 13px;
-        color: $accent;
-
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-    }
   }
 }
diff --git a/apps/red-ui/src/assets/styles/red-mixins.scss b/apps/red-ui/src/assets/styles/red-mixins.scss
index 317437d89..fb3975951 100644
--- a/apps/red-ui/src/assets/styles/red-mixins.scss
+++ b/apps/red-ui/src/assets/styles/red-mixins.scss
@@ -8,3 +8,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+@mixin no-scroll-bar {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent; /* Chrome/Safari/Webkit */
+  }
+}