From 69113517e1798bc3497e15a669fa29f394386c2c Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregorvostrak@Gregors-MacBook-Pro.local>
Date: Wed, 27 Mar 2024 13:00:20 +0100
Subject: [PATCH] cleanup case-insensitive common components

---
 .../common/BillableToggleButton.vue           | 42 ---------
 resources/js/Components/common/CardTitle.vue  | 23 -----
 resources/js/Components/common/StatCard.vue   | 18 ----
 .../common/TimeTrackerStartStop.vue           | 89 -------------------
 4 files changed, 172 deletions(-)
 delete mode 100644 resources/js/Components/common/BillableToggleButton.vue
 delete mode 100644 resources/js/Components/common/CardTitle.vue
 delete mode 100644 resources/js/Components/common/StatCard.vue
 delete mode 100644 resources/js/Components/common/TimeTrackerStartStop.vue

diff --git a/resources/js/Components/common/BillableToggleButton.vue b/resources/js/Components/common/BillableToggleButton.vue
deleted file mode 100644
index 85792698..00000000
--- a/resources/js/Components/common/BillableToggleButton.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { twMerge } from 'tailwind-merge';
-const active = defineModel({ default: false });
-function toggleBillable() {
-    active.value = !active.value;
-}
-
-const iconColorClasses = computed(() => {
-    if (active.value) {
-        return 'text-accent-200/80 focus:text-accent-200 hover:text-accent-200';
-    } else {
-        return 'text-icon-default focus:text-icon-active hover:text-icon-active';
-    }
-});
-</script>
-
-<template>
-    <button
-        @click="toggleBillable"
-        :class="
-            twMerge(
-                iconColorClasses,
-                'flex-shrink-0 ring-0 focus:outline-none focus:ring-0 transition focus:bg-card-background-seperator hover:bg-card-background-seperator rounded-full w-11 h-11 flex items-center justify-center'
-            )
-        ">
-        <svg
-            class="h-7"
-            viewBox="0 0 8 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M4 1V13M1 10.182L1.879 10.841C3.05 11.72 4.949 11.72 6.121 10.841C7.293 9.962 7.293 8.538 6.121 7.659C5.536 7.219 4.768 7 4 7C3.275 7 2.55 6.78 1.997 6.341C0.891 5.462 0.891 4.038 1.997 3.159C3.103 2.28 4.897 2.28 6.003 3.159L6.418 3.489"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round" />
-        </svg>
-    </button>
-</template>
-
-<style scoped></style>
diff --git a/resources/js/Components/common/CardTitle.vue b/resources/js/Components/common/CardTitle.vue
deleted file mode 100644
index 1696d69c..00000000
--- a/resources/js/Components/common/CardTitle.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { Component } from 'vue';
-
-defineProps<{
-    title: string;
-    icon?: Component;
-}>();
-</script>
-
-<template>
-    <h3
-        class="text-white font-bold pb-4 text-base flex items-center space-x-2.5">
-        <component
-            v-if="icon"
-            :is="icon"
-            class="w-6 text-icon-default"></component>
-        <span>
-            {{ title }}
-        </span>
-    </h3>
-</template>
-
-<style scoped></style>
diff --git a/resources/js/Components/common/StatCard.vue b/resources/js/Components/common/StatCard.vue
deleted file mode 100644
index 7a83c2cd..00000000
--- a/resources/js/Components/common/StatCard.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-    title: string;
-    value: string;
-}>();
-</script>
-
-<template>
-    <div
-        class="rounded-lg bg-card-background border-card-border border px-3.5 py-2.5">
-        <dt class="font-bold text-sm text-muted">{{ title }}</dt>
-        <dd class="text-2xl text-white pt-1 font-bold">
-            {{ value }}
-        </dd>
-    </div>
-</template>
-
-<style scoped></style>
diff --git a/resources/js/Components/common/TimeTrackerStartStop.vue b/resources/js/Components/common/TimeTrackerStartStop.vue
deleted file mode 100644
index 662f09d5..00000000
--- a/resources/js/Components/common/TimeTrackerStartStop.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { twMerge } from 'tailwind-merge';
-import { computed } from 'vue';
-
-const emit = defineEmits(['changed']);
-
-const props = withDefaults(
-    defineProps<{
-        size: 'base' | 'large';
-        active: boolean;
-    }>(),
-    {
-        size: 'base',
-        active: false,
-    }
-);
-const buttonSizeClasses = {
-    base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus:ring-accent-200/10 hover:ring-4',
-    large: 'w-11 h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-8 hover:scale-110',
-};
-const iconClass = {
-    base: 'w-3.5 h-3.5',
-    large: 'w-4 h-4',
-};
-
-const buttonColorClasses = computed(() => {
-    if (props.active) {
-        return 'bg-red-400/80 hover:bg-red-500/80 focus:bg-red-500/80';
-    } else {
-        return 'bg-accent-300/50 hover:bg-accent-400/70 focus:bg-accent-400/70';
-    }
-});
-
-function toggleState() {
-    emit('changed', !props.active);
-}
-</script>
-
-<template>
-    <button
-        @click="toggleState"
-        data-testid="timer_button"
-        :class="
-            twMerge(
-                buttonSizeClasses[size],
-                buttonColorClasses,
-                'flex items-center justify-center py-1 transition  focus:outline-0 rounded-full text-white '
-            )
-        ">
-        <Transition name="fade" mode="out-in">
-            <svg
-                v-if="props.active"
-                :class="iconClass[size]"
-                viewBox="0 0 14 14"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M0.461426 2.74913C0.461426 1.48677 1.48666 0.461538 2.75076 0.461538H11.249C12.5131 0.461538 13.5383 1.48677 13.5383 2.75087V11.2491C13.5383 12.5132 12.5131 13.5385 11.249 13.5385H2.7525C2.4518 13.5387 2.154 13.4796 1.87614 13.3647C1.59828 13.2497 1.34582 13.0811 1.13319 12.8684C0.920559 12.6558 0.751936 12.4033 0.636968 12.1255C0.521999 11.8476 0.462941 11.5498 0.46317 11.2491V2.75262L0.461426 2.74913Z"
-                    fill="currentColor" />
-            </svg>
-            <svg
-                v-else
-                :class="iconClass[size]"
-                viewBox="0 0 7 8"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M6.56167 3.18089C6.70764 3.26214 6.82926 3.38092 6.91393 3.52494C6.99859 3.66896 7.04324 3.83299 7.04324 4.00005C7.04324 4.16712 6.99859 4.33115 6.91393 4.47517C6.82926 4.61919 6.70764 4.73797 6.56167 4.81922L1.8925 7.41339C1.74982 7.49259 1.58895 7.53317 1.42578 7.53113C1.26261 7.52909 1.1028 7.48449 0.962147 7.40175C0.821497 7.31901 0.704879 7.20099 0.623826 7.05937C0.542772 6.91774 0.50009 6.7574 0.5 6.59422V1.40589C0.5 0.691721 1.2675 0.239221 1.8925 0.586721L6.56167 3.18089Z"
-                    fill="currentColor" />
-            </svg>
-        </Transition>
-    </button>
-</template>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-</style>