Skip to content

Commit a255156

Browse files
0tuedon0tuedon
committed
feat: dark mode for search page
1 parent 33e4114 commit a255156

30 files changed

+207
-172
lines changed

‎src/app/(explore)/[...slug]/page.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -106,11 +106,11 @@ const page = ({ params }: { params: { slug: string[] } }) => {
106106
<h3 className='text-xl 2xl:text-2xl font-medium pt-6 md:pt-3'>{metadata?.title ?? slug[slug.length - 1]}</h3>
107107
{isRoot && metadata?.website ? (
108108
<div className='flex gap-1 items-center pt-3 md:pt-6'>
109-
<WorldIcon className='w-[18px] md:w-[20px] dark:text-gray-custom-100' />
109+
<WorldIcon className='w-[18px] md:w-[20px]' />
110110
<Link
111111
href={metadata?.website ?? ""}
112112
target='_blank'
113-
className='text-xs md:text-sm xl:text-base leading-[17.6px] font-medium text-black dark:text-gray-custom-100 underline text-wrap break-words line-clamp-1'
113+
className='text-xs md:text-sm xl:text-base leading-[17.6px] font-medium text-black underline text-wrap break-words line-clamp-1'
114114
>
115115
{metadata.website ?? ""}
116116
</Link>
@@ -155,7 +155,7 @@ const page = ({ params }: { params: { slug: string[] } }) => {
155155
href={`/${[...slug, value.route].join("/")}`}
156156
className='flex capitalize cursor-pointer border max-w-[100%]
157157
border-gray-custom-1200 dark:border-gray-custom-1800 rounded-[5px] justify-between items-center
158-
text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100 dark:text-gray-custom-100'
158+
text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100 dark:text-black'
159159
>
160160
<span className='text-wrap break-words max-w-[80%]'>{value.title}</span>
161161
<span>{value.count}</span>

‎src/app/about/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import CustomBorder from "@/components/svgs/CustomBorder";
1313
const page = () => {
1414
return (
1515
<main className='flex flex-col items-center justify-center w-full'>
16-
<Wrapper className='text-black flex flex-col max-sm:px-3 dark:text-gray-custom-100'>
16+
<Wrapper className='text-black flex flex-col max-sm:px-3 '>
1717
<div className='text-center py-10 md:py-[104px] flex flex-col items-center justify-center'>
1818
<h1 className='text-[40px] leading-[48px] font-medium md:text-6xl 2xl:text-7xl'>What Is Bitcoin Transcripts?</h1>
1919
<p className='text-base md:text-xl 2xl:text-2xl 2xl:leading-[33.84px] md:max-w-[1050px] max-w-[1195px] pt-10 md:pt-12 2xl:pt-14 text-center w-full'>

‎src/app/globals.css

+34-3
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,34 @@
3434
--basic-mono-font: basic-mono;
3535
--header-height: 86px;
3636
--stroke: #bfbfbf;
37-
--primary-text: #292929;
37+
--primary-text-light-1: #292929;
38+
--primary-background:#FAFAFA;
39+
--primary-text-secondary:#000;
3840
--accent: #F7931A;
3941
}
4042

43+
.dark {
44+
--primary-text-light-1: #636366;
45+
--primary-background:#141414;
46+
--primary-text-secondary:#FAFAFA;
47+
}
48+
49+
input:-webkit-autofill,
50+
input:-webkit-autofill:hover,
51+
input:-webkit-autofill:focus,
52+
input:-webkit-autofill:active{
53+
-webkit-box-shadow: 0 0 0 30px white inset !important;
54+
border-radius: 14px;
55+
}
56+
.dark{
57+
input:-webkit-autofill,
58+
input:-webkit-autofill:hover,
59+
input:-webkit-autofill:focus,
60+
input:-webkit-autofill:active{
61+
-webkit-box-shadow: 0 0 0 30px #282828 inset !important;
62+
border-radius: 20px ;
63+
}
64+
}
4165
/* @media (prefers-color-scheme: dark) {
4266
:root {
4367
--foreground-rgb: 255, 255, 255;
@@ -95,6 +119,13 @@ body {
95119
z-index: -1;
96120
}
97121

122+
.dark{
123+
.selection-box::before {
124+
background-color: #141414;
125+
126+
}
127+
}
128+
98129
/* styling for non-interactive body
99130
this is a hack to make the body non-interactive
100131
IMPORTANT: elements oustide the element with data-freeze-body that needs interactivity must have the class "pointer-events-auto" else it will be frozen too */
@@ -150,7 +181,7 @@ body:has([data-freeze-body="true"]) {
150181
#main:has(form[data-input-focus="true"]) .navBar {
151182
display: none !important;
152183
}
153-
184+
154185
.popout {
155186
position: absolute;
156187
width: 100vw;
@@ -175,4 +206,4 @@ body:has([data-freeze-body="true"]) {
175206
opacity: 1;
176207
transform: translateY(0) scale(1);
177208
}
178-
}
209+
}

‎src/app/search/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const SearchPage = () => {
2222
if (isLoading) {
2323
return (
2424
<div className="mt-4">
25-
<SkeletonResults count={4} />;
25+
<SkeletonResults count={4} />
2626
</div>
2727
);
2828
}

‎src/components/common/Pill.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,20 @@ const Pill = (props: PillProps) => {
3131
};
3232

3333
const PillActionContainer = (props: React.PropsWithChildren<PillProps>) => {
34-
const selectedPillClass = `data-[selected=true]:bg-orange-custom-100 data-[selected=true]:text-gray-custom-100`
34+
const selectedPillClass = `data-[selected=true]:bg-orange-custom-100 data-[selected=true]:text-gray-custom-100 dark:data-[selected=true]:bg-orange-custom-100 dark:data-[selected=true]:text-black`
3535
const animationClass = `transition-all duration-300 `
3636
const prop = {
3737
"data-selected": Boolean(props.isSelected),
38-
className: twMerge(selectedPillClass, animationClass, "max-content py-[4px] px-[6px] md:px-4 rounded-[5px] bg-gray-custom-700 hover:bg-gray-custom-600 hover:text-gray-custom-100 max-md:leading-[100%] cursor-pointer"),
38+
className: twMerge(selectedPillClass, animationClass,
39+
"max-content py-[4px] px-[6px] md:px-4 rounded-[5px] bg-gray-custom-700 hover:bg-gray-custom-600 hover:text-gray-custom-100 dark:bg-gray-custom-2100 dark:hover:bg-gray-custom-1800 dark:hover:text-black max-md:leading-[100%] cursor-pointer"),
3940
};
4041

4142
const defaultOnClick = (e: React.MouseEvent) => {e.stopPropagation()}
4243
if (props.kind === "button") {
4344
const handleClick = (e: React.MouseEvent) => {
4445
e.preventDefault();
4546
defaultOnClick(e);
46-
props.onClick
47+
props.onClick
4748
? props.onClick(e)
4849
: props.toggleFilter({ filterType: props.type, filterValue: props.value });
4950
}
@@ -53,7 +54,7 @@ const PillActionContainer = (props: React.PropsWithChildren<PillProps>) => {
5354
</button>
5455
)
5556
}
56-
57+
5758
return (
5859
<Link href={props.slug || ""} {...prop} onClick={defaultOnClick} prefetch={false}>
5960
{props.children}

‎src/components/common/TranscriptDetailsCard.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,21 @@ const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent
3333
}
3434

3535
return (
36-
<div className='border border-gray-custom-1200 rounded-lg p-4 md:p-5 2xl:p-6 flex flex-col gap-3 md:gap-4'>
36+
<div className='border border-gray-custom-1200 dark:border-gray-custom-1800 rounded-lg p-4 md:p-5 2xl:p-6 flex flex-col gap-3 md:gap-4'>
3737
<section className='flex md:flex-row flex-col justify-between gap-2 w-full'>
3838
<div className='flex flex-col gap-2 w-full'>
3939
{breadCrumbsComponent}
4040
<a
4141
href={`${languageURL}`}
42-
className='font-bold text-base leading-[21.86px] md:text-xl 2xl:text-[22.5px] md:leading-[30px] text-orange-custom-100 md:text-black dark:text-gray-custom-100'
42+
className='font-bold text-base leading-[21.86px] md:text-xl 2xl:text-[22.5px] md:leading-[30px] text-orange-custom-100 md:text-black'
4343
>
4444
{title}
4545
</a>
4646
</div>
4747
{date && (
4848
<div className='md:self-start flex gap-2 items-center shrink-0'>
49-
<CalendarIcon className='w-[18px] md:w-[20px]' />
50-
<p className='text-xs md:text-sm 2xl:text-base leading-[17.6px] font-medium text-gray-custom-800'>{formatDate(date!)}</p>
49+
<CalendarIcon className='w-[18px] md:w-[20px] dark:text-gray-custom-600' />
50+
<p className='text-xs md:text-sm 2xl:text-base leading-[17.6px] font-medium text-gray-custom-800 dark:text-gray-custom-600'>{formatDate(date!)}</p>
5151
</div>
5252
)}
5353
</section>
@@ -57,7 +57,7 @@ const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent
5757
<section className='flex gap-2'>
5858
<>
5959
<span>
60-
<MicIcon className='w-5 md:w-6 dark:text-gray-custom-100' />
60+
<MicIcon className='w-5 md:w-6 ' />
6161
</span>
6262
<div className='flex gap-[9px] flex-wrap'>
6363
<div className='flex flex-wrap gap-[9px] text-xs md:text-sm 2xl:text-base'>
@@ -89,7 +89,7 @@ const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent
8989
))}
9090

9191
{calculateRemaining(tagsDetailed) === 0 ? null : (
92-
<p className='py-[2px] px-5 rounded-[5px] bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-md:leading-[100%]'>
92+
<p className='py-[2px] px-5 rounded-[5px] dark:bg-gray-custom-2100 dark:hover:bg-gray-custom-1800 dark:hover:text-black bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-md:leading-[100%]'>
9393
+ {calculateRemaining(tagsDetailed)} more
9494
</p>
9595
)}
@@ -102,7 +102,7 @@ const TranscriptDetailsCard = ({ data, pillCountLimit = 3, breadCrumbsComponent
102102

103103
{summary || body ? (
104104
<section>
105-
<p className='text-sm md:text 2xl:text-base text-custom-black-custom-300 2xl:leading-[25px] line-clamp-3' style={{"wordBreak": "break-word"}}>{summary ? summary : body}</p>
105+
<p className='text-sm md:text 2xl:text-base text-custom-black-custom-300 dark:text-black 2xl:leading-[25px] line-clamp-3' style={{"wordBreak": "break-word"}}>{summary ? summary : body}</p>
106106
</section>
107107
) : null}
108108
</div>

‎src/components/common/TranscriptMetadataCard.tsx

+12-8
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ import { createSlug, FieldCountItem } from "@/utils";
1111
import AiGeneratedIcon from "../svgs/AIGeneratedIcon";
1212
import { format, isDate } from "date-fns";
1313
import Pill from "./Pill";
14+
import EyeClose from "../svgs/EyeClose";
15+
import EyeOpen from "../svgs/EyeOpen";
16+
import { getIsolatedFacetLink } from "@/service/URLManager/helper";
17+
import PencilIcon from "../svgs/PencilIcon";
1418
interface ITranscriptMetadataComponent {
1519
title: string;
1620
date: string | Date;
@@ -32,34 +36,34 @@ const TranscriptMetadataComponent = ({
3236
setShowDetail((prev) => !prev);
3337
};
3438

35-
39+
3640
const convertedDate = date ? new Date(date) : false
37-
41+
3842
const formattedDate = isDate(convertedDate) ? format(convertedDate, "d MMMM, yyyy") : "";
3943

4044

4145
return (
42-
<div className="border flex text-black dark:text-gray-custom-100 flex-col rounded-2xl p-4 md:p-5 2xl:p-6 gap-4 w-full border-gray-custom-1200 dark:border-gray-custom-1800">
46+
<div className="border flex text-black flex-col rounded-2xl p-4 md:p-5 2xl:p-6 gap-4 w-full border-gray-custom-1200 dark:border-gray-custom-1800">
4347
<div className="flex flex-col md:flex-row flex-wrap gap-4 justify-between ">
4448
<h4 className="text-orange-custom-100 text-xl font-bold md:text-2xl 2xl:text-[2rem]">
4549
{title}
4650
</h4>
4751
<button
4852
onClick={handleShowDetail}
49-
className="text-black dark:text-gray-custom-100
53+
className="text-black
5054
text-sm lg:text-base gap-1 py-1.5 2xl:py-2 px-5 flex items-center border
5155
w-[149px] md:w-[154px] rounded-lg border-gray-custom-1100 whitespace-nowrap"
5256
>
5357
{showDetail ? (
5458
<>
55-
<EyeClose className="w-5 dark:text-gray-custom-100" />
59+
<EyeClose className="w-5" />
5660
<span className="font-medium text-sm 2xl:text-base">
5761
Hide Details{" "}
5862
</span>
5963
</>
6064
) : (
6165
<>
62-
<EyeOpen className="w-5 dark:text-gray-custom-100" />
66+
<EyeOpen className="w-5" />
6367
<span className="font-medium text-sm 2xl:text-base">
6468
Show Details
6569
</span>
@@ -101,7 +105,7 @@ const TranscriptMetadataComponent = ({
101105
{topics && topics.length > 0 ? (
102106
topics.map((topic) => (
103107
<Pill key={topic.slug} kind="link" name={topic.name} slug={getIsolatedFacetLink({filter_field: "tags", filter_value: topic.slug})} />
104-
)):
108+
))):
105109
<p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
106110
}
107111
</div>
@@ -120,7 +124,7 @@ const TranscriptMetadataComponent = ({
120124
{speakers && speakers.length > 0 ? (
121125
speakers.map((speaker) => (
122126
<Pill key={speaker} kind="link" name={speaker} slug={getIsolatedFacetLink({filter_field: "authors", filter_value: speaker})} />
123-
)):
127+
))):
124128
<p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
125129
}
126130
</div>

‎src/components/explore/AlphabetNavigation.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const AlphabetNavigation = ({ currentGroup, groupedData }: IAlphabetNavigation)
1212
return (
1313
<div
1414
className={
15-
"grid grid-cols-5 p-5 gap-4 lg:p-6 2xl:gap-6 border border-gray-custom-1200 rounded-md"
15+
"grid grid-cols-5 p-5 gap-4 lg:p-6 2xl:gap-6 border border-gray-custom-1200 dark:border-gray-custom-1800 rounded-md"
1616
}
1717
>
1818
{groupedData.map((char) =>

‎src/components/explore/GroupedTranscriptContent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const GroupedTranscriptContent = ({
3737
dataByHeading?.nested?.length === 0 && "hidden",
3838
)}
3939
>
40-
<h4 className="font-bold text-2xl capitalize">{topicsByAlphabet[0]}</h4>
40+
<h4 className="font-bold text-2xl capitalize">{dataByHeading.name}</h4>
4141
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
4242
{dataByHeading.nested &&
4343
dataByHeading.nested.map((topic, i) => (

‎src/components/explore/NavigationByWords.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const NavigationByWords = ({
4646
{screen === "desktop" && (
4747
<div
4848
className={twMerge(
49-
" flex-col pt-1 px-5 pb-5 hidden lg:flex border max-h-[calc(95vh-var(--header-height))] overflow-auto scroller border-gray-custom-1200 rounded-md w-full min-w-[260px] 2xl:min-w-[354px] ",
49+
" flex-col pt-1 px-5 pb-5 hidden lg:flex border max-h-[calc(95vh-var(--header-height))] overflow-auto scroller border-gray-custom-1200 dark:border-gray-custom-1800 rounded-md w-full min-w-[260px] 2xl:min-w-[354px] ",
5050
className,
5151
)}
5252
>
@@ -75,11 +75,11 @@ const NavigationByWords = ({
7575
{" "}
7676
link group
7777
</a>
78-
<div className="selection-box pr-2 bg-orange-custom-800 py-2.5 px-4 rounded-md ">
78+
<div className="selection-box pr-2 bg-orange-custom-800 dark:bg-brown-custom-100 py-2.5 px-4 rounded-md ">
7979
<select
8080
onChange={onOptionsChange}
8181
ref={selectRef}
82-
className="pr-3 bg-orange-custom-800 w-full outline-none font-medium"
82+
className="pr-3 bg-orange-custom-800 dark:bg-brown-custom-100 w-full outline-none font-medium"
8383
>
8484
{navigationList.map((nav) => (
8585
<option key={nav.slug} value={nav.slug}>

‎src/components/explore/SingleTranscriptContent.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const SingleTranscriptContent = ({ count, slug, name, linkName }: SingleContent)
1010

1111
// unnecessary prefetch for links that leads to search page (waterfall requests in network with little gains)
1212
let shouldPrefetch = true
13-
13+
1414
switch (linkName) {
1515
case "sources":
1616
url = `/${slug}`;
@@ -35,7 +35,7 @@ const SingleTranscriptContent = ({ count, slug, name, linkName }: SingleContent)
3535
return (
3636
<Link
3737
href={url}
38-
className='flex capitalize cursor-pointer border max-w-[100%] border-gray-custom-1200 rounded-[5px] justify-between items-center text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100'
38+
className='flex capitalize cursor-pointer border max-w-[100%] border-gray-custom-1200 dark:border-gray-custom-1800 rounded-[5px] justify-between items-center text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100 dark:text-black'
3939
prefetch={shouldPrefetch}
4040
>
4141
<span className='text-wrap break-words max-w-[80%]'>{name}</span>

‎src/components/explore/TranscriptContentPage.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@ const TranscriptContentPage: FC<ITranscriptContentPage> = ({
8080
<div className="flex flex-col border-b border-b-gray-custom-1900 dark:border-b-gray-custom-1800 pb-6 lg:pb-10 gap-6 ">
8181
<BaseCrumbLists crumbsArray={allRoutes} />
8282
<div className="flex flex-col gap-1 lg:gap-4">
83-
<h3 className="text-xl 2xl:text-2xl font-medium dark:text-gray-custom-100">{header}</h3>
84-
<p className="hidden lg:inline-block text-sm lg:text-base 2xl:text-lg text-custom-black-custom-300 dark:text-gray-custom-100">
83+
<h3 className="text-xl 2xl:text-2xl font-medium">{header}</h3>
84+
<p className="hidden lg:inline-block text-sm lg:text-base 2xl:text-lg text-custom-black-custom-300 dark:text-black">
8585
{description}
8686
</p>
8787
<p className="inline-block lg:hidden text-sm lg:text-lg text-custom-black-custom-300">

0 commit comments

Comments
 (0)