diff --git a/apps/dashboard/src/components/counter.tsx b/apps/dashboard/src/components/counter.tsx index 00c644e395..3635583e90 100644 --- a/apps/dashboard/src/components/counter.tsx +++ b/apps/dashboard/src/components/counter.tsx @@ -2,10 +2,7 @@ import { useEffect, useRef, useState } from "react"; -const CONFIG = { - min: 0, - max: 20000, -}; +const max = 20000; const Character = ({ className, key, value }) => { return ( @@ -23,7 +20,7 @@ const Character = ({ className, key, value }) => { const InnerCounter = ({ currency, pad, value, locale }) => { const padCount = pad - ? CONFIG.max.toFixed(2).toString().length - value.toString().length + ? max.toFixed(2).toString().length - value.toString().length : 0; const paddedValue = value @@ -88,6 +85,12 @@ export function Counter({ const hasRunned = useRef(false); const [value, setValue] = useState(initalValue - lastPeriodAmount); + useEffect(() => { + if (value !== initalValue) { + setValue(initalValue); + } + }, [initalValue]); + useEffect(() => { if (!hasRunned.current) { setValue((prev) => prev + lastPeriodAmount); @@ -97,8 +100,8 @@ export function Counter({ return ( <> - - + + ); } diff --git a/apps/dashboard/src/styles/globals.css b/apps/dashboard/src/styles/globals.css index 5e5919d719..c2efc5558d 100644 --- a/apps/dashboard/src/styles/globals.css +++ b/apps/dashboard/src/styles/globals.css @@ -13,6 +13,53 @@ body { :root { --sidebar-width: 662px; + + /* Counter */ + --transition: 1; + --line: hsl(0 0% 95% / 0.25); + --basic: ease; + --back: + linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, + -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, + 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, + 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, + 1.0419 84.36%, 1.0059 95.49%, 1 ); + --expo: + linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, + 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, + 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, + 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 ); + --sine: + linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, + 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, + 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 ); + --power: + linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, + 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, + 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, + 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 ); + --circ: + linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, + 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, + 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, + 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, + 0.9904 90.25%, 1 ); + --bounce: + linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, + 0.1407, 0.25, 0.3908, 0.5625, 0.7654, + 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, + 0.7539, 0.75, 0.7539, 0.7657, 0.7852, + 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, + 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, + 1, 0.9883, 0.9844, 0.9883, 1 ); + --elastic: + linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, + 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, + -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, + 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, + 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, + 0.9991 91.48%, 1 ); + --ease: var(--back); } .skeleton-box { @@ -92,54 +139,6 @@ body { 100% { transform: translateX(0rem); } } -:root { - --transition: 1; - --line: hsl(0 0% 95% / 0.25); - --basic: ease; - --back: - linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, - -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, - 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, - 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, - 1.0419 84.36%, 1.0059 95.49%, 1 ); - --expo: - linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, - 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, - 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, - 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 ); - --sine: - linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, - 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, - 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 ); - --power: - linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, - 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, - 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, - 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 ); - --circ: - linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, - 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, - 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, - 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, - 0.9904 90.25%, 1 ); - --bounce: - linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, - 0.1407, 0.25, 0.3908, 0.5625, 0.7654, - 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, - 0.7539, 0.75, 0.7539, 0.7657, 0.7852, - 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, - 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, - 1, 0.9883, 0.9844, 0.9883, 1 ); - --elastic: - linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, - 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, - -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, - 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, - 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, - 0.9991 91.48%, 1 ); - --ease: var(--back); -} - .counter h2 { transform-style: flat; } @@ -181,30 +180,25 @@ body { font-variant: tabular-nums; font-size: var(--font-size); overflow: hidden; - mask: linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - (1lh * var(--mask-size))), transparent); + mask: linear-gradient(transparent, hsl(var(--background)) calc(1lh * var(--mask-size)) calc(100% - (1lh * var(--mask-size))), transparent); transform-style: flat; } .character__track span { height: 1lh; - font-weight: 120; transform-style: flat; } .character, .character__track span { /* background: linear-gradient(hsl(0 0% 98%) 50%, hsl(0 0% 45%)); */ - background-color: white; + background-color: hsl(var(--foreground)); background-attachment: fixed; background-clip: text; color: transparent; transform-style: flat; } -.character { - font-weight: 20; -} - .character__track { display: grid; translate: 0 calc((var(--v) + 1) * (var(--line-height) * -1)); @@ -232,7 +226,6 @@ body { .fraction { font-size: calc(var(--font-size) * 0.75); opacity: 0.75; - font-weight: 40; height: var(--line-height); } @@ -258,9 +251,6 @@ body { position: absolute; bottom: 0%; left: 0%; - font-family: "Geist Sans", sans-serif; - font-weight: 120; - background: linear-gradient(hsl(0 0% 98%) 50%, hsl(0 0% 45%)); background-attachment: fixed; background-clip: text; @@ -309,9 +299,11 @@ body { .counter:last-of-type .character__track span { transition: opacity 0.5s; } + .counter:last-of-type [data-value]::after { transition: opacity 0.5s; } + .counter:last-of-type legend { transition: color 0.5s 1s; } diff --git a/bun.lockb b/bun.lockb index d3513c697a..63d53870e6 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/supabase/package.json b/packages/supabase/package.json index 73b16e5f51..da37c0c3b2 100644 --- a/packages/supabase/package.json +++ b/packages/supabase/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@supabase/ssr": "^0.0.10", - "@supabase/supabase-js": "^2.39.0", + "@supabase/supabase-js": "^2.39.1", "supabase": "^1.123.4" }, "devDependencies": {