Merge pull request #50 from traP-jp/styled-buttons

ボタンのスタイル(Bordered、Monochrome)を追加

src/components/Controls/BorderedButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { disabled = false } = defineProps<{
+  disabled?: boolean
+  text: string
+  padding?: string
+}>()
+const emit = defineEmits(['click'])
+function onClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <button
+    :disabled="disabled"
+    class="fontstyle-ui-control-strong inline-block h-9 rounded border border-brand-primary px-6 text-brand-primary enabled:hover:bg-brand-light-primary disabled:opacity-50"
+    :style="{paddingLeft: padding, paddingRight: padding}"
+    @click="onClick"
+  >
+    {{ text }}
+  </button>
+</template>
+
+<style scoped></style>

src/components/Controls/MonochromeButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const { disabled = false } = defineProps<{
+  disabled?: boolean
+  text: string
+  padding?: string
+}>()
+const emit = defineEmits(['click'])
+function onClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <button
+    :disabled="disabled"
+    class="fontstyle-ui-control-strong inline-block h-9 rounded border border-text-primary px-6 text-text-primary enabled:hover:bg-background-secondary disabled:opacity-50"
+    :style="{paddingLeft: padding, paddingRight: padding}"
+    @click="onClick"
+  >
+    {{ text }}
+  </button>
+</template>
+
+<style scoped></style>

src/components/Controls/PrimaryButton.vue

@@ -2,6 +2,7 @@
 const { disabled = false } = defineProps<{
   disabled?: boolean
   text: string
+  padding?: string
 }>()
 const emit = defineEmits(['click'])
 function onClick() {
@@ -12,7 +13,8 @@ function onClick() {
 <template>
   <button
     :disabled="disabled"
-    class="fontstyle-ui-control-strong rounded bg-brand-primary px-6 py-2 text-white enabled:hover:bg-brand-secondary disabled:opacity-50"
+    class="fontstyle-ui-control-strong inline-block h-9 rounded border border-brand-primary bg-brand-primary px-6 text-white enabled:hover:border-brand-secondary enabled:hover:bg-brand-secondary disabled:opacity-50"
+    :style="{paddingLeft: padding, paddingRight: padding}"
     @click="onClick"
   >
     {{ text }}

src/components/Navigations/TopNavbar.vue

@@ -40,7 +40,7 @@ const setMenuState = (state: boolean) => {
       <button>提出一覧</button>
       <PrimaryButton
         v-if="!isLoggedIn"
-        class="px-4"
+        padding="1rem"
         text="ログイン"
         @click="
           () => {