Skip to content

Commit 404a2b9

Browse files
gadingnstgadingnst
committed
refactor(theme): update color scheme and component styles
- Change primary, secondary, and accent color values - Update component styles to use new color scheme - Reduce blur intensity in liquid-glass effect - Add analytics link to footer - Extract button components in ProfileInfo
1 parent 6195826 commit 404a2b9

File tree

9 files changed

+73
-70
lines changed

9 files changed

+73
-70
lines changed

‎src/designs/styles/custom-utilities.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
}
1010

1111
.liquid-glass {
12-
@apply backdrop-blur-xl backdrop-saturate-150 border border-white/10 text-white;
12+
@apply backdrop-blur-md backdrop-saturate-150 border border-white/10 text-white;
1313
background-color: color-mix(in oklab, black 25%, transparent);
1414
}
1515

1616
.liquid-glass-shadow {
17-
@apply backdrop-blur-xl backdrop-saturate-150 border border-white/10 text-white shadow-2xl;
17+
@apply backdrop-blur-md backdrop-saturate-150 border border-white/10 text-white shadow-2xl;
1818
background-color: color-mix(in oklab, black 25%, transparent);
1919
}
2020

‎src/designs/styles/globals.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@
1818
--color-primary: rgb(99, 102, 241);
1919
--color-primary-content: rgb(255, 255, 255);
2020

21-
--color-secondary: rgb(168, 85, 247);
21+
--color-secondary: rgb(255, 100, 180);
2222
--color-secondary-content: rgb(255, 255, 255);
2323

24-
--color-accent: rgb(236, 72, 153);
24+
--color-accent: rgb(168, 85, 247);
2525
--color-accent-content: rgb(255, 255, 255);
2626

2727
/* ─── Neutral ─── */
@@ -67,13 +67,13 @@
6767
--color-base-content: rgb(250, 250, 250);
6868

6969
/* ─── Brand ─── */
70-
--color-primary: rgb(99, 102, 241);
70+
--color-primary: rgb(255, 100, 180);
7171
--color-primary-content: rgb(255, 255, 255);
7272

73-
--color-secondary: rgb(168, 85, 247);
73+
--color-secondary: rgb(99, 102, 241);
7474
--color-secondary-content: rgb(255, 255, 255);
7575

76-
--color-accent: rgb(236, 72, 153);
76+
--color-accent: rgb(168, 85, 247);
7777
--color-accent-content: rgb(255, 255, 255);
7878

7979
/* ─── Neutral ─── */

‎src/modules/About/components/ProfileInfo.tsx‎

Lines changed: 57 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,68 +9,68 @@ import Image from '@/packages/components/base/Displays/Image';
99
import ButtonLink from '@/packages/components/base/Navigations/ButtonLink';
1010
import useAppTheme from '@/packages/libs/AppTheme/useAppTheme';
1111

12-
function ProfileInfo() {
13-
const { isDark } = useAppTheme();
14-
15-
const LeftDesc = ({ className }: { className?: string }) => (
16-
<div
17-
className={cn([
18-
'items-center h-[30px] flex-1 justify-center text-center',
19-
className
20-
])}
12+
const LeftDesc = ({ className }: { className?: string }) => (
13+
<div
14+
className={cn([
15+
'items-center h-[30px] flex-1 justify-center text-center',
16+
className
17+
])}
18+
>
19+
<ButtonLink
20+
href={`https://github.com/${AUTHOR_GITHUB}`}
21+
className="p-3 rounded-lg text-white hover:text-white hover:-translate-y-1 shadow-sm hover:shadow-lg bg-[#333] shadow-gray-600 flex items-center gap-x-2"
22+
icon={<IconGithub width={16} height={16} />}
23+
target="_blank"
24+
rel="noopener noreferrer"
25+
data-umami-event="about_portfolio"
2126
>
22-
<ButtonLink
23-
href={`https://github.com/${AUTHOR_GITHUB}`}
24-
className="p-3 rounded-lg text-white hover:text-white hover:-translate-y-1 shadow-sm hover:shadow-lg bg-[#333] shadow-gray-600 flex items-center gap-x-2"
25-
icon={<IconGithub width={16} height={16} />}
26-
target="_blank"
27-
rel="noopener noreferrer"
28-
data-umami-event="about_portfolio"
29-
>
3027
Portfolio
31-
</ButtonLink>
32-
<ButtonLink
33-
href={`https://linkedin.com/in/${AUTHOR_LINKEDIN}`}
34-
className="ml-4 p-3 rounded-lg text-white hover:text-white hover:-translate-y-1 shadow-sm hover:shadow-lg bg-primary shadow-primary flex items-center gap-x-2"
35-
icon={<Briefcase size={16} />}
36-
target="_blank"
37-
rel="noopener noreferrer"
38-
data-umami-event="about_careers"
39-
>
28+
</ButtonLink>
29+
<ButtonLink
30+
href={`https://linkedin.com/in/${AUTHOR_LINKEDIN}`}
31+
className="ml-4 p-3 rounded-lg text-white hover:text-white hover:-translate-y-1 shadow-sm hover:shadow-lg bg-primary shadow-primary flex items-center gap-x-2"
32+
icon={<Briefcase size={16} />}
33+
target="_blank"
34+
rel="noopener noreferrer"
35+
data-umami-event="about_careers"
36+
>
4037
Careers
41-
</ButtonLink>
42-
</div>
43-
);
38+
</ButtonLink>
39+
</div>
40+
);
4441

45-
const RightDesc = ({ className }: { className?: string }) => (
46-
<div
47-
className={cn([
48-
'items-center h-[30px] flex-1 justify-center',
49-
className
50-
])}
42+
const RightDesc = ({ className }: { className?: string }) => (
43+
<div
44+
className={cn([
45+
'items-center h-[30px] flex-1 justify-center',
46+
className
47+
])}
48+
>
49+
<ButtonLink
50+
href="/resume"
51+
className="p-3 rounded-lg text-white hover:text-white hover:-translate-y-1 shadow-sm hover:shadow-lg bg-info shadow-info flex items-center gap-x-2"
52+
icon={<FileText size={16} />}
53+
target="_blank"
54+
rel="noopener noreferrer"
55+
data-umami-event="about_resume"
5156
>
52-
<ButtonLink
53-
href="/resume"
54-
className="p-3 rounded-lg text-white hover:text-white hover:-translate-y-1 shadow-sm hover:shadow-lg bg-info shadow-info flex items-center gap-x-2"
55-
icon={<FileText size={16} />}
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
data-umami-event="about_resume"
59-
>
6057
Resume
61-
</ButtonLink>
62-
<ButtonLink
63-
href="mailto:[email protected]"
64-
className="ml-4 p-3 rounded-lg text-white hover:text-white hover:-translate-y-1 shadow-sm hover:shadow-lg bg-accent shadow-accent flex items-center gap-x-2"
65-
icon={<Mail size={16} />}
66-
target="_blank"
67-
rel="noopener noreferrer"
68-
data-umami-event="about_contact"
69-
>
58+
</ButtonLink>
59+
<ButtonLink
60+
href="mailto:[email protected]"
61+
className="ml-4 p-3 rounded-lg text-white hover:text-white hover:-translate-y-1 shadow-sm hover:shadow-lg bg-accent shadow-accent flex items-center gap-x-2"
62+
icon={<Mail size={16} />}
63+
target="_blank"
64+
rel="noopener noreferrer"
65+
data-umami-event="about_contact"
66+
>
7067
Contact
71-
</ButtonLink>
72-
</div>
73-
);
68+
</ButtonLink>
69+
</div>
70+
);
71+
72+
function ProfileInfo() {
73+
const { isDark } = useAppTheme();
7474

7575
return (
7676
<div>
@@ -88,14 +88,13 @@ function ProfileInfo() {
8888
'hover:shadow-xl hover:-translate-y-3',
8989
'active:shadow-md active:scale-95',
9090
'min-w-[180px] min-h-[180px] max-w-[180px] max-h-[180px]',
91-
isDark && 'hover:shadow-accent'
91+
isDark && 'hover:shadow-primary'
9292
])}
9393
/>
9494
<h3 className="text-center text-2xl font-bold mb-9 mt-4">
9595
<span
9696
className={cn(
97-
'hover:cursor-pointer hover:underline underline-offset-4',
98-
isDark ? 'text-accent' : 'text-primary'
97+
'hover:cursor-pointer hover:underline underline-offset-4 text-primary'
9998
)}
10099
>
101100
Gading

‎src/modules/Base.layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import AppThemeInitializer from '@/packages/libs/AppTheme/AppThemeInitializer';
88
function BaseLayout({ children }: PropsWithChildren) {
99
return (
1010
<>
11-
<TopLoader color="primary" height={3} showShadow />
11+
<TopLoader height={3} showShadow />
1212
<Header />
1313
{children}
1414
<Footer />

‎src/modules/ContentParser/components/ContentCodeBlock.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ function ContentCodeBlock({ children, className, ...props }: PropsWithChildren<C
2727
onClick={copyHandler}
2828
aria-label="Copy code to clipboard"
2929
className={cn([
30-
'absolute top-2 right-2 z-10 p-1.5 rounded-md bg-gray-800/70 text-gray-300 hover:text-white hover:bg-gray-700 opacity-0 group-hover:opacity-100 transition-all duration-200',
30+
'absolute top-2 right-2 backdrop-blur z-10 p-1.5 rounded-md bg-gray-800/70 text-gray-300 hover:text-white hover:bg-gray-700 opacity-0 group-hover:opacity-100 transition-all duration-200',
3131
!isCopied && 'cursor-pointer'
3232
])}
3333
>

‎src/modules/Home/Home.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ async function HomePage(props: NextPageProps) {
7272
withCurrentLocale
7373
href="/about"
7474
data-umami-event="homepage_see-about"
75-
className="bg-accent text-white shadow-accent shadow-sm"
75+
className="bg-secondary text-white shadow-secondary shadow-sm"
7676
>
7777
{content.aboutMe}
7878
</ButtonLink>

‎src/packages/components/base/Displays/Card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function Card(_props: PropsWithChildren<CardProps>) {
2626
'card bg-base-200 z-10 shadow-lg',
2727
'transition-all duration-300 ease-in-out',
2828
hoverEffect && 'hover:-translate-y-1 hover:shadow-xl',
29-
isDark && 'shadow-primary',
29+
isDark && 'shadow-secondary',
3030
className
3131
])}
3232
>

‎src/packages/components/base/Loaders/TopLoader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const colorClasses = {
4848
* Automatically detects link clicks and route changes to show/hide the loader accordingly
4949
*/
5050
function TopLoader({
51-
color = 'primary',
51+
color = 'accent',
5252
height = 3,
5353
speed = 200,
5454
showShadow = true,

‎src/packages/components/layouts/Footer/Footer.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ function Footer() {
2828
{AUTHOR_NAME}
2929
</Link>
3030
<div className="text-base-content mt-2">
31+
<Link target="_blank" rel="noopener noreferrer" className="inline-block text-primary" href="https://eu.umami.is/share/ZCHEMPuhQlibZE6L/gading.dev">
32+
Analytic
33+
</Link>
34+
<span className="inline-block mx-1">&bull;</span>
3135
<Link target="_blank" rel="noopener noreferrer" className="inline-block text-primary" href="/docs/colors">
3236
Color System
3337
</Link>

0 commit comments

Comments
 (0)