Update specs for Assistant opt-in flow screens

Some spacing updates and move the voice match animation to the middle.

Bug: 994462
Test: Manual test
Change-Id: Id81f555cdfd6d620138831c426ba8ae6eb77e8c0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1761647
Commit-Queue: Yue Li <updowndota@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#688706}

chrome/browser/resources/chromeos/assistant_optin/assistant_voice_match.css

@@ -19,9 +19,15 @@
   color: #757575;
 }
 
+#voice-match-video-container {
+  flex-grow: 1;
+}
+
 #voice-match-video {
-  padding-top: 100px;
-  text-align: center;
+  left: 50%;
+  position: relative;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
 
 #already-setup-video-container {
@@ -32,12 +38,6 @@
   height: 450px;
 }
 
-#already-setup-img {
-  display: block;
-  margin: auto;
-  padding-top: 80px;
-}
-
 #intro-container,
 #recording-container,
 #already-setup-container {
@@ -47,7 +47,8 @@
 
 .intro #intro-container,
 .already-setup #already-setup-container {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 
 .recording #title-completed,

chrome/browser/resources/chromeos/assistant_optin/assistant_voice_match.html

@@ -24,8 +24,8 @@
             <div class="content" id="no-dsp-message"
                 i18n-content="assistantVoiceMatchNoDspMessage">
             </div>
-            <div id="voice-match-video">
-              <video muted autoplay loop>
+            <div id="voice-match-video-container">
+              <video id="voice-match-video" muted autoplay loop>
                 <source src="voice_laptop_1x.webm" type="video/webm">
               </video>
             </div>

chrome/browser/resources/chromeos/assistant_optin/setting_zippy.css

@@ -15,7 +15,7 @@
   padding-top: 4px;
 }
 
-.content[popupStyle] {
+#description {
   padding: 4px 0 16px 0;
 }
 

chrome/browser/resources/chromeos/assistant_optin/setting_zippy.html

@@ -13,7 +13,7 @@
     <template is="dom-if" if="[[expandStyle]]">
       <cr-expand-button expanded="{{expanded_}}">
         <div id="container" class="flex layout horizontal"
-            popupStyle$="[[popupStyle]]">
+            expandStyle$="[[expandStyle]]">
           <div class="icon">
             <webview class="icon-view" src="[[iconSrc]]" tabindex="-1">
             </webview>
@@ -22,8 +22,7 @@
             <div class="sub-title">
               <content select=".zippy-title"></content>
             </div>
-            <div class="content" toggleStyle$="[[toggleStyle]]"
-                popupStyle$="[[popupStyle]]">
+            <div class="content">
               <content select=".zippy-description, .learn-more-link"></content>
             </div>
           </div>
@@ -37,7 +36,7 @@
     </template>
     <template is="dom-if" if="[[!expandStyle]]">
       <div id="container" class="flex layout horizontal"
-          popupStyle$="[[popupStyle]]">
+          expandStyle$="[[expandStyle]]">
         <div class="icon">
           <webview class="icon-view" src="[[iconSrc]]" tabindex="-1"></webview>
         </div>
@@ -45,8 +44,7 @@
           <div class="sub-title">
             <content select=".zippy-title"></content>
           </div>
-          <div class="content" toggleStyle$="[[toggleStyle]]"
-              popupStyle$="[[popupStyle]]">
+          <div id="description" class="content">
             <content select=".zippy-description, .learn-more-link"></content>
           </div>
         </div>