MD Settings: Network and bluetooth polish

This CL:
* Fixes button spacing in the network details page.
* Fixes the on/off toggle button font and color for network and
  bluetooth
* Replaces incorrect primary/secondary button classes in dialogs
  with action/cancel-button
* Corrects the blue color for action buttons as per UX
* Converts the "add network" section to list-frame / list-item
  to correct borders and spacing.

BUG=710258,710259,710261
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2846763003
Cr-Commit-Position: refs/heads/master@{#468164}

chrome/browser/resources/settings/bluetooth_page/bluetooth_subpage.html

@@ -28,13 +28,17 @@
         @apply(--cr-icon-height-width);
       }
 
-      #onoff[on] {
+      #onOff {
+        font-weight: 500;
+      }
+
+      #onOff[on] {
         color: var(--settings-toggle-color);
       }
     </style>
 
     <div class="settings-box first">
-      <div id="onoff" class="start" on$="[[bluetoothToggleState]]">
+      <div id="onOff" class="start" on$="[[bluetoothToggleState]]">
         [[getOnOffString_(bluetoothToggleState,
           '$i18nPolymer{deviceOn}', '$i18nPolymer{deviceOff}')]]
       </div>

chrome/browser/resources/settings/device_page/display_overscan_dialog.html

@@ -73,10 +73,10 @@
         </div>
       </div>
       <div class="button-container">
-        <paper-button id="reset" class="secondary-button" on-tap="onResetTap_">
+        <paper-button id="reset" class="cancel-button" on-tap="onResetTap_">
           $i18n{displayOverscanReset}
         </paper-button>
-        <paper-button class="primary-button" on-tap="onSaveTap_">
+        <paper-button class="action-button" on-tap="onSaveTap_">
           $i18n{ok}
         </paper-button>
       </div>

chrome/browser/resources/settings/internet_page/internet_detail_page.html

@@ -61,7 +61,12 @@
       }
 
       #buttonDiv paper-button {
-        margin: 10px 0;
+        /* Align text edge with trailing margin (12px button padding) */
+        -webkit-margin-end: -12px;
+        /* 8px spacing between highlight edges. */
+        -webkit-margin-start: calc(12px + 8px);
+        margin-bottom: 10px;
+        margin-top: 10px;
       }
 
       #networkState {

chrome/browser/resources/settings/internet_page/internet_page.html

@@ -19,10 +19,6 @@
 <dom-module id="settings-internet-page">
   <template>
     <style include="settings-shared">
-      div.add-no-icon {
-        -webkit-margin-start: 36px
-      }
-
       iron-icon {
         -webkit-margin-end: 12px;
         -webkit-margin-start: 4px;
@@ -48,30 +44,32 @@
             </cr-expand-button>
           </div>
           <template is="dom-if" if="[[addConnectionExpanded_]]">
-            <template is="dom-if" if="[[deviceIsEnabled_(deviceStates.WiFi)]]">
-              <div actionable class="settings-box continuation center"
-                  on-tap="onAddWiFiTap_">
-                <div class="start add-no-icon">$i18n{internetAddWiFi}</div>
+            <div class="list-frame vertical-list">
+              <template is="dom-if"
+                  if="[[deviceIsEnabled_(deviceStates.WiFi)]]">
+                <div actionable class="list-item" on-tap="onAddWiFiTap_">
+                  <div class="start">$i18n{internetAddWiFi}</div>
+                  <button class="icon-external" is="paper-icon-button-light"
+                      aria-label="$i18n{internetAddWiFi}">
+                  </button>
+                </div>
+              </template>
+              <div actionable class="list-item" on-tap="onAddVPNTap_">
+                <div class="start">$i18n{internetAddVPN}</div>
                 <button class="icon-external" is="paper-icon-button-light"
-                    aria-label="$i18n{internetAddWiFi}">
+                    aria-label="$i18n{internetAddVPN}">
                 </button>
               </div>
-            </template>
-            <div actionable class="settings-box continuation center"
-                on-tap="onAddVPNTap_">
-              <div class="start add-no-icon">$i18n{internetAddVPN}</div>
-              <button class="icon-external" is="paper-icon-button-light"
-                  aria-label="$i18n{internetAddVPN}">
-              </button>
-            </div>
-            <template is="dom-repeat" items="[[thirdPartyVpnProviders_]]">
-              <div actionable class="settings-box continuation center"
-                  on-tap="onAddThirdPartyVpnTap_" provider="[[item]]">
-                <div class="start add-no-icon">
-                  [[getAddThirdParrtyVpnLabel_(item)]]
+              <template is="dom-repeat" items="[[thirdPartyVpnProviders_]]">
+                <div actionable class="list-item"
+                    on-tap="onAddThirdPartyVpnTap_" provider="[[item]]">
+                  <div class="start">[[getAddThirdParrtyVpnLabel_(item)]]</div>
+                  <button class="icon-external" is="paper-icon-button-light"
+                      aria-label$="[[getAddThirdParrtyVpnLabel_(item)]]">
+                  </button>
                 </div>
-              </div>
-            </template>
+              </template>
+            </div>
           </template>
         </template>
         <template is="dom-if" if="[[!allowAddConnection_(globalPolicy_)]]">

chrome/browser/resources/settings/internet_page/internet_subpage.html

@@ -23,11 +23,14 @@
         -webkit-margin-end: var(--settings-control-spacing);
       }
 
-      #onoff[on] {
-        color: var(--settings-toggle-color);
+      #onOff {
         font-weight: 500;
       }
 
+      #onOff[on] {
+        color: var(--settings-toggle-color);
+      }
+
       .vpn-header {
         -webkit-margin-end: 12px;
         -webkit-margin-start: 4px;
@@ -42,7 +45,7 @@
 
     <template is="dom-if" if="[[enableToggleIsVisible_(deviceState)]]">
       <div class="settings-box first">
-        <div id="onoff" class="start" on$="[[deviceIsEnabled_(deviceState)]]">
+        <div id="onOff" class="start" on$="[[deviceIsEnabled_(deviceState)]]">
           [[getOffOnString_(deviceState,
             '$i18nPolymer{deviceOn}', '$i18nPolymer{deviceOff}')]]
         </div>

chrome/browser/resources/settings/internet_page/tether_connection_dialog.html

@@ -67,10 +67,10 @@
         </ul>
       </div>
       <div class="button-container">
-        <paper-button class="secondary-button" on-tap="onNotNowTap_">
+        <paper-button class="cancel-button" on-tap="onNotNowTap_">
           $i18n{tetherConnectionNotNowButton}
         </paper-button>
-        <paper-button class="primary-button" on-tap="close">
+        <paper-button class="action-button" on-tap="close">
           $i18n{tetherConnectionConnectButton}
         </paper-button>
       </div>

chrome/browser/resources/settings/settings_shared_css.html

@@ -54,7 +54,10 @@
         -webkit-margin-start: 4px;
       }
 
-      .primary-button,
+      .primary-button {
+        color: var(--google-blue-500);
+      }
+
       a[href] {
         color: var(--google-blue-700);
       }