Skip to content

Commit 421cdcd

Browse files
mkstmkst
committed
Holiday Frogs ❤️🍀🎃🦃🎅
1 parent c8da8c6 commit 421cdcd

File tree

15 files changed

+174
-115
lines changed

15 files changed

+174
-115
lines changed

‎frontend/src/app/(navfooter)/faq/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
22

33
import Link from "next/link";
44

5-
import Frog from "@/components/Nav/frog.svg";
5+
import Frog from "@/components/Frog/Frog";
66

77
const subtitle = "mt-8 text-xl font-semibold tracking-tight text-gray-11";
88

‎frontend/src/app/not-found.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ChevronRightIcon } from "@primer/octicons-react";
22

33
import GhostButton from "@/components/GhostButton";
4-
import Frog from "@/components/Nav/frog.svg";
4+
import Frog from "@/components/Frog/Frog";
55

66
export default function NotFound() {
77
return (

‎frontend/src/components/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { MarkGithubIcon } from "@primer/octicons-react";
44

55
import DiscordIcon from "./discord.svg";
66
import GhostButton from "./GhostButton";
7-
import Logotype from "./Logotype";
7+
import SiteLogo from "./Nav/SiteLogo";
88

99
function Separator() {
1010
return <div className="hidden h-4 w-px bg-gray-6 sm:inline-block" />;
@@ -20,7 +20,7 @@ export default function Footer() {
2020
<div className="border-gray-6 border-t py-10">
2121
<div className="flex items-center justify-center">
2222
<Link href="/">
23-
<Logotype />
23+
<SiteLogo />
2424
</Link>
2525
</div>
2626
<div className="mt-4 flex flex-col items-center justify-center gap-1 sm:flex-row sm:gap-2">

frontend/src/components/user/AnonymousFrog.tsx renamed to frontend/src/components/Frog/AnonymousFrog.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import type { SVGProps } from "react";
2-
32
import clsx from "clsx";
4-
53
import type * as api from "@/lib/api";
64

7-
import Frog from "../Nav/frog.svg";
8-
9-
import styles from "./AnonymousFrog.module.scss";
5+
import Frog from "./Frog";
106

117
export type Props = SVGProps<SVGElement> & {
128
user: api.AnonymousUser;
@@ -18,11 +14,11 @@ export default function AnonymousFrogAvatar({
1814
className,
1915
...props
2016
}: Props) {
21-
const accentStyle = {
22-
"--accent-hue": user.frog_color[0],
23-
"--accent-saturation": user.frog_color[1],
24-
"--accent-lightness": user.frog_color[2],
25-
};
17+
const [hue, saturation, lightness] = user.frog_color;
18+
19+
const primary = `hsl(${hue}, ${saturation * 100}%, ${lightness * 100}%)`;
20+
const secondary = `hsl(${hue}, ${(0.3 * (1 - saturation) + saturation) * 100}%, ${(0.5 * (1 - lightness) + lightness) * 100}%)`;
21+
const nose = `hsl(${hue}, ${(saturation - 0.2 * saturation) * 100}%, ${(lightness - 0.4 * lightness) * 100}%)`;
2622

2723
return (
2824
<div
@@ -32,8 +28,10 @@ export default function AnonymousFrogAvatar({
3228
)}
3329
>
3430
<Frog
35-
style={accentStyle}
36-
className={clsx(styles.anonymousFrog, "h-4/6 w-4/6")}
31+
primary={primary}
32+
secondary={secondary}
33+
nose={nose}
34+
className="h-4/6 w-4/6"
3735
{...props}
3836
/>
3937
</div>

‎frontend/src/components/Frog/Frog.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
3+
const Frog = ({
4+
primary = "#951fd9",
5+
secondary = "#cc87f4",
6+
pupil = "#000",
7+
eye = "#FFF",
8+
nose = "#505050",
9+
title = "",
10+
...props
11+
}) => (
12+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" {...props}>
13+
<title>{title}</title>
14+
<path
15+
fill={secondary}
16+
d="M36 22c0 7.456-8.059 12-18 12S0 29.456 0 22 8.059 7 18 7s18 7.544 18 15z"
17+
/>
18+
<path
19+
fill={primary}
20+
d="M31.755 12.676C33.123 11.576 34 9.891 34 8c0-3.313-2.687-6-6-6-2.861 0-5.25 2.004-5.851 4.685-1.288-.483-2.683-.758-4.149-.758-1.465 0-2.861.275-4.149.758C13.25 4.004 10.861 2 8 2 4.687 2 2 4.687 2 8c0 1.891.877 3.576 2.245 4.676C1.6 15.356 0 18.685 0 22c0 7.456 8.059 1 18 1s18 6.456 18-1c0-3.315-1.6-6.644-4.245-9.324z"
21+
/>
22+
<circle fill={eye} cx="7.5" cy="7.5" r="3.5" className="eyeL" />
23+
<circle fill={pupil} cx="7.5" cy="7.5" r="1.5" className="pupilL" />
24+
<circle fill={eye} cx="28.5" cy="7.5" r="3.5" className="eyeR" />
25+
<circle fill={pupil} cx="28.5" cy="7.5" r="1.5" className="pupilR" />
26+
<circle fill={nose} cx="14" cy="20" r="1" className="noseL" />
27+
<circle fill={nose} cx="22" cy="20" r="1" className="noseR" />
28+
</svg>
29+
);
30+
31+
export default Frog;

‎frontend/src/components/Frog/holiday.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
interface HolidayTheme {
2+
primary: string;
3+
secondary: string;
4+
message: string;
5+
}
6+
7+
export function getHolidayTheme(today = new Date()): HolidayTheme {
8+
const month = today.getUTCMonth();
9+
const date = today.getUTCDate();
10+
11+
if (month === 1 && date === 14)
12+
return {
13+
primary: "#e6396f",
14+
secondary: "#f7a1c4",
15+
message: "❤️ Happy Valentine's Day! ❤️",
16+
};
17+
if (month === 2 && date === 17)
18+
return {
19+
primary: "#2a9d34",
20+
secondary: "#7fd28d",
21+
message: "🍀 Happy St Patrick's Day! 🍀",
22+
};
23+
if (month === 9 && date === 31)
24+
return {
25+
primary: "#d96516",
26+
secondary: "#20150aff",
27+
message: "🎃 Happy Halloween! 🎃",
28+
};
29+
30+
if (month === 10) {
31+
// Thanksgiving (4th Thursday of November)
32+
const firstDay = new Date(today.getFullYear(), 10, 1);
33+
const firstThursday = 1 + ((4 - firstDay.getDay() + 7) % 7);
34+
const fourthThursday = firstThursday + 21;
35+
if (date === fourthThursday)
36+
return {
37+
primary: "#9e682a",
38+
secondary: "#d2a679",
39+
message: "🦃 Happy Thanksgiving! 🦃",
40+
};
41+
}
42+
43+
if (month === 11 && date === 25)
44+
return {
45+
primary: "#E61A1A",
46+
secondary: "#F8BFBF",
47+
message: "🎅 Merry Christmas! 🎅",
48+
};
49+
50+
// Default
51+
return {
52+
primary: "#951fd9",
53+
secondary: "#cc87f4",
54+
message: "Happy Decomping!",
55+
};
56+
}

‎frontend/src/components/Logotype.tsx‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎frontend/src/components/Nav/Nav.module.scss‎

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -64,47 +64,6 @@ $padding: 8px;
6464
width: 100%;
6565
height: 100%;
6666
}
67-
68-
&:not(:hover) {
69-
@keyframes blink {
70-
0% {
71-
transform: scaleY(1);
72-
opacity: 1;
73-
}
74-
75-
25% {
76-
transform: scaleY(0.2);
77-
opacity: 0;
78-
}
79-
80-
50% {
81-
transform: scaleY(1);
82-
opacity: 1;
83-
}
84-
85-
75% {
86-
transform: scaleY(0.2);
87-
opacity: 0;
88-
}
89-
90-
100% {
91-
transform: scaleY(1);
92-
opacity: 1;
93-
}
94-
}
95-
96-
:global(.frog_svg__pupilR),
97-
:global(.frog_svg__pupilL),
98-
:global(.frog_svg__eyeR),
99-
:global(.frog_svg__eyeL) {
100-
transform-origin: 0 7px;
101-
animation: blink 0.4s 2s ease;
102-
103-
@media (prefers-reduced-motion) {
104-
animation: none;
105-
}
106-
}
107-
}
10867
}
10968

11069
.menu {

‎frontend/src/components/Nav/Nav.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { ThreeBarsIcon, XIcon } from "@primer/octicons-react";
99
import clsx from "clsx";
1010

1111
import GhostButton from "../GhostButton";
12-
import Logotype from "../Logotype";
12+
import SiteLogo from "./SiteLogo";
1313

1414
import LoginState from "./LoginState";
1515
import styles from "./Nav.module.scss";
@@ -71,7 +71,7 @@ export default function Nav({ children }: Props) {
7171
href="/"
7272
className="transition-colors hover:text-gray-12 active:translate-y-px"
7373
>
74-
<Logotype />
74+
<SiteLogo />
7575
</Link>
7676
</li>
7777
<li className={styles.headerItemLoginState}>
@@ -108,7 +108,7 @@ export default function Nav({ children }: Props) {
108108
<ul className={styles.links}>
109109
<li className="flex items-center justify-center">
110110
<Link href="/">
111-
<Logotype />
111+
<SiteLogo />
112112
</Link>
113113
</li>
114114
<li>

‎frontend/src/components/Nav/SiteLogo.module.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@keyframes blink {
2+
0% {
3+
transform: scaleY(1);
4+
opacity: 1;
5+
}
6+
25% {
7+
transform: scaleY(0.2);
8+
opacity: 0;
9+
}
10+
50% {
11+
transform: scaleY(1);
12+
opacity: 1;
13+
}
14+
75% {
15+
transform: scaleY(0.2);
16+
opacity: 0;
17+
}
18+
100% {
19+
transform: scaleY(1);
20+
opacity: 1;
21+
}
22+
}
23+
24+
.blinkingEyes :global(.pupilR),
25+
.blinkingEyes :global(.pupilL),
26+
.blinkingEyes :global(.eyeR),
27+
.blinkingEyes :global(.eyeL) {
28+
transform-origin: 0 7px;
29+
animation: blink 0.4s 2s ease;
30+
}
31+
32+
@media (prefers-reduced-motion) {
33+
.blinkingEyes :global(.pupilR),
34+
.blinkingEyes :global(.pupilL),
35+
.blinkingEyes :global(.eyeR),
36+
.blinkingEyes :global(.eyeL) {
37+
animation: none;
38+
}
39+
}

0 commit comments

Comments
 (0)