Skip to content

Commit 5c630ce

Browse files
aadya284aadya284
committed
wip: theme fixes
1 parent cce6c56 commit 5c630ce

5 files changed

Lines changed: 121 additions & 28 deletions

File tree

‎app/components/layout/Header/headerStyles.module.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -111,10 +111,6 @@
111111
}
112112
}
113113

114-
:global([data-theme="light"]) .bbLogo {
115-
filter: brightness(0) saturate(100%);
116-
}
117-
118114
:global([data-theme="light"]) .getStartedButton {
119115
background: rgba(17, 24, 39, 0.88);
120116
border-color: rgba(17, 24, 39, 0.88);

‎app/components/layout/footer/footerComponent.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ const FooterComponent = () => {
126126

127127
return (
128128
<div className="max-w-[1170px] mx-auto">
129-
<footer className="md:container md:px-auto mx-auto border-t border-light-primary">
129+
<footer className="md:container md:px-auto mx-auto border-t border-light-primary bbFooter">
130130
<div className="py-20 lg:py-[100px] px-4 md:px-0">
131131
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-none lg:flex items-start justify-between lg:gap-5 md:gap-4 gap-7">
132132
<div className="grid">
@@ -274,7 +274,7 @@ const FooterComponent = () => {
274274
target="_blank"
275275
aria-label="LinkedIn"
276276
>
277-
<div className="w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer">
277+
<div className="w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon">
278278
<LinkedinIcon className="text-white/60 hover:text-white" />
279279
</div>
280280
</Link>
@@ -283,7 +283,7 @@ const FooterComponent = () => {
283283
target="_blank"
284284
aria-label="Twitter"
285285
>
286-
<div className="w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer">
286+
<div className="w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon">
287287
<TwitterIcon className="text-white/60 hover:text-white" />
288288
</div>
289289
</Link>
@@ -292,7 +292,7 @@ const FooterComponent = () => {
292292
target="_blank"
293293
aria-label="Instagram"
294294
>
295-
<div className="w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer">
295+
<div className="w-9 h-9 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon">
296296
<InstagramIcon className="text-white/60 hover:text-white" />
297297
</div>
298298
</Link>
@@ -301,7 +301,7 @@ const FooterComponent = () => {
301301
target="_blank"
302302
aria-label="LinkedIn"
303303
>
304-
<div className="w-10 h-10 p-2 rounded-xl flex items-center justify-center cursor-pointer">
304+
<div className="w-10 h-10 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon">
305305
<YouTubeIcon className="text-white/60 hover:text-white !w-12 !h-12" />
306306
</div>
307307
</Link>
@@ -310,7 +310,7 @@ const FooterComponent = () => {
310310
target="_blank"
311311
aria-label="Discord"
312312
>
313-
<div className="w-10 h-10 p-2 rounded-xl flex items-center justify-center cursor-pointer">
313+
<div className="w-10 h-10 p-2 rounded-xl flex items-center justify-center cursor-pointer bbFooterSocialIcon">
314314
<DiscordIcon className="text-white/60 hover:text-white !w-12 !h-12" />
315315
</div>
316316
</Link>
@@ -322,7 +322,7 @@ const FooterComponent = () => {
322322
<p className="text-sm text-white/70 pl-2 md:text-base font-normal cursor-pointer whitespace-nowrap md:mt-0 mt-1.5">
323323
© {new Date().getFullYear()}, All Rights Reserved
324324
</p>
325-
<p className="text-sm text-white/70 md:text-base font-normal cursor-pointer">
325+
<p className="text-sm text-white/70 md:text-base font-normal cursor-pointer bbFooterStatus">
326326
<iframe
327327
src={`https://status.betterbugs.io/badge?theme=${isLightTheme ? 'light' : 'dark'}`}
328328
width="200"

‎app/developmentToolsStyles.module.scss‎

Lines changed: 79 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,91 @@
4747

4848
:global([data-theme="light"]) .searchInput {
4949
input {
50-
border: 1px solid #000000;
51-
color: #000000;
50+
background: #ffffff;
51+
border: 1px solid #e5e7eb;
52+
color: #111827;
53+
opacity: 1;
5254

5355
&::placeholder {
54-
color: #00000099;
56+
color: #6b7280;
5557
}
5658
}
5759
}
5860

61+
:global([data-theme="light"]) .filterSidebar {
62+
background: #f9fafb;
63+
border: 1px solid #e5e7eb;
64+
}
65+
66+
:global([data-theme="light"]) .filterHeading {
67+
color: #111827;
68+
}
69+
70+
:global([data-theme="light"]) .filterSubLabel {
71+
color: #4b5563;
72+
}
73+
74+
:global([data-theme="light"]) .filterCategoryButton {
75+
background: #ffffff;
76+
border-color: #e5e7eb;
77+
color: #111827;
78+
79+
&:hover {
80+
background: #f6f7f8;
81+
border-color: #d1d5db;
82+
}
83+
84+
&[data-active="true"] {
85+
background: #f3f4f6;
86+
border-color: #d1d5db;
87+
color: #111827;
88+
}
89+
}
90+
91+
:global([data-theme="light"]) .filterBasisButton {
92+
background: #ffffff;
93+
border-color: #e5e7eb;
94+
color: #111827;
95+
96+
&:hover {
97+
background: #f6f7f8;
98+
border-color: #d1d5db;
99+
}
100+
101+
&[data-active="true"] {
102+
background: #f3f4f6;
103+
border-color: #d1d5db;
104+
color: #111827;
105+
}
106+
}
107+
108+
:global([data-theme="light"]) .showingCount {
109+
color: #4b5563;
110+
}
111+
112+
:global([data-theme="light"]) .activeFilterPill {
113+
background: #f3f4f6;
114+
border-color: #e5e7eb;
115+
color: #111827;
116+
117+
&:hover {
118+
background: #e5e7eb;
119+
}
120+
}
121+
122+
:global([data-theme="light"]) .toolCard {
123+
background: #ffffff;
124+
border: 1px solid #e5e7eb;
125+
}
126+
127+
:global([data-theme="light"]) .toolCardDescription {
128+
color: #4b5563;
129+
}
130+
131+
:global([data-theme="light"]) .toolCardMeta {
132+
color: #6b7280;
133+
}
134+
59135
// tab background color
60136
.tabBackgroundColor {
61137
background: linear-gradient(91.15deg, #11e498 11.3%, #05bae2 101.69%);

‎app/page.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -283,9 +283,11 @@ const Page = () => {
283283
<div className="max-w-[1170px] mx-auto md:my-[70px] my-[50px] px-4">
284284
<div className="flex flex-col md:flex-row gap-6">
285285
{/* Sidebar */}
286-
<aside className="w-full md:w-[260px] shrink-0 bg-white/5 rounded-xl p-4 h-fit md:sticky md:top-4 order-1 md:order-1">
286+
<aside
287+
className={`w-full md:w-[260px] shrink-0 bg-white/5 rounded-xl p-4 h-fit md:sticky md:top-4 order-1 md:order-1 ${DevelopmentToolsStyles.filterSidebar}`}
288+
>
287289
<div className="flex items-center justify-between mb-3">
288-
<h2 className="text-sm font-semibold text-white/90">Filters</h2>
290+
<h2 className={`text-sm font-semibold text-white/90 ${DevelopmentToolsStyles.filterHeading}`}>Filters</h2>
289291
{(selectedCategory || selectedBasis !== "All" || showFavoritesOnly) && (
290292
<button
291293
className="text-xs text-primary hover:underline"
@@ -326,17 +328,18 @@ const Page = () => {
326328

327329
{/* Category filter */}
328330
<div className="mb-4">
329-
<p className="text-xs text-white/60 mb-2">Categories</p>
331+
<p className={`text-xs text-white/60 mb-2 ${DevelopmentToolsStyles.filterSubLabel}`}>Categories</p>
330332
<div className="space-y-2 md:mt-2">
331333
{CATEGORY_GROUPS.map((cat) => (
332334
<button
333335
key={cat}
334336
onClick={() => setSelectedCategory((prev) => (prev === cat ? null : cat))}
337+
data-active={selectedCategory === cat}
335338
className={`w-full text-left px-3 py-2 rounded-lg border transition ${
336339
selectedCategory === cat
337340
? "bg-primary text-black font-bold border-primary"
338341
: "bg-black/40 text-white border-[#222] hover:bg-black/50"
339-
}`}
342+
} ${DevelopmentToolsStyles.filterCategoryButton}`}
340343
>
341344
<div className="flex items-center justify-between">
342345
<span className="text-sm flex items-center gap-2">
@@ -358,17 +361,18 @@ const Page = () => {
358361

359362
{/* Basis filter */}
360363
<div className="my-8">
361-
<p className="text-xs text-white/60 mb-2 md:mt-4">Filter by Type</p>
364+
<p className={`text-xs text-white/60 mb-2 md:mt-4 ${DevelopmentToolsStyles.filterSubLabel}`}>Filter by Type</p>
362365
<div className="flex flex-wrap gap-2 md:mt-2">
363366
{BASIS?.map((b) => (
364367
<button
365368
key={b}
366369
onClick={() => setSelectedBasis(b)}
370+
data-active={selectedBasis === b}
367371
className={`px-2.5 py-1.5 rounded-full text-xs border transition ${
368372
selectedBasis === b
369373
? "bg-primary text-black font-bold border-primary"
370374
: "bg-black/40 text-white border-[#222] hover:bg-black/50"
371-
}`}
375+
} ${DevelopmentToolsStyles.filterBasisButton}`}
372376
aria-pressed={selectedBasis === b}
373377
>
374378
<span className="flex items-center gap-1.5">
@@ -383,7 +387,7 @@ const Page = () => {
383387
{/* Main grid */}
384388
<main className="flex-1 order-2 md:order-2">
385389
<div className="flex items-center justify-between mb-4">
386-
<span className="text-xs text-white/60">Showing {filteredItems.length} tools</span>
390+
<span className={`text-xs text-white/60 ${DevelopmentToolsStyles.showingCount}`}>Showing {filteredItems.length} tools</span>
387391
<div className="flex items-center gap-2">
388392
{showFavoritesOnly && (
389393
<button
@@ -396,7 +400,7 @@ const Page = () => {
396400
)}
397401
{selectedCategory && (
398402
<button
399-
className="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 hover:bg-white/20"
403+
className={`text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 hover:bg-white/20 ${DevelopmentToolsStyles.activeFilterPill}`}
400404
onClick={() => setSelectedCategory(null)}
401405
title="Clear category filter"
402406
>
@@ -405,7 +409,7 @@ const Page = () => {
405409
)}
406410
{selectedBasis !== "All" && (
407411
<button
408-
className="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 hover:bg-white/20"
412+
className={`text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 hover:bg-white/20 ${DevelopmentToolsStyles.activeFilterPill}`}
409413
onClick={() => setSelectedBasis("All")}
410414
title="Clear type filter"
411415
>
@@ -425,7 +429,7 @@ const Page = () => {
425429
<Link
426430
key={index}
427431
href={`${item?.url}`}
428-
className={`bg-white/5 rounded-lg p-8 w-full ${DevelopmentToolsStyles.contentCardHoverEffect} group md:min-h-[160px] relative`}
432+
className={`bg-white/5 rounded-lg p-8 w-full ${DevelopmentToolsStyles.contentCardHoverEffect} ${DevelopmentToolsStyles.toolCard} group md:min-h-[160px] relative`}
429433
>
430434
<div className="flex justify-between items-start gap-2">
431435
<h3 className="text-lg font-semibold pr-6">{item?.title}</h3>
@@ -449,7 +453,7 @@ const Page = () => {
449453
</svg>
450454
</button>
451455
</div>
452-
<p className="text-white/70 group-hover:text-black/90 text-sm font-medium mt-1">
456+
<p className={`text-white/70 group-hover:text-black/90 text-sm font-medium mt-1 ${DevelopmentToolsStyles.toolCardDescription}`}>
453457
{(() => {
454458
let description = item?.description || "";
455459
let truncated =
@@ -476,7 +480,7 @@ const Page = () => {
476480
));
477481
})()}
478482
</p>
479-
<div className="mt-3 text-xs text-white/50">{item?.__group} • {item?.__basis}</div>
483+
<div className={`mt-3 text-xs text-white/50 ${DevelopmentToolsStyles.toolCardMeta}`}>{item?.__group} • {item?.__basis}</div>
480484
</Link>
481485
))}
482486
</div>

‎app/styles/global.scss‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,25 @@ html[data-theme="light"] .boxGradient {
7171
background: #f3f4f6;
7272
}
7373

74-
html[data-theme="light"] .bb-logo {
75-
filter: brightness(0) saturate(100%);
74+
html[data-theme="light"] .bbFooter {
75+
background: #f9fafb;
76+
border-color: #e5e7eb;
77+
}
78+
79+
html[data-theme="light"] .bbFooter .ant-row {
80+
border-color: #e5e7eb;
81+
}
82+
83+
html[data-theme="light"] .bbFooterSocialIcon {
84+
background: #ffffff;
85+
border: 1px solid #e5e7eb;
86+
}
87+
88+
html[data-theme="light"] .bbFooterStatus {
89+
background: #f3f4f6;
90+
border: 1px solid #e5e7eb;
91+
border-radius: 999px;
92+
padding: 2px 6px;
7693
}
7794

7895
h1,

0 commit comments

Comments
 (0)