wip

src/client/app/common/views/components/ui/card.vue

@@ -22,15 +22,21 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.ui-card
+root(isDark)
 	margin 16px
 	padding 16px
-	background #fff
+	background isDark ? #282C37 : #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
+		font-weight normal
+		font-size 24px
+		color isDark ? #fff : #444
+
+.ui-card[data-darkmode]
+	root(true)
+
+.ui-card:not([data-darkmode])
+	root(false)
 
 </style>

src/client/app/common/views/components/ui/input.vue

@@ -153,7 +153,7 @@ root(isDark, fill)
 		width 24px
 		text-align center
 		line-height 32px
-		color rgba(#000, 0.54)
+		color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
 
 		&:not(:empty) + .input
 			margin-left 28px
@@ -174,7 +174,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background rgba(#000, 0.42)
+				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
 
 			&:after
 				content ''
@@ -232,7 +232,7 @@ root(isDark, fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color rgba(#000, 0.54)
+			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@@ -247,6 +247,7 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			line-height 32px
+			color isDark ? #fff : #000
 			background transparent
 			border none
 			border-radius 0
@@ -263,7 +264,7 @@ root(isDark, fill)
 			justify-self center
 			font-size 16px
 			line-height 32px
-			color rgba(#000, 0.54)
+			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
 			pointer-events none
 
 			> *
@@ -299,9 +300,9 @@ root(isDark, fill)
 	&.filled
 		> .input
 			> .label
-				top fill ? -24px : -16px
+				top fill ? -24px : -17px
 				left 0 !important
-				transform scale(0.8)
+				transform scale(0.75)
 
 .ui-input[data-darkmode]
 	&.fill

src/client/app/common/views/components/ui/select.vue

@@ -193,9 +193,9 @@ root(isDark, fill)
 	&.filled
 		> .input
 			> .label
-				top fill ? -24px : -16px
+				top fill ? -24px : -17px
 				left 0 !important
-				transform scale(0.8)
+				transform scale(0.75)
 
 .ui-select[data-darkmode]
 	&.fill

src/client/app/common/views/components/ui/switch.vue

@@ -5,15 +5,13 @@
 	role="switch"
 	:aria-checked="checked"
 	:aria-disabled="disabled"
-	@click="switchValue"
-	@mouseover="mouseenter"
+	@click="toggle"
 >
 	<input
 		type="checkbox"
-		@change="handleChange"
 		ref="input"
 		:disabled="disabled"
-		@keydown.enter="switchValue"
+		@keydown.enter="toggle"
 	>
 	<span class="button">
 		<span></span>
@@ -30,6 +28,10 @@
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
+	model: {
+		prop: 'value',
+		event: 'change'
+	},
 	props: {
 		value: {
 			type: Boolean,
@@ -39,42 +41,15 @@ export default Vue.extend({
 			type: Boolean,
 			default: false
 		}
-	},/*
-	created() {
-		if (!~[true, false].indexOf(this.value)) {
-			this.$emit('input', false);
-		}
-	},*/
+	},
 	computed: {
 		checked(): boolean {
 			return this.value;
 		}
 	},
-	watch: {
-		value() {
-			(this.$el).style.transition = 'all 0.3s';
-			(this.$refs.input as any).checked = this.checked;
-		}
-	},
-	mounted() {
-		(this.$refs.input as any).checked = this.checked;
-	},
 	methods: {
-		mouseenter() {
-			(this.$el).style.transition = 'all 0s';
-		},
-		handleChange() {
-			(this.$el).style.transition = 'all 0.3s';
-			this.$emit('input', !this.checked);
+		toggle() {
 			this.$emit('change', !this.checked);
-			this.$nextTick(() => {
-				// set input's checked property
-				// in case parent refuses to change component's value
-				(this.$refs.input as any).checked = this.checked;
-			});
-		},
-		switchValue() {
-			!this.disabled && this.handleChange();
 		}
 	}
 });
@@ -117,7 +92,7 @@ root(isDark)
 		margin 3px 0 0 0
 		width 34px
 		height 14px
-		background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.07)
+		background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.25)
 		outline none
 		border-radius 14px
 		transition inherit

src/client/app/common/views/components/ui/textarea.vue

@@ -84,7 +84,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				background none
-				border solid 1px rgba(#000, 0.42)
+				border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
 				border-radius 3px
 				pointer-events none
 
@@ -112,7 +112,7 @@ root(isDark, fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color rgba(#000, 0.54)
+			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@@ -126,6 +126,7 @@ root(isDark, fill)
 			font inherit
 			font-weight fill ? bold : normal
 			font-size 16px
+			color isDark ? #fff : #000
 			background transparent
 			border none
 			border-radius 0
@@ -156,7 +157,7 @@ root(isDark, fill)
 			> .label
 				top -24px
 				left 0 !important
-				transform scale(0.8)
+				transform scale(0.75)
 
 .ui-textarea[data-darkmode]
 	&.fill