wip

6 files changed, 51 insertions, 83 deletions

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 060af388b3..0e20e66f5a 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -31,7 +31,7 @@ import Othello from './othello.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './ui/input.vue';
 import uiButton from './ui/button.vue';
-import uiGroup from './ui/group.vue';
+import uiCard from './ui/card.vue';
 import uiForm from './ui/form.vue';
 import uiTextarea from './ui/textarea.vue';
 import uiSwitch from './ui/switch.vue';
@@ -67,7 +67,7 @@ Vue.component('mk-othello', Othello);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);
 Vue.component('ui-button', uiButton);
-Vue.component('ui-group', uiGroup);
+Vue.component('ui-card', uiCard);
 Vue.component('ui-form', uiForm);
 Vue.component('ui-textarea', uiTextarea);
 Vue.component('ui-switch', uiSwitch);
diff --git a/src/client/app/common/views/components/ui/group.vue b/src/client/app/common/views/components/ui/card.vue
index fb29458ce8..5ba15dad7d 100644
--- a/src/client/app/common/views/components/ui/group.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="ui-group">
+<div class="ui-card">
 	<header>
 		<slot name="title"></slot>
 	</header>
@@ -16,8 +16,15 @@ export default Vue.extend({});
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.ui-group
+.ui-card
+	margin 16px 0
+	padding 32px
+	background #fff
+	//box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
+
 	> header
 		font-weight bold
+		font-size 28px
+		color #444
 
 </style>
diff --git a/src/client/app/common/views/components/ui/form.vue b/src/client/app/common/views/components/ui/form.vue
index 0893af1bce..b6b4a76d2a 100644
--- a/src/client/app/common/views/components/ui/form.vue
+++ b/src/client/app/common/views/components/ui/form.vue
@@ -23,6 +23,8 @@ export default Vue.extend({
 
 .ui-form
 	> fieldset
+		margin 0
+		padding 0
 		border none
 
 </style>
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue
index 2cac6262f1..e78951a352 100644
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -16,7 +16,7 @@
 		@keydown.enter="switchValue"
 	>
 	<span class="button">
-		<span :style="{ transform }"></span>
+		<span></span>
 	</span>
 	<span class="label">
 		<span :aria-hidden="!checked"><slot></slot></span>
@@ -48,9 +48,6 @@ export default Vue.extend({
 	computed: {
 		checked(): boolean {
 			return this.value;
-		},
-		transform(): string {
-			return this.checked ? 'translate3d(14px, 0, 0)' : '';
 		}
 	},
 	watch: {
@@ -88,7 +85,7 @@ export default Vue.extend({
 
 root(isDark)
 	display flex
-	margin 16px 0
+	margin 32px 0
 	cursor pointer
 	transition all 0.3s
 
@@ -101,31 +98,12 @@ root(isDark)
 
 	&.checked
 		> .button
-			background-color $theme-color
-			border-color $theme-color
-
-		> .label
-			> span
-				color $theme-color
-
-		&:hover
-			> .label
-				> span
-					color darken($theme-color, 10%)
+			background-color rgba($theme-color, 0.4)
+			border-color rgba($theme-color, 0.4)
 
-			> .button
-				background darken($theme-color, 10%)
-				border-color darken($theme-color, 10%)
-
-	&:hover
-		> .label
-			> span
-				color isDark ? #fff : #2e3338
-
-		> .button
-			$color = isDark ? #15181d : #ced2da
-			background $color
-			border-color $color
+			> *
+				background-color $theme-color
+				transform translateX(14px)
 
 	> input
 		position absolute
@@ -134,42 +112,26 @@ root(isDark)
 		opacity 0
 		margin 0
 
-		&:focus + .button
-			&:after
-				content ""
-				pointer-events none
-				position absolute
-				top -5px
-				right -5px
-				bottom -5px
-				left -5px
-				border 2px solid rgba($theme-color, 0.3)
-				border-radius 14px
-
 	> .button
-		$color = isDark ? #1c1f25 : #dcdfe6
-
 		display inline-block
-		margin 0
-		width 46px
-		min-width 46px
-		height 32px
-		min-height 32px
-		background $color
-		border 1px solid $color
+		margin 3px 0 0 0
+		width 34px
+		height 14px
+		background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.05)
 		outline none
-		border-radius 6px
+		border-radius 14px
 		transition inherit
 
 		> *
 			position absolute
-			top 1px
-			left 1px
-			border-radius 6px
-			transition transform 0.3s
-			width 28px
-			height 28px
+			top -3px
+			left 0
+			border-radius 100%
+			transition background-color 0.3s, transform 0.3s
+			width 20px
+			height 20px
 			background-color #fff
+			box-shadow 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12)
 
 	> .label
 		margin-left 8px
@@ -180,9 +142,9 @@ root(isDark)
 
 		> span
 			display block
-			line-height 32px
+			line-height 20px
 			font-weight bold
-			color isDark ? #c4ccd2 : #4a535a
+			color isDark ? #c4ccd2 : rgba(#000, 0.75)
 			transition inherit
 
 		> p
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 716f7afc0c..25cfbf732b 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -6,7 +6,7 @@
 		<div>
 			<x-profile/>
 
-			<ui-group>
+			<ui-card>
 				<div slot="title">%fa:palette% %i18n:@design%</div>
 
 				<div>
@@ -39,9 +39,9 @@
 					<md-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</md-radio>
 					<md-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</md-radio>
 				</div>
-			</ui-group>
+			</ui-card>
 
-			<ui-group>
+			<ui-card>
 				<div slot="title">%fa:cog% %i18n:@behavior%</div>
 
 				<div>
@@ -63,9 +63,9 @@
 				<div>
 					<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
 				</div>
-			</ui-group>
+			</ui-card>
 
-			<ui-group>
+			<ui-card>
 				<div slot="title">%fa:language% %i18n:@lang%</div>
 
 				<md-field>
@@ -80,9 +80,9 @@
 					</md-select>
 				</md-field>
 				<span class="md-helper-text">%fa:info-circle% %i18n:@lang-tip%</span>
-			</ui-group>
+			</ui-card>
 
-			<ui-group>
+			<ui-card>
 				<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
 
 				<p class="account" v-if="$store.state.i.twitter"><a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
@@ -91,9 +91,9 @@
 					<span v-if="$store.state.i.twitter"> or </span>
 					<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a>
 				</p>
-			</ui-group>
+			</ui-card>
 
-			<ui-group>
+			<ui-card>
 				<div slot="title">%fa:sync-alt% %i18n:@update%</div>
 
 				<div>%i18n:@version% <i>{{ version }}</i></div>
@@ -104,7 +104,7 @@
 					<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
 					<template v-else>%i18n:@check-for-updates%</template>
 				</md-button>
-			</ui-group>
+			</ui-card>
 		</div>
 		<p><small>ver {{ version }} ({{ codename }})</small></p>
 	</main>
@@ -247,20 +247,17 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	padding 0 16px
 	margin 0 auto
 	max-width 500px
 	width 100%
 
-	> div
-		> *
-			margin-bottom 16px
-
 	> p
 		display block
-		margin 24px
+		margin 16px 0
+		padding 16px
 		text-align center
-		color isDark ? #cad2da : #a2a9b1
+		color isDark ? #cad2da : #2c662d
+		background #fcfff5
 
 main[data-darkmode]
 	root(true)
diff --git a/src/client/app/mobile/views/pages/settings/settings.profile.vue b/src/client/app/mobile/views/pages/settings/settings.profile.vue
index 73d876d14e..de891b5736 100644
--- a/src/client/app/mobile/views/pages/settings/settings.profile.vue
+++ b/src/client/app/mobile/views/pages/settings/settings.profile.vue
@@ -1,6 +1,6 @@
 <template>
-<ui-group>
-	<div slot="title">%fa:pencil-alt% %i18n:@title%</div>
+<ui-card>
+	<div slot="title">%fa:user% %i18n:@title%</div>
 
 	<ui-form :disabled="saving">
 		<ui-input v-model="name" :max="30">
@@ -41,7 +41,7 @@
 
 		<ui-button @click="save">%i18n:@save%</ui-button>
 	</ui-form>
-</ui-group>
+</ui-card>
 </template>
 
 <script lang="ts">