scanning: Update right side settings panel layout

Update the layout of the elements in the right side settings panel to
conform to the spec.

Spec: https://carbon.googleplex.com/cros-ux/pages/scanning

Bug: 1059779
Change-Id: I53f19b18b9e23539605c17f94658046f68b2fcb2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2580425Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835384}

chromeos/components/scanning/resources/scan_settings_section.html

 <!-- TODO(jschettler): Update styling to match the spec. -->
 <style include="scanning-shared scanning-fonts">
   :host {
+    align-items: center;
     display: flex;
+    height: 48px;
+    margin-bottom: 8px;
+    margin-inline-end: 40px;
+    margin-inline-start: 32px;
+    margin-top: 0;
   }
 
   ::slotted([slot=label]),
@@ -10,7 +16,6 @@
     color: var(--scanning-select-text-color);
     display: flex;
     flex-direction: column;
-    min-height: 32px;
   }
 
   ::slotted([slot=label]) {
@@ -18,16 +23,14 @@
     flex-basis: 68px;
     flex-grow: 0;
     flex-shrink: 0;
-    margin-top: 5px;
     padding-inline-end: 20px;
   }
 
   ::slotted([slot=settings]) {
     flex: 1;
-    flex-basis: 192px;
     flex-grow: 0;
     flex-shrink: 0;
-    margin-bottom: 8px;
+    width: 192px;
   }
 </style>
 <slot name="label"></slot>

chromeos/components/scanning/resources/scanning_app.html

 <style include="cr-shared-style scanning-shared scanning-fonts">
-  .title {
+  #appTitle {
     @apply --scanning-section-title-font;
     color: var(--scanning-section-title-text-color);
+    margin-bottom: 16px;
+    margin-inline-end: 0;
+    margin-inline-start: 32px;
+    margin-top: 0;
+    width: 68px;
   }
 
   #moreSettingsButton {
@@ -16,10 +21,13 @@
     display: flex;
     font-weight: unset;
     height: unset;
-    margin: 18px 0px;
+    margin-bottom: 8px;
+    margin-inline-end: 40px;
+    margin-inline-start: 32px;
+    margin-top: 0;
     padding-inline: 0;
     text-transform: none;
-    width: 289px;
+    width: 280px;
   }
 
   #moreSettingsButton:focus {
@@ -38,8 +46,10 @@
   #more-settings-line-separator {
     border-bottom: var(--cr-separator-line);
     margin-bottom: 8px;
-    margin-top: 16px;
-    width: 289px;
+    margin-inline-end: 40px;
+    margin-inline-start: 32px;
+    margin-top: 8px;
+    width: 280px;
   }
 
   #scanningContainer {
@@ -72,7 +82,11 @@
   .scan-button-container {
     display: flex;
     justify-content: flex-end;
-    width: 289px;
+    margin-bottom: 0;
+    margin-inline-end: 40px;
+    margin-inline-start: 32px;
+    margin-top: 32px;
+    width: 280px;
   }
 
   #toast {

chromeos/components/scanning/resources/scanning_shared_css.html

@@ -11,6 +11,7 @@
     }
 
     select {
+      height: 32px;
       overflow: hidden;
       text-overflow: ellipsis;
     }