「SpeedWeight」のログイン画面

login.page.html

<ion-header>
  <ion-toolbar>
    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title class="card-title">ログイン</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ion-button (click)="signInWithTwitter()" color="twitter" class="login-button">
        <ion-icon class="sns-icon" name="logo-twitter"></ion-icon>Twitterでログイン
      </ion-button>
      <ion-button (click)="signInWithGoogle()" color="google" class="login-button border">
        <img class="g-icon" src="assets/icon/google-logo.png">Googleでログイン
      </ion-button>
      <ion-button (click)="signInWithFacebook()" color="facebook" class="login-button">
        <ion-icon class="sns-icon" name="logo-facebook"></ion-icon>Facebookでログイン
      </ion-button>
      <ion-button (click)="signInWithGitHub()" color="github" class="login-button border">
        <ion-icon class="sns-icon" name="logo-github"></ion-icon>GitHubでログイン
      </ion-button>
      <div class="notes">新規登録、ログインのどちらも上記のリンクから行うことができます。
        <a routerLink="/terms-of-service">
          利用規約
        </a>、
        <a routerLink="/privacy-policy">
          プライバシーポリシー
        </a>に同意したうえでログインしてください。
      </div>
    </ion-card-content>
  </ion-card>
</ion-content>

login.page.scss

.card-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.sns-icon {
    position: absolute;
    left: 15px;
    top: 25%;
}

.login-button {
    font-weight: bold;
    margin-bottom: 18px;
    width: 100%;

    &.border {
        --border-style: solid;
        --border-width: 1px;
    }

    .g-icon {
        position: absolute;
        left: 15px;
        top: 25%;
        width: 1.4em;
    }
}

.notes {
    margin-top: 15px;
}