chrome/browser/resources/signin/sync_confirmation/sync_confirmation_app.html

<style include="signin-dialog-shared">
  :host {
    --avatar-size: 100px;
    --banner-height: 244px;
    --footer-margin: 40px;
    --text-font-size: 1.16em;
    color: var(--cr-primary-text-color);
    display: block;
  }

  @media (prefers-color-scheme: dark) {
    /* Old design */
    #illustration {
      background-image:
          url(./images/sync_confirmation_illustration_dark.svg);
    }

    /* New design */
    #syncPromoBanner {
      background-image:
          url(images/sync_confirmation_refreshed_illustration_dark.svg);
    }
  }

  .secondary {
    color: var(--cr-secondary-text-color);
  }

  /* Old design */
  .action-container cr-button {
    padding-inline-end: 16px;
    padding-inline-start: 16px;
  }

  .action-container {
    bottom: 0;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
  }

  #illustration-container {
    height: 168px;
    margin-bottom: 32px;
    position: relative;
    width: 100%;
  }

  #illustration {
    background: url(./images/sync_confirmation_illustration.svg);
    background-size: 100% 100%;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
  }

  #illustration-container > img {
    border-radius: 50%;
    height: 68px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 96px;
    width: 68px;
  }

  .heading {
    font-weight: normal;
    margin-bottom: 32px;
    padding: 0 24px;
    text-align: center;
  }

  #content-container {
    /* Saves space for button row. */
    padding-bottom: 96px;
    position: relative;
    width: 100%;
  }

  .message-container {
    line-height: 20px;
    margin-bottom: 16px;
    padding: 0 24px;
  }

  @media (prefers-color-scheme: light) {
    #grey-banner {
      background: var(--paper-grey-50);
      height: 128px;
      top: 0;
      width: 100%;
    }
  }

  #old-footer {
    margin-bottom: 0;
    padding-top: 12px;
  }

  .action-container #settingsButton {
    left: 16px;
    position: absolute;
  }

  :host-context([dir='rtl']) .action-container #settingsButton {
    left: auto;
    right: 16px;
  }

  /* New design */
  #headerContainer {
    background-color: var(--theme-frame-color);
    height: var(--banner-height);
    position: relative;
    width: 100%;
  }

  #syncPromoBanner {
    background-image: url(images/sync_confirmation_refreshed_illustration.svg);
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
  }

  #avatar {
    border: 2px solid var(--md-background-color);
    border-radius: 50%;
    bottom: calc(var(--avatar-size)/-2);
    height: var(--avatar-size);
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: var(--avatar-size);
    z-index: 1;
  }

  #contentContainer {
    margin-bottom: calc(48px + var(--footer-margin));
    margin-top: 104px;
    text-align: center;
  }

  #contentContainer h2 {
    font-size: 1.85em;
    font-weight: normal;
  }

  #contentContainer h3 {
    font-size: var(--text-font-size);
    font-weight: normal;
  }

  #confirmationDescription {
    font-size: 1em;
    margin-top: 16px;
  }

  #footer {
    bottom: 0;
    display: flex;
    font-size: var(--text-font-size);
    margin-bottom: var(--footer-margin);
    position: absolute;
    width: 100%;
  }

  #actionContainer {
    display: flex;
    flex-flow: row-reverse;
    justify-content: flex-start;
    width: 100%;
  }

  #actionContainer cr-button {
    min-width: 111px;
  }

  #actionContainer #settingsButton {
    font-weight: normal;
    margin-inline-end: auto;
    margin-inline-start: var(--footer-margin);
  }

  #actionContainer #confirmButton {
    margin-inline-end: var(--footer-margin);
  }

  #actionContainer #notNowButton {
    font-weight: normal;
  }
</style>

<!--
  Use the 'consent-description' attribute to annotate all the UI elements
  that are part of the text the user reads before consenting to the Sync
  data collection . Similarly, use 'consent-confirmation' on UI elements on
  which user clicks to indicate consent.
-->

<template is="dom-if" if="[[!isProfileCreationFlow_]]">
  <div id="illustration-container">
    <div id="grey-banner"></div>
    <div id="illustration"></div>
    <img src="[[accountImageSrc_]]">
  </div>
  <div id="content-container">
    <h1 id="syncConfirmationHeading" class="heading" consent-description>
      $i18n{syncConfirmationTitle}
    </h1>
    <div class="message-container">
      <div consent-description>$i18n{syncConfirmationSyncInfoTitle}</div>
      <div class="secondary" consent-description>
        $i18n{syncConfirmationSyncInfoDesc}
      </div>
    </div>
    <div id="old-footer" class="message-container secondary">
      $i18n{syncConfirmationSettingsInfo}
    </div>
    <div class="action-container">
      <cr-button class="action-button" id="confirmButton"
          on-click="onConfirm_" consent-confirmation autofocus>
        $i18n{syncConfirmationConfirmLabel}
      </cr-button>
      <cr-button id="cancelButton" on-click="onUndo_">
        $i18n{syncConfirmationUndoLabel}
      </cr-button>
      <cr-button id="settingsButton" on-click="onGoToSettings_"
          consent-confirmation>
        $i18n{syncConfirmationSettingsLabel}
      </cr-button>
    </div>
  </div>
</template>

<template is="dom-if" if="[[isProfileCreationFlow_]]">
  <div id="headerContainer" style$="--theme-frame-color:[[highlightColor_]]">
    <div id="syncPromoBanner"></div>
    <img id="avatar" alt="" src="[[accountImageSrc_]]">
  </div>

  <div id="contentContainer">
    <h2 consent-description id="syncConfirmationHeading">
      $i18n{syncConfirmationTitle}
    </h2>
    <h3 class="secondary" consent-description>
      $i18n{syncConfirmationSyncInfoTitle}
    </h3>
    <div id="confirmationDescription" class="secondary" consent-description>
      $i18n{syncConfirmationSyncInfoDesc}
    </div>
  </div>
  <div id="footer">
    <div id="actionContainer">
      <cr-button class="action-button" id="confirmButton"
          on-click="onConfirm_" consent-confirmation autofocus>
        $i18n{syncConfirmationConfirmLabel}
      </cr-button>
      <cr-button id="notNowButton" on-click="onUndo_">
        $i18n{syncConfirmationUndoLabel}
      </cr-button>
      <cr-button id="settingsButton" on-click="onGoToSettings_"
          consent-confirmation>
        $i18n{syncConfirmationSettingsLabel}
      </cr-button>
    </div>
  </div>
</template>