edit styles from feedback

UMAprotocol · May 2, 2024 · 63f09af · 63f09af
1 parent 4379c9d
commit 63f09af
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 45 deletions.
diff --git a/src/plugins/oSnap/Create.vue b/src/plugins/oSnap/Create.vue
@@ -11,6 +11,7 @@ import {
 import { getIsOsnapEnabled, getModuleAddressForTreasury } from './utils';
 import CreateSafe from './CreateSafe.vue';
 import { toChecksumAddress } from '@/helpers/utils';
+import OsnapMarketingWidget from './components/OsnapMarketingWidget.vue';
 
 const props = defineProps<{
   space: ExtendedSpace;
@@ -131,58 +132,67 @@ onMounted(async () => {
 </script>
 
 <template>
-  <template v-if="!space.treasuries.length">
-    <h2>Warning: no treasuries</h2>
-    <p>
-      You have installed the oSnap plugin, but you don't have any treasuries.
-    </p>
-    <p>
-      Please add a Safe as a treasury and enable oSnap on it to use the oSnap
-      plugin.
-    </p>
-  </template>
-  <template v-else-if="hasLegacyPluginInstalled">
-    <div class="rounded-2xl border p-4 text-md">
+  <div class="rounded-2xl border border-skin-border relative">
+    <div v-if="!space.treasuries.length" class="rounded-2xl border p-4 text-md">
+      <h2>Warning: no treasuries</h2>
+      <p>
+        You have installed the oSnap plugin, but you don't have any treasuries.
+      </p>
+      <p>
+        Please add a Safe as a treasury and enable oSnap on it to use the oSnap
+        plugin.
+      </p>
+    </div>
+    <div
+      v-else-if="hasLegacyPluginInstalled"
+      class="rounded-2xl border p-4 text-md"
+    >
       <h2 class="mb-2">Warning: Multiple oSnap enabled plugins detected</h2>
       <p class="mb-2">
         For best experience using oSnap, please remove the SafeSnap plugin from
         your space.
       </p>
     </div>
-  </template>
 
-  <template v-else-if="isLoading">
-    <div class="grid min-h-[180px] place-items-center">
+    <div v-else-if="isLoading" class="grid min-h-[180px] place-items-center">
       <h2 class="text-center">
         Loading oSnap Safes <LoadingSpinner class="ml-2 inline" big />
       </h2>
     </div>
-  </template>
-  <template v-else-if="!allSafes.length">
-    <h2>Warning: no oSnap safes found</h2>
-    <p>
-      You have installed the oSnap plugin, but you don't have any oSnap safes.
-    </p>
-    <p>
-      Please add a Safe as a treasury and enable oSnap on it to use the oSnap
-      plugin.
-    </p>
-  </template>
-  <div class="flex flex-col gap-6" v-else>
-    <CreateSafe
-      v-for="(safe, i) in newPluginData.safes"
-      :key="`${safe.network}:${safe.safeAddress}`"
-      :safe="safe"
-      :all-safes="allSafes"
-      :unconfigured-safes="unconfiguredSafes"
-      @remove-safe="() => removeSafe(i)"
-      @update-safe="safe => updateSafe(safe, i)"
-    />
+    <div v-else-if="!allSafes.length">
+      <h2>Warning: no oSnap safes found</h2>
+      <p>
+        You have installed the oSnap plugin, but you don't have any oSnap safes.
+      </p>
+      <p>
+        Please add a Safe as a treasury and enable oSnap on it to use the oSnap
+        plugin.
+      </p>
+    </div>
+    <div
+      v-else-if="!newPluginData.safes?.length"
+      class="rounded-2xl border p-4 text-md"
+    >
+      <h4>Add treasuries to start building</h4>
+    </div>
+    <template v-else>
+      <CreateSafe
+        v-for="(safe, i) in newPluginData.safes"
+        :class="{ 'border-t border-skin-border': i !== 0 }"
+        :key="`${safe.network}:${safe.safeAddress}`"
+        :safe="safe"
+        :all-safes="allSafes"
+        :unconfigured-safes="unconfiguredSafes"
+        @remove-safe="() => removeSafe(i)"
+        @update-safe="safe => updateSafe(safe, i)"
+      />
+    </template>
+    <OsnapMarketingWidget class="absolute z-2 top-[-16px] right-[16px]" />
   </div>
   <TuneButton
     v-if="unconfiguredSafes.length"
     class="mt-4 w-full"
     @click="addNewSafe"
-    >Add Batch</TuneButton
+    >Add treasury +</TuneButton
   >
 </template>
diff --git a/src/plugins/oSnap/CreateSafe.vue b/src/plugins/oSnap/CreateSafe.vue
@@ -4,7 +4,6 @@ import { fetchBalances, fetchCollectibles } from './utils';
 import { cloneDeep } from 'lodash';
 import SelectSafe from './components/Input/SelectSafe.vue';
 import TransactionBuilder from './components/TransactionBuilder/TransactionBuilder.vue';
-import OsnapMarketingWidget from './components/OsnapMarketingWidget.vue';
 import BotSupportWarning from './components/BotSupportWarning.vue';
 
 // PROPS
@@ -102,9 +101,10 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="rounded-2xl border p-4 relative">
-    <OsnapMarketingWidget class="absolute top-[-16px] right-[16px]" />
-    <button class="text-red" @click="removeSafe">Remove Batch</button>
+  <div class="flex p-4 flex-col gap-0 relative pb-4">
+    <button class="text-red ml-auto" @click="removeSafe">
+      Remove treasury
+    </button>
     <h2 class="text-md">Add oSnap transactions</h2>
     <h3 class="text-base">Pick a safe</h3>
     <SelectSafe

diff --git a/src/plugins/oSnap/components/TransactionBuilder/Transaction.vue b/src/plugins/oSnap/components/TransactionBuilder/Transaction.vue
@@ -61,13 +61,20 @@ function setTransactionAsInvalid() {
 </script>
 
 <template>
-  <div class="mt-4 border-b pb-4 first:mt-0">
-    <div class="flex items-center justify-between text-[#FF5353]">
+  <div class="mt-4 pb-4 first:mt-0">
+    <div class="flex items-center justify-between">
       <h3 class="text-left text-base">
         Transaction {{ transactionIndex + 1 }}
       </h3>
-      <button @click="emit('removeTransaction', transactionIndex)">
-        Remove
+      <button
+        class="p-[6px] transition-colors duration-200 group"
+        @click="emit('removeTransaction', transactionIndex)"
+      >
+        <BaseIcon
+          class="text-red/80 group-hover:text-red"
+          name="close"
+          size="14"
+        />
       </button>
     </div>
     <TransactionType