Skip to content

Commit d82ec06

Browse files
Abhash-ChakrabortyAbhash-Chakraborty
committed
fix: polish clerk sign-in and particle build
1 parent 08c6e93 commit d82ec06

11 files changed

Lines changed: 158 additions & 171 deletions

File tree

‎package-lock.json‎

Lines changed: 21 additions & 84 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@
4545
"@radix-ui/react-avatar": "^1.1.7",
4646
"@radix-ui/react-collapsible": "^1.1.12",
4747
"@radix-ui/react-slot": "^1.2.3",
48-
"@tsparticles/react": "^3.0.0",
48+
"@tsparticles/engine": "^4.0.4",
49+
"@tsparticles/react": "^4.0.4",
4950
"@tsparticles/slim": "^4.0.4",
5051
"@vercel/analytics": "^1.5.0",
5152
"canvas-confetti": "^1.9.3",

‎src/components/particle.tsx‎

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
11
import * as React from "react";
2-
import Particles, { initParticlesEngine } from "@tsparticles/react";
3-
import { useEffect, useMemo, useState } from "react";
2+
import Particles, { ParticlesProvider } from "@tsparticles/react";
3+
import { Engine } from "@tsparticles/engine";
4+
import { useMemo } from "react";
45
import { loadSlim } from "@tsparticles/slim";
56

6-
const ParticlesComponent = (props) => {
7-
const [init, setInit] = useState(false);
8-
9-
useEffect(() => {
10-
initParticlesEngine(async (engine) => {
11-
await loadSlim(engine);
12-
}).then(() => {
13-
setInit(true);
14-
});
15-
}, []);
16-
17-
const particlesLoaded = (container) => {
18-
console.log(container);
19-
};
7+
const initParticles = async (engine: Engine) => {
8+
await loadSlim(engine);
9+
};
2010

11+
const ParticlesComponent = (props) => {
2112
const options = useMemo(
2213
() => ({
2314
fullScreen: {
@@ -96,19 +87,21 @@ const ParticlesComponent = (props) => {
9687
);
9788

9889
return (
99-
<div
100-
style={{
101-
position: "fixed",
102-
width: "100vw",
103-
height: "100vh",
104-
top: 0,
105-
left: 0,
106-
zIndex: -1, // Critical: ensures it's in the background
107-
pointerEvents: "none", // Ensures it doesn't block clicks
108-
}}
109-
>
110-
<Particles id={props.id} options={options} />
111-
</div>
90+
<ParticlesProvider init={initParticles}>
91+
<div
92+
style={{
93+
position: "fixed",
94+
width: "100vw",
95+
height: "100vh",
96+
top: 0,
97+
left: 0,
98+
zIndex: -1, // Critical: ensures it's in the background
99+
pointerEvents: "none", // Ensures it doesn't block clicks
100+
}}
101+
>
102+
<Particles id={props.id} options={options} />
103+
</div>
104+
</ParticlesProvider>
112105
);
113106
};
114107

‎src/components/ui/NavbarClerkAuth.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@ const NavbarClerkAuthContent: React.FC = () => {
88
<div className="clerk-navbar-auth">
99
<Show when="signed-out">
1010
<SignInButton mode="modal">
11-
<button className="clerk-navbar-sign-in">Sign in</button>
11+
<button
12+
type="button"
13+
className="clerk-navbar-sign-in"
14+
aria-label="Sign in to recode hive"
15+
>
16+
Sign in
17+
</button>
1218
</SignInButton>
1319
</Show>
1420
<Show when="signed-in">

‎src/css/custom.css‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1387,29 +1387,63 @@ html {
13871387
box-sizing: border-box !important;
13881388
}
13891389

1390+
:root {
1391+
--recode-auth-button-bg: #111827;
1392+
--recode-auth-button-text: #ffffff;
1393+
--recode-auth-button-border: #111827;
1394+
--recode-auth-button-shadow: 0 8px 22px rgba(17, 24, 39, 0.16);
1395+
--recode-auth-button-hover-bg: #ffffff;
1396+
--recode-auth-button-hover-text: #111827;
1397+
--recode-auth-button-hover-border: #111827;
1398+
--recode-auth-button-hover-shadow: 0 10px 26px rgba(17, 24, 39, 0.22);
1399+
}
1400+
1401+
[data-theme="dark"] {
1402+
--recode-auth-button-bg: #ffffff;
1403+
--recode-auth-button-text: #0f172a;
1404+
--recode-auth-button-border: #ffffff;
1405+
--recode-auth-button-shadow: 0 8px 22px rgba(255, 255, 255, 0.12);
1406+
--recode-auth-button-hover-bg: #0f172a;
1407+
--recode-auth-button-hover-text: #ffffff;
1408+
--recode-auth-button-hover-border: #ffffff;
1409+
--recode-auth-button-hover-shadow: 0 10px 26px rgba(255, 255, 255, 0.18);
1410+
}
1411+
13901412
.clerk-navbar-auth {
13911413
display: flex;
13921414
align-items: center;
13931415
}
13941416

13951417
.clerk-navbar-sign-in {
1396-
border: 0;
1397-
border-radius: 6px;
1398-
background: var(--ifm-color-primary);
1399-
color: #ffffff;
1418+
border: 1px solid var(--recode-auth-button-border);
1419+
border-radius: 999px;
1420+
background: var(--recode-auth-button-bg);
1421+
color: var(--recode-auth-button-text);
14001422
cursor: pointer;
1401-
font-weight: 600;
1402-
padding: 0 0.8rem;
1423+
font-weight: 700;
1424+
letter-spacing: 0.01em;
1425+
padding: 0 0.95rem;
1426+
box-shadow: var(--recode-auth-button-shadow);
14031427
transition:
14041428
background-color 0.2s ease,
1429+
border-color 0.2s ease,
14051430
color 0.2s ease,
1406-
box-shadow 0.2s ease;
1431+
box-shadow 0.2s ease,
1432+
transform 0.2s ease;
14071433
}
14081434

1409-
.clerk-navbar-sign-in:hover {
1410-
background: var(--ifm-color-primary-dark);
1411-
color: #ffffff;
1412-
box-shadow: 0 6px 18px rgba(46, 133, 85, 0.24);
1435+
.clerk-navbar-sign-in:hover,
1436+
.clerk-navbar-sign-in:focus-visible {
1437+
background: var(--recode-auth-button-hover-bg);
1438+
border-color: var(--recode-auth-button-hover-border);
1439+
color: var(--recode-auth-button-hover-text);
1440+
box-shadow: var(--recode-auth-button-hover-shadow);
1441+
transform: translateY(-1px);
1442+
}
1443+
1444+
.clerk-navbar-sign-in:focus-visible {
1445+
outline: 2px solid var(--ifm-color-primary);
1446+
outline-offset: 2px;
14131447
}
14141448

14151449
.algolia-sitesearch-navbar {

‎src/database/projects/projects.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { OurProjectsData } from "../../components/ourProjects";
1+
import type { Data as OurProjectsData } from "../../components/ourProjects";
22

33
const projectsData: OurProjectsData = {
44
tag: "Our Projects",

‎src/pages/dashboard/dashboard.css‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -607,17 +607,35 @@
607607
}
608608

609609
.leaderboard-auth-button {
610-
border: 0;
611-
border-radius: 8px;
612-
background: var(--dashboard-accent);
613-
color: #ffffff;
610+
border: 1px solid var(--recode-auth-button-border);
611+
border-radius: 999px;
612+
background: var(--recode-auth-button-bg);
613+
color: var(--recode-auth-button-text);
614614
cursor: pointer;
615-
font-weight: 600;
616-
padding: 10px 18px;
615+
font-weight: 700;
616+
letter-spacing: 0.01em;
617+
padding: 10px 22px;
618+
box-shadow: var(--recode-auth-button-shadow);
619+
transition:
620+
background-color 0.2s ease,
621+
border-color 0.2s ease,
622+
color 0.2s ease,
623+
box-shadow 0.2s ease,
624+
transform 0.2s ease;
625+
}
626+
627+
.leaderboard-auth-button:hover,
628+
.leaderboard-auth-button:focus-visible {
629+
background: var(--recode-auth-button-hover-bg);
630+
border-color: var(--recode-auth-button-hover-border);
631+
color: var(--recode-auth-button-hover-text);
632+
box-shadow: var(--recode-auth-button-hover-shadow);
633+
transform: translateY(-1px);
617634
}
618635

619-
.leaderboard-auth-button:hover {
620-
background: var(--dashboard-accent-dark);
636+
.leaderboard-auth-button:focus-visible {
637+
outline: 2px solid var(--dashboard-accent);
638+
outline-offset: 3px;
621639
}
622640

623641
/* Giveaway Section */

0 commit comments

Comments
 (0)