wip

4 files changed, 147 insertions, 9 deletions

diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index ca85924c25..cd1b12ab2a 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -34,9 +34,9 @@
 			</header>
 
 			<div>
-				<el-radio v-model="game.settings.bw" label="random" @change="updateSettings">%i18n:@random%</el-radio>
-				<el-radio v-model="game.settings.bw" :label="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user1 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</el-radio>
-				<el-radio v-model="game.settings.bw" :label="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user2 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</el-radio>
+				<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">%i18n:@random%</form-radio>
+				<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user1 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
+				<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}{{ game.user2 | userName }}{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
 			</div>
 		</div>
 
@@ -99,9 +99,9 @@
 		</p>
 
 		<div class="actions">
-			<el-button @click="exit">%i18n:@cancel%</el-button>
-			<el-button type="primary" @click="accept" v-if="!isAccepted">%i18n:@ready%</el-button>
-			<el-button type="primary" @click="cancel" v-if="isAccepted">%i18n:@cancel-ready%</el-button>
+			<form-button @click="exit">%i18n:@cancel%</form-button>
+			<form-button primary @click="accept" v-if="!isAccepted">%i18n:@ready%</form-button>
+			<form-button primary @click="cancel" v-if="isAccepted">%i18n:@cancel-ready%</form-button>
 		</div>
 	</footer>
 </div>
@@ -248,7 +248,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.urbixznjwwuukfsckrwzwsqzsxornqij
+root(isDark)
 	text-align center
 	background #f9f9f9
 
@@ -283,7 +283,7 @@ export default Vue.extend({
 			max-width 400px
 			border-radius 4px
 			border 1px solid #ebeef5
-			background #fff
+			background isDark ? #282C37 : #fff
 			color #303133
 			box-shadow 0 2px 12px 0 rgba(#000, 0.1)
 
@@ -303,6 +303,13 @@ export default Vue.extend({
 
 		> .status
 			margin 0 0 16px 0
+
+.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
+	root(true)
+
+.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
+	root(false)
+
 </style>
 
 <style lang="stylus" module>
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 7075a8fc0b..422a3da050 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -38,6 +38,7 @@ import uiSwitch from './ui/switch.vue';
 import uiRadio from './ui/radio.vue';
 import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
+import formRadio from './ui/form/radio.vue';
 
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-menu', menu);
@@ -77,3 +78,4 @@ Vue.component('ui-switch', uiSwitch);
 Vue.component('ui-radio', uiRadio);
 Vue.component('ui-select', uiSelect);
 Vue.component('form-button', formButton);
+Vue.component('form-radio', formRadio);
diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue
index 2c3aa07830..3d81a83496 100644
--- a/src/client/app/common/views/components/ui/form/button.vue
+++ b/src/client/app/common/views/components/ui/form/button.vue
@@ -28,6 +28,11 @@ export default Vue.extend({
 @import '~const.styl'
 
 root(isDark)
+	display inline-block
+
+	& + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
+		margin-left 12px
+
 	> button
 		display inline-block
 		margin 0
@@ -54,16 +59,18 @@ root(isDark)
 
 	&.primary
 		> button
-			border none
+			border 1px solid $theme-color
 			background $theme-color
 			color $theme-color-foreground
 
 			&:hover
 			&:focus
 				background lighten($theme-color, 20%)
+				border-color lighten($theme-color, 20%)
 
 			&:active
 				background darken($theme-color, 20%)
+				border-color darken($theme-color, 20%)
 				transition all 0s
 
 	&.round
diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue
new file mode 100644
index 0000000000..1b337c3bea
--- /dev/null
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -0,0 +1,122 @@
+<template>
+<div
+	class="uywduthvrdnlpsvsjkqigicixgyfctto"
+	:class="{ disabled, checked }"
+	:aria-checked="checked"
+	:aria-disabled="disabled"
+	@click="toggle"
+>
+	<input type="radio"
+		:disabled="disabled"
+	>
+	<span class="button">
+		<span></span>
+	</span>
+	<span class="label"><slot></slot></span>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	model: {
+		prop: 'model',
+		event: 'change'
+	},
+	props: {
+		model: {
+			required: false
+		},
+		value: {
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		checked(): boolean {
+			return this.model === this.value;
+		}
+	},
+	methods: {
+		toggle() {
+			this.$emit('change', this.value);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark)
+	display inline-flex
+	margin 0 16px 0 0
+	cursor pointer
+	transition all 0.3s
+
+	> *
+		user-select none
+
+	&.disabled
+		opacity 0.6
+		cursor not-allowed
+
+	&.checked
+		> .button
+			border-color $theme-color
+
+			&:after
+				background-color $theme-color
+				transform scale(1)
+				opacity 1
+
+		> .label
+			color $theme-color
+
+	> input
+		position absolute
+		width 0
+		height 0
+		opacity 0
+		margin 0
+
+	> .button
+		display inline-block
+		flex-shrink 0
+		width 20px
+		height 20px
+		background none
+		border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		border-radius 100%
+		transition inherit
+
+		&:after
+			content ''
+			display block
+			position absolute
+			top 3px
+			right 3px
+			bottom 3px
+			left 3px
+			border-radius 100%
+			opacity 0
+			transform scale(0)
+			transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
+
+	> .label
+		margin-left 8px
+		display block
+		font-size 14px
+		line-height 20px
+		cursor pointer
+
+.uywduthvrdnlpsvsjkqigicixgyfctto[data-darkmode]
+	root(true)
+
+.uywduthvrdnlpsvsjkqigicixgyfctto:not([data-darkmode])
+	root(false)
+
+</style>