From 6f362361e302b6ced4cf83b69450938176da9b0c Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Tue, 27 Jul 2021 21:54:59 +0300
Subject: [PATCH] wip

---
 components/Badge.vue                          | 15 +++--
 components/common/ProgressBar.vue             |  4 +-
 components/common/input/ButtonCTA.vue         |  2 +-
 components/common/input/InputNumeric.vue      | 28 ++++++----
 .../sidebar/context/SidebarContextHeader.vue  |  2 +-
 .../sidebar/context/SidebarContextHeading.vue |  2 +-
 .../context/aaveV2/SidebarAaveV2Supply.vue    | 56 +++++++++----------
 .../components/SidebarSectionStatus.vue       |  8 +--
 .../SidebarSectionValueWithIcon.vue           |  8 ++-
 .../context/components/ValueDisplay.vue       | 20 ++++---
 pages/index.vue                               | 14 -----
 11 files changed, 83 insertions(+), 76 deletions(-)

diff --git a/components/Badge.vue b/components/Badge.vue
index 81a31d4..dada80f 100644
--- a/components/Badge.vue
+++ b/components/Badge.vue
@@ -1,18 +1,21 @@
 <template>
   <div
-    class="flex items-center justify-center flex-shrink-0 px-2 py-1 leading-none whitespace-no-wrap transition-colors duration-75 ease-out select-none xxl:font-semibold rounded-xs"
+    class="flex items-center justify-center flex-shrink-0 px-2 py-1.5 leading-none whitespace-no-wrap transition-colors duration-75 ease-out select-none font-semibold rounded-[4px]"
     :class="{
-      'text-9': !large,
+      'text-[10px]': !large,
       'text-12': large,
-      'bg-green-pure text-green-light dark:bg-opacity-17 dark:text-light': color === 'green-pure',
+      'bg-green-pure text-green-light dark:bg-opacity-17 dark:text-light':
+        color === 'green-pure',
       'bg-grey-pure bg-opacity-17 text-grey-pure': color === 'grey',
       'bg-blue-pure bg-opacity-20 text-blue-pure': color === 'blue',
       'bg-green-pure bg-opacity-20 text-green-pure': color === 'green',
       'bg-yellow-pure bg-opacity-25 text-yellow-pure': color === 'yellow',
       'bg-orange-pure bg-opacity-25 text-orange-pure': color === 'orange',
-      'bg-passion-orange-pure bg-opacity-25 text-passion-orange-pure': color === 'passion-orange',
-      'bg-red-pure dark:bg-opacity-25 text-white dark:text-light': color === 'red',
-      'bg-red-800 bg-opacity-25 text-red-800': color === 'red-dark',
+      'bg-passion-orange-pure bg-opacity-25 text-passion-orange-pure':
+        color === 'passion-orange',
+      'bg-red-pure dark:bg-opacity-25 text-white dark:text-light':
+        color === 'red',
+      'bg-red-800 bg-opacity-25 text-red-800': color === 'red-dark'
     }"
   >
     <slot />
diff --git a/components/common/ProgressBar.vue b/components/common/ProgressBar.vue
index 0a4e805..52a904f 100644
--- a/components/common/ProgressBar.vue
+++ b/components/common/ProgressBar.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="relative overflow-hidden rounded-xs">
-    <div class="w-full h-1 bg-opacity-25 bg-grey-pure"></div>
+  <div class="relative overflow-hidden rounded-[5px] border border-primary-gray border-opacity-[0.15]">
+    <div class="w-full h-2 bg-white"></div>
     <div
       class="absolute inset-0 transition-transform duration-200 ease-out"
       :style="{ transform }"
diff --git a/components/common/input/ButtonCTA.vue b/components/common/input/ButtonCTA.vue
index 51d2d81..ec122d9 100644
--- a/components/common/input/ButtonCTA.vue
+++ b/components/common/input/ButtonCTA.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="flex items-center justify-center flex-shrink-0 py-2 font-semibold text-white whitespace-no-wrap duration-75 ease-out transform rounded-sm select-none bg-ocean-blue-pure text-14 shadow-cta focus:outline-none dark:shadow-none"
+    class="flex items-center justify-center flex-shrink-0 py-2 font-semibold text-white whitespace-no-wrap duration-75 ease-out transform rounded-[4px] select-none bg-ocean-blue-pure shadow-cta focus:outline-none dark:shadow-none"
     :class="{
       'bg-opacity-50 pointer-events-none': disabled && !loading,
       'hover:-translate-y-px': !disabled && !loading,
diff --git a/components/common/input/InputNumeric.vue b/components/common/input/InputNumeric.vue
index 1fd50b4..2e17a78 100644
--- a/components/common/input/InputNumeric.vue
+++ b/components/common/input/InputNumeric.vue
@@ -1,14 +1,17 @@
 <template>
   <div class="flex flex-col flex-shrink-0 w-full">
-    <input
-      autocomplete="off"
-      class="w-full pl-8 pr-8 rounded-[6px] border border-grey-dark border-opacity-[0.15]"
-      type="text"
-      inputmode="decimal"
-      :value="value"
-      v-bind="$attrs"
-      v-on="inputListeners"
-    />
+    <div class="relative w-full">
+      <input
+        autocomplete="off"
+        class="w-full px-4 rounded-[6px] border border-grey-dark border-opacity-[0.15]"
+        type="text"
+        inputmode="decimal"
+        :value="value"
+        v-bind="$attrs"
+        v-on="inputListeners"
+      />
+      <slot name="suffix" />
+    </div>
 
     <div class="h-0">
       <transition
@@ -19,7 +22,12 @@
         leave-class="opacity-100"
         leave-to-class="opacity-0"
       >
-        <p v-if="touched && showError && error" class="mt-1 text-red-600 text-11">{{ error }}</p>
+        <p
+          v-if="touched && showError && error"
+          class="mt-1 text-red-600 text-11"
+        >
+          {{ error }}
+        </p>
       </transition>
     </div>
   </div>
diff --git a/components/sidebar/context/SidebarContextHeader.vue b/components/sidebar/context/SidebarContextHeader.vue
index b48c9c7..62cd2d5 100644
--- a/components/sidebar/context/SidebarContextHeader.vue
+++ b/components/sidebar/context/SidebarContextHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-shrink-0 w-full mx-auto max-w-[385px] p-4">
+  <div class="flex-shrink-0 w-full mx-auto p-4">
     <div class="flex justify-between items-center w-full">
       <button
         class="flex items-center justify-center text-opacity-50 group hover:text-opacity-100 focus:hover:text-opacity-100 text-grey-pure focus:outline-none"
diff --git a/components/sidebar/context/SidebarContextHeading.vue b/components/sidebar/context/SidebarContextHeading.vue
index c54bf8c..dd1b3fe 100644
--- a/components/sidebar/context/SidebarContextHeading.vue
+++ b/components/sidebar/context/SidebarContextHeading.vue
@@ -1,3 +1,3 @@
 <template>
-  <div class="font-semibold text-center text-19"><slot /></div>
+  <div class="font-semibold text-center text-sm text-primary-black"><slot /></div>
 </template>
diff --git a/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue b/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
index aa98db7..c70c74d 100644
--- a/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
+++ b/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
@@ -2,54 +2,54 @@
   <SidebarContextRootContainer>
     <template #title>Supply {{ symbol }}</template>
 
-    <SidebarSectionValueWithIcon label="Token Balance">
+    <SidebarSectionValueWithIcon label="Token Balance" center>
       <template #icon
         ><IconCurrency :currency="rootTokenKey" class="w-20 h-20" noHeight
       /></template>
       <template #value>{{ formatNumber(balance) }} {{ symbol }}</template>
     </SidebarSectionValueWithIcon>
 
-    <div class="bg-background mt-6 p-8">
+    <div class="bg-[#C5CCE1] bg-opacity-[0.15] mt-10 p-8">
+      <h3 class="text-primary-gray text-xs font-semibold mb-2.5">
+        Amount to supply
+      </h3>
+
       <input-numeric
         v-model="amount"
         placeholder="Amount to supply"
         :error="errors.amount.message"
-      />
-    </div>
-
-    <hr />
-
-    <div class="px-5">
-      <div class="flex items-center justify-between mt-6">
-        <div class="font-semibold">Set Max</div>
-
-        <toggle-button :checked="isMaxAmount" @change="toggle" />
-      </div>
-
-      <SidebarContextHeading class="mt-6"
-        >Projected Debt Position</SidebarContextHeading
       >
+        <template v-if="!isMaxAmount" #suffix>
+          <div class="absolute mt-2 top-0 right-0 mr-4">
+            <button
+              type="button"
+              class="text-primary-blue-dark font-semibold text-sm hover:text-primary-blue-hover"
+              @click="toggle"
+            >
+              Max
+            </button>
+          </div>
+        </template>
+      </input-numeric>
 
-      <hr />
+      <SidebarContextHeading class="mt-5">
+        Projected Debt Position
+      </SidebarContextHeading>
 
       <SidebarSectionStatus
-        class="mt-6"
+        class="mt-8"
         :liquidation="maxLiquidation"
         :status="status"
       />
 
-      <hr />
-
-      <SidebarSectionValueWithIcon class="mt-6" label="Liquidation Price (ETH)">
+      <SidebarSectionValueWithIcon class="mt-8" label="Liquidation Price (ETH)">
         <template #value>
-          {{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} /
-          {{ formatUsd(liquidationMaxPrice) }}
+          {{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} <span class="">/
+          {{ formatUsd(liquidationMaxPrice) }}</span>
         </template>
       </SidebarSectionValueWithIcon>
 
-      <hr />
-
-      <div class="flex flex-shrink-0 mt-6">
+      <div class="flex flex-shrink-0 mt-10">
         <ButtonCTA
           class="w-full"
           :disabled="!isValid || pending"
@@ -83,14 +83,14 @@ import ToggleButton from '~/components/common/input/ToggleButton.vue'
 import { useDSA } from '~/composables/useDSA'
 import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
 import { useNotification } from '~/composables/useNotification'
+import Button from '~/components/Button.vue'
 
 export default defineComponent({
-  components: { InputNumeric, ToggleButton, ButtonCTA },
+  components: { InputNumeric, ToggleButton, ButtonCTA, Button },
   props: {
     tokenKey: { type: String, required: true },
   },
   setup(props) {
-    const { showTransaction } = useNotification()
     const { networkName, account } = useWeb3()
     const { dsa } = useDSA()
     const { getTokenByKey, valInt } = useToken()
diff --git a/components/sidebar/context/components/SidebarSectionStatus.vue b/components/sidebar/context/components/SidebarSectionStatus.vue
index 480502d..b83453d 100644
--- a/components/sidebar/context/components/SidebarSectionStatus.vue
+++ b/components/sidebar/context/components/SidebarSectionStatus.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="flex flex-col flex-shrink-0">
-    <div class="flex items-center justify-between mb-4">
-      <div class="text-grey-pure text-14">Status (max. {{ formatPercent(liquidation) }})</div>
+    <div class="flex items-center justify-between mb-6">
+      <div class="font-semibold text-grey-pure text-xs">Status (max. {{ formatPercent(liquidation) }})</div>
 
-      <Badge class="w-18" :color="color">{{ text }}</Badge>
+      <Badge class="w-[80px]" :color="color">{{ text }}</Badge>
     </div>
 
     <div class="flex items-center">
-      <div class="w-24 mr-3 font-medium text-19">{{ formatPercent(status) }}</div>
+      <div class="w-24 mr-3 font-medium text-lg">{{ formatPercent(status) }}</div>
       <progress-bar class="w-full" :color="color" :progress="status" />
     </div>
   </div>
diff --git a/components/sidebar/context/components/SidebarSectionValueWithIcon.vue b/components/sidebar/context/components/SidebarSectionValueWithIcon.vue
index 06ff01e..55b087f 100644
--- a/components/sidebar/context/components/SidebarSectionValueWithIcon.vue
+++ b/components/sidebar/context/components/SidebarSectionValueWithIcon.vue
@@ -1,8 +1,11 @@
 <template>
-  <div class="flex flex-col items-center justify-center text-center flex-shrink-0">
+  <div
+    class="flex flex-col items-center justify-center flex-shrink-0"
+    :class="{ 'text-center': center }"
+  >
     <slot name="icon" />
 
-    <value-display class="mt-4" :label="label">
+    <value-display class="mt-4" :label="label" :center="center">
       <slot name="value" />
     </value-display>
   </div>
@@ -16,6 +19,7 @@ export default defineComponent({
   components: { ValueDisplay },
   props: {
     label: { type: String, required: true },
+    center: { type: Boolean, default: false },
   },
 })
 </script>
diff --git a/components/sidebar/context/components/ValueDisplay.vue b/components/sidebar/context/components/ValueDisplay.vue
index ebb9c4d..1d58742 100644
--- a/components/sidebar/context/components/ValueDisplay.vue
+++ b/components/sidebar/context/components/ValueDisplay.vue
@@ -1,14 +1,19 @@
 <template>
-  <div class="flex flex-col items-center">
-    <div class="h-6 font-medium text-24">
+  <div
+    class="flex flex-col w-full"
+    :class="{ 'text-center items-center': center }"
+  >
+    <value-display-label class="flex mb-2 text-primary-gray font-semibold">
+      {{ label }} <Info v-if="tooltip" :text="tooltip" class="ml-1" />
+    </value-display-label>
+
+    <div
+      class="font-medium text-lg text-primary-black"
+      :class="{ 'text-center': center }"
+    >
       <Spinner v-if="loading" class="w-5 h-5" />
       <slot v-else name="default" />
     </div>
-
-    <value-display-label class="flex mb-2 mt-3"
-      >{{ label }} <Info v-if="tooltip" :text="tooltip" class="ml-1" />
-    </value-display-label>
-
     <transition
       enter-active-class="duration-200 ease-out"
       enter-class="opacity-0"
@@ -36,6 +41,7 @@ export default defineComponent({
     label: { type: String, default: null },
     loading: { type: Boolean, default: false },
     tooltip: { type: String, default: null },
+    center: { type: Boolean, default: false },
   },
 })
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 150101c..040b325 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -54,20 +54,6 @@ const appsPerNetwork = {
       url: "/polygon/aave-v2",
       description: "Lend and borrow straight from your Gnosis Safe"
     },
-    {
-      id: "aave-v3",
-      icon: AaveIcon,
-      name: "Aave v3",
-      url: "/polygon/aave-v2",
-      description: "Lend and borrow straight from your Gnosis Safe"
-    },
-    {
-      id: "aave-v4",
-      icon: AaveIcon,
-      name: "Aave v4",
-      url: "/polygon/aave-v2",
-      description: "Lend and borrow straight from your Gnosis Safe"
-    }
   ]
 };