fix: layout

src/components/BuyerSteps/BuyerSearchComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useUser } from "@/composables/useUser";
 import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
 import CustomButton from "@/components/ui/CustomButton.vue";
@@ -7,7 +7,7 @@ import { debounce } from "@/utils/debounce";
 import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { decimalCount } from "@/utils/decimalCount";
-import { getTokenImage } from "@/utils/imagesPath";
+import { getTokenImage, getNetworkImage } from "@/utils/imagesPath";
 import { onClickOutside } from "@vueuse/core";
 import { Networks } from "@/config/networks";
 import { TokenEnum } from "@/model/NetworkEnum";
@@ -126,6 +126,13 @@ watch(walletAddress, (): void => {
   verifyLiquidity();
 });
 
+const availableNetworks = computed(() => {
+  if (!selectedDeposits.value) return [];
+  return Object.values(Networks).filter((network) =>
+    selectedDeposits.value?.some((d) => d.network.id === network.id)
+  );
+});
+
 // Add form submission handler
 const handleSubmit = async (e: Event): Promise<void> => {
   e.preventDefault();
@@ -159,7 +166,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
           <input
             type="number"
             name="tokenAmount"
-            class="border-none outline-none text-lg text-gray-900"
+            class="border-none outline-none text-lg text-gray-900 sm:flex-1 max-w-[60%]"
             v-bind:class="{
               'font-semibold': tokenValue != undefined,
               'text-xl': tokenValue != undefined,
@@ -169,7 +176,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
             step=".01"
             required
           />
-          <div class="relative overflow-visible">
+          <div class="relative overflow-visible ml-auto sm:ml-0">
             <button
               ref="tokenDropdownRef"
               class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
@@ -232,24 +239,12 @@ const handleSubmit = async (e: Event): Promise<void> => {
           </p>
           <div class="flex gap-2">
             <img
-              alt="Rootstock image"
+              v-for="network in availableNetworks"
-              src="@/assets/networks/rootstock.svg?url"
+              :key="network.id"
+              :alt="`${network.name} image`"
+              :src="getNetworkImage(network.name)"
               width="24"
               height="24"
-              v-if="
-                selectedDeposits &&
-                selectedDeposits.find((d) => d.network == Networks.rootstock)
-              "
-            />
-            <img
-              alt="Ethereum image"
-              src="@/assets/networks/ethereum.svg?url"
-              width="24"
-              height="24"
-              v-if="
-                selectedDeposits &&
-                selectedDeposits.find((d) => d.network == Networks.sepolia)
-              "
             />
           </div>
         </div>

src/views/FaqView.vue

@@ -30,18 +30,18 @@ const openItem = (index: number) => {
 <template>
   <div class="page">
     <div class="text-container">
-      <span class="text font-extrabold text-5xl max-w-[50rem]"
+      <span class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[50rem] max-w-[90%]"
         >Perguntas Frequentes
       </span>
-      <span class="text font-medium text-base max-w-[40rem]"
+      <span class="text font-medium sm:text-base text-sm sm:max-w-[40rem] max-w-[90%]"
         >Não conseguiu uma resposta para sua dúvida? Acesse a comunidade do
         Discord para falar diretamente conosco.</span
       >
     </div>
 
-    <div class="flex justify-between w-10/12 mt-20">
+    <div class="faq-container">
-      <div>
+      <div class="sumario-section">
-        <h1 class="text-3xl text-white font-bold">Sumário</h1>
+        <h1 class="sumario-title">Sumário</h1>
         <h3
           :class="index == selectedSection ? 'selected-sumario' : 'sumario'"
           v-for="(f, index) in faq"
@@ -52,7 +52,7 @@ const openItem = (index: number) => {
         </h3>
       </div>
 
-      <div class="w-4/6">
+      <div class="content-section">
         <div
           v-for="(item, index) in faq[selectedSection].items"
           v-bind:key="item.title"
@@ -61,16 +61,16 @@ const openItem = (index: number) => {
             <img
               alt="plus"
               src="@/assets/plus.svg?url"
-              class="mr-3"
+              class="icon"
               v-if="!item.isOpen"
             />
             <img
-              alt="plus"
+              alt="minus"
               src="@/assets/minus.svg?url"
-              class="mr-3"
+              class="icon"
               v-if="item.isOpen"
             />
-            <h4 class="text-white">{{ item.title }}</h4>
+            <h4 class="item-title">{{ item.title }}</h4>
           </div>
           <div class="content" v-if="item.isOpen" v-html="item.content"></div>
           <div class="hr"></div>
@@ -81,23 +81,52 @@ const openItem = (index: number) => {
 </template>
 
 <style scoped>
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-8 sm:mt-16 px-4;
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4 mb-8 sm:mb-12;
+}
+
+.text {
+  @apply text-white text-center;
+}
+
+.faq-container {
+  @apply flex flex-col sm:flex-row sm:justify-between w-full sm:w-10/12 max-w-7xl gap-8 sm:gap-0 mt-8 sm:mt-20;
+}
+
+.sumario-section {
+  @apply w-full sm:w-auto sm:min-w-[200px];
+}
+
+.sumario-title {
+  @apply text-xl sm:text-3xl text-white font-bold mb-4 sm:mb-0;
+}
+
 .sumario {
-  margin-top: 24px;
+  @apply text-white mt-6 sm:mt-6 cursor-pointer text-sm sm:text-base;
-  cursor: pointer;
 }
 
 .selected-sumario {
-  font-weight: bolder;
+  @apply text-white font-bold mt-6 sm:mt-6 cursor-pointer text-sm sm:text-base;
-  margin-top: 24px;
-  cursor: pointer;
 }
-.page {
+
-  @apply flex flex-col items-center justify-center w-full mt-16;
+.content-section {
+  @apply w-full sm:w-4/6;
+}
+
+.icon {
+  @apply mr-3 flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6;
+}
+
+.item-title {
+  @apply text-white font-semibold text-sm sm:text-base;
 }
 
 div.content {
-  padding-top: 24px;
+  @apply pt-6 text-white text-sm sm:text-base;
-  color: white;
 }
 
 .content :deep(ul) {
@@ -112,9 +141,12 @@ div.content {
   @apply list-disc m-1 p-1;
 }
 
+.content :deep(p) {
+  @apply mb-2;
+}
+
 .hr {
-  border: 1px solid #1f2937;
+  @apply border border-gray-700 my-6;
-  margin: 24px 0;
 }
 
 h3 {
@@ -125,12 +157,4 @@ h2,
 h4 {
   font-weight: 600;
 }
-
-.text-container {
-  @apply flex flex-col items-center justify-center gap-4;
-}
-
-.text {
-  @apply text-white text-center;
-}
 </style>