From f557861a1a4a01a2884426ed2c8083ac28b70adf Mon Sep 17 00:00:00 2001
From: Konrad Mohrfeldt <konrad.mohrfeldt@farbdev.org>
Date: Mon, 6 Nov 2023 17:38:36 +0100
Subject: [PATCH] refactor: make all .btn instances inline-flex
We often find ourselves adding flex styles to buttons. Instead, this
should be the default.
---
src/Pages/MyShows.vue | 11 ++++++-----
src/assets/styles/tailwind.css | 4 ++++
src/components/OrderFilter.vue | 2 +-
src/components/generic/ADialog.vue | 2 +-
src/components/generic/RadioGroup.vue | 2 +-
src/components/images/ImagePicker.vue | 4 ++--
src/components/images/ImagePickerDialog.vue | 10 +++++-----
src/components/nav/ANavSidebar.vue | 2 +-
8 files changed, 21 insertions(+), 16 deletions(-)
diff --git a/src/Pages/MyShows.vue b/src/Pages/MyShows.vue
index 8eee9d4a..f6ce4d2c 100644
--- a/src/Pages/MyShows.vue
+++ b/src/Pages/MyShows.vue
@@ -37,10 +37,7 @@
</template>
</FormGroup>
- <button
- class="btn btn-default tw-flex tw-items-center tw-gap-2"
- @click="orderFilterDialog.open()"
- >
+ <button class="btn btn-default" @click="orderFilterDialog.open()">
<icon-system-uicons-sort />
{{ t('myShows.sortShows') }}
</button>
@@ -66,7 +63,11 @@
]"
/>
<template #footer="{ close }">
- <button type="button" class="btn btn-default tw-min-w-[100px]" @click="close">
+ <button
+ type="button"
+ class="btn btn-default tw-justify-center tw-min-w-[100px]"
+ @click="close"
+ >
{{ t('ok') }}
</button>
</template>
diff --git a/src/assets/styles/tailwind.css b/src/assets/styles/tailwind.css
index 30c55484..78307930 100644
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -113,6 +113,10 @@ thead .fc-day-selected:hover {
}
@layer components {
+ .btn {
+ @apply tw-inline-flex tw-gap-1 tw-items-center;
+ }
+
[data-headlessui-state='open'] {
position: relative;
}
diff --git a/src/components/OrderFilter.vue b/src/components/OrderFilter.vue
index 7c235ad9..e27b9849 100644
--- a/src/components/OrderFilter.vue
+++ b/src/components/OrderFilter.vue
@@ -19,7 +19,7 @@
<icon-system-uicons-drag-vertical />
</button>
<label
- class="btn tw-my-0 -tw-ml-3 tw-mr-6 tw-whitespace-nowrap tw-flex tw-gap-3 hocus:tw-bg-gray-100"
+ class="btn tw-my-0 -tw-ml-3 tw-mr-6 tw-whitespace-nowrap tw-gap-3 hocus:tw-bg-gray-100"
>
<input
type="checkbox"
diff --git a/src/components/generic/ADialog.vue b/src/components/generic/ADialog.vue
index db27fa5f..d0bf1d84 100644
--- a/src/components/generic/ADialog.vue
+++ b/src/components/generic/ADialog.vue
@@ -15,7 +15,7 @@
</div>
<button
type="button"
- class="btn btn-default tw-w-8 tw-h-8 tw-ml-auto tw-p-0 tw-flex tw-items-center tw-justify-center tw-rounded-full"
+ class="btn btn-default tw-w-8 tw-h-8 tw-ml-auto tw-p-0 tw-justify-center tw-rounded-full"
tabindex="-1"
@click="close"
>
diff --git a/src/components/generic/RadioGroup.vue b/src/components/generic/RadioGroup.vue
index 1c8bb1f1..136d4919 100644
--- a/src/components/generic/RadioGroup.vue
+++ b/src/components/generic/RadioGroup.vue
@@ -5,7 +5,7 @@
<button
type="button"
role="radio"
- class="btn tw-p-2 tw-m-0 tw-flex tw-gap-1 tw-items-center tw-rounded-none tw-justify-center first:tw-rounded-l last:tw-rounded-r tw-relative tw-ring-offset-2 focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-z-10"
+ class="btn tw-p-2 tw-m-0 tw-rounded-none tw-justify-center first:tw-rounded-l last:tw-rounded-r tw-relative tw-ring-offset-2 focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-z-10"
tabindex="0"
:aria-checked="modelValue === choice.value"
:class="choice.value === modelValue ? 'tw-bg-aura-primary tw-text-white' : 'tw-bg-gray-100'"
diff --git a/src/components/images/ImagePicker.vue b/src/components/images/ImagePicker.vue
index 592f04cd..6a702a37 100644
--- a/src/components/images/ImagePicker.vue
+++ b/src/components/images/ImagePicker.vue
@@ -10,10 +10,10 @@
<div class="tw-flex tw-items-stretch tw-m-3 tw-gap-3">
<button
type="button"
- class="btn btn-sm tw-inline-flex tw-items-center tw-text-white tw-backdrop-blur tw-bg-black/30 tw-ring-0 hocus:tw-bg-aura-primary/25"
+ class="btn btn-sm tw-text-white tw-backdrop-blur tw-bg-black/30 tw-ring-0 hocus:tw-bg-aura-primary/25"
@click="showPicker = true"
>
- <icon-carbon-image-search class="tw-mr-1 tw-w-6 tw-h-6" />
+ <icon-carbon-image-search class="tw-w-6 tw-h-6" />
{{ t('imagePicker.chooseAnImage') }}
</button>
<button
diff --git a/src/components/images/ImagePickerDialog.vue b/src/components/images/ImagePickerDialog.vue
index 1d8e59ce..daef51c0 100644
--- a/src/components/images/ImagePickerDialog.vue
+++ b/src/components/images/ImagePickerDialog.vue
@@ -13,19 +13,19 @@
<button
v-if="imageStore.count > 0"
type="button"
- class="btn btn-default tw-flex tw-items-center tw-grow md:tw-grow-0"
+ class="btn btn-default tw-grow md:tw-grow-0"
@click.stop="showBrowser = true"
>
- <icon-system-uicons-search class="tw-mr-1" />
+ <icon-system-uicons-search />
{{ t('imagePicker.browseImages') }}
</button>
<button
v-if="currentImage"
type="button"
- class="btn btn-default tw-flex tw-items-center tw-grow md:tw-grow-0"
+ class="btn btn-default tw-grow md:tw-grow-0"
@click.stop="selectedImage = currentImage"
>
- <icon-system-uicons-pen class="tw-mr-1" />
+ <icon-system-uicons-pen />
{{ t('imagePicker.editCurrentImage') }}
</button>
</div>
@@ -43,7 +43,7 @@
v-if="selectedImage"
:disabled="isSaving"
type="button"
- class="btn btn-primary tw-flex tw-items-center tw-gap-1"
+ class="btn btn-primary"
@click.stop="selectedImage && saveAndSelectImage(selectedImage)"
>
<icon-system-uicons-loader v-if="isSaving" class="tw-animate-spin" />
diff --git a/src/components/nav/ANavSidebar.vue b/src/components/nav/ANavSidebar.vue
index 4aac4b91..f7cf5072 100644
--- a/src/components/nav/ANavSidebar.vue
+++ b/src/components/nav/ANavSidebar.vue
@@ -16,7 +16,7 @@
>
<button
type="button"
- class="btn btn-default tw-p-0 tw-w-10 tw-h-10 tw-rounded-full tw-flex-none"
+ class="btn btn-default tw-p-0 tw-w-10 tw-h-10 tw-rounded-full tw-flex-none tw-justify-center"
data-testid="menu-logout"
@click="logoutRedirect"
>
--
GitLab