WebUI: Settings page style design tweaks

Co-authored by: Pete Miller <[email protected]>
brave · Apr 13, 2019 · d2daf7e · d2daf7e
1 parent 6d04b49
commit d2daf7e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 11 deletions.
diff --git a/browser/resources/settings/brave_settings_overrides.html b/browser/resources/settings/brave_settings_overrides.html
@@ -30,7 +30,7 @@
     <style>
       :host {
         display: inline-block;
-        --setings-card-max-width: 790px !important;
+        --settings-card-max-width: 790px !important;
       }
       cr-drawer {
         display: none !important;
@@ -40,12 +40,16 @@
         flex-direction: row;
         justify-content: center;
         align-items: flex-start;
+        background: #F1F3F5; /* neutral100 */
       }
       @media only screen and  (max-width: 815px) {
         settings-menu {
           display: none;
         }
       }
+      :host-context([dark]) #container {
+        background: #1E2127;
+      }
     </style>
   </template>
 </dom-module>
@@ -70,18 +74,16 @@
         margin: 0 12px 0 12px !important;
         max-height: calc(100vh - 56px - (var(--brave-settings-menu-margin-v) * 2) - (var(--brave-settings-menu-padding) * 2));
         min-width: 172px;
-        border: 1px solid #E5E5EA !important;
         border-radius: 6px;
         background-color: #fff;
         overflow-y: auto;
         padding: 30px !important;
       }
 
-
       :host-context([dark]) {
         --settings-nav-item-color: #F4F4F4 !important;
         border-color: transparent !important;
-        background-color: #27282B;
+        background-color: #161719;
       }
 
       a[href] {
@@ -102,8 +104,8 @@
       iron-icon {
         color: var(--settings-nav-item-color);
         margin-inline-end: 16px !important;
-        width: 24px;
-        height: 24px;
+        width: 20px;
+        height: 20px;
       }
 
       :host-context([dark]) a[href].iron-selected iron-icon {

diff --git a/browser/resources/settings/default_brave_shields_page/default_brave_shields_page.html b/browser/resources/settings/default_brave_shields_page/default_brave_shields_page.html
@@ -12,13 +12,9 @@
       .label.shields-primary-title
       {
         font-weight: 700;
-        padding-top: .1em;
+        padding-top: 1em;
         font-size: 1.05em;
       }
-      .label.shields-secondary-title
-      {
-        font-style: italic;
-      }
     </style>
     <div class="settings-box first">
       <div class="flex">