[PLA-1701] UI improvements (#88)

enjin · Apr 4, 2024 · 0be2a0b · 0be2a0b
1 parent c5de5b4
commit 0be2a0b
Show file tree

Hide file tree

Showing 38 changed files with 1,881 additions and 1,207 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,8 +51,11 @@
         "@walletconnect/utils": "^2.10.6",
         "@web3modal/html": "^2.7.0",
         "@web3modal/standalone": "^2.4.3",
+        "dompurify": "^3.0.11",
+        "easymde": "^2.18.0",
         "eslint-plugin-import": "^2.27.5",
         "eventemitter3": "^5.0.0",
+        "marked": "^12.0.1",
         "pinia": "^2.1.4",
         "pinia-plugin-persistedstate": "^3.1.0",
         "prettier": "^2.8.4",

diff --git a/resources/js/components/Address.vue b/resources/js/components/Address.vue
@@ -1,14 +1,15 @@
 <template>
     <dd class="mt-1 text-sm text-gray-900 break-words" v-if="addressSwitch">
-        <span class="break-words">
-            {{ displayAddress }}
-        </span>
+        <CopyTextIcon :text="addressSwitch">
+            <span class="break-words">
+                {{ displayAddress }}
+            </span>
+        </CopyTextIcon>
         <ArrowsRightLeftIcon
             v-if="useAppStore().advanced && !props.short"
-            class="inline-block w-4 h-4 ml-1 cursor-pointer hover:text-primary"
+            class="w-4 h-4 ml-1 cursor-pointer hover:text-primary"
             @click="switchAddress = !switchAddress"
         />
-        <CopyTextIcon :text="addressSwitch" />
     </dd>
 </template>
 

diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
@@ -1,7 +1,8 @@
 <template>
-    <div class="h-full flex flex-row">
+    <div class="h-full flex flex-row bg-light-surface-background">
         <SideNavbar v-if="appStore.hasValidConfig" />
         <SnackbarGroup />
+        <SupportButton />
 
         <div class="flex flex-col w-full overflow-hidden">
             <UserNavbar />
@@ -18,6 +19,7 @@
 import { useAppStore } from '~/store';
 import ScaleTransition from '~/components/ScaleTransition.vue';
 import SideNavbar from '~/components/SideNavbar.vue';
+import SupportButton from '~/components/SupportButton.vue';
 import SnackbarGroup from '~/components/SnackbarGroup.vue';
 import UserNavbar from '~/components/UserNavbar.vue';
 import { computed, watch } from 'vue';

diff --git a/resources/js/components/CollapseCard.vue b/resources/js/components/CollapseCard.vue
@@ -2,7 +2,7 @@
     <div class="bg-white shadow rounded-lg">
         <div class="flex divide-x divide-gray-200 transition-all" :class="{ 'border-b border-gray-200': open }">
             <div class="flex justify-between px-4 py-5 flex-1 cursor-pointer" @click="toggleCard">
-                <div class="inline-flex">
+                <div class="inline-flex items-center">
                     <label>{{ title }}</label>
                     <slot name="icon" />
                 </div>

diff --git a/resources/js/components/CopyTextIcon.vue b/resources/js/components/CopyTextIcon.vue
@@ -1,7 +1,7 @@
 <template>
-    <div @click="copyText">
+    <div class="cursor-pointer flex items-center" @click="copyText">
         <slot />
-        <ClipboardIcon class="inline-block ml-1 my-auto w-4 h-4 cursor-pointer hover:text-primary flex-shrink-0" />
+        <ClipboardIcon class="inline-block ml-1 my-auto w-4 h-4 hover:text-primary flex-shrink-0" />
     </div>
 </template>
 

diff --git a/resources/js/components/FormInput.vue b/resources/js/components/FormInput.vue
@@ -16,12 +16,15 @@
             />
 
             <div class="mt-2 flex relative rounded-md w-full" :class="{ '!mt-0': !label, 'shadow-sm': haveShadow }">
-                <span
+                <p v-if="errorMessage" class="absolute left-0 -bottom-5 text-red-500 text-xs truncate">
+                    {{ errorMessage }}
+                </p>
+                <div
                     v-if="prefix"
-                    class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 px-3 text-gray-500 text-sm"
+                    class="flex items-center rounded-l-md border border-r-0 border-gray-300 px-3 text-gray-500 text-sm"
                 >
                     {{ prefix }}
-                </span>
+                </div>
                 <div class="w-full flex">
                     <input
                         v-bind="{ ...field }"
@@ -34,7 +37,8 @@
                                 'rounded-md': !prefix,
                                 'rounded-r-none': hasAddon,
                             },
-                            `block flex-1 flex-shrink-0 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary text-sm leading-6 overflow-hidden transition-all disabled:bg-gray-100 ${inputClass}`,
+                            'block flex-1 flex-shrink-0 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary text-sm leading-6 overflow-hidden transition-all disabled:bg-gray-100 outline-none',
+                            inputClass,
                         ]"
                         :placeholder="placeholder"
                         autocomplete="off"
@@ -47,7 +51,6 @@
                     <slot name="addon" />
                 </div>
             </div>
-            <p v-if="errorMessage" class="text-red-500 text-sm">{{ errorMessage }}</p>
         </Field>
     </div>
 </template>

diff --git a/resources/js/components/FormList.vue b/resources/js/components/FormList.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="md:grid md:grid-cols-3 gap-4" :class="{ 'md:!flex md:!flex-col': flex }">
-        <div class="md:col-span-1" v-if="label || description">
+    <div class="space-y-4" :class="{ 'md:!flex md:!flex-col': flex }">
+        <div class="" v-if="label || description">
             <div class="flex" v-if="label">
                 <h3 class="text-base font-semibold leading-6 text-gray-900">{{ label }}</h3>
                 <Tooltip class="!flex items-center" v-if="tooltip" :text="tooltip">
@@ -14,7 +14,7 @@
             </p>
         </div>
 
-        <div class="col-span-2 md:mt-0 space-y-3" :class="(label || description) && 'mt-5'">
+        <div class="space-y-4">
             <div class="flex flex-row flex-nowrap gap-3 md:gap-6">
                 <slot name="headers" />
             </div>

diff --git a/resources/js/components/FormSelect.vue b/resources/js/components/FormSelect.vue
@@ -10,7 +10,10 @@
             />
 
             <Combobox v-bind="field" v-model="localModelValue">
-                <div class="mt-2 relative rounded-md shadow-sm" :class="{ '!mt-0': !label }">
+                <div class="relative rounded-md shadow-sm mt-2" :class="{ '!mt-0': !label }">
+                    <p v-if="errorMessage" class="absolute left-0 -bottom-5 text-red-500 text-xs truncate">
+                        {{ errorMessage }}
+                    </p>
                     <div
                         class="relative w-full cursor-default overflow-hidden bg-white text-left text-sm leading-6 transition-all"
                     >
@@ -71,8 +74,6 @@
                     </TransitionRoot>
                 </div>
             </Combobox>
-
-            <p v-if="errorMessage" class="text-red-500 text-sm">{{ errorMessage }}</p>
         </Field>
     </div>
 </template>

diff --git a/resources/js/components/MultiCheckbox.vue b/resources/js/components/MultiCheckbox.vue
@@ -12,7 +12,7 @@
             type="checkbox"
             class="hidden"
         />
-        <div :class="`mt-4 grid grid-cols-3 gap-y-6 gap-x-4`">
+        <div class="mt-4 grid grid-cols-3 gap-y-6 gap-x-4" :class="colsClass">
             <template v-for="option in options" :key="option.value">
                 <div
                     :class="[
@@ -52,13 +52,14 @@ import { QuestionMarkCircleIcon } from '@heroicons/vue/24/outline';
 const props = withDefaults(
     defineProps<{
         label: string;
-        description: string;
+        description?: string;
         options: { label: string; value: string; tooltip?: string }[];
         modelValue: string[];
         name: string;
         required?: boolean;
         tooltip?: string;
         readmore?: string;
+        colsClass?: string;
     }>(),
     {
         required: false,

diff --git a/resources/js/components/ProfileMenu.vue b/resources/js/components/ProfileMenu.vue
@@ -34,7 +34,7 @@
                         </p>
                     </div>
                     <div class="px-4 py-2" v-if="appStore.config.packages.length">
-                        <p class="text-sm text-gray-500 mb-1">Packages</p>
+                        <p class="text-sm text-gray-500 mb-1">Packages Available</p>
                         <p
                             v-for="(packg, idx) in appStore.config.packages"
                             :key="idx"