[fyfre]Add dark mode and screen responsivity.

Bug: 1385793 Change-Id: Iabb9704cc34151be08fbb8c58269804d2b42e412 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4313763 Reviewed-by: Nicolas Dossou-Gbété <dgn@chromium.org> Reviewed-by: Monica Basta <msalama@chromium.org> Commit-Queue: Jack Yammine <jyammine@google.com> Cr-Commit-Position: refs/heads/main@{#1115617}
chromium · Mar 10, 2023 · d946105 · d946105
1 parent 4606a06
commit d946105
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 47 deletions.
diff --git a/...e/browser/resources/signin/enterprise_profile_welcome/enterprise_profile_welcome_app.html b/...e/browser/resources/signin/enterprise_profile_welcome/enterprise_profile_welcome_app.html
@@ -217,8 +217,7 @@
   }
 
   .tangible-sync-style#main-container {
-    height: calc(100vh - (2*var(--action-container-padding) +
-             var(--cr-button-height)));
+    height: calc(100vh - (2*var(--action-container-padding) + var(--cr-button-height)));
     width: 100vw;
   }
 
@@ -247,24 +246,37 @@
       color: var(--google-grey-100);
     }
 
+    .tangible-sync-style .info-box {
+      border-color: var(--google-grey-600);
+    }
+
     .icon-container {
       background-color: var(--google-grey-700);
     }
+
+    #tangible-sync-style-right-banner {
+      content: url(images/right-banner-dark.svg);
+    }
+
+    #tangible-sync-style-left-banner {
+      content: url(images/left-banner-dark.svg);
+    }
   }
 </style>
 
-<div id="main-container" class$="[[getTangibleSyncStyleClass_(isTangibleSyncStyleEnabled_,
-   isModalDialog_)]]">
+<div id="main-container"
+    class$="[[getTangibleSyncStyleClass_(isTangibleSyncStyleEnabled_,
+        isModalDialog_)]]">
   <img id="tangible-sync-style-left-banner"
-     hidden="[[!getTangibleSyncStyleClass_(isTangibleSyncStyleEnabled_,
-      isModalDialog_)]]">
+      hidden="[[!getTangibleSyncStyleClass_(isTangibleSyncStyleEnabled_,
+          isModalDialog_)]]">
   <img id="tangible-sync-style-right-banner"
-     hidden="[[!getTangibleSyncStyleClass_(isTangibleSyncStyleEnabled_,
-      isModalDialog_)]]">
+      hidden="[[!getTangibleSyncStyleClass_(isTangibleSyncStyleEnabled_,
+          isModalDialog_)]]">
   <div id="content-container">
     <div id="header-container">
       <div id="banner" hidden="[[getTangibleSyncStyleClass_(
-                isTangibleSyncStyleEnabled_, isModalDialog_)]]"></div>
+          isTangibleSyncStyleEnabled_, isModalDialog_)]]"></div>
       <div id="avatar-container">
         <img id="avatar" alt="" src="[[pictureUrl_]]">
         <div class="work-badge" hidden="[[!showEnterpriseBadge_]]">
@@ -301,14 +313,15 @@ <h2 id="title">
     </template>
   </div>
 </div>
-<div id="buttons-container" class$="action-container [[getTangibleSyncStyleClass_(
-    isTangibleSyncStyleEnabled_, isModalDialog_)]]">
+<div id="buttons-container"
+    class$="action-container [[getTangibleSyncStyleClass_(
+        isTangibleSyncStyleEnabled_, isModalDialog_)]]">
     <cr-button id="proceedButton" class="action-button" on-click="onProceed_"
-      autofocus$="[[isModalDialog_]]" disabled="[[disableProceedButton_]]">
+        autofocus$="[[isModalDialog_]]" disabled="[[disableProceedButton_]]">
       [[proceedLabel_]]
     </cr-button>
     <cr-button id="cancelButton" on-click="onCancel_"
-      hidden="[[!showCancelButton_]]">
+        hidden="[[!showCancelButton_]]">
       $i18n{cancelLabel}
     </cr-button>
 </div>
diff --git a/chrome/browser/resources/signin/sync_confirmation/sync_confirmation_app.html b/chrome/browser/resources/signin/sync_confirmation/sync_confirmation_app.html
@@ -2,12 +2,6 @@
   :host {
     --banner-size: auto;
     --footer-margin: 24px;
-    --tangible-sync-dialog-illustration-url:
-        url(./images/tangible_sync_dialog_illustration.svg);
-    --tangible-sync-style-left-banner-url:
-        url(./images/tangible_sync_window_left_illustration.svg);
-    --tangible-sync-style-right-banner-url:
-        url(./images/tangible_sync_window_right_illustration.svg);
     --sync-benefits-list-color: var(--google-grey-50);
     --sync-benefit-icon-color: var(--google-blue-600);
     color: var(--cr-primary-text-color);
@@ -215,7 +209,7 @@
   }
 
   #contentContainer {
-    margin-bottom:  calc(32px + 2 * var(--footer-margin));
+    margin-bottom: calc(32px + 2 * var(--footer-margin));
     margin-top: 72px;
     text-align: center;
   }
@@ -346,6 +340,7 @@
 
   .dialog-main-container.tangible-sync-style #subtitle {
     font-size: 0.94rem;
+    line-height: 24px;
   }
 
   #syncBenefitsList {
@@ -390,7 +385,7 @@
   }
 
   #tangible-sync-dialog-illustration {
-    content: var(--tangible-sync-dialog-illustration-url);
+    content: url(./images/tangible_sync_dialog_illustration.svg);
     height: 68px;
     left: 50%;
     position: absolute;
@@ -402,14 +397,14 @@
   #tangible-sync-style-left-banner {
     animation-duration: 500ms;
     animation-name: left-illustration-slide-animation, fade-in-animation;
-    content: var(--tangible-sync-style-left-banner-url);
+    content: url(./images/tangible_sync_window_left_illustration.svg);
     transition-timing-function: ease-in-out;
   }
 
   #tangible-sync-style-right-banner {
     animation-duration: 500ms;
     animation-name: right-illustration-slide-animation, fade-in-animation;
-    content: var(--tangible-sync-style-right-banner-url);
+    content: url(./images/tangible_sync_window_right_illustration.svg);
     transition-timing-function: ease-in-out;
   }
 
@@ -424,12 +419,6 @@
 
   @media (prefers-color-scheme: dark) {
     :host {
-      --tangible-sync-dialog-illustration-url:
-          url(./images/tangible_sync_dialog_illustration_dark.svg);
-      --tangible-sync-style-left-banner-url:
-          url(./images/tangible_sync_window_left_illustration_dark.svg);
-      --tangible-sync-style-right-banner-url:
-          url(./images/tangible_sync_window_right_illustration_dark.svg);
       --sync-benefits-list-color: var(--google-grey-800);
       --sync-benefit-icon-color: var(--google-blue-300);
     }
@@ -440,10 +429,22 @@
           url(./images/sync_confirmation_illustration_dark.svg);
     }
 
+    #tangible-sync-dialog-illustration {
+      content: url(./images/tangible_sync_dialog_illustration_dark.svg);
+    }
+
     /* Non-modal design */
     #syncPromoBanner {
       background-image:
-          url(images/sync_confirmation_refreshed_illustration_dark.svg);
+        url(images/sync_confirmation_refreshed_illustration_dark.svg);
+    }
+
+    #tangible-sync-style-left-banner {
+      content: url(./images/tangible_sync_window_left_illustration_dark.svg);
+    }
+
+    #tangible-sync-style-right-banner {
+      content: url(./images/tangible_sync_window_right_illustration_dark.svg);
     }
 
     #headerContainer.signin-intercept-design {
@@ -459,18 +460,6 @@
       border-color: var(--google-grey-500);
     }
   }
-
-  @media screen and ((max-width: 780px) or (max-height: 600px)) {
-    .window-main-container.tangible-sync-style #title {
-      font-size: 1.5rem;
-      line-height: 32px;
-    }
-
-    .window-main-container.tangible-sync-style #subtitle {
-      font-size: 0.94rem;
-      line-height: 22px;
-    }
-  }
 </style>
 
 <!--
@@ -498,8 +487,7 @@
       </div>
     </div>
   </template>
-  <div id="content-container"
-      class$="[[getSigninInterceptDesignClass_(isSigninInterceptFre_)]]">
+  <div id="content-container" class$="[[getSigninInterceptDesignClass_(isSigninInterceptFre_)]]">
     <h1 id="syncConfirmationHeading" class="heading" consent-description>
       $i18n{syncConfirmationTitle}
     </h1>
@@ -584,7 +572,7 @@ <h2 consent-description id="syncConfirmationHeading">
           </cr-button>
         </if>
         <cr-button id="notNowButton" on-click="onUndo_"
-          disabled="[[anyButtonClicked_]]">
+            disabled="[[anyButtonClicked_]]">
           $i18n{syncConfirmationUndoLabel}
         </cr-button>
         <if expr="not (is_macosx or is_linux or chromeos_ash or chromeos_lacros)">
@@ -646,8 +634,7 @@ <h1 id="title" consent-description>
           $i18n{syncConfirmationSettingsLabel}
         </cr-button>
       </if>
-      <cr-button id="notNowButton" on-click="onUndo_"
-          disabled="[[anyButtonClicked_]]">
+      <cr-button id="notNowButton" on-click="onUndo_" disabled="[[anyButtonClicked_]]">
         $i18n{syncConfirmationUndoLabel}
       </cr-button>
       <if expr="not (is_macosx or is_linux or chromeos_ash or chromeos_lacros)">

diff --git a/chrome/browser/resources/signin/tangible_sync_style_shared.css b/chrome/browser/resources/signin/tangible_sync_style_shared.css
@@ -82,3 +82,15 @@
   font-size: 1.25rem;
   line-height: 24px;
 }
+
+@media screen and ((max-width: 780px) or (max-height: 600px)) {
+  .tangible-sync-style #title {
+    font-size: 1.5rem;
+    line-height: 32px;
+  }
+
+  .tangible-sync-style #subtitle {
+    font-size: 0.94rem;
+    line-height: 22px;
+  }
+}
diff --git a/chrome/browser/ui/webui/signin/enterprise_profile_welcome_ui.cc b/chrome/browser/ui/webui/signin/enterprise_profile_welcome_ui.cc
@@ -55,8 +55,12 @@ EnterpriseProfileWelcomeUI::EnterpriseProfileWelcomeUI(content::WebUI* web_ui)
       IDR_SIGNIN_ENTERPRISE_PROFILE_WELCOME_IMAGES_ENTERPRISE_PROFILE_WELCOME_ILLUSTRATION_SVG);
   source->AddResourcePath("images/left-banner.svg",
                           IDR_SIGNIN_IMAGES_SHARED_LEFT_BANNER_SVG);
+  source->AddResourcePath("images/left-banner-dark.svg",
+                          IDR_SIGNIN_IMAGES_SHARED_LEFT_BANNER_DARK_SVG);
   source->AddResourcePath("images/right-banner.svg",
                           IDR_SIGNIN_IMAGES_SHARED_RIGHT_BANNER_SVG);
+  source->AddResourcePath("images/right-banner-dark.svg",
+                          IDR_SIGNIN_IMAGES_SHARED_RIGHT_BANNER_DARK_SVG);
   source->AddLocalizedString("enterpriseProfileWelcomeTitle",
                              IDS_ENTERPRISE_PROFILE_WELCOME_TITLE);
   source->AddLocalizedString("cancelLabel", IDS_CANCEL);