:art:

2 files changed, 135 insertions, 63 deletions

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
-
-				> textarea
-					min-height 80px
-
-			> .save
-				display block
-				margin 8px
-				padding 16px
-				width calc(100% - 16px)
-				font-size 16px
-				color $theme-color-foreground
-				background $theme-color
-				border-radius 4px
+					color $theme-color-foreground
+					background $theme-color
+					border-radius 8px
 
-				&:disabled
-					opacity 0.7
+					&:disabled
+						opacity 0.7
 
-				> i
-					margin-right 4px
+					> i
+						margin-right 4px
 
 	</style>
 	<script>