Themes and colors pt 1

swat-sccs · Sep 30, 2024 · 4d3dd5e · 4d3dd5e
1 parent 0554817
commit 4d3dd5e
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 137 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,9 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "files.autoSave": "onFocusChange",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.validate": ["javascript"]
+}
diff --git a/README.md b/README.md
@@ -12,18 +12,23 @@
 - [Golang](https://go.dev/)
 
 ### Install dependencies
+
 Install [Golang](https://go.dev/dl/)
 
-``` bash
+```bash
 npm install
 ```
 
 ### Run the development server
 
-``` bash
-docker compose -f path-to-docker-yml up -d
+```bash
+cd YOUR_WORKING_DIR
+docker compose -f docker-compose.debug.yml up -d
 ```
 
+### View the dev site
+
+Head on over to http://localhost:3000
 
 ## License
 

diff --git a/app/docs/layout.tsx → app/calendar/layout.tsx b/app/docs/layout.tsx → app/calendar/layout.tsx
diff --git a/app/docs/page.tsx → app/calendar/page.tsx b/app/docs/page.tsx → app/calendar/page.tsx
@@ -3,7 +3,7 @@ import { title } from "@/components/primitives";
 export default function DocsPage() {
   return (
     <div>
-      <h1 className={title()}>Docs</h1>
+      <h1 className={title()}>Calendar</h1>
     </div>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -38,7 +38,7 @@ export default function RootLayout({
       <body
         className={clsx(
           "min-h-screen bg-background font-sans antialiased",
-          fontSans.variable,
+          fontSans.variable
         )}
       >
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
@@ -48,15 +48,30 @@ export default function RootLayout({
               {children}
             </main>
             <footer className="w-full flex items-center justify-center py-3">
-              <Link
-                isExternal
-                className="flex items-center gap-1 text-current"
-                href="https://nextui-docs-v2.vercel.app?utm_source=next-app-template"
-                title="nextui.org homepage"
-              >
-                <span className="text-default-600">Powered by</span>
-                <p className="text-primary">NextUI</p>
-              </Link>
+              <div className="columns-1 container max-w-4xl text-center">
+                <span className="text-xs ">
+                  The Course Planner is a student-run service, and displays
+                  classes from the Tri-College course database. We recommend
+                  confirming your schedule with the official course listings
+                  just in case. If there are any issues, email us.
+                </span>
+                <br />
+
+                <div className=" space-x-5">
+                  <Link
+                    isExternal
+                    href="https://www.sccs.swarthmore.edu/docs/policy"
+                    title="SCCS Usage & Data Policy"
+                  >
+                    <span className=" text-xs underline  ">
+                      Usage & Data Policy
+                    </span>
+                  </Link>
+                  <span className="text-xs ">
+                    © 2024 Swarthmore College Computer Society | v2.0.0
+                  </span>
+                </div>
+              </div>
             </footer>
           </div>
         </Providers>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,56 +1,9 @@
-import { Link } from "@nextui-org/link";
-import { Snippet } from "@nextui-org/snippet";
-import { Code } from "@nextui-org/code";
-import { button as buttonStyles } from "@nextui-org/theme";
-
-import { siteConfig } from "@/config/site";
-import { title, subtitle } from "@/components/primitives";
-import { GithubIcon } from "@/components/icons";
-
 export default function Home() {
   return (
     <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-xl text-center justify-center">
-        <span className={title()}>Make&nbsp;</span>
-        <span className={title({ color: "violet" })}>beautiful&nbsp;</span>
-        <br />
-        <span className={title()}>
-          websites regardless of your design experience.
-        </span>
-        <div className={subtitle({ class: "mt-4" })}>
-          Beautiful, fast and modern React UI library.
-        </div>
-      </div>
-
-      <div className="flex gap-3">
-        <Link
-          isExternal
-          className={buttonStyles({
-            color: "primary",
-            radius: "full",
-            variant: "shadow",
-          })}
-          href={siteConfig.links.docs}
-        >
-          Documentation
-        </Link>
-        <Link
-          isExternal
-          className={buttonStyles({ variant: "bordered", radius: "full" })}
-          href={siteConfig.links.github}
-        >
-          <GithubIcon size={20} />
-          GitHub
-        </Link>
-      </div>
+      <div className="inline-block max-w-xl text-center justify-center" />
 
-      <div className="mt-8">
-        <Snippet hideCopyButton hideSymbol variant="bordered">
-          <span>
-            Get started by editing <Code color="primary">app/page.tsx</Code>
-          </span>
-        </Snippet>
-      </div>
+      <div className="flex gap-3" />
     </section>
   );
 }
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -1,3 +1,5 @@
+"use client";
+//Just for pathname highlighting though, could always go back if it becomes too slow
 import {
   Navbar as NextUINavbar,
   NavbarContent,
@@ -7,26 +9,21 @@ import {
   NavbarItem,
   NavbarMenuItem,
 } from "@nextui-org/navbar";
-import { Button } from "@nextui-org/button";
 import { Kbd } from "@nextui-org/kbd";
 import { Link } from "@nextui-org/link";
 import { Input } from "@nextui-org/input";
-import { link as linkStyles } from "@nextui-org/theme";
+import { Spacer } from "@nextui-org/spacer";
 import NextLink from "next/link";
-import clsx from "clsx";
+import { usePathname } from "next/navigation";
+import { button as buttonStyles } from "@nextui-org/theme";
 
 import { siteConfig } from "@/config/site";
 import { ThemeSwitch } from "@/components/theme-switch";
-import {
-  TwitterIcon,
-  GithubIcon,
-  DiscordIcon,
-  HeartFilledIcon,
-  SearchIcon,
-  Logo,
-} from "@/components/icons";
+import { SearchIcon } from "@/components/icons";
+import { title } from "@/components/primitives";
 
 export const Navbar = () => {
+  const pathname = usePathname();
   const searchInput = (
     <Input
       aria-label="Search"
@@ -36,7 +33,7 @@ export const Navbar = () => {
       }}
       endContent={
         <Kbd className="hidden lg:inline-block" keys={["command"]}>
-          K
+          k
         </Kbd>
       }
       labelPlacement="outside"
@@ -49,28 +46,35 @@ export const Navbar = () => {
   );
 
   return (
-    <NextUINavbar maxWidth="xl" position="sticky">
+    <NextUINavbar className="mt-10" maxWidth="xl" position="sticky">
       <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
         <NavbarBrand as="li" className="gap-3 max-w-fit">
           <NextLink className="flex justify-start items-center gap-1" href="/">
-            <Logo />
-            <p className="font-bold text-inherit">ACME</p>
+            <span className={title({ size: "sm", color: "logo" })}>
+              SCCS&nbsp;
+            </span>
+            <span className={title({ size: "xs" })}>Course Planner&nbsp;</span>
           </NextLink>
         </NavbarBrand>
+      </NavbarContent>
+
+      <NavbarContent justify="start">
+        <Spacer x={24} />
         <ul className="hidden lg:flex gap-4 justify-start ml-2">
           {siteConfig.navItems.map((item) => (
-            <NavbarItem key={item.href}>
-              <NextLink
-                className={clsx(
-                  linkStyles({ color: "foreground" }),
-                  "data-[active=true]:text-primary data-[active=true]:font-medium",
-                )}
-                color="foreground"
+            <>
+              <Link
+                key={item.href}
+                className={buttonStyles({
+                  color: "primary",
+                  radius: "full",
+                  variant: pathname == item.href ? "shadow" : "ghost",
+                })}
                 href={item.href}
               >
                 {item.label}
-              </NextLink>
-            </NavbarItem>
+              </Link>
+            </>
           ))}
         </ul>
       </NavbarContent>
@@ -80,36 +84,11 @@ export const Navbar = () => {
         justify="end"
       >
         <NavbarItem className="hidden sm:flex gap-2">
-          <Link isExternal aria-label="Twitter" href={siteConfig.links.twitter}>
-            <TwitterIcon className="text-default-500" />
-          </Link>
-          <Link isExternal aria-label="Discord" href={siteConfig.links.discord}>
-            <DiscordIcon className="text-default-500" />
-          </Link>
-          <Link isExternal aria-label="Github" href={siteConfig.links.github}>
-            <GithubIcon className="text-default-500" />
-          </Link>
           <ThemeSwitch />
         </NavbarItem>
-        <NavbarItem className="hidden lg:flex">{searchInput}</NavbarItem>
-        <NavbarItem className="hidden md:flex">
-          <Button
-            isExternal
-            as={Link}
-            className="text-sm font-normal text-default-600 bg-default-100"
-            href={siteConfig.links.sponsor}
-            startContent={<HeartFilledIcon className="text-danger" />}
-            variant="flat"
-          >
-            Sponsor
-          </Button>
-        </NavbarItem>
       </NavbarContent>
 
       <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
-        <Link isExternal aria-label="Github" href={siteConfig.links.github}>
-          <GithubIcon className="text-default-500" />
-        </Link>
         <ThemeSwitch />
         <NavbarMenuToggle />
       </NavbarContent>

diff --git a/components/primitives.ts b/components/primitives.ts
@@ -10,9 +10,11 @@ export const title = tv({
       cyan: "from-[#00b7fa] to-[#01cfea]",
       green: "from-[#6FEE8D] to-[#17c964]",
       pink: "from-[#FF72E1] to-[#F54C7A]",
+      logo: "from-[#333C44] to-[#9FADBC]",
       foreground: "dark:from-[#FFFFFF] dark:to-[#4B4B4B]",
     },
     size: {
+      xs: "text-2xl",
       sm: "text-3xl lg:text-4xl",
       md: "text-[2.3rem] lg:text-5xl leading-9",
       lg: "text-4xl lg:text-6xl",
@@ -33,6 +35,7 @@ export const title = tv({
         "cyan",
         "green",
         "pink",
+        "logo",
         "foreground",
       ],
       class: "bg-clip-text text-transparent bg-gradient-to-b",

diff --git a/config/site.ts b/config/site.ts
@@ -1,28 +1,16 @@
 export type SiteConfig = typeof siteConfig;
 
 export const siteConfig = {
-  name: "Next.js + NextUI",
-  description: "Make beautiful websites regardless of your design experience.",
+  name: "SCCS Class Planner",
+  description: "Version 2 of the Course Planner provided by SCCS",
   navItems: [
     {
-      label: "Home",
+      label: "Plan",
       href: "/",
     },
     {
-      label: "Docs",
-      href: "/docs",
-    },
-    {
-      label: "Pricing",
-      href: "/pricing",
-    },
-    {
-      label: "Blog",
-      href: "/blog",
-    },
-    {
-      label: "About",
-      href: "/about",
+      label: "Calendar",
+      href: "/calendar",
     },
   ],
   navMenuItems: [

diff --git a/package.json b/package.json
@@ -16,9 +16,11 @@
 		"@nextui-org/link": "2.0.35",
 		"@nextui-org/listbox": "2.1.27",
 		"@nextui-org/navbar": "2.0.37",
+		"@nextui-org/react": "^2.4.8",
 		"@nextui-org/snippet": "2.0.43",
 		"@nextui-org/switch": "2.0.34",
 		"@nextui-org/system": "2.2.6",
+		"@nextui-org/tabs": "^2.0.37",
 		"@nextui-org/theme": "2.2.11",
 		"@prisma/client": "^5.19.1",
 		"@react-aria/ssr": "3.9.4",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,11 +1,11 @@
-import {nextui} from '@nextui-org/theme'
+import { nextui } from "@nextui-org/theme";
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
@@ -16,5 +16,22 @@ module.exports = {
     },
   },
   darkMode: "class",
-  plugins: [nextui()],
-}
+  plugins: [
+    nextui({
+      themes: {
+        light: {},
+        dark: {
+          colors: {
+            background: "#1D2125",
+            foreground: "#D9D9D9",
+            primary: {
+              DEFAULT: "#9FADBC",
+              foreground: "#1D2125",
+            },
+            focus: "#BEF264",
+          },
+        },
+      },
+    }),
+  ],
+};