From 4574db523a1b4c9aab6ab271a742c125a61050ec Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 18 Dec 2022 00:11:32 +0100
Subject: [PATCH] client: add default margin to FormSwitch and MkButton

---
 CONTRIBUTING.md                                | 4 ++--
 packages/client/src/components/form/switch.vue | 3 ++-
 packages/client/src/components/ui/button.vue   | 1 +
 packages/client/src/pages/admin/emojis.vue     | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 09a3a91e5..943a6bec6 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -316,8 +316,8 @@ This does not apply when using the Composition API since reactivation is manual.
 If you import json in TypeScript, the json file will be spit out together with the TypeScript file into the dist directory when compiling with tsc. This behavior may cause unintentional rewriting of files, so when importing json files, be sure to check whether the files are allowed to be rewritten or not. If you do not want the file to be rewritten, you should make sure that the file can be rewritten by importing the json file. If you do not want the file to be rewritten, use functions such as `fs.readFileSync` to read the file instead of importing it.
 
 ### Component style definitions do not have a `margin`
-Setting the `margin` of a component may be confusing.
-Instead, it should always be the user of a component that sets a `margin`.
+~~Setting the `margin` of a component may be confusing. Instead, it should always be the user of a component that sets a `margin`.~~
+This was a philosophy used previously. Hoever it now seems a better idea to add a default margin to the top level element of a component which can be easily overwritten on the usage of that component with a `style` attribute.
 
 ### Do not use the word "follow" in HTML class names
 This has caused things to be blocked by an ad blocker in the past.
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index 31ed71a91..ebd0b7aae 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -13,7 +13,7 @@
 		<div class="knob"></div>
 	</span>
 	<span class="label">
-		<!-- TODO: 無名slotの方は廃止 -->
+		<!-- TODO: do not use unnamed slot -->
 		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
 		<p class="caption"><slot name="caption"></slot></p>
 	</span>
@@ -50,6 +50,7 @@ const toggle = () => {
 	position: relative;
 	display: flex;
 	transition: all 0.2s ease;
+	margin: var(--margin) 0;
 
 	> * {
 		user-select: none;
diff --git a/packages/client/src/components/ui/button.vue b/packages/client/src/components/ui/button.vue
index 5552195c1..11a9057ff 100644
--- a/packages/client/src/components/ui/button.vue
+++ b/packages/client/src/components/ui/button.vue
@@ -134,6 +134,7 @@ function onMousedown(evt: MouseEvent): void {
 	overflow: clip;
 	box-sizing: border-box;
 	transition: background 0.1s ease;
+	margin: var(--margin) 0;
 
 	&:not(:disabled):hover {
 		background: var(--buttonHoverBg);
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 1d5fcddda..7b37dd99a 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -9,7 +9,7 @@
 						<template #prefix><i class="fas fa-search"></i></template>
 						<template #label>{{ i18n.ts.search }}</template>
 					</FormInput>
-					<FormSwitch v-model="selectMode" style="margin: 8px 0;">
+					<FormSwitch v-model="selectMode">
 						<template #label>{{ i18n.ts.selectMode }}</template>
 					</FormSwitch>
 					<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">