Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Another dev/fix feedback issues #6

Closed
wants to merge 13 commits into from
Closed

Another dev/fix feedback issues #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
33ff392
feat: add route
Another-DevX Dec 8, 2023
0ca6d7c
feat: add tables
Another-DevX Dec 8, 2023
1dafe62
feat: add card
Another-DevX Dec 8, 2023
ea235e7
target title
Another-DevX Dec 8, 2023
528998c
mocked refi profile card
Another-DevX Dec 8, 2023
3ca95b3
mocked connect wallet my refi profile card
Another-DevX Dec 8, 2023
57bdcb9
feat: add nft card
Another-DevX Dec 10, 2023
6db5b71
feat: add responsive
Another-DevX Dec 10, 2023
69a3bea
feat: resolve feedback issues and clean code practices
Another-DevX Dec 15, 2023
2801761
chore: TW theme for hardcoded colors
Another-DevX Dec 15, 2023
2f1d471
chore: remove unit testing issues
Another-DevX Dec 15, 2023
8d6a0a9
chore: fix unitesting issues
Another-DevX Dec 15, 2023
44ad93e
Feat: fix all header and footer issues
Another-DevX Dec 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.prettier": true,
"source.fixAll.stylelint": true
"source.fixAll.eslint": "explicit",
"source.fixAll.prettier": "explicit",
"source.fixAll.stylelint": "explicit"
},
"eslint.validate": ["javascript", "javascriptreact", "vue"],
"eslint.format.enable": true,
Expand Down
Empty file added src/assets/images/icons/appLogoFooter.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file added src/assets/images/icons/appLogoNavbar.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/images/icons/wallet.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/mocks/NFT.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/components/_global/BalBtn/BalBtn.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@ const bgGradientClasses = computed(() => {
fromColor = 'pink';
toColor = 'yellow';
}

if (props.disabled) {
return `bg-gray-300 dark:bg-gray-700 text-white dark:text-gray-500`;
}
Expand Down
46 changes: 7 additions & 39 deletions src/components/_global/icons/WalletIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,16 @@
<template>
<svg
width="18"
height="19"
viewBox="0 0 18 19"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5.5V2.5C14 2.23478 13.8946 1.98043 13.7071 1.79289C13.5196 1.60536 13.2652 1.5 13 1.5H3C2.46957 1.5 1.96086 1.71071 1.58579 2.08579C1.21071 2.46086 1 2.96957 1 3.5M1 3.5C1 4.03043 1.21071 4.53914 1.58579 4.91421C1.96086 5.28929 2.46957 5.5 3 5.5H15C15.2652 5.5 15.5196 5.60536 15.7071 5.79289C15.8946 5.98043 16 6.23478 16 6.5V9.5M1 3.5V15.5C1 16.0304 1.21071 16.5391 1.58579 16.9142C1.96086 17.2893 2.46957 17.5 3 17.5H15C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5V13.5"
stroke="url(#wallet_gradient)"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.96454 0.0134457C1.75272 0.0458633 1.43165 0.161683 1.21328 0.284407C0.70011 0.572778 0.25801 1.15042 0.0869022 1.75619L0 2.06386V8.0028V13.9417L0.0924492 14.256C0.327116 15.0534 0.899415 15.6627 1.65638 15.9211C1.87664 15.9963 2.17429 16 7.993 16C13.8117 16 14.1094 15.9963 14.3296 15.9211C15.073 15.6674 15.6218 15.0947 15.8822 14.3011L15.986 13.9846L15.9973 9.99674C16.0053 7.20415 15.9958 5.92533 15.9657 5.73014C15.8224 4.80062 15.1292 3.97487 14.2926 3.73714C14.1664 3.70125 13.9453 3.67188 13.8015 3.67188H13.5399L13.5396 3.01795C13.5393 2.28268 13.497 1.91283 13.3768 1.595C13.1047 0.8756 12.6372 0.385819 11.9732 0.124334L11.6717 0.0055986L6.87591 0.000667446C4.23822 -0.00203402 2.0281 0.00371181 1.96454 0.0134457ZM11.691 1.46761C11.7863 1.51701 11.9368 1.64543 12.0254 1.75298C12.2575 2.03457 12.3073 2.26145 12.3073 3.0372V3.67338L7.15518 3.66193C2.29066 3.65108 1.99448 3.64615 1.84898 3.57329C1.65546 3.47643 1.42441 3.23059 1.31694 3.00723C1.20061 2.76534 1.20061 2.26364 1.31698 2.01905C1.46998 1.69749 1.74205 1.47147 2.08011 1.3851C2.12248 1.3743 4.26325 1.36821 6.83739 1.3716C11.5019 1.37777 11.5182 1.37807 11.691 1.46761ZM1.90676 4.99821C2.07433 5.02844 4.11283 5.04366 8.07004 5.04414L13.9829 5.04491L14.1777 5.14585C14.2848 5.20133 14.4359 5.32929 14.5134 5.43019C14.7872 5.78627 14.7754 5.57362 14.7638 9.91398L14.7533 13.8131L14.6699 13.9866C14.5602 14.2146 14.284 14.4944 14.0953 14.5686C13.8703 14.6569 2.11566 14.6569 1.89074 14.5686C1.70203 14.4944 1.42576 14.2146 1.31609 13.9866L1.23266 13.8131L1.22233 9.28317L1.21201 4.75323L1.43419 4.8531C1.55642 4.90803 1.76905 4.97334 1.90676 4.99821ZM11.8754 8.95286C11.7968 8.97704 11.6541 9.07357 11.5583 9.16739C11.1263 9.5907 11.2162 10.3472 11.7326 10.6336C12.0727 10.8223 12.41 10.763 12.6755 10.4679C13.2626 9.81536 12.677 8.7066 11.8754 8.95286Z"
fill="#0468BE"
/>
<path
d="M17 9.5V13.5H13C12.4696 13.5 11.9609 13.2893 11.5858 12.9142C11.2107 12.5391 11 12.0304 11 11.5C11 10.9696 11.2107 10.4609 11.5858 10.0858C11.9609 9.71071 12.4696 9.5 13 9.5H17Z"
stroke="url(#wallet_gradient)"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<defs>
<linearGradient
id="wallet_gradient"
x1="8.5"
y1="-6.5"
x2="-7.46674"
y2="8.46881"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF00FF" />
<stop offset="1" stop-color="#0000FF" />
</linearGradient>
<linearGradient
id="wallet_gradient"
x1="14"
y1="7.5"
x2="10.3077"
y2="13.0385"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FF00FF" />
<stop offset="1" stop-color="#0000FF" />
</linearGradient>
</defs>
</svg>
</template>
120 changes: 120 additions & 0 deletions src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<script setup lang="ts">
import NFTImage from '@/assets/images/mocks/NFT.png';
import useBreakpoints from '@/composables/useBreakpoints';
import useWeb3 from '@/services/web3/useWeb3';
const { startConnectWithInjectedProvider } = useWeb3();
const { isMobile, bp } = useBreakpoints();
</script>
<template>
<template v-if="isMobile">
<BalCard v-if="bp === 'xs'">
<div class="flex flex-col gap-5 justify-center items-start px-4 h-fit">
<img :src="NFTImage" class="w-full h-full rounded-md bg-slate-500" />
<div class="flex flex-col gap-10 w-full">
<div class="flex flex-col gap-4">
<h3 class="self-start text-lg">Connect wallet</h3>
<div class="flex justify-between items-center text-base">
<p>Voting Power</p>
<p>- Votes</p>
</div>
</div>
<div class="w-full border-t-2" />
<div class="flex flex-col gap-1">
<div class="flex justify-between items-center text-base">
<p>My Points</p>
<p>- RFP</p>
</div>
<div
class="flex justify-between items-center text-base text-disabled"
>
<p>Next level</p>
<p>- RFP</p>
</div>
</div>
<BalBtn
color="gradient"
class="self-end w-fit"
size="sm"
@click="startConnectWithInjectedProvider"
>Connect wallet</BalBtn
>
</div>
</div>
</BalCard>
<BalCard v-else>
<div class="flex flex-row gap-5 justify-center items-start px-4 h-80">
<img :src="NFTImage" class="w-48 h-full rounded-md bg-slate-500" />
<div class="flex flex-col gap-10 w-full">
<div class="flex flex-col gap-4">
<h3 class="self-start text-lg">Connect wallet</h3>
<div class="flex justify-between items-center text-base">
<p>Voting Power</p>
<p>- Votes</p>
</div>
</div>
<div class="w-full border-t-2" />
<div class="flex flex-col gap-1">
<div class="flex justify-between items-center text-base">
<p>My Points</p>
<p>- RFP</p>
</div>
<div
class="flex justify-between items-center text-base text-disabled"
>
<p>Next level</p>
<p>- RFP</p>
</div>
</div>
<BalBtn
color="gradient"
class="self-end w-fit"
size="sm"
@click="startConnectWithInjectedProvider"
>Connect wallet</BalBtn
>
</div>
</div>
</BalCard>
</template>
<template v-else>
<div class="p-4 h-full bg-white rounded-lg shadow-lg">
<div
class="flex flex-row gap-5 justify-center items-center px-4 h-[265px]"
>
<img
:src="NFTImage"
class="rounded-md h-[224px] w-[168px] bg-slate-500"
/>
<div class="flex flex-col gap-6 w-full">
<div class="flex flex-col gap-4">
<h3 class="self-start text-lg">Connect wallet</h3>
<div class="flex justify-between items-center text-base">
<p>Voting Power</p>
<p>- Votes</p>
</div>
</div>
<div class="w-full border-t-2" />
<div class="flex flex-col gap-1">
<div class="flex justify-between items-center text-base">
<p class="text-sm">My Points</p>
<p class="text-sm">- RFP</p>
</div>
<div
class="flex justify-between items-center text-base text-disabled"
>
<p>Next level</p>
<p>- RFP</p>
</div>
</div>
<BalBtn
color="gradient"
class="self-end w-fit"
size="sm"
@click="startConnectWithInjectedProvider"
>Connect wallet</BalBtn
>
</div>
</div>
</div>
</template>
</template>
145 changes: 145 additions & 0 deletions src/components/contextual/pages/dashboard/Cards/WeeklyCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<script setup lang="ts">
import useBreakpoints from '@/composables/useBreakpoints';

const { isMobile, upToSmallBreakpoint } = useBreakpoints();
</script>
<template>
<template v-if="isMobile">
<BalCard v-if="upToSmallBreakpoint">
<div class="flex flex-col gap-5 justify-center items-center px-4 h-fit">
<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="#">
Early Growth Campaign</a
>
by trading each week to level up your ReFi Profile and earn more
Voting Power. Each Monday at 12:00 CET weekly snapshots are taken and
rewards are allocated.
</p>
<div class="flex flex-row gap-5 w-full">
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center pb-5 mr-0 w-full text-center items-cente"
>
<h4 class="text-complementary text-[10px]">
Your Volume this week
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center pb-5 mr-0 w-full text-center items-cente"
>
<h4 class="text-complementary text-[10px]">
Volume for next tier
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
</div>
</div>
</BalCard>
<BalCard v-else>
<div class="flex flex-col gap-5 justify-center items-center px-4 h-80">
<h3 class="self-start text-lg leading-[1.125rem]">Weekly progress</h3>
<p class="text-base text-complementary">
Participate in the
<a class="font-medium text-[#4654D2]" href="#">
Early Growth Campaign</a
>
by trading each week to level up your ReFi Profile and earn more
Voting Power. Each Monday at 12:00 CET weekly snapshots are taken and
rewards are allocated.
</p>
<div class="flex flex-row gap-5 w-full">
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center pb-5 mr-0 w-full text-center items-cente"
>
<h4 class="text-complementary text-[10px]">
Your Volume this week
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center items-center pb-5 mr-0 w-full text-center"
>
<h4 class="text-complementary text-[10px]">
Volume for next tier
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
</div>
</div>
</BalCard>
</template>
<template v-else>
<div class="p-4 h-full bg-white rounded-lg shadow-lg">
<div
class="flex flex-col gap-4 justify-center items-center px-4 min-h-[265px]"
>
<h3 class="self-start text-lg leading-[1.125rem]">Weekly progress</h3>
<p class="text-base text-complementary">
Participate in the
<a class="font-medium text-[#4654D2]" href="#">
Early Growth Campaign</a
>
by trading each week to level up your ReFi Profile and earn more
Voting Power. Each Monday at 12:00 CET weekly snapshots are taken and
rewards are allocated.
</p>
<div class="flex flex-row gap-5 w-full">
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center pb-5 w-full text-center items-cente"
>
<h4 class="text-complementary text-[10px]">
Your Volume this week
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
<div
class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
>
<div
class="flex flex-col justify-center pb-5 w-full text-center items-cente"
>
<h4 class="text-complementary text-[10px]">
Volume for next tier
</h4>
<p class="text-xl">-</p>
</div>

<div class="w-full h-10 border-complementary-b border-t-[1px]" />
</div>
</div>
</div>
</div>
</template>
</template>
Loading