diff --git a/app/prizetap/components/RafflesList.tsx b/app/prizetap/components/RafflesList.tsx index 2bd8df38..8fbdf382 100644 --- a/app/prizetap/components/RafflesList.tsx +++ b/app/prizetap/components/RafflesList.tsx @@ -22,6 +22,7 @@ import { getAssetUrl, shortenAddress } from "@/utils"; // import Styles from "@/components/containers/provider-dashboard/prize-tap/content.module.scss"; import { zeroAddress } from "viem"; +import { useFastRefresh } from "@/utils/hooks/refresh"; export const Action = styled.div` display: flex; @@ -134,9 +135,9 @@ const RaffleCard: FC<{ raffle: Prize; isHighlighted?: boolean }> = ({ [userProfile, winnersEntry] ); - useEffect(() => { + useFastRefresh(() => { setStarted(new Date(startAt) < new Date()); - }, [new Date()]); + }, [startAt]); // let tokenImgLink: string | undefined = tokenUri // ? `https://ipfs.io/ipfs/QmYmSSQMHaKBByB3PcZeTWesBbp3QYJswMFZYdXs1H3rgA/${ diff --git a/app/prizetap/styles.scss b/app/prizetap/styles.scss index 33656a08..579c1952 100644 --- a/app/prizetap/styles.scss +++ b/app/prizetap/styles.scss @@ -19,3 +19,431 @@ @apply text-white; @apply p-3 rounded-[10px]; } + +.providerDashboardStatus { + & div { + @apply py-[10px] px-3 cursor-pointer min-w-[60px] text-center; + } + & div:not(:last-child) { + @apply border-r-2 border-r-gray30; + } +} + +.providerDashboardTabs { + position: relative; + border-radius: 12px 12px 0px 0px; +} + +.refillToken { + @apply bg-no-repeat bg-cover border border-2 rounded-[16px] border-gray40; + background-image: url("/assets/images/provider-dashboard/bg.png"); +} + +.providePrize__amount { + position: relative; + @apply text-gray20; + background: radial-gradient( + 174.04% 3217.67% at 17.05% 37.02%, + #2a3837 0%, + #3f2b44 42.19%, + #322837 100% + ); + -webkit-text-stroke: 7px transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 1.8em; + font-weight: 600; + padding: 10px; + + &:after { + content: attr(data-amount); + position: absolute; + z-index: 9; + background: linear-gradient( + 91.35deg, + #4bf2a2 -4.66%, + #a89fe7 56.06%, + #e1c4f4 73.07%, + #dd40cd 111.44% + ); + @apply text-gray20; + -webkit-text-stroke: 2px transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: #13131e; + left: 10px; + } +} + +.offerPrizeSteps { + border-radius: 12px; + @apply bg-cover bg-no-repeat; + background: url("/assets/images/provider-dashboard/prize-offer-step-bg.png"); + background-repeat: no-repeat; + background-size: cover; +} + +.chines-list-dropDown::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.chines-list-dropDown { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.prizeForm-current-step-icon { + @apply rounded-full bg-gray30 overflow-hidden w-[26px] h-[26px] rounded-full; +} + +.requireModal { + @apply text-sm font-semibold flex flex-col gap-2 items-center justify-center cursor-pointer max-w-[184px] h-[84px] bg-gray40 border border-gray70 rounded-xl; +} + +.requireModalIntegration { + @apply bg-gray40 border mt-1 border-gray70 text-gray100 text-sm font-semibold cursor-pointer max-w-[376px] rounded-xl px-3 h-[48px] flex items-center justify-between; +} + +.provider-dashboard-input { + @apply placeholder-gray80 text-white w-full bg-transparent h-[100%]; +} +.prize-card-bg-1 { + @apply lg:bg-[url("/assets/images/prize-tap/nft-cover.svg")] bg-no-repeat p-0 pl-0 lg:pr-0 lg:p-4 lg:pl-6; +} + +.prize-card-linea { + @apply lg:bg-[url('/assets/images/prize-tap/linia-raffle-bg.svg')] bg-no-repeat p-0 pl-0 lg:pr-0 lg:p-4 lg:pl-6; +} + +.prize-card-bg-2 { + @apply lg:bg-[url("/assets/images/prize-tap/cover.svg")] bg-no-repeat p-0 pl-0 lg:pr-0 lg:p-4 lg:pl-6; +} + +.prize-tap-header-bg { + background-image: url("/assets/images/prize-tap/header-bg.svg"); + @apply bg-no-repeat bg-cover bg-center; +} + +.deposit-prize-nft-cover { + background-image: url("/assets/images/prize-tap/nft-cover.svg"); + @apply bg-no-repeat bg-cover bg-center; + object-fit: contain; +} + +.prize-tap-enrolled:hover { + &:before { + background: radial-gradient( + 174.04% 3217.67% at 17.05% 37.02%, + #2a3837 0%, + #3f2b44 42.19%, + #322837 100% + ) !important; + } +} + +.winner-box-bg { + background-color: #10101b; + // background-image: url('../public/assets/images/prize-tap/winner_bg.svg'); + @apply bg-no-repeat bg-cover bg-center; +} + +.claimed-prize { + > div { + background: linear-gradient( + 91.35deg, + #4bf2a2 0.66%, + #a89fe7 10.06%, + #e1c4f4 20.07%, + #dd40cd 28.44% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + // font-size: 14px; + // font-weight: 600; + margin-left: 10px; + } + + @apply bg-g-primary relative z-10 before:content-['']; + @apply before:block before:rounded-lg before:-z-10 before:absolute before:inset-[2px] before:bg-[radial-gradient(174.04%_3217.67%_at_17.05%_37.02%,#2A3837_0%,#3F2B44_42.19%,#322837_100%)]; + @apply text-white; + @apply p-3 rounded-[10px]; +} + +.prize-success-stroke { + h1 { + padding: 2px; + text-align: center; + // text-transform: uppercase; + /* Warning: no fallback */ + margin: 2em 0 2em 0; + background: -webkit-linear-gradient( + 12deg, + #4bf2a2 -4.66%, + #a89fe7 56.06%, + #e1c4f4 73.07%, + #dd40cd 111.44% + ); + -webkit-background-clip: text; + -webkit-text-stroke: 3px transparent; + color: inherit; + } +} + +.prize__amount { + position: relative; + @apply text-gray20; + background: radial-gradient( + 174.04% 3217.67% at 17.05% 37.02%, + #2a3837 0%, + #3f2b44 42.19%, + #322837 100% + ); + -webkit-text-stroke: 6px transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 1.6em; + font-weight: 600; + + &:after { + content: attr(data-amount); + position: absolute; + z-index: 9; + background: linear-gradient( + 91.35deg, + #4bf2a2 -4.66%, + #a89fe7 56.06%, + #e1c4f4 73.07%, + #dd40cd 111.44% + ); + @apply text-gray20; + -webkit-text-stroke: 2px transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: #1b1b26; + left: 0px; + } +} + +.raffle-logo-container { + background: linear-gradient(#4bf2a200, #a89fe700, #c990ee, #71969e); + border-radius: 14px; + z-index: -1; +} + +.select-not { + @apply select-none; + -webkit-user-select: none; + -ms-user-select: none; +} + +.rmdp-wrapper { + background-color: #1b1b29 !important; + @apply text-gray100; + border: 2px solid #4c4c5c !important; + border-radius: 16px !important; +} + +.sd { + color: #b5b5c6 !important; + background-color: #242431; +} + +.sd:hover { + background-color: #303043 !important; + color: #b5b5c6 !important; +} + +.rmdp-arrow-container { + display: flex !important; + align-items: center !important; + height: 25px !important; + width: 25px !important; +} + +.rmdp-day { + font-weight: 600; +} +.rmdp-day > span:hover { + background-color: #303043 !important; + color: white !important; +} + +.rmdp-arrow-container:hover { + background-color: #16161b !important; +} + +.rmdp-arrow { + border-right: 2px solid #b5b5c6 !important; + border-bottom: 2px solid #b5b5c6 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + margin: 0 !important; +} + +.rmdp-header-values, +.rmdp-day { + color: white !important; + font-size: 0 !important; + display: flex; + column-gap: 10px; +} +// .rmdp-arrow + +.rmdp-header-values > span { + display: flex; + align-items: center !important; + justify-content: center !important; + font-size: 14px !important; + border-radius: 6px !important; + background-color: #242431 !important; + height: 27px !important; + min-width: 81px !important; + font-weight: 500 !important; +} + +.rmdp-week > div { + color: #67677b !important; + font-weight: 500; + letter-spacing: 0.42px; +} + +.rmdp-week { + column-gap: 10px !important; +} + +.rmdp-month-picker, +.rmdp-year-picker { + background: #1e1e2c !important; + border-radius: 16px !important; +} + +.rmdp-selected > span { + background: #4ce6a1 !important; + color: #161623 !important; + z-index: 1000000 !important; +} + +.rmdp-selected > span:hover { + background: #4ce6a1 !important; + color: #161623 !important; +} + +.rmdp-today > span { + // background: #242431 !important; + // border: 2px solid #67677b; + // color: #b5b5c6 !important; +} + +.rmdp-time-picker input { + background: none !important; + color: white !important; + letter-spacing: 0.42px; + font-weight: 600; +} + +.rmdp-time-picker { + margin: 5px !important; +} + +.date-picker-input { + padding-left: 20px; + background: none; + color: #b5b5c6; + width: 100%; + height: 48px; +} + +.date-picker-input::placeholder { + color: #b5b5c664; +} + +.rmdp-action-buttons > button, +.rmdp-am { + color: white !important; + font-weight: 600; +} + +.rmdp-action-buttons { + border-top: none !important; + display: flex; + align-items: center; + justify-content: center; +} + +.rmdp-top-class { + border-bottom: 2px solid #4c4c5c !important; +} + +.rmdp-action-buttons > button { + width: 155px; + border-radius: 8px; + border: 1px solid #242431; + color: white !important; +} + +.rmdp-action-buttons > button:nth-child(2) { + background: #212130 !important; +} + +.rmdp-day-picker { + margin-top: 20px; +} +.rmdp-month-picker, +.rmdp-year-picker { + margin-left: 10px; + background-color: #161623 !important; + border: 2px solid #1e1e2c !important; + max-width: 325px; +} + +.setOpacity { + opacity: 0.3; +} + +.providePrize__amount_modal { + position: relative; + @apply text-gray20; + background: radial-gradient( + 174.04% 3217.67% at 17.05% 37.02%, + #2a3837 0%, + #3f2b44 42.19%, + #322837 100% + ); + -webkit-text-stroke: 4px transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 1.4em; + font-weight: 600; + // padding: 10px; + letter-spacing: 0.5px; + + &:after { + content: attr(data-amount); + position: absolute; + z-index: 9; + background: linear-gradient( + 91.35deg, + #4bf2a2 -4.66%, + #a89fe7 56.06%, + #e1c4f4 73.07%, + #dd40cd 111.44% + ); + @apply text-gray20; + -webkit-text-stroke: 1px transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: #13131e; + } +} + +.form-you-filed::-webkit-scrollbar { + width: 1px; + height: 3px; +} + +.uploadFileInput::file-selector-button { + display: none; +} + +.nftIdTextarea::placeholder { + @apply text-gray80; +}