[Signin] Replace margin-inline with column-gap in signin_shared

This CL was motivated by a bug on Windows for the local profile creation dialog. There was no margin between "Delete profile" and "Done" buttons because the order of the buttons is reversed on Windows. The margin-inline attribute for cr-button + cr-button is replaced with column-gap for action-container class. The padding for the action-container in the Signin Interception version of the Sync confirmation is also updated. Bug: 1368099 Change-Id: I2a47d38b84189fcaca679b5b25319347bb2e34bf Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3921800 Reviewed-by: Alex Ilin <alexilin@chromium.org> Commit-Queue: Gabriel Oliveira <gabolvr@google.com> Cr-Commit-Position: refs/heads/main@{#1052880}
chromium · Sep 29, 2022 · a2b9db3 · a2b9db3
1 parent f38c066
commit a2b9db3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 19 deletions.
diff --git a/chrome/browser/resources/signin/profile_customization/profile_customization_app.html b/chrome/browser/resources/signin/profile_customization/profile_customization_app.html
@@ -151,6 +151,7 @@
   }
 
   .in-dialog-design .action-container {
+    column-gap: 12px;
     padding: 0 24px 24px;
   }
 
@@ -159,14 +160,9 @@
   }
 
   .in-dialog-design #skipButton {
-    margin-inline-end: 12px;
     min-width: 76px;
   }
 
-  .in-dialog-design #deleteProfileButton {
-    margin-inline-end: 12px;
-  }
-
   #selectAvatarWrapper {
     height: 428px;
     margin: 0 14px;
@@ -198,7 +194,7 @@
     margin: auto 0;
   }
 
-  #selectAvatarCloseButton {
+  #selectAvatarBackButton {
     --cr-icon-button-icon-size: 16px;
     --cr-icon-button-size: 22px;
     margin-inline-end: 20px;
@@ -283,13 +279,12 @@
           $i18n{profileCustomizationDoneLabel}
         </cr-button>
         <template is="dom-if" if="[[shouldShowCancelButton_()]]">
-          <cr-button id="skipButton" class="cancel-button"
-              on-click="onSkipCustomizationClicked_">
+          <cr-button id="skipButton" on-click="onSkipCustomizationClicked_">
             $i18n{profileCustomizationSkipLabel}
           </cr-button>
         </template>
         <template is="dom-if" if="[[isLocalProfileCreation_]]">
-          <cr-button id="deleteProfileButton" class="cancel-button"
+          <cr-button id="deleteProfileButton"
               on-click="onDeleteProfileClicked_">
             $i18n{profileCustomizationDeleteProfileLabel}
           </cr-button>
@@ -301,7 +296,7 @@
   <template is="dom-if" if="[[isLocalProfileCreation_]]">
     <div id="selectAvatarDialog" slot="view">
       <div class="select-avatar-header">
-        <cr-icon-button iron-icon="cr:arrow-back" id="selectAvatarCloseButton"
+        <cr-icon-button iron-icon="cr:arrow-back" id="selectAvatarBackButton"
             aria-label="$i18n{profileCustomizationAvatarSelectionBackButtonLabel}"
             on-click="onSelectAvatarBackClicked_">
         </cr-icon-button>

diff --git a/chrome/browser/resources/signin/signin_shared.css b/chrome/browser/resources/signin/signin_shared.css
@@ -33,15 +33,12 @@ a {
 }
 
 .action-container {
+  column-gap: 8px;
   display: flex;
   justify-content: flex-end;
   padding: var(--action-container-padding);
 }
 
-cr-button + cr-button {
-  margin-inline-start: 8px;
-}
-
 .custom-scrollbar::-webkit-scrollbar {
   width: var(--scrollbar-width);
 }
@@ -62,11 +59,6 @@ cr-button + cr-button {
   flex-flow: row-reverse;
   justify-content: flex-start;
 }
-
-cr-button + cr-button {
-  margin-inline-end: 8px;
-  margin-inline-start: 0;
-}
 </if>
 
 @media (prefers-color-scheme: dark) {

diff --git a/chrome/browser/resources/signin/sync_confirmation/sync_confirmation_app.html b/chrome/browser/resources/signin/sync_confirmation/sync_confirmation_app.html
@@ -252,6 +252,10 @@
     margin: auto;
   }
 
+  .signin-intercept-design .action-container {
+    --action-container-padding: 24px;
+    column-gap: 12px;
+  }
 
   @media (prefers-color-scheme: dark) {
     /* Modal dialog design */