chromium/chrome/browser/resources/chromeos/skyvault/local_files_migration_dialog.html

<style include="cr-page-host-style cr-shared-style md-select cros-color-overrides">
  /* TODO(b/342340599): add proper styling. */
  cr-dialog::part(dialog) {
    border-radius: 0%;
    height: 100%;
    width: 100%;
  }

  cr-button {
    --active-bg: transparent;
    --active-shadow: none;
    --active-shadow-action: none;
    --bg-action: var(--cros-sys-primary);
    --cr-button-height: 36px;
    --disabled-bg-action:
        var(--cros-sys-disabled_container);
    --disabled-bg: var(--cros-sys-disabled_container);;
    --disabled-text-color: var(--cros-sys-disabled);
    /* Use the default bg color as hover color because we rely on
       hoverBackground layer below.  */
    --hover-bg-action: var(--cros-sys-primary);
    --hover-bg-color: var(--cros-sys-primary_container);
    --ink-color: var(--cros-sys-ripple_primary);
    --ripple-opacity-action: 1;
    --ripple-opacity: 1;
    --text-color-action: var(--cros-sys-on_primary);
    --text-color: var(--cros-sys-on_primary_container);
    border: none;
    border-radius: 18px;
    font: var(--cros-button-2-font);
    position: relative;
  }

  cr-button.cancel-button {
    background-color: var(--cros-sys-primary_container);
  }

  cr-button.cancel-button:hover::part(hoverBackground) {
    background-color: var(--cros-sys-hover_on_subtle);
    display: block;
  }

  cr-button.action-button:hover::part(hoverBackground) {
    background-color: var(--cros-sys-hover_on_prominent);
    display: block;
  }

  :host-context(.focus-outline-visible) cr-button:focus {
    /* disable the focus shadow because we use outline below */
    box-shadow: none;
    outline: 2px solid var(--cros-sys-focus_ring);
    outline-offset: 2px;
  }

  .action-button:not(:active):hover {
    box-shadow: none;
  }

  [slot='body'] {
    --cr-dialog-body-padding-horizontal: 24px;
  }

  [slot='title'] {
    --cr-dialog-title-slot-padding-bottom: 16px;
    --cr-dialog-title-slot-padding-end: 24px;
    --cr-dialog-title-slot-padding-start: 24px;
    --cr-dialog-title-slot-padding-top: 24px;
    --cr-primary-text-color: var(--cros-sys-on_surface);
    font: var(--cros-display-7-font);
  }

  [slot='button-container'] {
    --cr-dialog-button-container-padding-bottom: 24px;
    --cr-dialog-button-container-padding-horizontal: 24px;
    --cr-dialog-button-container-padding-top: 24px;
  }
</style>

<cr-dialog id="dialog" show-on-attach>
  <!-- TODO(b/342340599): Make this color sensitive. -->
  <div class="managed-icon-container">
    <img src="chrome://resources/images/business.svg"
      alt="Managed Icon" class="managed-icon">
  </div>
  <!-- TODO(b/334511998): Use i18n strings. -->
  <div slot="title" id="title">Your files will be uploaded to OneDrive.</div>
  <div slot="body">
    <!-- TODO(b/334511998): Use i18n strings. -->
    <p class="message">
      Your administrator will start uploading your files to
      OneDrive. Local storage will be restricted.
    </p>
  </div>

  <div slot="button-container">
    <!-- TODO(b/334511998): Use i18n strings. -->
    <!-- Style as secondary, i.e. cancel-button. -->
    <cr-button id="upload-now-button" class="cancel-button">
      Upload now
    </cr-button>
    <!-- TODO(b/334511998): Use i18n strings. -->
    <!-- OK button is the default. -->
    <cr-button id="dismiss-button" class="action-button">
      OK
    </cr-button>
  </div>
</cr-dialog>