From 81eb1a4bcdd3ace74b222cb85db21e85cb16f210 Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Fri, 7 Jun 2024 15:29:45 +1000
Subject: [PATCH] CodexImage, SpinnerLoading, and IndicatorBadge sizing

---
 src/components/CodexImage.vue     |  7 +-----
 src/components/SpinnerLoading.vue |  2 +-
 src/components/StateIndicator.vue | 36 ++++++++++++++++++++++++++++---
 src/components/StorageRequest.vue | 11 ++++++----
 4 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/components/CodexImage.vue b/src/components/CodexImage.vue
index 2c06b1c..5606666 100644
--- a/src/components/CodexImage.vue
+++ b/src/components/CodexImage.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { inject, ref, onMounted, computed } from 'vue'
-import { initModals } from 'flowbite'
 import SpinnerLoading from '@/components/SpinnerLoading.vue'
 
 const codexApi = inject('codexApi')
@@ -8,10 +7,6 @@ const loading = ref(false)
 const imgSrc = ref('')
 const error = ref('')
 
-defineOptions({
-  inheritAttrs: false
-})
-
 const props = defineProps({
   cid: {
     type: [String, undefined]
@@ -71,6 +66,6 @@ onMounted(async () => {
       <span class="sr-only">{{ error }}</span>
     </div>
 
-    <img v-bind="$attrs" v-else-if="imgSrc" :src="imgSrc" class="rounded-full" :alt="props.alt" />
+    <img v-else-if="imgSrc" :src="imgSrc" class="rounded-full" :alt="props.alt" />
   </div>
 </template>
diff --git a/src/components/SpinnerLoading.vue b/src/components/SpinnerLoading.vue
index 9d62b9b..6ae12f5 100644
--- a/src/components/SpinnerLoading.vue
+++ b/src/components/SpinnerLoading.vue
@@ -1,5 +1,5 @@
 <template>
-  <div role="status">
+  <div role="status" class="inline-block">
       <svg
         aria-hidden="true"
         class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
diff --git a/src/components/StateIndicator.vue b/src/components/StateIndicator.vue
index 70effdc..cfd47e7 100644
--- a/src/components/StateIndicator.vue
+++ b/src/components/StateIndicator.vue
@@ -13,6 +13,15 @@ const props = defineProps({
   text: {
     type: String,
     required: true
+  },
+  size: {
+    type: String,
+    default() {
+      return 'sm'
+    },
+    validator(value, props) {
+      return ['sm', 'lg'].includes(value)
+    }
   }
 })
 
@@ -59,14 +68,35 @@ const theme = computed(() => {
     }
   }
 })
+
+const size = computed(() => {
+  if (props.size === 'sm') {
+    return {
+      fontSize: 'text-xs',
+      bubbleWidth: 'w-2',
+      bubbleHeight: 'h-2',
+      bubbleMargin: 'me-1'
+    }
+  } else {
+    return {
+      fontSize: 'text-md',
+      bubbleWidth: 'w-3',
+      bubbleHeight: 'h-3',
+      bubbleMargin: 'me-2'
+    }
+  }
+})
 </script>
 
 <template>
   <span
-    class="inline-flex items-center text-xs font-medium px-2.5 py-0.5 rounded-full"
-    :class="[theme.bg, theme.text, theme.bgDark, theme.textDark]"
+    class="inline-flex items-center font-medium px-2.5 py-0.5 rounded-full"
+    :class="[theme.bg, theme.text, theme.bgDark, theme.textDark, size.fontSize]"
   >
-    <span class="w-2 h-2 me-1 rounded-full" :class="theme.bgDot"></span>
+    <span
+      class="w-2 h-2 me-1 rounded-full"
+      :class="[theme.bgDot, size.bubbleWidth, size.bubbleHeight, size.bubbleMargin]"
+    ></span>
     {{ text }}
   </span>
 </template>
diff --git a/src/components/StorageRequest.vue b/src/components/StorageRequest.vue
index c0fd0f4..189a8d0 100644
--- a/src/components/StorageRequest.vue
+++ b/src/components/StorageRequest.vue
@@ -22,16 +22,19 @@ const totalPrice = computed(() => price(props.request))
 </script>
 
 <template>
-  <div class="flex">
-    <CodexImage class="flex-2" :cid="request.content.cid"></CodexImage>
-    <div class="py-8 px-4 mx-auto max-w-2xl lg:py-16">
+  <div class="flex flex-wrap">
+    <CodexImage class="flex-initial mx-auto my-8 lg:my-16 min-w-sm max-w-md w-full
+    rounded" :cid="request.content.cid" :local-only="!['New',
+    'Fulfilled'].includes(request.state)"></CodexImage>
+    <div class="py-8 px-4 ml-4 max-w-2xl lg:py-16 flex-1">
       <div class="flex justify-between items-center mb-2">
         <h2 class="text-xl font-semibold leading-none text-gray-900 md:text-2xl dark:text-white">
-          Request {{ shortHex(requestId, 12) }}
+          Request {{ shortHex(requestId, 8) }}
         </h2>
         <StateIndicator
           :text="request.state"
           :color="getStateColour(request.state)"
+          size="lg"
         ></StateIndicator>
       </div>
       <p class="mb-4 text-xl font-extrabold leading-none text-gray-900