Skip to content

Commit 6477f04

Browse files
diogogmatosdiogogmatos
authored
feat: custom selection colors (#192)
* feat: custom selection colors * fix: color problems * fix: select-none on buttons
1 parent f57591d commit 6477f04

File tree

15 files changed

+137
-128
lines changed

15 files changed

+137
-128
lines changed

‎src/app/[lang]/about/become-a-collaborator/page.tsx‎

Lines changed: 111 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ export default function BecomeACollaborator() {
8383

8484
return (
8585
<main>
86-
<section className="relative grid min-h-[380px] grid-flow-row items-start bg-blue text-white lg:grid-flow-col lg:items-start">
86+
{/* Hero */}
87+
<section className="relative grid min-h-[380px] grid-flow-row items-start bg-signature-blue text-white selection:bg-white/30 lg:grid-flow-col lg:items-start">
8788
<div className="max-w-1/2 layout-p-y flex flex-col gap-8 px-5 sm:pr-0 md:px-16 lg:pl-28 2xl:pl-60">
8889
<div>
8990
<h1 className="text-gradient font-title text-4xl font-medium text-white/50 lg:text-5xl">
@@ -97,7 +98,7 @@ export default function BecomeACollaborator() {
9798
<Button
9899
title={dict.about.become_a_collaborator.hero.button}
99100
style="style1"
100-
color="blue"
101+
color="signature-blue"
101102
as="link"
102103
href="https://cesium.link/f/recrutamento"
103104
umamiEvent="comecar-inscricao-colaborador"
@@ -122,117 +123,125 @@ export default function BecomeACollaborator() {
122123
/>
123124
</div>
124125
</section>
125-
<CollaboratorLayout
126-
title={dict.about.become_a_collaborator.join_team.title}
127-
subtitle={dict.about.become_a_collaborator.join_team.description}
128-
linkName="go_to_team"
129-
href="/team"
130-
overflows
131-
linkColor="blue"
132-
>
133-
<div className="pointer-events-none flex w-full select-none justify-evenly gap-5">
134-
{teamData.map((team, index) =>
135-
index == 0
136-
? members.map((member) => (
137-
<Avatar
138-
key={member.name}
139-
src={member.imageUrl}
140-
className="rounded-full font-normal"
141-
imageClassName="size-20 rounded-full"
142-
style="style2"
143-
/>
144-
))
145-
: team?.members?.map((member, memberIndex) => (
146-
<Avatar
147-
key={member.name}
148-
src={
149-
imageUrls[index]?.[0]?.[memberIndex] ?? "/images/none.png"
150-
}
151-
className="rounded-full font-normal"
152-
imageClassName="size-20 rounded-full"
153-
style="style2"
154-
/>
155-
)),
156-
)}
157-
</div>
158-
</CollaboratorLayout>
159-
<AboutSection stretch>
160-
<div className="flex w-full flex-col items-stretch gap-4 bg-white pt-10 sm:pt-12">
161-
{/* Title */}
162-
<div className="flex items-center gap-4 px-6 sm:mr-6 sm:px-0">
163-
<div className="layout-p-x flex h-fit flex-1 items-center justify-start">
164-
<span className="w-fit origin-right select-none font-title text-2xl font-medium sm:text-3xl">
165-
{dict.about.become_a_collaborator.choose_department.title}
166-
</span>
167-
</div>
126+
<div className="selection:bg-signature-blue">
127+
<CollaboratorLayout
128+
title={dict.about.become_a_collaborator.join_team.title}
129+
subtitle={dict.about.become_a_collaborator.join_team.description}
130+
linkName="go_to_team"
131+
href="/team"
132+
overflows
133+
linkColor="signature-blue"
134+
>
135+
<div className="pointer-events-none flex w-full select-none justify-evenly gap-5">
136+
{teamData.map((team, index) =>
137+
index == 0
138+
? members.map((member) => (
139+
<Avatar
140+
key={member.name}
141+
src={member.imageUrl}
142+
className="rounded-full font-normal"
143+
imageClassName="size-20 rounded-full"
144+
style="style2"
145+
/>
146+
))
147+
: team?.members?.map((member, memberIndex) => (
148+
<Avatar
149+
key={member.name}
150+
src={
151+
imageUrls[index]?.[0]?.[memberIndex] ??
152+
"/images/none.png"
153+
}
154+
className="rounded-full font-normal"
155+
imageClassName="size-20 rounded-full"
156+
style="style2"
157+
/>
158+
)),
159+
)}
168160
</div>
169-
{/* Subtitle */}
170-
<div className="px-6 sm:px-0">
171-
<div className="layout-p-x text-justify">
172-
<span>
173-
{dict.about.become_a_collaborator.choose_department.description}
174-
</span>
175-
<div className="mt-4 block sm:block">
176-
<AppLink
177-
title={dict.button.go_to_departments}
178-
href="/departments"
179-
color="blue"
180-
/>
161+
</CollaboratorLayout>
162+
<AboutSection stretch>
163+
<div className="flex w-full flex-col items-stretch gap-4 bg-white pt-10 sm:pt-12">
164+
{/* Title */}
165+
<div className="flex items-center gap-4 px-6 sm:mr-6 sm:px-0">
166+
<div className="layout-p-x flex h-fit flex-1 items-center justify-start">
167+
<span className="w-fit origin-right select-none font-title text-2xl font-medium sm:text-3xl">
168+
{dict.about.become_a_collaborator.choose_department.title}
169+
</span>
181170
</div>
182171
</div>
183-
</div>
184-
{/* Content (Scrollable) */}
185-
<div className="relative hidden xl:block">
186-
<div className="mt-7 w-full sm:mt-10">
187-
<div className="no-scrollbar mb-8 flex h-[302px] w-full overflow-y-hidden overflow-x-scroll px-10">
188-
<DepartmentsList
189-
hideTeam
190-
hideShortName
191-
className="flex w-fit gap-3"
192-
/>
172+
{/* Subtitle */}
173+
<div className="px-6 sm:px-0">
174+
<div className="layout-p-x text-justify">
175+
<span>
176+
{
177+
dict.about.become_a_collaborator.choose_department
178+
.description
179+
}
180+
</span>
181+
<div className="mt-4 block sm:block">
182+
<AppLink
183+
title={dict.button.go_to_departments}
184+
href="/departments"
185+
color="signature-blue"
186+
/>
187+
</div>
193188
</div>
194-
<div className="pointer-events-none absolute inset-0 z-10 bg-[radial-gradient(ellipse_100%_70%_at_50%_0%,_var(--tw-gradient-stops))] from-transparent from-40% via-white/80 via-80% to-white to-100%"></div>
195189
</div>
196-
</div>
197-
{/* Mobile Carousel */}
198-
<div className="relative mt-4 h-72 overflow-hidden xl:hidden">
199-
<Carousel
200-
pagination
201-
overflow
202-
loop
203-
items={departmentNames.map((departmentName, index) => (
204-
<div
205-
key={index}
206-
className="pointer-events-none flex h-[350px] select-none"
207-
>
208-
<DepartmentCard
209-
key={departmentName}
210-
name={departmentName}
211-
shortName={shortName(departmentName)}
212-
gradientFrom={gradient(shortName(departmentName))[0] ?? ""}
213-
gradientTo={gradient(shortName(departmentName))[1] ?? ""}
190+
{/* Content (Scrollable) */}
191+
<div className="relative hidden xl:block">
192+
<div className="mt-7 w-full sm:mt-10">
193+
<div className="no-scrollbar mb-8 flex h-[302px] w-full select-none overflow-y-hidden overflow-x-scroll px-10">
194+
<DepartmentsList
214195
hideTeam
215196
hideShortName
216-
teamData={teamData}
217-
yearRange={yearRange}
218-
shortDescription
197+
className="flex w-fit gap-3"
219198
/>
220199
</div>
221-
))}
222-
/>
223-
<div className="pointer-events-none absolute inset-0 z-10 bg-[radial-gradient(ellipse_100%_70%_at_50%_0%,_var(--tw-gradient-stops))] from-transparent from-40% via-white/80 via-80% to-white to-100%"></div>
200+
<div className="pointer-events-none absolute inset-0 z-10 bg-[radial-gradient(ellipse_100%_70%_at_50%_0%,_var(--tw-gradient-stops))] from-transparent from-40% via-white/80 via-80% to-white to-100%"></div>
201+
</div>
202+
</div>
203+
{/* Mobile Carousel */}
204+
<div className="relative mt-4 h-72 overflow-hidden xl:hidden">
205+
<Carousel
206+
pagination
207+
overflow
208+
loop
209+
items={departmentNames.map((departmentName, index) => (
210+
<div
211+
key={index}
212+
className="pointer-events-none flex h-[350px] select-none"
213+
>
214+
<DepartmentCard
215+
key={departmentName}
216+
name={departmentName}
217+
shortName={shortName(departmentName)}
218+
gradientFrom={
219+
gradient(shortName(departmentName))[0] ?? ""
220+
}
221+
gradientTo={gradient(shortName(departmentName))[1] ?? ""}
222+
hideTeam
223+
hideShortName
224+
teamData={teamData}
225+
yearRange={yearRange}
226+
shortDescription
227+
/>
228+
</div>
229+
))}
230+
/>
231+
<div className="pointer-events-none absolute inset-0 z-10 bg-[radial-gradient(ellipse_100%_70%_at_50%_0%,_var(--tw-gradient-stops))] from-transparent from-40% via-white/80 via-80% to-white to-100%"></div>
232+
</div>
224233
</div>
234+
</AboutSection>
235+
<div className="layout-p-x my-12">
236+
<CallSubscribe
237+
title={dict.callsub.collaborators.title}
238+
description={dict.callsub.collaborators.desc}
239+
buttonText={dict.callsub.button}
240+
buttonURL="https://cesium.link/f/recrutamento"
241+
buttonColor="signature-blue"
242+
footerText={dict.callsub.footer}
243+
/>
225244
</div>
226-
</AboutSection>
227-
<div className="layout-p-x my-12">
228-
<CallSubscribe
229-
title={dict.callsub.collaborators.title}
230-
description={dict.callsub.collaborators.desc}
231-
buttonText={dict.callsub.button}
232-
buttonURL="https://cesium.link/f/recrutamento"
233-
buttonColor="blue"
234-
footerText={dict.callsub.footer}
235-
/>
236245
</div>
237246
</main>
238247
);

‎src/app/[lang]/about/become-a-member/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function BecomeAMember() {
3131
return (
3232
<main>
3333
{/* Hero */}
34-
<section className="relative grid min-h-[380px] grid-flow-row items-start bg-primary text-white lg:grid-flow-col lg:items-start">
34+
<section className="relative grid min-h-[380px] grid-flow-row items-start bg-primary text-white selection:bg-white/30 lg:grid-flow-col lg:items-start">
3535
<div className="max-w-1/2 layout-p-y flex flex-col gap-8 px-5 sm:pr-0 md:px-16 lg:pl-28 2xl:pl-60">
3636
<div>
3737
<h1 className="text-gradient font-title text-4xl font-medium text-white/50 lg:text-5xl">
@@ -411,7 +411,7 @@ export default function BecomeAMember() {
411411
description={dict.callsub.members.desc}
412412
buttonText={dict.callsub.button}
413413
buttonURL="https://cesium.link/f/socios"
414-
buttonColor={"primary"}
414+
buttonColor="primary"
415415
footerText={dict.callsub.footer}
416416
/>
417417
</section>

‎src/app/[lang]/about/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@ export default function About() {
304304
<AppLink
305305
title={link.title}
306306
href={link.href}
307-
color={linkColor as "primary" | "blue"}
307+
color={linkColor}
308308
/>
309309
</div>
310310
);

‎src/app/[lang]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function Home() {
4848
return (
4949
<main>
5050
{/* Hero */}
51-
<section className="layout-p-x flex h-[calc(100dvh-72px)] flex-col justify-between md:h-[calc(100dvh-94px)]">
51+
<section className="layout-p-x flex h-[calc(100dvh-72px)] flex-col justify-between selection:bg-white/30 md:h-[calc(100dvh-94px)]">
5252
<div
5353
className="absolute left-0 right-0 top-0 -z-10 h-dvh"
5454
style={{

‎src/components/become-a-collaborator-layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ interface CollaboratorLayoutProps {
1919
overflows?: boolean;
2020
dark?: boolean;
2121
children?: React.ReactNode;
22-
linkColor?: "blue" | "primary";
22+
linkColor?: "signature-blue" | "primary";
2323
}
2424

2525
const CollaboratorLayout = ({

‎src/components/body.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function Body({
1717
}) {
1818
return (
1919
<body
20-
className={`${fonts.map((f) => f.variable).join(" ")} overflow-x-hidden overflow-y-scroll bg-foundation font-sans text-black antialiased`}
20+
className={`${fonts.map((f) => f.variable).join(" ")} overflow-x-hidden overflow-y-scroll bg-foundation font-sans text-black antialiased selection:bg-primary selection:text-white`}
2121
>
2222
<ScrollStateProvider>
2323
<DictionaryProvider lang={lang}>{children}</DictionaryProvider>

‎src/components/button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const Button = ({
2626
const hrefDefault = href ?? "/";
2727
const hrefLang = `/${lang}${href}`;
2828

29-
const isCustomColor = !["blue", "primary", "black"].includes(color);
29+
const isCustomColor = !["signature-blue", "primary", "black"].includes(color);
3030
const isLocalLink =
3131
href &&
3232
!(
@@ -36,7 +36,7 @@ const Button = ({
3636
);
3737

3838
const baseStyle =
39-
"py-3 text-base font-normal transition-transform hover:scale-105 active:scale-95 transition-transform ease-in-out duration-300";
39+
"py-3 text-base font-normal transition-transform hover:scale-105 active:scale-95 transition-transform ease-in-out duration-300 select-none";
4040
const styleVariant = {
4141
style1: `rounded-full bg-white px-5 w-fit ${!isCustomColor ? `text-${color}` : ""}`,
4242
style2: `rounded-xl font-semibold px-12 text-white ${!isCustomColor ? `bg-${color}` : ""}`,

‎src/components/call-subscribe.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const CallSubscribe = ({
2929
style="style2"
3030
href={buttonURL}
3131
umamiEvent={
32-
buttonColor === "blue"
32+
buttonColor === "signature-blue"
3333
? "comecar-inscricao-colaborador"
3434
: "comecar-inscricao-socio"
3535
}

‎src/components/link.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const AppLink = ({ title, href, back, color = "primary" }: LinkProps) => {
1414
const hrefDefault = href ?? "/";
1515
const hrefLang = `/${lang}${href}`;
1616
const router = useRouter();
17-
const isCustomColor = !["blue", "primary", "black"].includes(color);
17+
const isCustomColor = !["signature-blue", "primary", "black"].includes(color);
1818
const isLocalLink =
1919
href &&
2020
!(

‎src/components/navbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const Navbar = () => {
4242
const navbarBackgroundColor = isMember
4343
? "bg-primary"
4444
: isCollaborator
45-
? "bg-blue"
45+
? "bg-signature-blue"
4646
: isLanding
4747
? "bg-transparent"
4848
: "bg-white md:bg-transparent";
@@ -61,7 +61,7 @@ const Navbar = () => {
6161

6262
return (
6363
<div
64-
className={`${navbarBackgroundColor} layout-p-x ${isOpen ? "sticky" : ""} ${isMemberOrCollaborator || isLanding ? "relative after:hidden" : "sticky"} top-0 z-50 after:absolute after:bottom-0 after:left-0 after:h-6 after:w-full after:translate-y-6 after:bg-gradient-to-b after:from-white after:to-transparent md:relative after:md:hidden`}
64+
className={`${navbarBackgroundColor} layout-p-x ${isOpen ? "sticky" : ""} ${isMemberOrCollaborator || isLanding ? "relative after:hidden" : "sticky"} top-0 z-50 select-none after:absolute after:bottom-0 after:left-0 after:h-6 after:w-full after:translate-y-6 after:bg-gradient-to-b after:from-white after:to-transparent md:relative after:md:hidden`}
6565
>
6666
<div
6767
className={`${navbarBackgroundColor} flex w-full flex-col pb-3 pt-4 md:relative md:pt-12`}

0 commit comments

Comments
 (0)