Skip to content

Commit 55bbeac

Browse files
aadya284aadya284
committed
fix: resolve remaining light mode issues (page visibility, filter panel, footer styling)
1 parent 5c630ce commit 55bbeac

8 files changed

Lines changed: 220 additions & 72 deletions

File tree

‎app/[slug]/page.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@ import RecorderGradientIcon from "@/app/components/theme/Icon/recorderGradientIc
2121
import SEOComponent from "@/app/components/theme/SEOComponent/SEOComponent";
2222
import { detectBrowser } from "@/app/libs/helpers";
2323
import EdgeIcon from "@/app/components/theme/Icon/edgeIcon";
24+
import { useTheme } from "@/app/contexts/themeContext";
2425

2526
const Page = ({ params: { slug } }: { params: { slug: string } }) => {
2627
const [browser, setBrowser] = useState("chrome");
28+
const { isLightTheme } = useTheme();
2729

2830
useEffect(() => {
2931
setBrowser(detectBrowser());
@@ -56,11 +58,11 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
5658
ogDescription={meta_data?.og_description}
5759
ogImage={meta_data?.og_image}
5860
/>
59-
<div className="md:max-w-[1170px] mx-auto">
61+
<div className={`md:max-w-[1170px] mx-auto ${DevelopmentToolsStyles.pageContainer}`}>
6062
<div className="px-3 md:px-auto mx-auto">
6163
{/*Hero cta section */}
6264
<section className="md:pt-0 pt-9">
63-
<div className="bg-[#090B0B] text-white flex flex-col items-center justify-center pl-6 pr-4 mt-10 rounded-lg">
65+
<div className={`bg-[#090B0B] text-white flex flex-col items-center justify-center pl-6 pr-4 mt-10 rounded-lg ${DevelopmentToolsStyles.promoPanel}`}>
6466
<div className="w-full flex md:flex-row flex-col md:items-center items-start md:justify-between justify-start gap-8 md:py-4 py-8 md:px-7">
6567
{/* Left Section */}
6668
<div className="text-left flex-1">
@@ -169,7 +171,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
169171
</div>
170172
</section>
171173

172-
<div className="md:pb-[70px] md:pt-[30px] py-[50px]">
174+
<div className={`md:pb-[70px] md:pt-[30px] py-[50px] ${DevelopmentToolsStyles.contentWrapper}`}>
173175
{/* Heading section */}
174176
{hero_section && (
175177
<section>
@@ -209,7 +211,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
209211
{/* Tools Panel - 20% width, fixed */}
210212
{development_tools_list?.length > 0 && (
211213
<div className="md:w-1/4 md:sticky left-0 md:top-8 top-2 h-full overflow-y-auto flex flex-col">
212-
<div className="bg-[#FFFFFF1A] p-4 rounded-xl">
214+
<div className={DevelopmentToolsStyles.sidePanel}>
213215
<div className="flex items-center mb-6">
214216
<h2 className="text-xl font-bold text-gray-800">
215217
Other Tools
@@ -218,7 +220,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
218220
{development_tools_list?.map((tool: any, index: any) => (
219221
<Link key={index} href={tool?.url}>
220222
<div
221-
className={`p-3 mb-2 cursor-pointer rounded-xl border-[1px] border-transparent hover:border-1 hover:border-primary bg-black text-white hover:text-primary`}
223+
className={`p-3 mb-2 cursor-pointer rounded-xl border-[1px] border-transparent hover:border-1 hover:border-primary bg-black text-white hover:text-primary ${DevelopmentToolsStyles.sidePanelItem}`}
222224
>
223225
{tool?.tool}
224226
</div>
@@ -884,7 +886,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
884886

885887
{/* cta section */}
886888
<section>
887-
<div className="bg-[#090B0B] text-white flex flex-col items-center justify-center pl-6 pr-4 mt-10">
889+
<div className={`bg-[#090B0B] text-white flex flex-col items-center justify-center pl-6 pr-4 mt-10 ${DevelopmentToolsStyles.promoPanel}`}>
888890
<div className="w-full flex md:flex-row flex-col md:items-center items-start md:justify-between justify-start gap-8 md:py-4 py-8 md:px-7">
889891
{/* Left Section */}
890892
<div className="text-left flex-1">
@@ -933,7 +935,10 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
933935
"https://www.loom.com/share/beb5310bed634e4783d10becd4a291f2?sid=7bcb9a6f-0290-4d5b-9eb0-12ed04e9167e"
934936
}
935937
>
936-
<PlayIcon className="hover:text-primary" />
938+
<PlayIcon
939+
className={isLightTheme ? "text-[#111827] hover:text-primary" : "hover:text-primary"}
940+
arrowFill={isLightTheme ? "#ffffff" : "#000000"}
941+
/>
937942
</Link>
938943
</div>
939944
<p className="text-sm mt-2 text-white">

‎app/components/comparisonsComponent/comparisonsStyles.module.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@
2727
);
2828
}
2929

30+
:global([data-theme="light"]) .ctaCardGridBg {
31+
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
32+
border: 1px solid #e5e7eb;
33+
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06),
34+
inset 0 1px 0 rgba(255, 255, 255, 0.9);
35+
}
36+
3037
.collapse {
3138
:global(.ant-collapse) {
3239
background-color: transparent !important;

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -322,15 +322,22 @@ 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 bbFooterStatus">
326-
<iframe
327-
src={`https://status.betterbugs.io/badge?theme=${isLightTheme ? 'light' : 'dark'}`}
328-
width="200"
329-
height="30"
330-
frameBorder="0"
331-
scrolling="no"
332-
></iframe>
333-
</p>
325+
<Link
326+
href="https://status.betterbugs.io"
327+
target="_blank"
328+
rel="noopener noreferrer"
329+
className={`text-sm md:text-base font-normal cursor-pointer bbFooterStatus ${
330+
isLightTheme ? 'text-[#065f46]' : 'text-white'
331+
}`}
332+
>
333+
<span
334+
aria-hidden="true"
335+
className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-[#10b981] text-black text-xs font-bold"
336+
>
337+
✓
338+
</span>
339+
<span>All services are online</span>
340+
</Link>
334341
</div>
335342
</Col>
336343
</Row>

‎app/components/theme/Icon/playIcon.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import * as React from "react";
22

3-
const PlayIcon = (props: React.SVGProps<SVGSVGElement>) => (
3+
type PlayIconProps = React.SVGProps<SVGSVGElement> & {
4+
arrowFill?: string;
5+
};
6+
7+
const PlayIcon = ({ arrowFill = "black", ...props }: PlayIconProps) => (
48
<svg
59
width="50"
610
height="50"
@@ -12,7 +16,7 @@ const PlayIcon = (props: React.SVGProps<SVGSVGElement>) => (
1216
<rect width="50" height="50" rx="25" fill="currentColor" />
1317
<path
1418
d="M35.0117 22.9883C35.6419 23.418 35.9714 24.0052 36 24.75C35.9714 25.5234 35.6419 26.0964 35.0117 26.4688L22.6367 34.0312C21.9492 34.4609 21.2617 34.4896 20.5742 34.1172C19.8867 33.7161 19.5286 33.1146 19.5 32.3125V17.1875C19.5286 16.3854 19.8867 15.7839 20.5742 15.3828C21.2617 15.0104 21.9492 15.0247 22.6367 15.4258L35.0117 22.9883Z"
15-
fill="black"
19+
fill={arrowFill}
1620
/>
1721
</svg>
1822
);

‎app/developmentToolsStyles.module.scss‎

Lines changed: 70 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,14 @@
4545
}
4646
}
4747

48+
:global([data-theme="light"]) .pageContainer {
49+
color: #111827;
50+
}
51+
52+
:global([data-theme="light"]) .contentWrapper {
53+
color: #111827;
54+
}
55+
4856
:global([data-theme="light"]) .searchInput {
4957
input {
5058
background: #ffffff;
@@ -58,11 +66,42 @@
5866
}
5967
}
6068

69+
:global([data-theme="light"]) .promoPanel {
70+
background: #f9fafb;
71+
border: 1px solid #e5e7eb;
72+
color: #111827;
73+
}
74+
6175
:global([data-theme="light"]) .filterSidebar {
6276
background: #f9fafb;
6377
border: 1px solid #e5e7eb;
6478
}
6579

80+
:global([data-theme="light"]) .favoriteButton {
81+
background: #ffffff;
82+
border-color: #e5e7eb;
83+
color: #111827;
84+
85+
&:hover {
86+
background: #f3f4f6;
87+
border-color: #d1d5db;
88+
}
89+
90+
&[data-active="true"] {
91+
background: #e6f9f2;
92+
border-color: #10b981;
93+
color: #065f46;
94+
}
95+
}
96+
97+
:global([data-theme="light"]) .favoriteCount {
98+
color: #4b5563;
99+
}
100+
101+
:global([data-theme="light"]) .favoriteButton[data-active="true"] .favoriteCount {
102+
color: #065f46;
103+
}
104+
66105
:global([data-theme="light"]) .filterHeading {
67106
color: #111827;
68107
}
@@ -82,9 +121,9 @@
82121
}
83122

84123
&[data-active="true"] {
85-
background: #f3f4f6;
86-
border-color: #d1d5db;
87-
color: #111827;
124+
background: #e6f9f2;
125+
border-color: #10b981;
126+
color: #065f46;
88127
}
89128
}
90129

@@ -99,9 +138,9 @@
99138
}
100139

101140
&[data-active="true"] {
102-
background: #f3f4f6;
103-
border-color: #d1d5db;
104-
color: #111827;
141+
background: #e6f9f2;
142+
border-color: #10b981;
143+
color: #065f46;
105144
}
106145
}
107146

@@ -119,6 +158,25 @@
119158
}
120159
}
121160

161+
:global([data-theme="light"]) .sidePanel {
162+
background: #f9fafb;
163+
border: 1px solid #e5e7eb;
164+
border-radius: 0.75rem;
165+
color: #111827;
166+
padding: 1rem;
167+
}
168+
169+
:global([data-theme="light"]) .sidePanelItem {
170+
background: #ffffff;
171+
border-color: #e5e7eb;
172+
color: #111827;
173+
174+
&:hover {
175+
background: #f3f4f6;
176+
border-color: #10b981;
177+
}
178+
}
179+
122180
:global([data-theme="light"]) .toolCard {
123181
background: #ffffff;
124182
border: 1px solid #e5e7eb;
@@ -132,6 +190,12 @@
132190
color: #6b7280;
133191
}
134192

193+
:global([data-theme="light"]) .contentCardHoverEffect {
194+
&:hover {
195+
box-shadow: 2px 2px 4px rgba(16, 185, 129, 0.18);
196+
}
197+
}
198+
135199
// tab background color
136200
.tabBackgroundColor {
137201
background: linear-gradient(91.15deg, #11e498 11.3%, #05bae2 101.69%);

‎app/page.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ const Page = () => {
238238
ogDescription={SEO_META?.developmentTools?.description}
239239
ogImage={SEO_META?.developmentTools?.ogImage}
240240
/>
241-
<div className="max-w-[770px] mx-auto">
241+
<div className={`max-w-[770px] mx-auto ${DevelopmentToolsStyles.pageContainer}`}>
242242
<div className="px-3 md:px-auto mx-auto">
243243
<div className="flex flex-col justify-center items-center md:pb-[10px] md:pt-[70px] py-[50px]">
244244
<BBIcon />
@@ -280,7 +280,7 @@ const Page = () => {
280280
</div>
281281
</div>
282282

283-
<div className="max-w-[1170px] mx-auto md:my-[70px] my-[50px] px-4">
283+
<div className={`max-w-[1170px] mx-auto md:my-[70px] my-[50px] px-4 ${DevelopmentToolsStyles.contentWrapper}`}>
284284
<div className="flex flex-col md:flex-row gap-6">
285285
{/* Sidebar */}
286286
<aside
@@ -306,11 +306,12 @@ const Page = () => {
306306
<p className="text-xs text-white/60 mb-2">Your Tools</p>
307307
<button
308308
onClick={() => setShowFavoritesOnly(!showFavoritesOnly)}
309+
data-active={showFavoritesOnly}
309310
className={`w-full text-left px-3 py-2 rounded-lg border transition ${
310311
showFavoritesOnly
311312
? "bg-primary text-black font-bold border-primary"
312313
: "bg-black/40 text-white border-[#222] hover:bg-black/50"
313-
}`}
314+
} ${DevelopmentToolsStyles.favoriteButton}`}
314315
>
315316
<div className="flex items-center justify-between">
316317
<span className="text-sm flex items-center gap-2">
@@ -319,7 +320,7 @@ const Page = () => {
319320
</svg>
320321
Favorites
321322
</span>
322-
<span className={`text-xs ${showFavoritesOnly ? "text-black/80" : "text-white/60"}`}>
323+
<span className={`text-xs ${showFavoritesOnly ? "text-black/80" : "text-white/60"} ${DevelopmentToolsStyles.favoriteCount}`}>
323324
{favorites.length}
324325
</span>
325326
</div>
@@ -391,7 +392,7 @@ const Page = () => {
391392
<div className="flex items-center gap-2">
392393
{showFavoritesOnly && (
393394
<button
394-
className="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 hover:bg-white/20"
395+
className={`text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 hover:bg-white/20 ${DevelopmentToolsStyles.activeFilterPill}`}
395396
onClick={() => setShowFavoritesOnly(false)}
396397
title="Clear favorites filter"
397398
>
@@ -492,4 +493,4 @@ const Page = () => {
492493
);
493494
};
494495

495-
export default Page;
496+
export default Page;

0 commit comments

Comments
 (0)