Merge pull request #10 from Kolektivo-Labs/AnotherDev/fix-feedback-is…

…sues

Another dev/fix feedback issues

src/assets/css/tailwind.css

@@ -21,7 +21,9 @@
   .font-bold,
   .font-extrabold,
   .font-black {
-    font-weight: unset;
+    /* What is this? */
+
+    /* font-weight: unset; */
   }
 
   th {

src/components/_global/BalBtn/BalBtn.vue

@@ -35,6 +35,7 @@ type Props = {
     | 'gradient'
     | 'gradient-reverse'
     | 'gradient-pink-yellow'
+    | 'gradient-blue-light'
     | 'gray'
     | 'red'
     | 'white'
@@ -110,6 +111,8 @@ const bgGradientClasses = computed(() => {
   } else if (props.color === 'gradient-pink-yellow') {
     fromColor = 'pink';
     toColor = 'yellow';
+  } else if (props.color === 'gradient-blue-light') {
+    return 'bg-gradient-to-tr from-refi-text to-light-blue hover:from-blue-600 hover:to-blue-400';
   }
   if (props.disabled) {
     return `bg-gray-300 dark:bg-gray-700 text-white dark:text-gray-500`;

src/components/_global/BalRadio/BalRadio.vue

@@ -58,7 +58,7 @@ export default defineComponent({
         case 'sm':
           return 'w-3 h-3';
         case 'lg':
-          return 'w-6 h-6';
+          return 'w-5 h-5';
         default:
           return 'w-4 h-4';
       }
@@ -112,7 +112,7 @@ export default defineComponent({
 <style>
 .bal-radio-input {
   @apply bg-white dark:bg-gray-900 rounded-full m-0 shadow-inner transition-all;
-  @apply border border-gray-400 dark:border-gray-500;
+  @apply border border-disabled dark:border-gray-500;
 
   transition: all ease 0.25s;
   appearance: none;

src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue

@@ -77,9 +77,9 @@ const { isMobile, bp } = useBreakpoints();
     </BalCard>
   </template>
   <template v-else>
-    <div class="p-4 h-full bg-white dark:bg-gray-850 rounded-lg shadow-lg">
+    <div class="p-8 h-full bg-white dark:bg-gray-850 rounded-lg shadow-lg">
       <div
-        class="flex flex-row gap-5 justify-center items-center px-4 h-[265px]"
+        class="flex flex-row gap-8 justify-center items-center h-full h-[265px]"
       >
         <img
           :src="NFTImage"
@@ -102,12 +102,12 @@ const { isMobile, bp } = useBreakpoints();
             <div
               class="flex justify-between items-center text-base text-disabled"
             >
-              <p>Next level</p>
-              <p>- RFP</p>
+              <p class="text-sm">Next level</p>
+              <p class="text-sm">- RFP</p>
             </div>
           </div>
           <BalBtn
-            color="gradient"
+            color="gradient-blue-light"
             class="self-end w-fit"
             size="sm"
             @click="startConnectWithInjectedProvider"

src/components/contextual/pages/dashboard/Cards/WeeklyCard.vue

@@ -19,7 +19,7 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
         <h3 class="self-start text-lg">Weekly progress</h3>
         <p class="text-base text-complementary">
           Participate in the
-          <a class="font-medium text-blue-700" href="#">
+          <a class="hover:text-accent-refi font-mediumtext-[#4654D2]" href="#">
             Early Growth Campaign</a
           >
           by trading each week to level up your ReFi Profile and earn more
@@ -70,7 +70,7 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
         </h3>
         <p class="text-base text-complementary">
           Participate in the
-          <a class="font-medium text-[#4654D2]" href="#">
+          <a class="font-medium hover:text-accent-refi text-[#4654D2]" href="#">
             Early Growth Campaign</a
           >
           by trading each week to level up your ReFi Profile and earn more
@@ -114,14 +114,16 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
     </BalCard>
   </template>
   <template v-else>
-    <div class="p-4 h-full bg-white dark:bg-gray-850 rounded-lg shadow-lg">
+    <div class="p-8 h-full bg-white dark:bg-gray-850 rounded-lg shadow-lg">
       <div
-        class="flex flex-col gap-4 justify-center items-center px-4 min-h-[265px]"
+        class="flex flex-col gap-4 justify-center items-center h-full min-h-[265px]"
       >
-        <h3 class="self-start text-lg leading-[1.125rem]">Weekly progress</h3>
+        <h3 class="self-start h-full text-lg leading-[1.125rem]">
+          Weekly progress
+        </h3>
         <p class="text-base text-complementary">
           Participate in the
-          <a class="font-medium text-[#4654D2]" href="#">
+          <a class="font-medium hover:text-accent-refi text-[#4654D2]" href="#">
             Early Growth Campaign</a
           >
           by trading each week to level up your ReFi Profile and earn more

src/components/footer/Footer.vue

@@ -165,26 +165,18 @@ const { openNpsModal } = useAppzi();
           </div>
 
           <div
-            class="flex flex-wrap md:order-3 gap-x-3 lg:gap-x-4 gap-y-2 md:justify-end h-full"
+            class="flex flex-wrap md:order-3 gap-x-3 lg:gap-x-4 gap-y-2 lg:gap-y-0 md:justify-start h-full"
           >
-            <p>
-              <button class="policy" @click="openNpsModal">Feedback</button>
-            </p>
-            <p>
-              <router-link class="policy" :to="{ name: 'terms-of-use' }">
-                {{ $t('policies.termsOfUse') }}
-              </router-link>
-            </p>
-            <p>
-              <router-link class="policy" :to="{ name: 'privacy-policy' }">
-                {{ $t('policies.privacyPolicy') }}
-              </router-link>
-            </p>
-            <p>
-              <router-link class="policy" :to="{ name: 'cookies-policy' }">
-                {{ $t('policies.cookiesPolicy') }}
-              </router-link>
-            </p>
+            <button class="policy" @click="openNpsModal">Feedback</button>
+            <router-link class="policy" :to="{ name: 'terms-of-use' }">
+              {{ $t('policies.termsOfUse') }}
+            </router-link>
+            <router-link class="policy" :to="{ name: 'privacy-policy' }">
+              {{ $t('policies.privacyPolicy') }}
+            </router-link>
+            <router-link class="policy" :to="{ name: 'cookies-policy' }">
+              {{ $t('policies.cookiesPolicy') }}
+            </router-link>
           </div>
         </div>
       </div>
@@ -221,7 +213,7 @@ footer :deep(.logotype) {
 }
 
 .policy {
-  @apply text-sm text-white dark:text-gray-400 hover:text-accent-refi dark:hover:text-yellow-500;
+  @apply text-sm text-white dark:text-gray-400 hover:text-accent-refi dark:hover:text-yellow-500 flex items-end;
 }
 
 .arrow {

src/components/navs/AppNav/DesktopLinks/DesktopLinkItem.vue

@@ -30,7 +30,7 @@ const classes = computed(() => ({
 .desktop-link-item {
   @apply h-full flex-col justify-center cursor-pointer hover:text-accent-refi dark:hover:text-yellow-500 flex relative
     overflow-hidden p-0 transition-all
-    ease-in-out duration-500;
+    ease-in-out duration-500 !font-medium;
 }
 
 .desktop-link-item::before {
@@ -67,7 +67,7 @@ const classes = computed(() => ({
 }
 
 .desktop-link-item.router-link-active {
-  @apply text-refi-text dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors;
+  @apply text-refi-text dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors !font-semibold;
 }
 
 .desktop-link-item:hover::before {

src/pages/dashboard.vue

@@ -40,7 +40,7 @@ const isLoadingPoolSwaps = computed(() => poolSwapsQuery.isLoading.value);
             <div
               class="flex flex-row gap-2 justify-between items-center px-3 text-sm font-bold text-white rounded-full h-[22px] bg-[#0468BE]"
             >
-              <p>Early Growth Campaign</p>
+              <p class="text-xs !font-semibold">Early Growth Campaign</p>
               <div
                 class="w-2 h-2 bg-gradient-to-tr rounded-full to-[#05DBF3] from-[#0468BE]"
               />
@@ -73,9 +73,9 @@ const isLoadingPoolSwaps = computed(() => poolSwapsQuery.isLoading.value);
             <div
               class="flex flex-row gap-2 justify-between items-center px-3 text-sm font-bold text-white rounded-full h-[22px] bg-[#0468BE]"
             >
-              <p>Early Growth Campaign</p>
+              <p class="text-xs !font-semibold">Early Growth Campaign</p>
               <div
-                class="w-2 h-2 bg-gradient-to-tr rounded-full to-[#05DBF3] from-[#0468BE]"
+                class="w-2 h-2 bg-gradient-to-tr from-refi-text to-light-blue rounded-full"
               />
             </div>
           </div>
@@ -95,16 +95,14 @@ const isLoadingPoolSwaps = computed(() => poolSwapsQuery.isLoading.value);
           <RefiProfileCard />
         </div>
       </div>
-      <BalStack vertical spacing="2xl">
-        <div>
-          <h2 class="text-xl font-medium leading-5 !mb-4">Claim Rewards</h2>
-          <ClaimTable :isLoading="false" />
-        </div>
-        <div>
-          <h2 class="text-xl font-medium leading-5 !mb-4">My liquidity</h2>
-          <LiquidityTable />
-        </div>
-      </BalStack>
+      <div>
+        <h2 class="text-xl font-medium leading-5 !mb-4">Claim Rewards</h2>
+        <ClaimTable :isLoading="false" />
+      </div>
+      <div>
+        <h2 class="text-xl font-medium leading-5 !mb-4">My liquidity</h2>
+        <LiquidityTable />
+      </div>
     </BalStack>
   </div>
 </template>

tailwind.config.js

@@ -7,6 +7,8 @@ module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
 
   safelist: [
+    'from-refi-text',
+    'to-light-blue',
     ...generateButtonClassSafelist(),
     // https://tailwindcss.com/docs/content-configuration#safelisting-classes
     // https://github.com/tailwindlabs/tailwindcss/discussions/10079
@@ -77,11 +79,12 @@ module.exports = {
           700: '#334155',
           800: '#1E293B',
           850: '#162031',
-          900: '#0F172A',
+          900: '#222732',
         },
         'primary-refi': '#001C52',
         'accent-refi': '#FA7369',
         'refi-text': '#0468be',
+        'light-blue': '#05DBF3',
         container: '#F3FAFF',
         primary: {
           50: '#53555e',