From bd3b24f2deff3071046e0aa79a50c2436a373c18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Preu=C3=9F?= <rene@preuss.io>
Date: Sun, 19 Feb 2023 21:46:28 +0100
Subject: [PATCH 1/5] Add new components

---
 src/runtime/components/BitinflowInput.vue     | 14 ++++++
 src/runtime/components/BitinflowSelectBox.vue | 44 +++++++++++++++++++
 .../components/BitinflowSelectBoxGroup.vue    | 11 +++++
 3 files changed, 69 insertions(+)
 create mode 100644 src/runtime/components/BitinflowSelectBox.vue
 create mode 100644 src/runtime/components/BitinflowSelectBoxGroup.vue

diff --git a/src/runtime/components/BitinflowInput.vue b/src/runtime/components/BitinflowInput.vue
index 68d7f0d..bec2505 100644
--- a/src/runtime/components/BitinflowInput.vue
+++ b/src/runtime/components/BitinflowInput.vue
@@ -5,6 +5,7 @@
     </div>
     <input
       class="block w-full text-black dark:text-white border-2 border-zinc-200 dark:border-base-500 dark:border-base-500 focus:outline-none dark:bg-base-700 dark:text-white rounded-lg px-4 py-2"
+      :class="calculatedClass"
       :type="type"
       :value="modelValue"
       :placeholder="placeholder"
@@ -33,11 +34,24 @@ export default {
     type: {
       type: String,
       default: 'text'
+    },
+    size: {
+      type: String,
+      default: 'normal'
     }
   },
 
   emits: ['update:modelValue'],
 
+  computed: {
+    calculatedClass() {
+      if (this.size !== 'normal') {
+        return `text-${this.size}`;
+      }
+      return '';
+    }
+  },
+
   methods: {
     change(e) {
       this.$emit('update:modelValue', e.target.value);
diff --git a/src/runtime/components/BitinflowSelectBox.vue b/src/runtime/components/BitinflowSelectBox.vue
new file mode 100644
index 0000000..3108e5b
--- /dev/null
+++ b/src/runtime/components/BitinflowSelectBox.vue
@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="bg-white dark:bg-base-700 border-2 rounded p-4 relative"
+    :class="[selected ? 'border-primary-500' : 'dark:border-base-600']"
+  >
+    <div class="absolute top-[-.6rem] left-[-.6rem] flex bg-primary-500 rounded">
+      <div
+        v-if="selected"
+        class="w-4 h-4 flex justify-center"
+      >
+        <i class="fas fa-check text-white text-xs text-primary-500 self-center" />
+      </div>
+    </div>
+    <a
+      class="after:absolute after:inset-0"
+      href="#"
+      @click.prevent="click"
+    />
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BitinflowSelectBox",
+
+  props: {
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  emits: ['update:selected'],
+
+  methods: {
+    click() {
+      this.$emit('update:selected', !this.selected);
+    }
+  }
+}
+</script>
diff --git a/src/runtime/components/BitinflowSelectBoxGroup.vue b/src/runtime/components/BitinflowSelectBoxGroup.vue
new file mode 100644
index 0000000..77a0fd1
--- /dev/null
+++ b/src/runtime/components/BitinflowSelectBoxGroup.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="grid grid-cols-5 gap-4 text-center">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BitinflowSelectBox"
+}
+</script>

From 15fee4c0b44a7eb6e9c7dfdd9129ef3940dd37f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Preu=C3=9F?= <rene@preuss.io>
Date: Sun, 19 Feb 2023 21:55:12 +0100
Subject: [PATCH 2/5] Fix base colors

---
 src/runtime/components/BitinflowButton.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/BitinflowButton.vue b/src/runtime/components/BitinflowButton.vue
index 120e844..97c6707 100644
--- a/src/runtime/components/BitinflowButton.vue
+++ b/src/runtime/components/BitinflowButton.vue
@@ -73,19 +73,19 @@ export default {
   @apply text-6xl;
 }
 .primary-solid {
-  @apply bg-primary-500 hover:bg-primary-400 dark:bg-primary-700 dark:hover:bg-primary-600 text-black dark:text-white;
+  @apply bg-primary-500 hover:bg-primary-400 dark:bg-primary-500 dark:hover:bg-primary-600 text-black dark:text-white;
 }
 .base-solid {
   @apply hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 text-black dark:text-white;
 }
 .danger-solid {
-  @apply bg-rose-600 hover:bg-rose-400 dark:bg-rose-700 dark:hover:bg-rose-600 text-black dark:text-white;
+  @apply bg-rose-600 hover:bg-rose-400 dark:bg-rose-500 dark:hover:bg-rose-600 text-black dark:text-white;
 }
 .primary-outline {
   @apply border-primary-500 hover:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-700 dark:hover:border-primary-600 text-black dark:text-white;
 }
 .base-outline {
-  @apply border-zinc-100 hover:bg-zinc-100 dark:hover:bg-base-600 dark:border-base-500 dark:hover:border-base-600 text-black dark:text-white;
+  @apply border-zinc-200 hover:bg-zinc-200 dark:hover:bg-base-700 dark:border-base-500 dark:hover:border-base-500 text-black dark:text-white;
 }
 .danger-outline {
   @apply border-rose-500 hover:bg-rose-500 dark:hover:bg-rose-600 dark:border-rose-700 dark:hover:border-rose-600 text-black dark:text-white;

From 9dab7e782ed2c2713620a6fc34d7b049b7b0fdc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Preu=C3=9F?= <rene@preuss.io>
Date: Sun, 19 Feb 2023 22:34:19 +0100
Subject: [PATCH 3/5] Responsiveness and colors

---
 src/runtime/components/BitinflowButton.vue         | 2 +-
 src/runtime/components/BitinflowSelectBoxGroup.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/BitinflowButton.vue b/src/runtime/components/BitinflowButton.vue
index 97c6707..e0a71da 100644
--- a/src/runtime/components/BitinflowButton.vue
+++ b/src/runtime/components/BitinflowButton.vue
@@ -76,7 +76,7 @@ export default {
   @apply bg-primary-500 hover:bg-primary-400 dark:bg-primary-500 dark:hover:bg-primary-600 text-black dark:text-white;
 }
 .base-solid {
-  @apply hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 text-black dark:text-white;
+  @apply bg-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 text-black dark:text-white;
 }
 .danger-solid {
   @apply bg-rose-600 hover:bg-rose-400 dark:bg-rose-500 dark:hover:bg-rose-600 text-black dark:text-white;
diff --git a/src/runtime/components/BitinflowSelectBoxGroup.vue b/src/runtime/components/BitinflowSelectBoxGroup.vue
index 77a0fd1..9a2251f 100644
--- a/src/runtime/components/BitinflowSelectBoxGroup.vue
+++ b/src/runtime/components/BitinflowSelectBoxGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-5 gap-4 text-center">
+  <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4 text-center">
     <slot />
   </div>
 </template>

From ba9aa2e1b29eac0b5ca4c045ab0b31399d851695 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Preu=C3=9F?= <rene@preuss.io>
Date: Mon, 20 Feb 2023 12:33:18 +0100
Subject: [PATCH 4/5] Color tuning

---
 src/runtime/components/BitinflowButton.vue    | 22 +++++++++-----
 .../BitinflowScreenScrollContainer.vue        | 29 +++++++++++++++++--
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/runtime/components/BitinflowButton.vue b/src/runtime/components/BitinflowButton.vue
index e0a71da..359a439 100644
--- a/src/runtime/components/BitinflowButton.vue
+++ b/src/runtime/components/BitinflowButton.vue
@@ -37,11 +37,11 @@ export default {
     computedClass: function () {
       return `button-text-${this.size} ${this.color}-${this.variant}`
     },
+  },
 
-    methods: {
-      click() {
-        this.$emit('click');
-      }
+  methods: {
+    click() {
+      this.$emit('click');
     }
   }
 }
@@ -73,21 +73,27 @@ export default {
   @apply text-6xl;
 }
 .primary-solid {
-  @apply bg-primary-500 hover:bg-primary-400 dark:bg-primary-500 dark:hover:bg-primary-600 text-black dark:text-white;
+  @apply bg-primary-600 hover:bg-primary-400 dark:bg-primary-500 dark:hover:bg-primary-400 text-black dark:text-white;
 }
 .base-solid {
   @apply bg-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 text-black dark:text-white;
 }
 .danger-solid {
-  @apply bg-rose-600 hover:bg-rose-400 dark:bg-rose-500 dark:hover:bg-rose-600 text-black dark:text-white;
+  @apply bg-rose-600 hover:bg-rose-400 dark:bg-rose-500 dark:hover:bg-rose-400 text-black dark:text-white;
+}
+.warning-solid {
+  @apply bg-amber-600 hover:bg-amber-400 dark:bg-amber-500 dark:hover:bg-amber-400 text-black dark:text-white;
 }
 .primary-outline {
-  @apply border-primary-500 hover:bg-primary-500 dark:hover:bg-primary-600 dark:border-primary-700 dark:hover:border-primary-600 text-black dark:text-white;
+  @apply border-primary-500 hover:bg-primary-500 dark:hover:bg-primary-500 dark:border-primary-500 dark:hover:border-primary-500 text-primary-500 hover:text-white;
+}
+.warning-outline {
+  @apply border-amber-500 hover:bg-amber-500 dark:hover:bg-amber-500 dark:border-amber-500 dark:hover:border-amber-500 text-amber-500 hover:text-white;
 }
 .base-outline {
   @apply border-zinc-200 hover:bg-zinc-200 dark:hover:bg-base-700 dark:border-base-500 dark:hover:border-base-500 text-black dark:text-white;
 }
 .danger-outline {
-  @apply border-rose-500 hover:bg-rose-500 dark:hover:bg-rose-600 dark:border-rose-700 dark:hover:border-rose-600 text-black dark:text-white;
+  @apply border-rose-500 hover:bg-rose-500 dark:hover:bg-rose-500 dark:border-rose-500 dark:hover:border-rose-500 text-rose-500 hover:text-white;
 }
 </style>
diff --git a/src/runtime/components/BitinflowScreenScrollContainer.vue b/src/runtime/components/BitinflowScreenScrollContainer.vue
index 20e9e63..68d4e6a 100644
--- a/src/runtime/components/BitinflowScreenScrollContainer.vue
+++ b/src/runtime/components/BitinflowScreenScrollContainer.vue
@@ -1,11 +1,36 @@
 <template>
-  <div class="overflow-y-auto h-screen">
+  <div
+    class="overflow-y-auto h-screen"
+    :class="`${variant}`"
+  >
     <slot />
   </div>
 </template>
 
 <script>
 export default {
-  name: "BitinflowScreenScrollContainer"
+  name: "BitinflowScreenScrollContainer",
+
+  props: {
+    variant: {
+      type: String,
+      default: 'light'
+    }
+  }
 }
 </script>
+
+<style>
+.light::-webkit-scrollbar-thumb {
+  @apply bg-gray-200;
+}
+.light::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-200;
+}
+.dark .light::-webkit-scrollbar-thumb {
+  @apply bg-base-800;
+}
+.dark .light::-webkit-scrollbar-thumb:hover {
+  @apply bg-base-800;
+}
+</style>

From dda0cf2df560d7bc4bfe9f8533830b951bf57427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Preu=C3=9F?= <rene@preuss.io>
Date: Mon, 20 Feb 2023 12:37:21 +0100
Subject: [PATCH 5/5] Add loading state

---
 src/runtime/components/BitinflowButton.vue | 33 ++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/BitinflowButton.vue b/src/runtime/components/BitinflowButton.vue
index 359a439..ae09b67 100644
--- a/src/runtime/components/BitinflowButton.vue
+++ b/src/runtime/components/BitinflowButton.vue
@@ -4,7 +4,10 @@
     :class="computedClass"
     @click="click"
   >
-    <slot />
+    <slot v-if="!loading" />
+    <template v-else>
+      <i class="fas fa-spinner fa-spin" />
+    </template>
   </button>
 </template>
 
@@ -17,6 +20,10 @@ export default {
       type: String,
       default: 'md'
     },
+    loading: {
+      type: Boolean,
+      default: false
+    },
     color: {
       type: String,
       default: 'base'
@@ -35,12 +42,13 @@ export default {
 
   computed: {
     computedClass: function () {
-      return `button-text-${this.size} ${this.color}-${this.variant}`
+      return `button-text-${this.size} ${this.color}-${this.variant} ${this.disabled ? 'disabled' : ''} ${this.loading ? 'loading' : ''}`
     },
   },
 
   methods: {
     click() {
+      if (this.disabled || this.loading) return;
       this.$emit('click');
     }
   }
@@ -48,51 +56,72 @@ export default {
 </script>
 
 <style scoped>
+.disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+.loading {
+  @apply opacity-50 cursor-not-allowed;
+}
 .button-text-sm {
   @apply text-sm;
 }
+
 .button-text-lg {
   @apply text-lg;
 }
+
 .button-text-xl {
   @apply text-xl;
 }
+
 .button-text-2xl {
   @apply text-2xl;
 }
+
 .button-text-3xl {
   @apply text-3xl;
 }
+
 .button-text-4xl {
   @apply text-4xl;
 }
+
 .button-text-5xl {
   @apply text-5xl;
 }
+
 .button-text-6xl {
   @apply text-6xl;
 }
+
 .primary-solid {
   @apply bg-primary-600 hover:bg-primary-400 dark:bg-primary-500 dark:hover:bg-primary-400 text-black dark:text-white;
 }
+
 .base-solid {
   @apply bg-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 text-black dark:text-white;
 }
+
 .danger-solid {
   @apply bg-rose-600 hover:bg-rose-400 dark:bg-rose-500 dark:hover:bg-rose-400 text-black dark:text-white;
 }
+
 .warning-solid {
   @apply bg-amber-600 hover:bg-amber-400 dark:bg-amber-500 dark:hover:bg-amber-400 text-black dark:text-white;
 }
+
 .primary-outline {
   @apply border-primary-500 hover:bg-primary-500 dark:hover:bg-primary-500 dark:border-primary-500 dark:hover:border-primary-500 text-primary-500 hover:text-white;
 }
+
 .warning-outline {
   @apply border-amber-500 hover:bg-amber-500 dark:hover:bg-amber-500 dark:border-amber-500 dark:hover:border-amber-500 text-amber-500 hover:text-white;
 }
+
 .base-outline {
   @apply border-zinc-200 hover:bg-zinc-200 dark:hover:bg-base-700 dark:border-base-500 dark:hover:border-base-500 text-black dark:text-white;
 }
+
 .danger-outline {
   @apply border-rose-500 hover:bg-rose-500 dark:hover:bg-rose-500 dark:border-rose-500 dark:hover:border-rose-500 text-rose-500 hover:text-white;
 }