🎨

CHANGELOG.md

@@ -8,6 +8,7 @@ unreleased
 * New: ドナーを表示する (#738)
 * Fix: 投稿のリンクが機能していない問題を修正
 * l10n
+* デザインの調整
 
 2470 (2017/08/29)
 -----------------

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"

locales/ja.yml

@@ -376,6 +376,7 @@ mobile:
       title: "プロフィール設定"
 
     mk-profile-setting:
+      will-be-published: "これらのプロフィールは公開されます。"
       name: "名前"
       location: "場所"
       description: "自己紹介"

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 #ddd
-					border-bottom solid 1px #aaa
+
+					&: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

src/web/app/mobile/tags/page/settings/profile.tag

@@ -12,12 +12,15 @@
 		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>
+	<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 }/>
@@ -42,22 +45,73 @@
 				<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
 
+			> div
+				margin 16px auto
+				max-width 500px
+				width calc(100% - 32px)
+
+				> p
+					display block
+					margin 0 0 8px 0
+					padding 16px
+					color #276f86
+					border solid 1px #a9d5de
+					border-radius 8px
+					background-color #f8ffff
+
+					> 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 0
+						padding 16px
+						border-bottom solid 1px #eee
+
+						&:last-of-type
+							border none
 
 						> p:first-child
 							display block
 							margin 0
-					padding 0 0 4px 8px
+							padding 0 0 4px 0
 							font-weight bold
-					color #333
+							color #2f3c42
 
 						> input[type="text"]
 						> textarea
@@ -65,21 +119,22 @@
 							width 100%
 							padding 12px
 							font-size 16px
-					border none
+							color #192427
-					border-radius 0
+							border solid 1px #ddd
+							border-radius 4px
 
 						> textarea
 							min-height 80px
 
 				> .save
 					display block
-				margin 8px
+					margin 8px 0 0 0
 					padding 16px
-				width calc(100% - 16px)
+					width 100%
 					font-size 16px
 					color $theme-color-foreground
 					background $theme-color
-				border-radius 4px
+					border-radius 8px
 
 					&:disabled
 						opacity 0.7