wip

4 files changed, 34 insertions, 63 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