enhance(client): 🎨

packages/client/src/components/form/input.vue

@@ -5,7 +5,7 @@
 		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
 		<input ref="inputEl"
 			v-model="v"
-			v-panel
+			v-adaptive-border
 			:type="type"
 			:disabled="disabled"
 			:required="required"
@@ -243,7 +243,8 @@ export default defineComponent({
 			font-weight: normal;
 			font-size: 1em;
 			color: var(--fg);
-			border: solid 0.5px var(--panel);
+			background: var(--panel);
+			border: solid 1px var(--panel);
 			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
@@ -251,7 +252,7 @@ export default defineComponent({
 			transition: border-color 0.1s ease-out;
 
 			&:hover {
-				border-color: var(--inputBorderHover);
+				border-color: var(--inputBorderHover) !important;
 			}
 		}
 
@@ -298,7 +299,7 @@ export default defineComponent({
 
 		&.focused {
 			> input {
-				border-color: var(--accent);
+				border-color: var(--accent) !important;
 				//box-shadow: 0 0 0 4px var(--focus);
 			}
 		}

packages/client/src/components/form/select.vue

@@ -3,7 +3,9 @@
 	<div class="label" @click="focus"><slot name="label"></slot></div>
 	<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
 		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
-		<select ref="inputEl" v-model="v" v-panel
+		<select ref="inputEl"
+			v-model="v"
+			v-adaptive-border
 			class="select"
 			:disabled="disabled"
 			:required="required"
@@ -226,7 +228,7 @@ export default defineComponent({
 
 		&:hover {
 			> .select {
-				border-color: var(--inputBorderHover);
+				border-color: var(--inputBorderHover) !important;
 			}
 		}
 
@@ -242,6 +244,7 @@ export default defineComponent({
 			font-weight: normal;
 			font-size: 1em;
 			color: var(--fg);
+			background: var(--panel);
 			border: solid 1px var(--panel);
 			border-radius: 6px;
 			outline: none;
@@ -295,7 +298,7 @@ export default defineComponent({
 
 		&.focused {
 			> select {
-				border-color: var(--accent);
+				border-color: var(--accent) !important;
 			}
 		}
 

packages/client/src/components/form/switch.vue

@@ -2,10 +2,6 @@
 <div
 	class="ziffeoms"
 	:class="{ disabled, checked }"
-	role="switch"
-	:aria-checked="checked"
-	:aria-disabled="disabled"
-	@click.prevent="toggle"
 >
 	<input
 		ref="input"
@@ -13,11 +9,11 @@
 		:disabled="disabled"
 		@keydown.enter="toggle"
 	>
-	<span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
+	<span v-adaptive-border v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
-		<span class="handle"></span>
+		<i class="check fas fa-check"></i>
 	</span>
 	<span class="label">
-		<span><slot></slot></span>
+		<span @click="toggle"><slot></slot></span>
 		<p class="caption"><slot name="caption"></slot></p>
 	</span>
 </div>
@@ -55,16 +51,7 @@ export default defineComponent({
 .ziffeoms {
 	position: relative;
 	display: flex;
-	cursor: pointer;
+	transition: all 0.2s;
-	transition: all 0.3s;
-
-	&:first-child {
-		margin-top: 0;
-	}
-
-	&:last-child {
-		margin-bottom: 0;
-	}
 
 	> * {
 		user-select: none;
@@ -80,27 +67,30 @@ export default defineComponent({
 
 	> .button {
 		position: relative;
-		display: inline-block;
+		display: inline-flex;
 		flex-shrink: 0;
 		margin: 0;
-		width: 36px;
+		box-sizing: border-box;
-		height: 26px;
+		width: 23px;
-		background: var(--switchBg);
+		height: 23px;
 		outline: none;
-		border-radius: 999px;
+		background: var(--panel);
+		border: solid 1px var(--panel);
+		border-radius: 4px;
+		cursor: pointer;
 		transition: inherit;
 
-		> .handle {
+		> .check {
-			position: absolute;
+			margin: auto;
-			top: 0;
+			opacity: 0;
-			bottom: 0;
+			color: var(--fgOnAccent);
-			left: 5px;
+			font-size: 13px;
-			margin: auto 0;
+		}
-			border-radius: 100%;
+	}
-			transition: background-color 0.3s, transform 0.3s;
+
-			width: 16px;
+	&:hover {
-			height: 16px;
+		> .button {
-			background-color: #fff;
+			border-color: var(--inputBorderHover) !important;
 		}
 	}
 
@@ -108,13 +98,13 @@ export default defineComponent({
 		margin-left: 16px;
 		margin-top: 2px;
 		display: block;
-		cursor: pointer;
 		transition: inherit;
 		color: var(--fg);
 
 		> span {
 			display: block;
 			line-height: 20px;
+			cursor: pointer;
 			transition: inherit;
 		}
 
@@ -129,12 +119,6 @@ export default defineComponent({
 		}
 	}
 
-	&:hover {
-		> .button {
-			background-color: var(--accentedBg);
-		}
-	}
-
 	&.disabled {
 		opacity: 0.6;
 		cursor: not-allowed;
@@ -142,11 +126,11 @@ export default defineComponent({
 
 	&.checked {
 		> .button {
-			background-color: var(--accent);
+			background-color: var(--accent) !important;
-			border-color: var(--accent);
+			border-color: var(--accent) !important;
 
-			> .handle {
+			> .check {
-				transform: translateX(10px);
+				opacity: 1;
 			}
 		}
 	}

packages/client/src/components/form/textarea.vue

@@ -4,7 +4,7 @@
 	<div class="input" :class="{ disabled, focused, tall, pre }">
 		<textarea ref="inputEl"
 			v-model="v"
-			v-panel
+			v-adaptive-border
 			:class="{ code, _monospace: code }"
 			:disabled="disabled"
 			:required="required"
@@ -210,7 +210,8 @@ export default defineComponent({
 			font-weight: normal;
 			font-size: 1em;
 			color: var(--fg);
-			border: solid 0.5px var(--panel);
+			background: var(--panel);
+			border: solid 1px var(--panel);
 			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
@@ -218,13 +219,13 @@ export default defineComponent({
 			transition: border-color 0.1s ease-out;
 
 			&:hover {
-				border-color: var(--inputBorderHover);
+				border-color: var(--inputBorderHover) !important;
 			}
 		}
 
 		&.focused {
 			> textarea {
-				border-color: var(--accent);
+				border-color: var(--accent) !important;
 			}
 		}
 

packages/client/src/components/signup.vue

@@ -51,14 +51,13 @@
 				<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
 			</template>
 		</MkInput>
-		<label v-if="meta.tosUrl" class="_formBlock tou">
+		<MkSwitch v-if="meta.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
-			<input v-model="ToSAgreement" type="checkbox">
 			<I18n :src="$ts.agreeTo">
 				<template #0>
 					<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
 				</template>
 			</I18n>
-		</label>
+		</MkSwitch>
 		<captcha v-if="meta.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="meta.hcaptchaSiteKey"/>
 		<captcha v-if="meta.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="meta.recaptchaSiteKey"/>
 		<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
@@ -258,11 +257,5 @@ export default defineComponent({
 	.captcha {
 		margin: 16px 0;
 	}
-
-	> .tou {
-		display: block;
-		margin: 16px 0;
-		cursor: pointer;
-	}
 }
 </style>

packages/client/src/directives/adaptive-border.ts

@@ -0,0 +1,24 @@
+import { Directive } from 'vue';
+
+export default {
+	mounted(src, binding, vn) {
+		const getBgColor = (el: HTMLElement) => {
+			const style = window.getComputedStyle(el);
+			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
+				return style.backgroundColor;
+			} else {
+				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
+			}
+		}
+	
+		const parentBg = getBgColor(src.parentElement);
+
+		const myBg = window.getComputedStyle(src).backgroundColor;
+
+		if (parentBg === myBg) {
+			src.style.borderColor = 'var(--divider)';
+		} else {
+			src.style.borderColor = myBg;
+		}
+	},
+} as Directive;

packages/client/src/directives/index.ts

@@ -11,6 +11,7 @@ import anim from './anim';
 import stickyContainer from './sticky-container';
 import clickAnime from './click-anime';
 import panel from './panel';
+import adaptiveBorder from './adaptive-border';
 
 export default function(app: App) {
 	app.directive('userPreview', userPreview);
@@ -25,4 +26,5 @@ export default function(app: App) {
 	app.directive('click-anime', clickAnime);
 	app.directive('sticky-container', stickyContainer);
 	app.directive('panel', panel);
+	app.directive('adaptive-border', adaptiveBorder);
 }

packages/client/src/directives/panel.ts

@@ -7,7 +7,7 @@ export default {
 			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
 				return style.backgroundColor;
 			} else {
-				return getBgColor(el.parentElement);
+				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
 			}
 		}
 	

packages/client/src/pages/settings/theme.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="_formRoot">
-	<div v-panel class="rfqxtzch _formBlock">
+	<div v-adaptive-border class="rfqxtzch _panel _formBlock">
 		<div class="toggle">
 			<div class="toggleWrapper">
 				<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>