From 3e177cdc633f8430f9ea1a92368a86887aa60e08 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Thu, 24 Nov 2022 15:00:39 -0300
Subject: [PATCH] improve search component css

---
 src/assets/polygon.svg |  3 +++
 src/views/HomeView.vue | 40 ++++++++++++++++++++++++++++++----------
 2 files changed, 33 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/polygon.svg

diff --git a/src/assets/polygon.svg b/src/assets/polygon.svg
new file mode 100644
index 0000000..4caf8c9
--- /dev/null
+++ b/src/assets/polygon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM14.7232 9.76501C15.0157 9.6188 15.3446 9.6188 15.6005 9.76501L18.5614 11.483C18.8538 11.6658 19 11.9582 19 12.2507V15.7232C19 16.0522 18.8172 16.3446 18.5614 16.4909L15.6005 18.2089C15.3081 18.3551 14.9791 18.3551 14.7232 18.2089L11.7624 16.4909C11.47 16.3081 11.3238 16.0157 11.3238 15.7232V14.517L12.7128 13.7128V14.8825C12.7128 15.2115 12.8956 15.5039 13.1514 15.6501L14.7232 16.564C15.0157 16.7102 15.3446 16.7102 15.6005 16.564L17.1358 15.6501C17.4282 15.4674 17.5744 15.1749 17.5744 14.8825V13.0548C17.5744 12.7258 17.3916 12.4334 17.1358 12.2872L15.564 11.3734C15.2715 11.2272 14.9426 11.2272 14.6867 11.3734L12.6762 12.5431L11.2872 13.3473L9.27676 14.517C8.98433 14.6632 8.65535 14.6632 8.39948 14.517L5.43864 12.799C5.14621 12.6162 5 12.3238 5 12.0313V8.5953C5 8.30287 5.14621 8.01044 5.43864 7.86423L8.43603 6.10966C8.72846 5.96345 9.05744 5.96345 9.31332 6.10966L12.2376 7.82768C12.53 8.01044 12.6762 8.30287 12.6762 8.5953V9.83812L11.2872 10.6423V9.43603C11.2872 9.10705 11.1044 8.81462 10.8486 8.66841L9.27676 7.71802C8.98433 7.5718 8.65535 7.5718 8.39948 7.71802L6.82768 8.63185C6.53525 8.81462 6.38903 9.10705 6.38903 9.39948V11.2272C6.38903 11.5561 6.5718 11.8486 6.82768 11.9948L8.39948 12.9452C8.69191 13.0914 9.02089 13.0914 9.27676 12.9452L11.2872 11.7389L12.6762 10.9713L14.7232 9.76501Z" fill="#6366F1"/>
+</svg>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index edcc836..bed7337 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import CustomButton from "../components/CustomButton.vue";
 const searchClick = () => {
-  console.log("oferta selecionada");
+  console.log(value);
 };
+
+const value = ref<Number>()
 </script>
 
 <template>
@@ -20,27 +23,29 @@ const searchClick = () => {
       class="flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-1/3 mt-10"
     >
       <div
-        class="flex justify-between w-full bg-white px-10 py-5 rounded-lg border-y-10 relative"
+        class="flex justify-between w-full bg-white px-10 py-5 rounded-lg border-y-10 relative gap-1"
       >
+        <p class="text-xl font-normal text-gray-900 mr-1" v-if="value != undefined && value.toString() != ''">R$</p>
         <input
           type="number"
-          class="border-none outline-none text-lg"
+          class="border-none outline-none text-lg text-gray-900 w-full"
+          v-bind:class="{ 'font-semibold': value != undefined, 'text-xl': value != undefined}"
           placeholder="Digite o valor que deseja pagar"
+          v-model="value"
         />
-        <p class="text-lg font-bold">R$</p>
+        <p class="text-xl font-normal text-gray-900" v-if="value == undefined || value.toString() == ''">R$</p>
       </div>
-
       <div
         class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
       >
         <div
-          class="bg-emerald-400 px-4 py-3 rounded-lg absolute bottom-position"
+          class="bg-emerald-400 px-3 py-2.5 rounded-lg absolute bottom-position w-8 h-8"
         >
-          <img alt="Ethereum image" src="@/assets/arrow.svg" />
+          <img alt="Ethereum image" src="@/assets/arrow.svg"/>
         </div>
 
         <div class="flex justify-between w-full items-center">
-          <p class="text-3xl">0</p>
+          <p class="text-3xl text-gray-900">0</p>
           <div class="flex flex-row p-2 px-3 bg-gray-300 rounded-full">
             <img alt="Ethereum image" class="mr-3" src="@/assets/brz.svg" />
             <p class="text-gray-900 text-lg">BRZ</p>
@@ -48,11 +53,17 @@ const searchClick = () => {
         </div>
 
         <div class="custom-divide py-2"></div>
-        <p class="text-gray-500 text-lg pt-2">~ ETH 0,00 (+0,121%)</p>
+        <div class="flex justify-between pt-2">
+          <p class="text-gray-500 font-normal text-sm  w-fit">~ ETH 0,00 (+0,121%)</p>
+          <div class="flex gap-2">
+            <img alt="Polygon image" src="@/assets/polygon.svg" width="24px" height="24px"/>
+            <img alt="Ethereum image" src="@/assets/ethereum.svg" width="24px" height="24px"/>
+          </div>
+        </div>
       </div>
       <CustomButton
         :text="'Selecionar Oferta'"
-        :is-disabled="true"
+        :is-disabled="false"
         @clicked="searchClick()"
       />
     </div>
@@ -81,4 +92,13 @@ const searchClick = () => {
 .text {
   @apply text-gray-800 text-center;
 }
+
+input[type='number'] {
+    -moz-appearance:textfield;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+}
 </style>