metamask-extension/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CustomSpendingCap should match snapshot 1`] = `
<div>
  <div
    class="box custom-spending-cap box--padding-top-2 box--padding-right-6 box--padding-left-6 box--display-flex box--gap-2 box--flex-direction-column box--align-items-flex-start box--background-color-background-alternative box--rounded-sm"
  >
    <div
      class="box custom-spending-cap__input box--display-block box--flex-direction-row box--justify-content-center"
    >
      <label
        for="custom-spending-cap"
      >
        <div
          class="form-field"
        >
          <div
            class="mm-box"
          >
            <div
              class="form-field__heading"
            >
              <div
                class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
              >
                <h6
                  class="mm-box mm-text mm-text--body-sm-bold mm-box--display-inline-block mm-box--color-text-default"
                >
                  Custom spending cap
                </h6>
                
                <div
                  class="box box--display-inline-block box--flex-direction-row"
                >
                  <div>
                    <div
                      aria-describedby="tippy-tooltip-1"
                      class=""
                      data-original-title="null"
                      data-tooltipped=""
                      style="display: inline;"
                      tabindex="0"
                    >
                      <span
                        class="box mm-icon mm-icon--size-inherit box--display-inline-block box--flex-direction-row box--color-inherit"
                        style="mask-image: url('./images/icons/question.svg');"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <input
              class="form-field__input"
              data-testid="custom-spending-cap-input"
              id="custom-spending-cap"
              placeholder="Enter a number"
              type="text"
              value="7"
            />
            
          </div>
        </div>
        <div
          class="box custom-spending-cap__max box--margin-left-auto box--padding-right-4 box--padding-bottom-2 box--flex-direction-row box--text-align-end box--width-max"
        >
          <button
            class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
          >
            Max
          </button>
        </div>
        <div
          class="box custom-spending-cap__description box--flex-direction-row"
        >
          <h6
            class="mm-box mm-text mm-text--body-sm mm-box--padding-top-2 mm-box--color-text-default"
          >
            <span>
               
              This allows the third party to spend 
              <span
                class="mm-box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold mm-box--color-text-default"
              >
                7
                 
                TST
              </span>
               from your current balance.
               
            </span>
          </h6>
          <a
            class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--margin-bottom-2 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
            href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
            target="_blank"
          >
            Learn more
          </a>
        </div>
      </label>
    </div>
  </div>
</div>
`;