chrome/browser/resources/settings/chromeos/nearby_share_page/nearby_share_high_visibility_page.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_lottie/cr_lottie.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="../localized_link/localized_link.html">
<link rel="import" href="../../shared/nearby_page_template.html">
<link rel="import" href="../../shared/nearby_shared_icons.html">

<dom-module id="nearby-share-high-visibility-page">
  <template>
    <style>
      #content {
        background: linear-gradient(to top, var(--google-blue-50) 5%,
            rgba(255, 255, 255, 0) 50%);
        display: flex;
        flex-direction: column-reverse;
        height: 100%;
        position: relative;
        width: 100%;
      }

      #help {
        align-items: flex-start;
        color: var(--google-gray-500);
        display: flex;
        flex-direction: row;
        font-size: 9px;
        line-height: 12px;
        margin-inline-end: 24px;
        margin-inline-start: 24px;
        padding: 8px;
      }

      #helpText {
        margin: auto;
      }

      #infoIcon {
        flex-shrink: 0;
        height: 20px;
        margin-inline-end: 12px;
        width: 20px;
      }

      .icon-error-state {
        fill: var(--google-red-600);
      }

      #error {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        font-size: 12px;
      }

      #errorTitle {
        color: var(--google-red-600);
        font-weight: bold;
        margin-bottom: 3px;
      }

      #errorDescription {
        color: var(--google-grey-700);
        line-height: 13px;
      }

      cr-lottie {
        bottom: 0;
        height: 100px;
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
      }
    </style>
    <nearby-page-template title="$i18n{nearbyShareFeatureName}"
        sub-title="[[getSubTitle_(deviceName, remainingTimeInSeconds_)]]" 
        cancel-button-label="$i18n{cancel}">
      <div id="content" slot="content">
        <cr-lottie animation-url="nearby_share_pulse_animation.json" 
            autoplay="true">
        </cr-lottie>
        <div id="help">
          <template is="dom-if" if="[[!getErrorTitle_(errorState_)]]">
            <iron-icon id="infoIcon" icon="nearby20:info"></iron-icon>
            <div id="helpText">
              <settings-localized-link
                  localized-string="$i18n{nearbyShareHighVisibilityHelpText}"
                  link-url="$i18n{nearbyShareLearnMoreLink}">
              </settings-localized-link>
            </div>
          </template>
          <template is="dom-if" if="[[getErrorTitle_(errorState_)]]">
            <iron-icon id="infoIcon" icon="nearby20:info" 
                class="icon-error-state">
            </iron-icon>
            <div id="error" role="alert" aria-labelledby="errorTitle" 
                aria-describedby="errorDescription">
              <div id="errorTitle" aria-hidden="true">
                [[getErrorTitle_(errorState_)]]
              </div>
              <div id="errorDescription" aria-hidden="true">
                <settings-localized-link
                    localized-string="[[getErrorDescription_(errorState_)]]"
                    link-url="$i18n{nearbyShareLearnMoreLink}">
                </settings-localized-link>
              </div>
            </div>
          </template>
        </div>
      </div>
    </nearby-page-template>
  </template>
  <script src="nearby_share_high_visibility_page.js"></script>
</dom-module>