Skip to content

Slight UI Redone #92

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

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

Slight UI Redone #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
def0fa6
Introducing the Best Calculator by Rhythm: https://redisitic.xyz
redisitic May 12, 2025
84aeef2
Redid the UI a bit, basically fixed the trashyness
redisitic May 12, 2025
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
20 changes: 10 additions & 10 deletions notes-aid/src/app/[year]/[branch]/[semester]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ const EngineeringCurriculum: React.FC = () => {
return (
<div className="min-h-screen bg-base-100">
<div className="w-full p-4 md:p-6">
<div className="max-w-full mx-auto bg-base-300 rounded-lg shadow-xs p-4 md:p-6">
<div className="max-w-full mx-auto bg-base-200 rounded-lg shadow-xs p-4 md:p-6">
<div className="mb-6 md:mb-8 text-center md:text-left">
<h1 className="text-lg md:text-2xl font-bold mb-2 text-base-content">
Engineering Curriculum of {branch.toUpperCase()} /{" "}
Expand Down Expand Up @@ -195,10 +195,10 @@ const EngineeringCurriculum: React.FC = () => {
firstModuleKey ? parseInt(firstModuleKey) : 1
)
}}
className={`p-4 rounded-4xl cursor-pointer transition-all flex-1 max-w-[120px] sm:max-w-[150px] md:max-w-none text-center
className={`p-4 hover:bg-base-300 rounded-4xl border-dashed cursor-pointer border border-neutral-800 rounded-[0.75rem] transition-all flex-1 max-w-[120px] sm:max-w-[150px] md:max-w-none text-center
${
selectedSubject === key
? "bg-neutral text-neutral-content border-white shadow-xl"
? "bg-base-300 text-base-content shadow-xl"
: "bg-base-200 text-base-content border-gray-200 shadow-sm"
}
`}
Expand All @@ -207,14 +207,14 @@ const EngineeringCurriculum: React.FC = () => {
<Icon
className={`w-6 h-6 ${
selectedSubject === key
? " text-neutral-content"
? " text-base-content"
: "text-base-content"
}`}
/>
<h3
className={`font-medium dark:text-base text-sm md:text-base ${
selectedSubject === key
? "text-neutral-content"
? "text-base-content"
: "text-base-content"
}`}
>
Expand All @@ -236,7 +236,7 @@ const EngineeringCurriculum: React.FC = () => {
</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 ">
<div className="space-y-3 border border-border p-4 rounded-lg">
<div className="space-y-3 border border-base-300 border-dashed p-8 rounded-lg">
<h2 className=" md:text-lg font-bold text-base-content">
Important Links
</h2>
Expand All @@ -249,7 +249,7 @@ const EngineeringCurriculum: React.FC = () => {
<a
href={pyq.url}
target="_blank"
className="btn inline-block px-4 py-2 mt-2 text-sm font-medium bg-neutral text-neutral-content btn-soft btn-neutral border-1 border-primary"
className="rounded-selector btn inline-block px-4 py-2 mt-2 text-sm font-medium bg-base-300 text-base-content btn-soft btn-neutral outline-[0rem] outline-dashed hover:outline-base-300 hover:outline-2 hover:duration-30 0 duration-300"
key={index}
>
{pyq.title}
Expand Down Expand Up @@ -287,18 +287,18 @@ const EngineeringCurriculum: React.FC = () => {

<button
onClick={handleResetProgress}
className="w-full px-4 py-2 text-sm font-medium text-warning-content bg-warning rounded-lg transition-colors duration-200 flex items-center justify-center gap-2"
className="w-full px-4 py-2 text-sm font-medium text-warning-content bg-warning rounded-lg transition-colors duration-200 flex items-center justify-center gap-2 hover:outline-warning hover:outline-[0.25rem]"
>
<RotateCcw className="w-4 h-4" />
Reset Progress
</button>
</div>

<div className="md:col-span-2 bg-base-200 text-base-content rounded-lg p-4 md:p-6 border border-border">
<div className="md:col-span-2 bg-base-200 text-base-content rounded-lg p-4 md:p-6 border-dashed border-base-300 border-[0.05rem]">
<h2 className="text-base md:text-lg font-bold mb-1 text-base-content">
{subjects[selectedSubject].name} - Module {selectedModule || 1}
</h2>
<p className=" text-red-500 mb-4">
<p className=" text-error-content mb-4">
These videos only serve as explanations for the college notes,
so please refer to the notes to study.
</p>
Expand Down
37 changes: 34 additions & 3 deletions notes-aid/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,42 @@ layer(base);
@plugin "daisyui" {
themes: all;
}

@custom-variant dark (&:is(.dark *));



@plugin "daisyui/theme" {
name: "ShadCN";
default: false;
prefersdark: false;
color-scheme: "dark";
--color-base-100: oklch(5% 0 0);
--color-base-200: oklch(0% 0 0);
--color-base-300: #27272a;
--color-base-content: oklch(100% 0 0);
--color-primary: oklch(100% 0 0);
--color-primary-content: oklch(0% 0 0);
--color-secondary: oklch(100% 0 0);
--color-secondary-content: oklch(0% 0 0);
--color-accent: oklch(100% 0 0);
--color-accent-content: oklch(0% 0 0);
--color-neutral: oklch(20% 0 0);
--color-neutral-content: oklch(100% 0 0);
--color-info: oklch(100% 0 0);
--color-info-content: oklch(0% 0 0);
--color-success: #24db6f;
--color-success-content: oklch(84% 0.238 128.85);
--color-warning: oklch(28% 0.066 53.813);
--color-warning-content: oklch(85% 0.199 91.936);
--color-error: oklch(25% 0.092 26.042);
--color-error-content: oklch(70% 0.191 22.216);
--radius-selector: 1rem;
--radius-field: 0.25rem;
--radius-box: 0.25rem;
--size-selector: 0.25rem;
--size-field: 0.21875rem;
--border: 0.5px;
--depth: 0;
--noise: 0;
}
.text-gray {
color: #C2C0B6;
}
Expand Down
14 changes: 9 additions & 5 deletions notes-aid/src/components/ModuleCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ interface ModuleCardProps {

const ModuleCard: React.FC<ModuleCardProps> = ({
module,
topics,
topics,
isActive,
onClick,
numberOfVideos,
Expand Down Expand Up @@ -52,21 +52,25 @@ const ModuleCard: React.FC<ModuleCardProps> = ({
<div
onClick={onClick}
className={`
bg-base-100
p-3
rounded-lg

transition-all
cursor-pointer
shadow-md
hover:shadow-2xl
border-[0.05rem]
border-base-200
border-dashed
hover:bg-base-300
${
isActive
? "border-blue-500 bg-base-100"
: "border-slate-200 bg-base-300"
? "border-base-300 bg-base-300"
: "border-base-100 bg-base-100"
}
`}
>
<div className="flex flex-col gap-2 ">
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<h3 className={` font-semibold text-base-content`}>
Expand Down
9 changes: 6 additions & 3 deletions notes-aid/src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,8 +287,12 @@ const Navbar = () => {
return null;
}

const handleBestCalc = () => {
window.location.href = "https://redisitic.xyz";
};

return (
<nav className="w-full py-4 px-6 border-b transition-colors duration-200 bg-base-300 ">
<nav className="w-full py-4 px-6 border-base-300 border-dashed border-b-[0.01rem] transition-colors duration-200 bg-base-200 ">
<div className="container mx-auto flex items-center justify-between">
<div className="flex items-center space-x-4">
<Link href="/">
Expand Down Expand Up @@ -408,8 +412,7 @@ const Navbar = () => {
</div>
)}
</div>


<button className="hidden" onClick={handleBestCalc}>Click this for the Best Calculator ever!!!</button>
<ThemeSwitcher/>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions notes-aid/src/components/ProgressBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ export default function ProgressBar({ total, completed }: ProgressBarProps) {
const percentage = total > 0 ? (completed / total) * 100 : 0;

return (
<div className="w-full bg-gray-200 rounded-full h-1 overflow-hidden">
<div className="w-full bg-base-300 rounded-full h-1 overflow-hidden">
<div
className="h-full bg-neutral bg-icons transition-all duration-500 range range-neutral"
className="h-full bg-success bg-icons transition-all duration-500 range range-neutral"
style={{ width: `${percentage}%` }}
/>
</div>
Expand Down
1 change: 1 addition & 0 deletions notes-aid/src/components/ThemeChanger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const ThemeSwitcher = () => {
const themes = [
"light",
"dark",
"ShadCN",
"cupcake",
"bumblebee",
"emerald",
Expand Down
23 changes: 15 additions & 8 deletions notes-aid/src/components/TopicList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,15 +74,15 @@ const TopicList: React.FC<TopicListProps> = ({
Study Materials for Module {moduleNumber}
</h5>
)}
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap gap-4">
{notesLink.map((note: NotesLink, noteIndex: number) => (
<React.Fragment key={`note-${noteIndex}`}>
<a
key={noteIndex}
href={note.url}
target="_blank"
rel="noopener noreferrer"
className="btn inline-flex items-center gap-2 px-4 py-2 bg-neutral text-neutral-content border-1 border-primary"
className="btn rounded-selector inline-flex items-center gap-2 px-4 py-5 duration-300 hover:duration-300 bg-base-300 text-base-content outline-dashed outline-0 hover:outline-2 outline-base-300"
>
<BookOpen className="w-4 h-4" />
{note.title}
Expand Down Expand Up @@ -130,16 +130,23 @@ const TopicList: React.FC<TopicListProps> = ({

return (
<div
key={index}
className="bg-base-100 rounded-lg border overflow-hidden"
>
key={index}
className={`rounded-lg overflow-hidden ${
openTopicIndex === index
? "border border-t-0 border-4 border-solid border-base-300"
: ""
} bg-base-100`}
>

<ProgressBar
total={topic.videos?.length ?? 0}
completed={completedTopics}
/>
<div
onClick={() => toggleTopic(index)}
className="p-3 cursor-pointer bg-base-300 transition-colors"
className={`p-3 cursor-pointer hover:bg-base-300 transition-colors ${
openTopicIndex === index ? "bg-base-300" : "bg-base-100"
}`}
>
<div className="flex items-start gap-3">
<div className="p-2 bg-base-100 rounded-sm">
Expand Down Expand Up @@ -170,8 +177,8 @@ const TopicList: React.FC<TopicListProps> = ({
>
<div className="p-3 pt-0">
{topic.videos && topic.videos.length > 0 ? (
<div className="mt-3 border-t dark:border-cardsBorder pt-3">
<h5 className="text-sm font-medium text-base-content mb-2">
<div className="dark:border-cardsBorder pt-3">
<h5 className="text-sm font-large font-bold my-2 text-base-content ml-2">
Lecture Videos
</h5>
<VideoAccordion
Expand Down
4 changes: 2 additions & 2 deletions notes-aid/src/components/Video.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function Video({

return (
<>
<div className="flex items-center gap-2 hover:bg-base-200 ">
<div className="flex items-center gap-2 hover:bg-base-300 ">
<button
onClick={() => {
updateVideoProgress(moduleKey, videoKey, topicKey);
Expand All @@ -66,7 +66,7 @@ function Video({

<div
onClick={() => toggleVideo(index)}
className="p-2 cursor-pointer hover:bg-base-200 flex justify-between items-center flex-1 gap-2"
className="p-2 cursor-pointer hover:bg-base-300 flex justify-between items-center flex-1 gap-2"
>
<span className="text-sm font-medium text-base-content">
{video.title}
Expand Down
2 changes: 1 addition & 1 deletion notes-aid/src/components/VideoAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const VideoAccordion: React.FC<{

return(<div
key={index}
className=" rounded-lg justify-center overflow-hidden bg-base-300 hover:bg-base-200 p-2 w-full flex flex-col"
className=" rounded-lg justify-center overflow-hidden bg-base-100 hover:bg-base-300 p-2 w-full flex flex-col"
>
<Video
checked={checked[index]}
Expand Down