From baa8492b2b1dc9c368036c62acfb48d94e937e84 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 29 Aug 2017 13:26:14 +0900
Subject: [PATCH] :art:

---
 CHANGELOG.md                                  |   1 +
 locales/en.yml                                |   1 +
 locales/ja.yml                                |   1 +
 src/web/app/mobile/tags/page/settings.tag     |  29 ++-
 .../app/mobile/tags/page/settings/profile.tag | 169 ++++++++++++------
 5 files changed, 138 insertions(+), 63 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66039a227a..faefb4d72f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ unreleased
 * New: ドナーを表示する (#738)
 * Fix: 投稿のリンクが機能していない問題を修正
 * l10n
+* デザインの調整
 
 2470 (2017/08/29)
 -----------------
diff --git a/locales/en.yml b/locales/en.yml
index 782630ef42..b0488a775c 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -376,6 +376,7 @@ mobile:
       title: "Profile Settings"
 
     mk-profile-setting:
+      will-be-published: "These profiles will be published."
       name: "Name"
       location: "Location"
       description: "Description"
diff --git a/locales/ja.yml b/locales/ja.yml
index 7b1f052f91..9a040f798d 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -376,6 +376,7 @@ mobile:
       title: "プロフィール設定"
 
     mk-profile-setting:
+      will-be-published: "これらのプロフィールは公開されます。"
       name: "名前"
       location: "場所"
       description: "自己紹介"
diff --git a/src/web/app/mobile/tags/page/settings.tag b/src/web/app/mobile/tags/page/settings.tag
index 710591071d..b129b97bd1 100644
--- a/src/web/app/mobile/tags/page/settings.tag
+++ b/src/web/app/mobile/tags/page/settings.tag
@@ -12,7 +12,7 @@
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
 			ui.trigger('title', '<i class="fa fa-cog"></i>%i18n:mobile.tags.mk-settings-page.settings%');
-			document.documentElement.style.background = '#eee';
+			document.documentElement.style.background = '#313a42';
 		});
 	</script>
 </mk-settings-page>
@@ -37,19 +37,36 @@
 				display block
 				margin 24px
 				text-align center
-				color #555
+				color #cad2da
 
 			> ul
+				$radius = 8px
+
 				display block
-				margin 16px 0
+				margin 16px auto
 				padding 0
+				max-width 500px
+				width calc(100% - 32px)
 				list-style none
-				border-top solid 1px #aaa
+				background #fff
+				border solid 1px rgba(0, 0, 0, 0.2)
+				border-radius $radius
 
 				> li
 					display block
-					background #fff
-					border-bottom solid 1px #aaa
+					border-bottom solid 1px #ddd
+
+					&:hover
+						background rgba(0, 0, 0, 0.1)
+
+					&:first-child
+						border-top-left-radius $radius
+						border-top-right-radius $radius
+
+					&:last-child
+						border-bottom-left-radius $radius
+						border-bottom-right-radius $radius
+						border-bottom none
 
 					> a
 						$height = 48px
diff --git a/src/web/app/mobile/tags/page/settings/profile.tag b/src/web/app/mobile/tags/page/settings/profile.tag
index de365c235e..fb78d2f719 100644
--- a/src/web/app/mobile/tags/page/settings/profile.tag
+++ b/src/web/app/mobile/tags/page/settings/profile.tag
@@ -12,80 +12,135 @@
 		this.on('mount', () => {
 			document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
 			ui.trigger('title', '<i class="fa fa-user"></i>%i18n:mobile.tags.mk-profile-setting-page.title%');
-			document.documentElement.style.background = '#eee';
+			document.documentElement.style.background = '#313a42';
 		});
 	</script>
 </mk-profile-setting-page>
 
 <mk-profile-setting>
-	<label>
-		<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
-		<input ref="name" type="text" value={ I.name }/>
-	</label>
-	<label>
-		<p>%i18n:mobile.tags.mk-profile-setting.location%</p>
-		<input ref="location" type="text" value={ I.profile.location }/>
-	</label>
-	<label>
-		<p>%i18n:mobile.tags.mk-profile-setting.description%</p>
-		<textarea ref="description">{ I.description }</textarea>
-	</label>
-	<label>
-		<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
-		<input ref="birthday" type="date" value={ I.profile.birthday }/>
-	</label>
-	<label>
-		<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
-		<button onclick={ setAvatar } disabled={ avatarSaving }>%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
-	</label>
-	<label>
-		<p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
-		<button onclick={ setBanner } disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
-	</label>
-	<button class="save" onclick={ save } disabled={ saving }><i class="fa fa-check"></i>%i18n:mobile.tags.mk-profile-setting.save%</button>
+	<div>
+		<p><i class="fa fa-info-circle"></i>%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
+		<div class="form">
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
+				<input ref="name" type="text" value={ I.name }/>
+			</label>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.location%</p>
+				<input ref="location" type="text" value={ I.profile.location }/>
+			</label>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.description%</p>
+				<textarea ref="description">{ I.description }</textarea>
+			</label>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
+				<input ref="birthday" type="date" value={ I.profile.birthday }/>
+			</label>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
+				<button onclick={ setAvatar } disabled={ avatarSaving }>%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
+			</label>
+			<label>
+				<p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
+				<button onclick={ setBanner } disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
+			</label>
+		</div>
+		<button class="save" onclick={ save } disabled={ saving }><i class="fa fa-check"></i>%i18n:mobile.tags.mk-profile-setting.save%</button>
+	</div>
 	<style>
 		:scope
 			display block
 
-			> label
-				display block
-				margin 0
-				padding 16px 0
+			> div
+				margin 16px auto
+				max-width 500px
+				width calc(100% - 32px)
 
-				> p:first-child
+				> p
 					display block
-					margin 0
-					padding 0 0 4px 8px
-					font-weight bold
-					color #333
+					margin 0 0 8px 0
+					padding 16px
+					color #276f86
+					border solid 1px #a9d5de
+					border-radius 8px
+					background-color #f8ffff
 
-				> input[type="text"]
-				> textarea
+					> i
+						margin-right 6px
+
+				> .form
+					position relative
+					background #fff
+					border solid 1px rgba(0, 0, 0, 0.2)
+					border-radius 8px
+
+					&:before
+						content ""
+						display block
+						position absolute
+						bottom -20px
+						left calc(50% - 10px)
+						border-top solid 10px rgba(0, 0, 0, 0.2)
+						border-right solid 10px transparent
+						border-bottom solid 10px transparent
+						border-left solid 10px transparent
+
+					&:after
+						content ""
+						display block
+						position absolute
+						bottom -16px
+						left calc(50% - 8px)
+						border-top solid 8px #fff
+						border-right solid 8px transparent
+						border-bottom solid 8px transparent
+						border-left solid 8px transparent
+
+					> label
+						display block
+						margin 0
+						padding 16px
+						border-bottom solid 1px #eee
+
+						&:last-of-type
+							border none
+
+						> p:first-child
+							display block
+							margin 0
+							padding 0 0 4px 0
+							font-weight bold
+							color #2f3c42
+
+						> input[type="text"]
+						> textarea
+							display block
+							width 100%
+							padding 12px
+							font-size 16px
+							color #192427
+							border solid 1px #ddd
+							border-radius 4px
+
+						> textarea
+							min-height 80px
+
+				> .save
 					display block
+					margin 8px 0 0 0
+					padding 16px
 					width 100%
-					padding 12px
 					font-size 16px
-					border none
-					border-radius 0
+					color $theme-color-foreground
+					background $theme-color
+					border-radius 8px
 
-				> textarea
-					min-height 80px
+					&:disabled
+						opacity 0.7
 
-			> .save
-				display block
-				margin 8px
-				padding 16px
-				width calc(100% - 16px)
-				font-size 16px
-				color $theme-color-foreground
-				background $theme-color
-				border-radius 4px
-
-				&:disabled
-					opacity 0.7
-
-				> i
-					margin-right 4px
+					> i
+						margin-right 4px
 
 	</style>
 	<script>