chromium/chrome/browser/resources/ash/settings/multidevice_page/multidevice_notification_access_setup_dialog.html

<style include="cr-shared-style settings-shared">
  cr-dialog::part(dialog) {
    width: 512px;
  }

  div[slot='title'] {
    flex-direction: column;
    height: auto;
  }

  div[slot='body'] {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    width: 464px;
  }

  iron-icon {
    --iron-icon-fill-color: var(--cros-icon-color-alert);
    padding-bottom: 13px;
  }

  #description {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  :host(:not([did-setup-attempt-fail_])) #description {
    /* Larger height to account for the lack of #failureIcon */
    height: 93px;
  }

  :host([did-setup-attempt-fail_]) #description {
    /* Smaller height to account for the presence of #failureIcon */
    height: 60px;
  }

  #illustration {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 200px;
    margin-bottom: 24px;
    margin-top: 24px;
    width: 100%;
  }

  :host([has-not-started-setup-attempt_]) #illustration {
    background-image:
        url(chrome://os-settings/images/notification_access_setup.svg);
  }

  :host([is-setup-attempt-in-progress_]) #illustration {
    background-image:
        url(chrome://os-settings/images/notification_access_connecting.svg);
  }

  :host([did-setup-attempt-fail_]) #illustration {
    background-image:
        url(chrome://os-settings/images/notification_access_error.svg);
  }

  :host([has-completed-setup-successfully_]) #illustration {
    background-image:
        url(chrome://os-settings/images/notification_access_finished.svg);
  }

  @media(prefers-color-scheme: dark) {
    :host([has-not-started-setup-attempt_]) #illustration {
      background-image: url(
        chrome://os-settings/images/notification_access_setup_dark.svg);
    }

    :host([is-setup-attempt-in-progress_]) #illustration {
      background-image: url(
        chrome://os-settings/images/notification_access_connecting_dark.svg);
    }

    :host([did-setup-attempt-fail_]) #illustration {
      background-image: url(
        chrome://os-settings/images/notification_access_error_dark.svg);
    }

    :host([has-completed-setup-successfully_]) #illustration {
      background-image: url(
        chrome://os-settings/images/notification_access_finished_dark.svg);
    }
  }
</style>
<cr-dialog id="dialog" close-text="$i18n{close}">
  <div id="dialogTitle" slot="title">
    <template is="dom-if" if="[[didSetupAttemptFail_]]" restamp>
      <iron-icon id="failureIcon" icon="os-settings:failure-alert">
      </iron-icon>
    </template>
    <div id="title">[[title_]]</div>
  </div>
  <div id="dialogBody" slot="body">
    <div id="illustration"></div>
    <div id="description">
      <template is="dom-if" if="[[description_]]" restamp>
        <localized-link localized-string="[[description_]]">
        </localized-link>
      </template>
      <div hidden="[[!shouldShowSetupInstructionsSeparately_]]">
        $i18n{multideviceNotificationAccessSetupInstructions}
      </div>
    </div>
  </div>
  <div id="buttonContainer" slot="button-container">
    <template is="dom-if" if="[[shouldShowCancelButton_(setupState_)]]"
        restamp>
      <cr-button id="cancelButton" class="cancel-button"
          on-click="onCancelClicked_">
        $i18n{cancel}
      </cr-button>
    </template>
    <template is="dom-if" if="[[hasCompletedSetupSuccessfully_]]" restamp>
      <cr-button id="doneButton" class="action-button"
          on-click="onDoneOrCloseButtonClicked_">
        $i18n{done}
      </cr-button>
    </template>
    <template is="dom-if" if="[[isNotificationAccessProhibited_]]" restamp>
      <cr-button id="closeButton" class="action-button"
          on-click="onDoneOrCloseButtonClicked_">
        $i18n{close}
      </cr-button>
    </template>
    <template is="dom-if" if="[[hasNotStartedSetupAttempt_]]" restamp>
      <cr-button id="getStartedButton" class="action-button"
          on-click="attemptNotificationSetup_">
        $i18n{multideviceNotificationAccessSetupGetStarted}
      </cr-button>
    </template>
    <template is="dom-if" if="[[shouldShowTryAgainButton_(setupState_)]]"
        restamp>
      <cr-button id="tryAgainButton" class="action-button"
          on-click="attemptNotificationSetup_">
        $i18n{multideviceNotificationAccessSetupTryAgain}
      </cr-button>
    </template>
  </div>
</cr-dialog>