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

exports[`renders the empty settings pane 1`] = `
<div
  className="Box-root HorizontalGutter-root coral coral-stream App-root HorizontalGutter-full"
>
  <nav>
    <h2
      className="AriaInfo-root"
    >
      Navigation
    </h2>
    <ul
      className="TabBar-root TabBar-primary coral coral-tabBar"
      role="tablist"
    >
      <li
        className="Tab-root"
        id="tab-COMMENTS"
        role="presentation"
      >
        <button
          aria-controls="tabPane-COMMENTS"
          aria-selected={false}
          className="BaseButton-root Tab-button Tab-primary coral coral-tabBar-tab coral-tabBar-comments"
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          role="tab"
          type="button"
        >
          <span>
            Comments
          </span>
        </button>
      </li>
      <li
        className="Tab-root"
        id="tab-PROFILE"
        role="presentation"
      >
        <button
          aria-controls="tabPane-PROFILE"
          aria-selected={true}
          className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-myProfile"
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          role="tab"
          type="button"
        >
          <span>
            My Profile
          </span>
        </button>
      </li>
    </ul>
  </nav>
  <main>
    <section
      aria-labelledby="tab-PROFILE"
      className="App-tabContent coral coral-myProfile"
      data-testid="current-tab-pane"
      id="tabPane-PROFILE"
      role="tabpanel"
    >
      <div
        className="Box-root HorizontalGutter-root HorizontalGutter-double"
      >
        <div
          className="Box-root Flex-root coral coral-viewerBox"
        >
          <div
            className="Flex-flex Flex-halfItemGutter Flex-wrap gutter"
          >
            <div
              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText"
            >
              Signed in as 
              <span
                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
              >
                Passivo
              </span>
              .
            </div>
            <div
              className="Box-root Flex-root Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary UserBoxAuthenticated-userBoxText Flex-flex"
            >
              <span>
                Not you? 
              </span>
              <button
                className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular UserBoxAuthenticated-userBoxButton coral coral-viewerBox-logoutButton"
                data-color="primary"
                data-variant="regular"
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                Sign Out
              </button>
            </div>
          </div>
        </div>
        <ul
          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarMyProfile"
          role="tablist"
        >
          <li
            className="Tab-root"
            id="tab-MY_COMMENTS"
            role="presentation"
          >
            <button
              aria-controls="tabPane-MY_COMMENTS"
              aria-selected={false}
              className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarMyProfile-myComments"
              onBlur={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
              onMouseOut={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              role="tab"
              type="button"
            >
              <span>
                My comments
              </span>
            </button>
          </li>
          <li
            className="Tab-root"
            id="tab-NOTIFICATIONS"
            role="presentation"
          >
            <button
              aria-controls="tabPane-NOTIFICATIONS"
              aria-selected={false}
              className="BaseButton-root Tab-button Tab-secondary coral coral-tabBarSecondary-tab coral-tabBarMyProfile-notifications"
              onBlur={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
              onMouseOut={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              role="tab"
              type="button"
            >
              <span>
                Notifications
              </span>
            </button>
          </li>
          <li
            className="Tab-root"
            id="tab-ACCOUNT"
            role="presentation"
          >
            <button
              aria-controls="tabPane-ACCOUNT"
              aria-selected={true}
              className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarMyProfile-settings"
              onBlur={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
              onMouseOut={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              role="tab"
              type="button"
            >
              <span>
                Account
              </span>
            </button>
          </li>
        </ul>
        <section
          aria-labelledby="tab-ACCOUNT"
          className="coral coral-account"
          id="tabPane-ACCOUNT"
          role="tabpanel"
        >
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
          >
            <h1
              className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary"
            >
              Manage your account
            </h1>
            <div
              className="Box-root HorizontalGutter-root AccountSettingsContainer-root HorizontalGutter-full"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-5"
                data-testid="profile-changeUsername"
              >
                <div
                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignBaseline"
                >
                  <div>
                    <h1
                      className="Box-root Typography-root Typography-heading2 Typography-colorTextDark coral coral-myUsername"
                    >
                      Username
                    </h1>
                    <p
                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                    >
                      Passivo
                    </p>
                  </div>
                  <button
                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myUsername-editButton"
                    data-color="primary"
                    data-variant="outlineFilled"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    Edit
                  </button>
                </div>
              </div>
              <div
                className="Box-root HorizontalGutter-root coral coral-myEmail HorizontalGutter-spacing-5"
                data-testid="profile-changeEmail"
              >
                <div
                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
                >
                  <div>
                    <h1
                      className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
                    >
                      Email
                    </h1>
                    <div
                      className="Box-root Flex-root Flex-flex"
                    >
                      <p
                        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                      />
                      <span>
                         
                      </span>
                      <p
                        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextSecondary coral coral-myEmail-unverified"
                      >
                        (Unverified)
                      </p>
                    </div>
                  </div>
                  <button
                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myEmail-editButton"
                    data-color="primary"
                    data-variant="outlineFilled"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    Edit
                  </button>
                </div>
                <div
                  className="CallOut-root CallOut-colorRegular coral coral-verifyEmail"
                >
                  <div
                    className="CallOut-inner"
                  >
                    <div
                      className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                    >
                      <div>
                        <i
                          aria-hidden="true"
                          className="Icon-root Icon-lg"
                        >
                          email
                        </i>
                      </div>
                      <div>
                        <h1
                          className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-gutterBottom"
                        >
                          Verify your email address
                        </h1>
                        <p
                          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
                        >
                          An email has been sent to {$email} to verify your account.
You must verify your new email address before it can be used
to sign in to your account or to receive notifications.
                        </p>
                        <button
                          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantRegular ChangeEmailContainer-resendButton coral coral-verifyEmail-resendButton"
                          data-color="primary"
                          data-variant="regular"
                          onBlur={[Function]}
                          onClick={[Function]}
                          onFocus={[Function]}
                          onMouseOut={[Function]}
                          onMouseOver={[Function]}
                          onTouchEnd={[Function]}
                          type="button"
                        >
                          Resend verification
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="coral coral-myPassword"
                data-testid="profile-account-changePassword"
              >
                <div
                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
                >
                  <h1
                    className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
                  >
                    Password
                  </h1>
                  <button
                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-myPassword-editButton"
                    data-color="primary"
                    data-variant="outlineFilled"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    Edit
                  </button>
                </div>
              </div>
              <div
                className="coral coral-ignoredCommenters"
                data-testid="profile-account-ignoredCommenters"
              >
                <div
                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignCenter"
                >
                  <h1
                    className="Box-root Typography-root Typography-heading2 Typography-colorTextDark"
                  >
                    Ignored Commenters
                  </h1>
                  <button
                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-ignoredComments-manageButton"
                    data-color="primary"
                    data-variant="outlineFilled"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    Manage
                  </button>
                </div>
              </div>
              <div
                className="DownloadCommentsContainer-root coral coral-downloadCommentHistory"
              >
                <div
                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart"
                >
                  <div
                    className="DownloadCommentsContainer-content"
                  >
                    <h1
                      className="Box-root Typography-root Typography-heading2 Typography-colorTextDark DownloadCommentsContainer-title"
                    >
                      Download my comment history
                    </h1>
                    <p
                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DownloadCommentsContainer-description"
                    >
                      You will receive an email with a link to download your comment history.
You can make 
                      <strong>
                        one download request every 14 days.
                      </strong>
                    </p>
                  </div>
                  <div>
                    <button
                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-downloadCommentHistory-requestButton"
                      data-color="primary"
                      data-variant="outlineFilled"
                      onBlur={[Function]}
                      onClick={[Function]}
                      onFocus={[Function]}
                      onMouseOut={[Function]}
                      onMouseOver={[Function]}
                      onTouchEnd={[Function]}
                      type="button"
                    >
                      Request
                    </button>
                  </div>
                </div>
              </div>
              <div
                className="DeleteAccountContainer-root coral coral-deleteMyAccount"
              >
                <div
                  className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexStart"
                  data-testid="profile-account-deleteAccount"
                >
                  <div
                    className="DeleteAccountContainer-content"
                  >
                    <h1
                      className="Box-root Typography-root Typography-heading2 Typography-colorTextDark DeleteAccountContainer-title"
                    >
                      Delete My Account
                    </h1>
                    <p
                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DeleteAccountContainer-section"
                    >
                      Deleting your account will permanently erase your profile and remove
all your comments from this site.
                    </p>
                  </div>
                  <button
                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlineFilled coral coral-deleteMyAccount-requestButton"
                    data-color="primary"
                    data-variant="outlineFilled"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    Request
                  </button>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </section>
  </main>
</div>
`;
