Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Dark Mode Toggle #10

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Added Dark Mode Toggle #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0dea9c5
Added: Dark Toggle Button
tymnec Oct 14, 2023
3731a50
Added: Shadow Effect in Cards
tymnec Oct 14, 2023
5998a6c
Changed: Figure Background In Light Mode
tymnec Oct 14, 2023
2a13e0e
Added: Dark Mode Effect in Announcements
tymnec Oct 14, 2023
340355b
Added: Dark Mode Effect in Courses Section
tymnec Oct 14, 2023
cf0338d
Clubs - Text Palette Support For Light Mode
tymnec Oct 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions app/announcements/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,21 @@ export default async function AnnouncementsPage() {
<ul>
{Array.from(groupedAnnouncements).map(
([dateKey, announcementForDate], index) => (
<li className="mb-6" key={index}>
<li className="mb-6 text-palette-900 dark:text-palette-100" key={index}>
<h4>
{dateKey.slice(0, 2)}
<sup>{dateKey.slice(2, 4)}</sup>
{dateKey.slice(4)}
</h4>

<ul className="text-palette-300 ml-4 sm:ml-6 md:ml-8">
<ul className="text-palette-800 dark:text-palette-300 ml-4 sm:ml-6 md:ml-8">
{announcementForDate.map((announcement, innerIndex) => (
<li className="list-disc mt-2" key={`${index}-${innerIndex}`}>
{announcement.subtitle ? (
<ul>
<li>
<a
className="hover:text-palette-100"
className="hover:text-palette-400 dark:hover:text-palette-100"
href={announcement.title_link}
target="_blank"
>
Expand All @@ -54,7 +54,7 @@ export default async function AnnouncementsPage() {
</li>
<li>
<a
className="hover:text-palette-100"
className="hover:text-palette-400 dark:hover:text-palette-100"
href={announcement.subtitle_link}
target="_blank"
>
Expand All @@ -64,7 +64,7 @@ export default async function AnnouncementsPage() {
</ul>
) : (
<a
className="hover:text-palette-100"
className="hover:text-palette-400 dark:hover:text-palette-100"
href={announcement.title_link}
target="_blank"
>
Expand Down
126 changes: 70 additions & 56 deletions app/breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,65 @@
'use client';
"use client";

import clsx from 'clsx';
import { signIn, signOut, useSession } from 'next-auth/react';
import Image from 'next/image';
import Link from 'next/link';
import { useSelectedLayoutSegments } from 'next/navigation';
import { Fragment, useState } from 'react';
import { BiBell } from 'react-icons/bi';
import { BsLink45Deg, BsPersonFill } from 'react-icons/bs';
import { TbLogout } from 'react-icons/tb';
import clsx from "clsx";
import { signIn, signOut, useSession } from "next-auth/react";
import Image from "next/image";
import Link from "next/link";
import { useSelectedLayoutSegments } from "next/navigation";
import { Fragment, useState } from "react";
import { BiBell } from "react-icons/bi";
import { BsLink45Deg, BsPersonFill } from "react-icons/bs";
import { TbLogout } from "react-icons/tb";

import ImageWithFallback from '@/components/fallback-image';
import ImageWithFallback from "@/components/fallback-image";
import DarkModeToggle from "@/components/dark-mode-toggle";

const capitalise = (text: string) => {
return text
.split(' ')
.split(" ")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
.join(" ");
};

const quickList = [
{
heading: 'Calendars',
heading: "Calendars",
items: [
{ name: 'Academic Calendar', link: '1iJ6BxMBIqZEfFMe9c4ocidcm_madI13U' },
{ name: 'Holidays', link: '1l5no5NR7uguRm7zXbpeIqbN9X9IiyDun' },
{ name: "Academic Calendar", link: "1iJ6BxMBIqZEfFMe9c4ocidcm_madI13U" },
{ name: "Holidays", link: "1l5no5NR7uguRm7zXbpeIqbN9X9IiyDun" },
],
},
{
heading: 'Syllabi',
heading: "Syllabi",
items: [
{ name: 'Civil Engineering', link: '16GZfj3pzUaiKMx-frey_K2dB2Oy6xe0d' },
{ name: 'Computer Science', link: '1sgjxNv4gf662kwbNeAGygPD49NvGQ2gL' },
{ name: "Civil Engineering", link: "16GZfj3pzUaiKMx-frey_K2dB2Oy6xe0d" },
{ name: "Computer Science", link: "1sgjxNv4gf662kwbNeAGygPD49NvGQ2gL" },
{
name: 'Electronics And Communication Engineering',
link: '1IUDACGOHCO3h-vhx-G8ofwrD3LUfqTP-',
name: "Electronics And Communication Engineering",
link: "1IUDACGOHCO3h-vhx-G8ofwrD3LUfqTP-",
},
{
name: 'Electrical Engineering',
link: '1m-xhRr2J-kK-5EUBeRj7M33ipndCfT_t',
name: "Electrical Engineering",
link: "1m-xhRr2J-kK-5EUBeRj7M33ipndCfT_t",
},
{
name: 'Information Technology',
link: '1hF5sqQb6ifLHcZrc2immFpSn6IoF35OD',
name: "Information Technology",
link: "1hF5sqQb6ifLHcZrc2immFpSn6IoF35OD",
},
{
name: 'Mechanical Engineering',
link: '1vvgCKCY8hTbHd4oFT51MRXdyYuT2lSLI',
name: "Mechanical Engineering",
link: "1vvgCKCY8hTbHd4oFT51MRXdyYuT2lSLI",
},
{
name: 'Production and Industrial Engineering',
link: '1l--XXOVAGTyhZYGxz_-G6RJT_Bq-FKY9',
name: "Production and Industrial Engineering",
link: "1l--XXOVAGTyhZYGxz_-G6RJT_Bq-FKY9",
},
],
},
];

export default function Breadcrumb() {
const segments = useSelectedLayoutSegments()
.filter((segment) => !(segment.startsWith('(') && segment.endsWith(')')))
.filter((segment) => !(segment.startsWith("(") && segment.endsWith(")")))
.map((segment) => decodeURIComponent(segment));

const [showQuickList, setShowQuickList] = useState(false);
Expand All @@ -68,18 +69,18 @@ export default function Breadcrumb() {
return (
<nav
aria-label="Breadcrumb"
className={clsx('mb-4 md:mb-8', 'bg-palette-700 py-2')}
className={clsx("mb-4 md:mb-8", "bg-palette-500 dark:bg-palette-700 py-2")}
>
<section className="container flex flex-wrap justify-between max-w-screen-lg md:text-[22px]">
<ol className="gap-2 inline-flex items-center justify-start">
<li className="sm:p-1 md:p-2">
<Link href="/">
<Image
className={clsx(
'h-7 w-7',
'sm:h-8 sm:w-8',
'md:h-9 md:w-9',
'rounded-full ring ring-palette-700 hover:ring-palette-200'
"h-7 w-7",
"sm:h-8 sm:w-8",
"md:h-9 md:w-9",
"rounded-full ring ring-palette-700 hover:ring-palette-200"
)}
height={34}
width={34}
Expand All @@ -94,11 +95,11 @@ export default function Breadcrumb() {
<span>➜</span>
<li
className={clsx(
'sm:p-1 md:p-2',
index === segments.length - 1 && 'font-bold'
"sm:p-1 md:p-2",
index === segments.length - 1 && "font-bold"
)}
>
<Link href={'/' + segments.slice(0, index + 1).join('/')}>
<Link href={"/" + segments.slice(0, index + 1).join("/")}>
<h3 className="mb-0">{capitalise(segment)}</h3>
</Link>
</li>
Expand All @@ -108,10 +109,23 @@ export default function Breadcrumb() {

<ol
className={clsx(
'sm:gap-1 md:gap-2',
'inline-flex items-center justify-end'
"sm:gap-1 md:gap-2",
"inline-flex items-center justify-end"
)}
>
<li className="p-1 relative">
<ol
className={clsx(
"sm:gap-1 md:gap-2",
"inline-flex items-center justify-end mt-2"
)}
>
<li>
<DarkModeToggle />
</li>
</ol>
</li>

<li
className="p-1 relative"
onMouseEnter={() => {
Expand All @@ -122,7 +136,7 @@ export default function Breadcrumb() {
}}
>
<BsLink45Deg
className={clsx('h-5 w-5', 'sm:h-6 sm:w-6', 'md:h-7 md:w-7')}
className={clsx("h-5 w-5", "sm:h-6 sm:w-6", "md:h-7 md:w-7")}
/>
{showQuickList && (
<nav className="absolute right-0 bg-palette-500 min-w-max mt-1 rounded-md shadow-lg">
Expand Down Expand Up @@ -170,25 +184,25 @@ export default function Breadcrumb() {
</li> */}

<li className="p-1">
{session && segments[0] == 'profile' ? (
{session && segments[0] == "profile" ? (
<TbLogout
className={clsx(
'hover:cursor-pointer',
'h-5 w-5',
'sm:h-6 sm:w-6',
'md:h-7 md:w-7'
"hover:cursor-pointer",
"h-5 w-5",
"sm:h-6 sm:w-6",
"md:h-7 md:w-7"
)}
onClick={() => signOut({ callbackUrl: '/' })}
onClick={() => signOut({ callbackUrl: "/" })}
title="Sign Out"
/>
) : session ? (
<Link href="/profile" title="Open Profile">
<ImageWithFallback
className={clsx(
'rounded-full',
'h-5 w-5',
'sm:h-6 sm:w-6',
'md:h-7 md:w-7'
"rounded-full",
"h-5 w-5",
"sm:h-6 sm:w-6",
"md:h-7 md:w-7"
)}
src={session.user?.image}
height={32}
Expand All @@ -199,12 +213,12 @@ export default function Breadcrumb() {
) : (
<BsPersonFill
className={clsx(
'hover:cursor-pointer',
'h-5 w-5',
'sm:h-6 sm:w-6',
'md:h-7 md:w-7'
"hover:cursor-pointer",
"h-5 w-5",
"sm:h-6 sm:w-6",
"md:h-7 md:w-7"
)}
onClick={() => signIn('google', { callbackUrl: '/profile' })}
onClick={() => signIn("google", { callbackUrl: "/profile" })}
title="Sign in using Google"
/>
)}
Expand Down
4 changes: 2 additions & 2 deletions app/clubs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const getCategorisedClubs = (
const filteredClubs = clubs.filter((club) => club.category === category);

if (filteredClubs.length === 0)
return <p>No club found for the {category} category</p>;
return <p className='text-red-400'>No club found for the {category} category</p>;

return filteredClubs.map((club, index) => (
<li key={index}>
Expand Down Expand Up @@ -63,7 +63,7 @@ export default async function ClubsPage() {
{clubCategories.map((category: ClubCategory, categoryIndex) => {
return (
<Fragment key={categoryIndex}>
<h2>{category}</h2>
<h2 className='text-palette-700 dark:text-palette-100'>{category}</h2>
<ol className="flex flex-row flex-wrap gap-2 sm:gap-4 mb-8">
{getCategorisedClubs(category, clubs)}
</ol>
Expand Down
10 changes: 5 additions & 5 deletions app/courses/(non-code)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default function CoursesPage() {
<>
<table className="w-full">
<tbody>
<tr className="flex flex-row justify-between gap-4">
<tr className="flex flex-row justify-between gap-4 text-palette-800 dark:text-palette-100">
<td className="border-none px-0">
<fieldset className="p-2 sm:p-3 md:p-4 border-2 rounded border-palette-400">
<legend className="px-2">Choose your branch</legend>
Expand Down Expand Up @@ -124,15 +124,15 @@ export default function CoursesPage() {

{!isLoading && !(branch && semester) && filteredCourses.length > 0 ? (
<>
{branch || semester ? <></> : <h2>All courses</h2>}
{branch ? <h2>All courses in the {branch} branch</h2> : <></>}
{semester ? <h2>All courses in semester {semester}</h2> : <></>}
{branch || semester ? <></> : <h2 className='text-palette-800 dark:text-palette-100'>All courses</h2>}
{branch ? <h2 className='text-palette-800 dark:text-palette-100'>All courses in the {branch} branch</h2> : <></>}
{semester ? <h2 className='text-palette-800 dark:text-palette-100'>All courses in semester {semester}</h2> : <></>}

<ul>
{filteredCourses.map((course) => {
return (
<Link href={`/courses/${course.code}`} key={course.code}>
<li className="list-disclosure-closed ml-4">
<li className="list-disclosure-closed ml-4 text-palette-800 dark:text-palette-100">
<h4>
{course.code}:{' '}
<span className="font-normal">{course.title}</span>
Expand Down
4 changes: 2 additions & 2 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function RootLayout({
return (
<html>
<head />
<body className="flex flex-col">
<body className="flex flex-col bg-palette-200 dark:bg-palette-900">
<noscript>You need to enable JavaScript to run this app</noscript>

<AuthProvider>
Expand All @@ -24,7 +24,7 @@ export default function RootLayout({
</section>
</AuthProvider>

<footer className="bg-palette-800 py-4 mt-8">
<footer className="bg-palette-700 dark:bg-palette-800 py-4 mt-8">
<section className="align-middle container flex flex-row flex-wrap justify-between max-w-screen-lg">
<ul className="gap-4 inline-flex flex-wrap">
<li>
Expand Down
10 changes: 5 additions & 5 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,11 @@ export default function HomePage() {
return (
<article className="my-auto">
<hgroup className="mb-12">
<h1 className="mb-6">
<h1 className="mb-6 text-palette-800 dark:text-palette-100">
<Balancer>NIT-KKR Student Support</Balancer>
</h1>

<p>
<p className='text-palette-600 dark:text-palette-200'>
Welcome! This project aims to enable an easier path to figuring your
way in this college! We have many more features planned that you can
find out about on our Discord server linked below.
Expand All @@ -59,7 +59,7 @@ export default function HomePage() {
<nav className="h-min">
<ol className="grid grid-cols-1 sm:grid-cols-6 grid-auto-rows gap-8">
<li
className={clsx('col-start-1 row-start-1 w-fit', 'sm:col-span-2')}
className={clsx('col-start-1 row-start-1 w-fit hover:shadow-lg shadow p-4 rounded-3xl', 'sm:col-span-2')}
>
<HomeCardsLayout
href="/announcements"
Expand All @@ -72,7 +72,7 @@ export default function HomePage() {

<li
className={clsx(
'col-start-1 row-start-2 w-fit',
'col-start-1 row-start-2 w-fit hover:shadow-lg shadow p-4 rounded-3xl',
'sm:col-span-2 sm:col-start-5 sm:row-start-1 sm:justify-self-end',
'md:col-start-3 md:row-start-1 md:justify-self-center'
)}
Expand All @@ -88,7 +88,7 @@ export default function HomePage() {

<li
className={clsx(
'col-start-1 row-start-3 w-fit',
'col-start-1 row-start-3 w-fit hover:shadow-lg shadow p-4 rounded-3xl',
'sm:col-span-2 sm:col-start-3 sm:row-start-2 sm:justify-self-center',
'md:col-start-5 md:row-start-1 md:justify-self-end'
)}
Expand Down
2 changes: 1 addition & 1 deletion components/chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function Chip({
'md:h-8 md:px-3 md:text-sm',
isSelected && 'bg-palette-500',
'border items-center rounded-full',
'text-palette-200 hover:bg-palette-500'
'text-palette-800 dark:text-palette-200 hover:bg-palette-500 hover:text-palette-100'
)}
disabled={disabled}
onClick={onClick}
Expand Down
Loading