Feature v1 auth UI

web/src/app.css

@@ -347,3 +347,127 @@ body {
 	color: var(--foreground);
 	font-family: sans-serif;
 }
+
+article.timeline-item {
+	padding: 12px 16px;
+	font-family:
+		'Segoe UI',
+		Meiryo,
+		system-ui,
+		-apple-system,
+		BlinkMacSystemFont,
+		sans-serif;
+}
+
+article.timeline-item + article.timeline-item {
+	padding-top: 0;
+}
+
+blockquote {
+	margin: 0.5em 0;
+	border: var(--default-border);
+	border-radius: 5px;
+	overflow: hidden;
+}
+
+ul.clear {
+	list-style: none;
+	padding: 0;
+}
+
+button,
+input[type='button'],
+input[type='submit'] {
+	padding: 0.6rem 1.5rem;
+	border-radius: 9999px;
+	background-color: var(--accent);
+	color: var(--accent-foreground);
+	font-weight: bold;
+	cursor: pointer;
+}
+
+button:hover,
+input[type='button']:hover,
+input[type='submit']:hover {
+	opacity: 0.75;
+}
+
+.button-small {
+	padding: 0.5rem 1.25rem;
+}
+
+.button-outlined {
+	background: transparent;
+	border: 1px solid var(--accent-gray);
+	color: var(--accent-gray);
+}
+
+.button-outlined:hover {
+	opacity: 1;
+	background: var(--accent-surface-high);
+}
+
+button:disabled {
+	opacity: 0.5 !important;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='url'],
+textarea {
+	padding: 0.5rem 0.75rem;
+	border-radius: 0.5rem;
+	outline-style: none;
+	background-color: var(--surface);
+}
+
+input[type='text'],
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='url'] {
+	border: var(--default-border);
+}
+
+button.clear {
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	outline: none;
+	padding: 0;
+	width: inherit;
+	height: inherit;
+}
+
+.card {
+	background-color: var(--surface);
+	color: var(--surface-foreground);
+	padding: 1rem;
+	border-radius: 0.5rem;
+	border: var(--default-border);
+}
+
+a {
+	color: var(--accent-gray);
+}
+
+a[target='_blank'] {
+	color: var(--accent-gray);
+	text-decoration-line: underline;
+}
+
+a:hover {
+	color: var(--accent);
+}
+
+dialog {
+	position: fixed;
+	inset: 0;
+	margin: auto;
+}

web/src/lib/components/ModalDialog.svelte

@@ -28,6 +28,7 @@
 
 <dialog
 	bind:this={dialog}
+	class="card"
 	on:click={tryClose}
 	on:keyup|stopPropagation={console.debug}
 	on:close={onClose}
@@ -40,6 +41,10 @@
 <style>
 	dialog {
 		border: var(--default-border);
-		border-radius: 10px;
+		border-radius: var(--radius);
+	}
+
+	.dialog-content {
+		margin: 0.5rem;
 	}
 </style>

web/src/lib/i18n/locales/en.json

@@ -15,13 +15,13 @@
 		"recommended": "Recommended",
 		"key": "Login with key",
 		"create_account": "Create account",
+		"create": "Create",
 		"name": "name",
-		"try_demo": "Try demo",
-		"login": "Login"
+		"try_demo": "See timeline",
+		"login": "Login",
+		"hero-message": "Freedom is Here",
+		"hero-message-sub": "All you need is name. No e-mail address, no account suspension, open SNS. Play with Emoji Kitchen."
 	},
-	"post": "Post",
-	"follow": "Follow",
-	"following": "Following",
 	"editor": {
 		"post": "Post"
 	},
@@ -39,5 +39,10 @@
 			"label": "Analytics",
 			"description": "Used to control Google Analytics."
 		}
-	}
+	},
+	"post": "Post",
+	"follow": "Follow",
+	"following": "Following",
+	"cancel": "Cancel",
+	"or": "OR"
 }

web/src/lib/i18n/locales/ja.json

@@ -15,13 +15,13 @@
 		"recommended": "推奨",
 		"key": "鍵でログイン",
 		"create_account": "アカウントを作成",
+		"create": "作成",
 		"name": "名前",
-		"try_demo": "デモを試す",
-		"login": "ログイン"
+		"try_demo": "タイムラインをのぞいてみる",
+		"login": "ログイン",
+		"hero-message": "すべての自由が、ここに。",
+		"hero-message-sub": "必要なのは名前だけ。メールアドレスも要らない、凍結もない、オープンなSNS。絵文字キッチンで遊ぼう。"
 	},
-	"post": "投稿",
-	"follow": "フォロー",
-	"following": "フォロー中",
 	"editor": {
 		"post": "ポストする"
 	},
@@ -39,5 +39,9 @@
 			"label": "アナリティクス",
 			"description": "Google Analytics に使用されます。"
 		}
-	}
+	},
+	"post": "投稿",
+	"follow": "フォロー",
+	"following": "フォロー中",
+	"or": "または"
 }

web/src/routes/+layout.svelte → web/src/routes/(app)/+layout.svelte

@@ -2,12 +2,12 @@
 	import { WebStorage } from '$lib/WebStorage';
 	import Header from './Header.svelte';
 	import NoteDialog from './NoteDialog.svelte';
-	import { openNoteDialog } from '../stores/NoteDialog';
+	import { openNoteDialog } from '../../stores/NoteDialog';
 	import { onMount } from 'svelte';
-	import { debugMode } from '../stores/Preference';
+	import { debugMode } from '../../stores/Preference';
 	import ReloadDialog from './ReloadDialog.svelte';
 	import { _ } from 'svelte-i18n';
-	import '../app.css';
+	import '../../app.css';
 	import Gdpr from './parts/Gdpr.svelte';
 
 	let debugMessage = '';
@@ -162,130 +162,6 @@
 		background-color: white;
 	}
 
-	:global(article.timeline-item) {
-		padding: 12px 16px;
-		font-family:
-			'Segoe UI',
-			Meiryo,
-			system-ui,
-			-apple-system,
-			BlinkMacSystemFont,
-			sans-serif;
-	}
-
-	:global(article.timeline-item + article.timeline-item) {
-		padding-top: 0;
-	}
-
-	:global(blockquote) {
-		margin: 0.5em 0;
-		border: var(--default-border);
-		border-radius: 5px;
-		overflow: hidden;
-	}
-
-	:global(ul.clear) {
-		list-style: none;
-		padding: 0;
-	}
-
-	:global(button, input[type='button'], input[type='submit']) {
-		padding: 0.6rem 1.5rem;
-		border-radius: 9999px;
-		background-color: var(--accent);
-		color: var(--accent-foreground);
-		font-weight: bold;
-		cursor: pointer;
-	}
-
-	:global(button:hover, input[type='button']:hover, input[type='submit']:hover) {
-		opacity: 0.75;
-	}
-
-	:global(.button-small) {
-		padding: 0.5rem 1.25rem;
-	}
-
-	:global(.button-outlined) {
-		background: transparent;
-		border: 1px solid var(--accent-gray);
-		color: var(--accent-gray);
-	}
-
-	:global(.button-outlined:hover) {
-		opacity: 1;
-		background: var(--accent-surface-high);
-	}
-
-	:global(button:disabled) {
-		opacity: 0.5;
-	}
-
-	:global(
-			input[type='text'],
-			input[type='email'],
-			input[type='number'],
-			input[type='password'],
-			input[type='search'],
-			input[type='tel'],
-			input[type='url'],
-			textarea
-		) {
-		padding: 0.5rem 0.75rem;
-		border-radius: 0.5rem;
-		outline-style: none;
-		background-color: var(--surface);
-	}
-
-	:global(
-			input[type='text'],
-			input[type='email'],
-			input[type='number'],
-			input[type='password'],
-			input[type='search'],
-			input[type='tel'],
-			input[type='url']
-		) {
-		border: var(--default-border);
-	}
-
-	:global(button.clear) {
-		background-color: transparent;
-		border: none;
-		cursor: pointer;
-		outline: none;
-		padding: 0;
-		width: inherit;
-		height: inherit;
-	}
-
-	:global(.card) {
-		background-color: var(--surface);
-		color: var(--surface-foreground);
-		padding: 1rem;
-		border-radius: 0.5rem;
-		border: var(--default-border);
-	}
-
-	:global(a) {
-		color: var(--accent-gray);
-	}
-
-	:global(a[target='_blank']) {
-		color: var(--accent-gray);
-		text-decoration-line: underline;
-	}
-
-	:global(a):hover {
-		color: var(--accent);
-	}
-
-	:global(dialog) {
-		position: fixed;
-		inset: 0;
-		margin: auto;
-	}
-
 	@keyframes -global-rotation {
 		0% {
 			transform: rotate(0);

web/src/routes/Header.svelte → web/src/routes/(app)/Header.svelte

@@ -9,8 +9,8 @@
 	import IconPencilPlus from '@tabler/icons-svelte/dist/svelte/icons/IconPencilPlus.svelte';
 	import { nip19 } from 'nostr-tools';
 	import { japaneseBotNpub, trendingPeopleBotNpub } from '$lib/Constants';
-	import { unreadEvents } from '../stores/Notifications';
-	import { pubkey, rom } from '../stores/Author';
+	import { unreadEvents } from '../../stores/Notifications';
+	import { pubkey, rom } from '../../stores/Author';
 	import { _ } from 'svelte-i18n';
 
 	let npub = trendingPeopleBotNpub;