Design Patch 2022-04-19 (#1360)

* Fix report page on mobile

* Fix mature tag colors in light theme

* Adjust spacing for badges in navigation

* Fix reply input background for notification on mobile

ui/scss/component/_main.scss

@@ -1021,6 +1021,38 @@ body {
       padding-right: 0;
     }
   }
+
+  @media (max-width: $breakpoint-small) {
+    .card__main-actions {
+      margin-top: var(--spacing-s);
+    }
+    .section__actions {
+      margin-top: var(--spacing-m);
+    }
+    .MuiAutocomplete-root {
+      background-color: var(--color-input-bg);
+      border-radius: var(--border-radius);
+      .MuiOutlinedInput-input {
+        font-size: var(--font-body);
+        padding-left: var(--spacing-s);
+        padding-right: var(--spacing-s);
+        height: 22px !important;
+        &::placeholder {
+          color: #ffffff !important;
+          font-size: var(--font-body);
+        }
+        &:focus-visible {
+          box-shadow: unset;
+        }
+      }
+      .Mui-focused {
+        outline: 2px solid var(--color-primary);
+      }
+      .MuiOutlinedInput-notchedOutline {
+        border: none;
+      }
+    }
+  }
 }
 
 .main--empty {

ui/scss/component/_navigation.scss

@@ -235,6 +235,10 @@
         margin-left: 0;
       }
     }
+
+    .comment__badge {
+      margin-left: var(--spacing-xxs);
+    }
   }
 
   &:hover:not(.navigation-link--active) {

ui/scss/component/_notification.scss

@@ -86,6 +86,11 @@ $contentMaxWidth: 60rem;
           opacity: 1;
         }
       }
+
+      .MuiAutocomplete-root {
+        background-color: var(--color-background);
+        border-radius: var(--border-radius);
+      }
     }
   }
 

ui/scss/component/_tags.scss

@@ -76,9 +76,11 @@
 
 .tag--mature {
   @extend .badge--tag-mature;
-  background-color: #2a0000 !important;
+  background-color: #710000 !important;
+  color: #ffffff !important;
   &:hover {
-    background-color: #ff0000 !important;
+    background-color: #b00000 !important;
+    color: #ffffff !important;
   }
 }
 

ui/scss/component/section.scss

@@ -23,7 +23,8 @@
   fieldset-section.radio,
   div.checkbox,
   div.section {
-    margin-top: var(--spacing-s);
+    margin-top: var(--spacing-m);
+    margin-bottom: var(--spacing-s);
   }
 
   .channel__selector {