🎨

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

@@ -1,7 +1,7 @@
 <template>
 <component class="dmtdnykelhudezerjlfpbhgovrgnqqgr"
 	:is="link ? 'a' : 'button'"
-	:class="{ inline, primary, wait }"
+	:class="{ inline, primary, wait, round: $store.state.device.roundedCorners }"
 	:type="type"
 	@click="$emit('click')"
 	@mousedown="onMousedown"
@@ -116,7 +116,6 @@ export default Vue.extend({
 	font-size 16px
 	line-height 24px
 	border none
-	border-radius 6px
 	outline none
 	box-shadow none
 	text-decoration none
@@ -124,6 +123,9 @@ export default Vue.extend({
 	color var(--text)
 	background var(--buttonBg)
 
+	&.round
+		border-radius 6px
+
 	&:not(:disabled):hover
 		background var(--buttonHoverBg)
 
@@ -157,6 +159,8 @@ export default Vue.extend({
 			bottom -5px
 			left -5px
 			border 2px solid var(--primaryAlpha03)
+
+	&.round:focus:after
 		border-radius 10px
 
 	&:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr
@@ -197,7 +201,6 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 100%
-		border-radius 6px
 		overflow hidden
 
 		>>> div
@@ -210,6 +213,9 @@ export default Vue.extend({
 			transform scale(1)
 			transition all 0.5s cubic-bezier(0, .5, .5, 1)
 
+	&.round > .ripples
+		border-radius 6px
+
 	&.primary > .ripples >>> div
 		background rgba(0, 0, 0, 0.15)