Skip to content

Commit

Permalink
Remove All Dark Mode CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@highjun
highjun committed Nov 20, 2024
1 parent a643bd0 commit c783923
Show file tree
Hide file tree
Showing 11 changed files with 45 additions and 45 deletions.
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function RootLayout({
<body className={inter.className} suppressHydrationWarning={true}>
<NavBar/>
<main className={["relative min-h-screen w-full m-auto max-w-screen-xl px-4"
,"format format-sm sm:format-base md:format-lg lg:format-xl xl:format-2xl format-blue dark:format-invert"
,"format format-sm sm:format-base md:format-lg lg:format-xl xl:format-2xl format-blue"
].join(" ")}>
{children}
<TopButton />
Expand Down
10 changes: 5 additions & 5 deletions src/app/lectures/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ const Lecture: React.FC<LectureInfo> = (lecture) => (
<span className="text-3xl font-bold text-white text-center">{lecture.name}</span>
</div>
<div className="self-center sm:self-auto lg:items-start flex-auto flex flex-col gap-1">
<h3 className="text-lg font-semibold leading-8 tracking-tight text-gray-900 dark:text-white">
<h3 className="text-lg font-semibold leading-8 tracking-tight text-gray-900">
{`${lecture.name} - ${lecture.code}`}
</h3>
<p className="text-base leading-7 text-gray-400 dark:text-gray-500">{lecture.audience}</p>
<p className="text-base leading-7 text-gray-600 dark:text-gray-300">
<p className="text-base leading-7 text-gray-400">{lecture.audience}</p>
<p className="text-base leading-7 text-gray-600">
{lecture.description}
</p>
<p className="mt-2 text-base leading-7 text-gray-600 dark:text-gray-300">
<p className="mt-2 text-base leading-7 text-gray-600">
To look for detailed contents we cover, please take a look at the syllabuses of previous years:
</p>
<ul className="max-w-md space-y-1 text-gray-500 list-disc list-inside dark:text-gray-400">
<ul className="max-w-md space-y-1 text-gray-500 list-disc list-inside">
{lecture.syllabuses.map((syllabus, idx) => (
<li key={idx}>
<Link href={syllabus.link} className="text-base text-blue-500 hover:underline">
Expand Down
12 changes: 6 additions & 6 deletions src/app/members/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ const CurrentMember: React.FC<MemberInfo> = (member) => (
height={400}
/>
<div className="mt-5 self-center sm:self-auto sm:items-start flex-auto max-w-lg flex flex-col items-center">
<h3 className="text-lg font-semibold leading-8 tracking-tight text-gray-900 dark:text-white">{member.name}</h3>
<p className="text-base leading-7 text-gray-600 dark:text-gray-300">{member.role}</p>
<h3 className="text-lg font-semibold leading-8 tracking-tight text-gray-900">{member.name}</h3>
<p className="text-base leading-7 text-gray-600">{member.role}</p>
{member.research_interests &&
<div className="text-center sm:text-start mt-4 text-base leading-7 text-gray-600">
<strong className="font-semibold text-gray-600 dark:text-white">Research Interest</strong>
<ul className="max-w-md space-y-1 text-gray-500 sm:list-disc sm:list-inside dark:text-gray-400">
<strong className="font-semibold text-gray-600">Research Interest</strong>
<ul className="max-w-md space-y-1 text-gray-500 sm:list-disc sm:list-inside">
{member.research_interests?.slice(0, 3).map((interest, idx) => (<li key={idx}>{interest}</li>))}
</ul>
</div>
Expand All @@ -39,9 +39,9 @@ const Alumni: React.FC<MemberInfo> = (member) => {
return (<div className="border-l-2 border-blue-800 px-2 flex flex-col sm:flex-row gap-2 sm:items-center">
<div className="flex flex-row items-center gap-2">
<EmailBtn email={member.email} />
<div className="text-lg font-semibold leading-8 tracking-tight text-gray-900 dark:text-gray-50">{member.name}</div>
<div className="text-lg font-semibold leading-8 tracking-tight text-gray-900">{member.name}</div>
</div>
<div className="text-base leading-7 text-gray-600 dark:text-gray-300">{member.affiliation ?? ""}</div>
<div className="text-base leading-7 text-gray-600">{member.affiliation ?? ""}</div>
</div>
)
}
Expand Down
22 changes: 11 additions & 11 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ const Announcement: React.FC<{
return (
<div className="not-format inline-flex gap-2 lg:flex-row justify-between items-center">
<Link href={announcement.path} className={"not-format no-underline hover:no-underline " + (announcement.pinned ? "" : "ml-6")}>
<h3 className="text-lg text-gray-700 dark:text-white line-clamp-1">
<h3 className="text-lg text-gray-700 line-clamp-1">
{announcement.pinned &&
<Icon icon="mdi:pin" className="float-left m-1 ml-0 h-5 w-5 text-gray-400 dark:text-gray-500" />
<Icon icon="mdi:pin" className="float-left m-1 ml-0 h-5 w-5 text-gray-400" />
}
{announcement.title}
</h3>
</Link>
<span className="hidden sm:block flex-shrink-0 text-base text-gray-600 dark:text-gray-300 font-light">{announcement.created}</span>
<span className="hidden sm:block flex-shrink-0 text-base text-gray-600 font-light">{announcement.created}</span>
</div>
);
};
Expand All @@ -31,9 +31,9 @@ const Feature: React.FC<{
description: string;
}> = ({ icon, title, description }) => (
<div className="mt-4">
<Icon icon={icon} className="mx-auto mb-4 w-12 h-12 text-blue-600 dark:text-blue-500" />
<h3 className="mb-2 text-xl font-bold dark:text-white text-black">{title}</h3>
<p className="m-auto max-w-96 mb-4 text-base text-gray-500 dark:text-gray-400">
<Icon icon={icon} className="mx-auto mb-4 w-12 h-12 text-blue-600" />
<h3 className="mb-2 text-xl font-bold text-black">{title}</h3>
<p className="m-auto max-w-96 mb-4 text-base text-gray-500">
{description}
</p>
</div>
Expand All @@ -48,12 +48,12 @@ const Home: React.FC = () => {
<h1 className="mb-4
text-4xl md:text-5xl xl:text-6xl
font-extrabold tracking-tight leading-none
text-black dark:text-white">
text-black">
Ubiquitous Computing to Support Wellbeing
</h1>
<p className="mb-6 lg:mb-8
md:text-lg lg:text-xl
text-gray-500 dark:text-gray-400">
text-gray-500">
Providing personalized wellbeing support through context-aware computing and machine learning, leveraging mobile, wearable, and IoT technologies.
</p>
</div>
Expand All @@ -72,12 +72,12 @@ const Home: React.FC = () => {
<h2 className="mb-4
text-2xl md:text-3xl xl:text-4xl
tracking-tight font-extrabold
text-black dark:text-white">
text-black">
Our Research Area
</h2>
<p className="mb-6 lg:mb-8
md:text-lg lg:text-xl
text-gray-500 dark:text-gray-400">
text-gray-500">
Our research focuses on Human-Computer Interaction (HCI) and Ubiquitous Computing (UbiComp).
<br />
Major research areas include (1) Cognitive and Affective Computing, (2) IoT Data Science and Platform Research, and (3) Digital Health and Wellbeing Interventions. We strive not only to make scholarly contributions but also to create a social impact by making our findings and services accessible.
Expand Down Expand Up @@ -106,7 +106,7 @@ const Home: React.FC = () => {
<h2 className="mb-4
text-2xl md:text-3xl xl:text-4xl
tracking-tight font-extrabold
text-black dark:text-white">
text-black">
Announcement
</h2>
<div className="mx-auto mt-8 flex flex-col
Expand Down
8 changes: 4 additions & 4 deletions src/app/publications/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import publications, { PublicationInfo, publicationYears } from "@data/publicati
const Publication: React.FC<PublicationInfo> = (publication) => {
return (
<div className="not-format w-full max-w-screen-xl flex flex-col">
<h3 className="text-lg font-semibold leading-8 tracking-tight text-gray-900 dark:text-white">{publication.title}</h3>
<p className="text-sm leading-7 text-gray-600 dark:text-gray-300">{publication.authors}</p>
<p className="italic text-base leading-7 text-gray-600 dark:text-gray-300">{publication.venue + (publication.published ? "" : " (To be appear)")}</p>
<h3 className="text-lg font-semibold leading-8 tracking-tight text-gray-900">{publication.title}</h3>
<p className="text-sm leading-7 text-gray-600">{publication.authors}</p>
<p className="italic text-base leading-7 text-gray-600">{publication.venue + (publication.published ? "" : " (To be appear)")}</p>
<div className="flex mt-1">
{[[publication.supplementary.paper, "paper", "blue"],
[publication.supplementary.slide, "slide", "yellow"],
[publication.supplementary.code, "code", "gray"],
[publication.supplementary.video, "video", "red"]].map(([link, type, color]) => (
link && <Link href={link} newpage key={type} className={`bg-${color}-100 text-${color}-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-${color}-900 dark:text-${color}-300`}>
link && <Link href={link} newpage key={type} className={`bg-${color}-100 text-${color}-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded`}>
{type}
</Link>
))}
Expand Down
6 changes: 3 additions & 3 deletions src/components/EmailBtn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const EmailBtn: React.FC<{
}

const SuccessToast = () => (
<div className="z-10 flex items-center w-full max-w-xs p-2 mb-4 text-gray-700 bg-green-50 rounded-lg shadow dark:text-gray-200 dark:bg-green-900" role="alert">
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
<div className="z-10 flex items-center w-full max-w-xs p-2 mb-4 text-gray-700 bg-green-50 rounded-lg shadow" role="alert">
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg">
<Icon icon="mdi:check-bold" className="w-5 h-5" />
<span className="sr-only">Check icon</span>
</div>
Expand All @@ -26,7 +26,7 @@ const EmailBtn: React.FC<{
)

return <button onClick={(event) => { onClick(event) }} className="relative group">
<Icon icon="mdi:email" className="w-7 h-7 hover:text-blue-600 text-gray-400 dark:text-gray-500" />
<Icon icon="mdi:email" className="w-7 h-7 hover:text-blue-600 text-gray-400" />
<span className="sr-only">email</span>
<div className="absolute top-0 left-6 w-44 z-50 hidden">
<SuccessToast />
Expand Down
14 changes: 7 additions & 7 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,23 @@ import KAISTSOC from "@/icons/KAIST SoC.svg";

const Footer: React.FC = () => {
return (
<footer className="bg-white dark:bg-gray-900 border-t m-4 dark:border-gray-500">
<footer className="bg-white border-t m-4">
<div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
<div className="flex flex-col md:flex-row justify-between items-center gap-8 flex-wrap">
<Logo />
<div className="flex flex-wrap flex-row justify-center items-center gap-6">
<div className="dark:bg-gray-50 p-3 rounded-sm">
<div className="p-3 rounded-sm">
<KAISTSOC height="40" />
</div>
<div className="dark:bg-gray-50 p-3 rounded-sm">
<div className="p-3 rounded-sm">
<HCIKAIST height="40" />
</div>
</div>
</div>
<hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
<div className="text-gray-500 text-sm dark:text-gray-400">Directed by Uichin Lee</div>
<div className="text-gray-500 text-sm dark:text-gray-400">N1 721, KAIST 291 Daehak-ro, Yuseong-gu, Daejeon 34141, Repulbic of Korea</div>
<span className="block text-sm text-gray-500 dark:text-gray-400">© 2024 Interactive Computing Lab. All Rights Reserved.</span>
<hr className="my-6 border-gray-200 sm:mx-auto lg:my-8" />
<div className="text-gray-500 text-sm">Directed by Uichin Lee</div>
<div className="text-gray-500 text-sm">N1 721, KAIST 291 Daehak-ro, Yuseong-gu, Daejeon 34141, Repulbic of Korea</div>
<span className="block text-sm text-gray-500">© 2024 Interactive Computing Lab. All Rights Reserved.</span>
</div>
</footer>
)
Expand Down
2 changes: 1 addition & 1 deletion src/components/IconLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const IconLink: React.FC<{
const icon = meta[name] ?? { name: "mdi:unknown", alt: "unknown" };
return <Link href={href} className='relative group'>
<span className="sr-only">{icon.alt}</span>
<Icon icon={icon.name} className="w-8 h-8 hover:text-blue-600 text-gray-400 dark:text-gray-500" />
<Icon icon={icon.name} className="w-8 h-8 hover:text-blue-600 text-gray-400" />
<div className="text-nowrap absolute bg-gray-900 text-white p-2 rounded-lg transition-opacity duration-300 z-50 text-xs invisible group-hover:visible">
{icon.alt}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Logo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const Logo: React.FC = () => {
<path d="M32.1908 5.80126H37.071C38.6881 5.80126 39.9952 4.5 39.9952 2.90063C39.9952 1.30126 38.6834 0 37.071 0H32.1908C25.1974 0 19.511 5.64038 19.511 12.5773V17.418C19.511 19.9164 20.2695 22.235 21.5432 24.194H12.6798C11.6017 24.194 10.7287 23.3233 10.7287 22.2587V14.9054C13.5814 13.7555 15.6088 10.9826 15.6088 7.74131C15.6088 3.47318 12.1073 0 7.80441 0C3.50149 0 0 3.47318 0 7.74131C0 10.9826 2.02266 13.7555 4.88014 14.9054V22.2587C4.88014 26.5268 8.38163 30 12.6846 30H37.0757C38.6929 30 40 28.6987 40 27.0994C40 25.5 38.6881 24.1987 37.0757 24.1987H32.1956C28.4317 24.1987 25.3643 21.1561 25.3643 17.4227V12.582C25.3643 8.84859 28.4317 5.806 32.1956 5.806L32.1908 5.80126ZM7.79964 9.67666C6.72153 9.67666 5.84854 8.80598 5.84854 7.74131C5.84854 6.67665 6.7263 5.806 7.79964 5.806C8.87299 5.806 9.75075 6.67665 9.75075 7.74131C9.75075 8.80598 8.87299 9.67666 7.79964 9.67666Z" fill="currentColor"/>
</svg>
<div className="flex flex-col items-start">
<span className="text-lg tracking-tight leading-5 font-semibold whitespace-nowrap dark:text-white">
<span className="text-lg tracking-tight leading-5 font-semibold whitespace-nowrap">
Interactive Computing
<br/>
Laboratory
Expand Down
10 changes: 5 additions & 5 deletions src/components/NavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ const Menu: React.FC<{
isActive: boolean;
}> = ({ name, link, isActive }) => (
<Link href={link ?? `/${name}`} className={
isActive ? "capitalize block py-2 px-3 text-white bg-blue-700 rounded lg:bg-transparent lg:text-blue-700 lg:p-0 dark:text-white lg:dark:text-blue-500 flex"
: "capitalize block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 lg:p-0 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent flex"
isActive ? "capitalize block py-2 px-3 text-white bg-blue-700 rounded lg:bg-transparent lg:text-blue-700 lg:p-0 flex"
: "capitalize block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-700 lg:p-0 flex"
}>
{name}
{link !== undefined ?
Expand All @@ -37,7 +37,7 @@ const IconButton: React.FC<{
onClick: () => void;
altText: string;
}> = ({ children, onClick, altText }) => (
<button onClick={onClick} type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 lg:hidden">
<button onClick={onClick} type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 lg:hidden">
<span className="sr-only">{altText}</span>
{children ?? null}
</button>
Expand All @@ -49,7 +49,7 @@ const NavBar: React.FC = () => {
const [yPosition, _] = useYPosition();

return (
<nav className={"sticky top-0 bg-white border-gray-200 dark:bg-gray-900 z-[999]" + (yPosition > 0 ? " shadow-md" : "")}>
<nav className={"sticky top-0 bg-white border-gray-200 z-[999]" + (yPosition > 0 ? " shadow-md" : "")}>
<div className="relative max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
{/* TODO: Logo Change*/}
<Logo />
Expand All @@ -59,7 +59,7 @@ const NavBar: React.FC = () => {
</svg>
</IconButton>
<div className={"w-full lg:flex lg:flex-row lg:items-center lg:gap-4 lg:w-auto lg:top-0 lg:p-0 lg:static " + (navOpened ? "block absolute top-14 left-0 z-10 px-4" : "hidden")}>
<ul className="font-medium flex flex-col p-4 lg:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 lg:flex-row lg:space-x-8 rtl:space-x-reverse lg:mt-0 lg:border-0 lg:bg-white dark:bg-gray-800 lg:dark:bg-gray-900 dark:border-gray-700">
<ul className="font-medium flex flex-col p-4 lg:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 lg:flex-row lg:space-x-8 rtl:space-x-reverse lg:mt-0 lg:border-0 lg:bg-white">
{navs.map((nav) => (
<li key={nav.name}>
<Menu name={nav.name} link={nav.link} isActive={currentPath === nav.link} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/TopButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const TopButton = () => {
onClick={scrollToTop}
className={[
'z-50 fixed bottom-5 right-5',
'bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
'bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300',
'font-medium rounded-full text-sm p-4 text-center inline-flex items-center',
'hidden xl:block'
].join(' ')}
Expand Down

0 comments on commit c783923

Please sign in to comment.