fix: pool cards layout

package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@albus-finance/sdk": "0.2.6",
-    "@albus-finance/swap-sdk": "0.1.5-next.3",
+    "@albus-finance/swap-sdk": "0.1.5-next.4",
     "@albus-finance/transfer-sdk": "0.2.4",
     "@coral-xyz/anchor": "^0.29.0",
     "@metaplex-foundation/beet": "^0.7.1",

src/assets/styles/_variables.scss

@@ -1,7 +1,7 @@
 // colors
 $primary: #23353d;
 $secondary: #455A64;
-$yellow: #ffd140;
+$warning: #ffd140;
 $negative: #DC3E38;
 $negative-light: #ea4b45;
 $positive: #007D48;

src/assets/styles/components/_pool-card.scss

@@ -4,57 +4,134 @@
   border: 1px solid #fff;
 
   @media(min-width: $breakpoint-md) {
-    min-width: 397px;
-    max-width: 397px;
+    min-width: calc(50% - 24px);
+    max-width: calc(50% - 24px);
   }
 
   @media(max-width: 389px) {
     min-width: 316px;
   }
 
-  &__head {
-    font-size: 15px;
-    font-weight: 500;
-    padding: 9px 20px;
-    background-color: $secondary;
-    color: #fff;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
   &__body {
     display: flex;
     flex-direction: column;
   }
 
-  &__subtitle {
+  &__income {
+    display: flex;
+    align-items: center;
+    background-color: #F9F9F9;
+    margin-right: -16px; 
+    margin-left: -16px; 
+    padding: 8px 24px;
+    .body--dark & {
+      background-color: $primary;
+    }
+  }
+
+  &__income &__label {
+    color: #000;
+    .body--dark & {
+      color: #fff;
+    }
+  }
+
+  &__apr-label {
+    font-size: 13px;
+    line-height: 15px;
+    color: $secondary;
     font-weight: 500;
-    font-size: 18px;
-    text-transform: uppercase;
+    .body--dark & {
+      color: #fff;
+    }
   }
 
-  &__pubkey {
-    word-break: break-all;
+  &__apr-amount {
+    color: #000;
+    font-size: 32px;
+    line-height: 34px;
+    font-weight: 500;
+    .body--dark & {
+      color: #fff;
+    }
   }
 
   &__stats {
     font-size: 15px;
   }
 
+  &__label {
+    font-size: 11px;
+    list-style: 13px;
+    color: $secondary;
+    .body--dark & {
+      color: #fff;
+    }
+  }
+
+  &__amount {
+    font-size: 19px;
+    line-height: 19px;
+    color: #000;
+    font-weight: 500;
+    .body--dark & {
+      color: #fff;
+    }
+  }
+
   &__icons {
-    height: 32px;
+    height: 46px;
 
     img {
       height: 100%;
       border-radius: 50%;
     }
 
     :nth-child(2) {
-      margin-left: -8px;
+      margin-left: -14px;
     }
   }
+
+  &__subtitle {
+    font-weight: 500;
+    font-size: 23px;
+    text-transform: uppercase;
+  }
+
+  &__pubkey {
+    word-break: break-all;
+  }
 
   body.body--dark & {
     border: 1px solid #ffffff42;
   }
+
+  .policy-info {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    font-size: 16px;
+  }
+}
+
+.pools-total {
+  display: flex;
+  flex-direction: column;
+  background-color: $primary;
+  border-radius: 6px;
+  padding: 13px 24px;
+  font-weight: 500;
+  min-width: 181px;
+  .body--dark & {
+    background-color: $secondary;
+  }
+  &__name {
+    text-transform: uppercase;
+    color: #E1E1E1;
+    font-size: 13px;
+  }
+  &__value {
+    font-size: 25px;
+    color: #fff;
+  }
 }

src/assets/styles/components/_sidebar.scss

@@ -158,7 +158,7 @@ aside {
           font-weight: 300;
           font-size: 12px;
           line-height: 14px;
-          color: $yellow;
+          color: $warning;
         }
       }
     }
@@ -287,7 +287,7 @@ aside {
   }
 
   .active-route {
-    background: $yellow !important;
+    background: $warning !important;
 
     span {
       color: $primary;

src/assets/styles/components/_swap.scss

@@ -1,7 +1,7 @@
 $swap-min-height: 392px;
 $swap-card-border-color: #fff;
 $swap-info-border-color: $light-gray-middle;
-$swap-base-color: $yellow !default;
+$swap-base-color: $warning !default;
 $swap-header-color: $swap-base-color !default;
 $swap-btn-color: $swap-base-color !default;
 $swap-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !default;

src/components/ClusterSelector.vue

@@ -29,7 +29,7 @@ function select(e: Endpoint) {
     :label="endpoint.cluster"
     :model-value="false"
     auto-close
-    color="yellow"
+    color="warning"
     text-color="black"
     rounded
     unelevated

src/components/pools/PoolsList.vue

@@ -15,22 +15,24 @@ const poolsStats = computed(() => poolsStatsStore.poolsStats)
 </script>
 
 <template>
-  <pools-total class="q-mb-sm" />
-  <div v-if="connected" class="full-width app-description row items-center justify-start q-mb-md">
-    <span class="q-mr-sm">My Liquidity</span>
-    <q-toggle v-model="onlyMyPools" color="secondary" dense class="app-toggle" />
+  <div v-if="connected" class="full-width row items-center justify-start q-px-lg">
+    <pools-total class="q-mb-md" />
+    <div v-if="connected" class="q-mb-md q-ml-auto">
+      <span class="q-mr-sm">My Liquidity</span>
+      <q-toggle v-model="onlyMyPools" color="secondary" dense class="app-toggle" />
+    </div>
   </div>
-  <div>
+  <div class="full-width">
     <q-inner-loading :showing="state?.loading || poolDataLoading" class="swap-loading" color="grey" />
-    <div class="row justify-center">
+    <div class="row justify-center q-pl-lg">
       <pools-list-item
         v-for="(pool, idx) in tokenSwapsAllFiltered"
         :key="pool.pubkey.toBase58() ?? idx"
         :pubkey="pool.pubkey"
         :data="pool.data"
         :user-tokens="userPoolsTokens[pool.data.poolMint.toBase58()]"
         :pool-stats="poolsStats[pool.pubkey.toBase58()]"
-        class="q-mx-sm q-mb-md"
+        class="q-mr-lg q-mb-lg"
       />
       <div v-if="!state.loading && !tokenSwapsAllFiltered.length" class="text-h5">
         Pools not found