テーマ
UI Design: ソーシャルログインモーダル
機能は requirements.md、技術は design.md 参照。デザイントークンは home/ui-design.md 参照。
レイアウト
┌─────────────────────────────────────────┐
│ [✕] │ 右上 close
│ │
│ [LogIn icon] │ 中央 64×64 円
│ │
│ ログインが必要です │ display 2rem
│ 投票するには、ソーシャルアカウントで │ opacity 0.7
│ ログインしてください │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ [Facebook] Facebookでログイン │ │ 大きめボタン
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ [Instagram] Instagramでログイン │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘コンテナ
| 項目 | 値 |
|---|---|
| オーバーレイ | fixed inset-0 bg-black/50 backdrop-blur-sm |
| z-index | 100 |
| 配置 | flex items-center justify-center p-6 |
| モーダル本体 | bg-white rounded-3xl p-8 max-w-md w-full shadow-2xl |
ヘッダー部
Close ボタン
- 右上
top-4 right-4、p-2 rounded-full - ホバー:
bg-gray-100 - アイコン: X (6×6)
LogIn アイコン円
w-16 h-16 rounded-full、中央配置- 背景:
rgba(212, 175, 55, 0.1) - アイコン: LogIn (8×8、
gold)
見出し
- 「ログインが必要です」
- display フォント、2rem、
charcoal、mb-3
サブテキスト
- 「投票するには、ソーシャルアカウントでログインしてください」
- opacity 0.7
プロバイダーボタン
| 共通 | 値 |
|---|---|
| サイズ | w-full p-4 rounded-2xl |
| 背景 | white |
| 枠線 | 1px solid rgba(0, 0, 0, 0.1) |
| ホバー | scale(1.02) |
| レイアウト | flex items-center gap-4 |
Facebook ボタン
- 左アイコンチップ:
w-10 h-10 rounded-full、背景#1877F2、白Facebook SVG (20×20) - テキスト: 「Facebookでログイン」、weight 500、
charcoal
Instagram ボタン
- 左アイコンチップ:
w-10 h-10 rounded-full、背景linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4)、白Instagram SVG - テキスト: 「Instagramでログイン」、weight 500、
charcoal
アニメーション
| 要素 | プロパティ | timing |
|---|---|---|
| Overlay | opacity (0→1) | 200ms |
| Modal body | scale (0.9→1.0), opacity (0→1) | spring damping: 20 |
| プロバイダーボタン hover | scale | 200ms |
| Loading状態 (ボタン押下後) | スピナー表示 | – |
ローディング状態
ボタン押下後に isLoading=true になった場合:
- 押されたボタンを disabled 化
- ボタン内に Loader2 アイコン (回転アニメ) を表示
- 他のボタンも disabled 化
- close ボタンは有効のまま
関連
requirements.md/design.md../home/ui-design.md— デザイントークン