From 562db7fe92f90543629590048d0eb9dea1443311 Mon Sep 17 00:00:00 2001
From: Liangdi <ligsnf@gmail.com>
Date: Thu, 26 Dec 2024 13:14:00 +1100
Subject: [PATCH] style: update formula text colors for light/dark modes and
 run prettier format

---
 src/components/hamburger-menu.tsx | 30 +++++++--------
 src/components/site-header.tsx    | 12 ++++--
 src/routes/about.lazy.tsx         | 61 ++++++++++++++++++++-----------
 3 files changed, 61 insertions(+), 42 deletions(-)

diff --git a/src/components/hamburger-menu.tsx b/src/components/hamburger-menu.tsx
index 76d85c4..4b555ba 100644
--- a/src/components/hamburger-menu.tsx
+++ b/src/components/hamburger-menu.tsx
@@ -1,35 +1,31 @@
-import { Button } from "@/components/ui/button"
-import { Menu, X } from "lucide-react"
+import { Button } from '@/components/ui/button';
+import { Menu, X } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Link } from '@tanstack/react-router'
-import { useState } from 'react'
+} from '@/components/ui/dropdown-menu';
+import { Link } from '@tanstack/react-router';
+import { useState } from 'react';
 
 type MenuItem = {
-  name: string
-  to: string
-}
+  name: string;
+  to: string;
+};
 
 interface HamburgerMenuProps {
-  items: MenuItem[]
+  items: MenuItem[];
 }
 
 export function HamburgerMenu({ items }: HamburgerMenuProps) {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
-          {isOpen ? (
-            <X strokeWidth={3} />
-          ) : (
-            <Menu />
-          )}
+          {isOpen ? <X strokeWidth={3} /> : <Menu />}
           <span className="sr-only">Toggle navigation menu</span>
         </Button>
       </DropdownMenuTrigger>
@@ -46,5 +42,5 @@ export function HamburgerMenu({ items }: HamburgerMenuProps) {
         ))}
       </DropdownMenuContent>
     </DropdownMenu>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index ea9ddc8..2d94311 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -25,8 +25,8 @@ function SiteLogo() {
 }
 
 export function SiteHeader() {
-  const isMobile = useBreakpoint('mobile')
-  const isDesktop = !isMobile
+  const isMobile = useBreakpoint('mobile');
+  const isDesktop = !isMobile;
 
   return (
     <header className="sticky top-0 z-50 border-b bg-background">
@@ -65,7 +65,11 @@ export function SiteHeader() {
           <nav className="flex items-center gap-1">
             {isDesktop && (
               <Button asChild variant="outline" size="icon">
-                <a href={siteConfig.links.github} target="_blank" rel="noreferrer">
+                <a
+                  href={siteConfig.links.github}
+                  target="_blank"
+                  rel="noreferrer"
+                >
                   <Icons.gitHub className="h-4 w-4" />
                   <span className="sr-only">GitHub</span>
                 </a>
@@ -76,5 +80,5 @@ export function SiteHeader() {
         </div>
       </div>
     </header>
-  )
+  );
 }
diff --git a/src/routes/about.lazy.tsx b/src/routes/about.lazy.tsx
index 6254b27..22a8c9b 100644
--- a/src/routes/about.lazy.tsx
+++ b/src/routes/about.lazy.tsx
@@ -43,9 +43,11 @@ function About() {
             <h3 className="text-xl font-medium mb-2">GPA Formula</h3>
             <div className="bg-muted p-4 rounded-md">
               <p className="font-mono text-sm">
-                GPA = Σ(<code className="text-[#6f64a9]">g</code> &times;{' '}
-                <code className="text-[#6f64a9]">c</code>) ÷ Σ
-                <code className="text-[#6f64a9]">c</code>
+                GPA = Σ(
+                <code className="text-[#005c22] dark:text-[#00e654]">g</code>{' '}
+                &times;{' '}
+                <code className="text-[#005c22] dark:text-[#00e654]">c</code>) ÷
+                Σ<code className="text-[#005c22] dark:text-[#00e654]">c</code>
               </p>
             </div>
           </div>
@@ -56,20 +58,33 @@ function About() {
               {/* <div className="sm:hidden font-mono text-sm">
                 <p>WAM = </p>
                 <p className="pl-4">(</p>
-                <p className="pl-8">Σ(<code className="text-[#6f64a9]">m₁</code> &times; <code className="text-[#6f64a9]">c₁</code> &times; 0.5) +</p>
-                <p className="pl-8">Σ(<code className="text-[#6f64a9]">m₂</code> &times; <code className="text-[#6f64a9]">c₂</code> &times; 1.0)</p>
+                <p className="pl-8">Σ(<code className="text-[#005c22] dark:text-[#00e654]">m₁</code> &times; <code className="text-[#005c22] dark:text-[#00e654]">c₁</code> &times; 0.5) +</p>
+                <p className="pl-8">Σ(<code className="text-[#005c22] dark:text-[#00e654]">m₂</code> &times; <code className="text-[#005c22] dark:text-[#00e654]">c₂</code> &times; 1.0)</p>
                 <p className="pl-4">) ÷ (</p>
-                <p className="pl-8">Σ(<code className="text-[#6f64a9]">c₁</code> &times; 0.5) +</p>
-                <p className="pl-8">Σ(<code className="text-[#6f64a9]">c₂</code> &times; 1.0)</p>
+                <p className="pl-8">Σ(<code className="text-[#005c22] dark:text-[#00e654]">c₁</code> &times; 0.5) +</p>
+                <p className="pl-8">Σ(<code className="text-[#005c22] dark:text-[#00e654]">c₂</code> &times; 1.0)</p>
                 <p className="pl-4">)</p>
               </div> */}
               <p className="font-mono text-sm">
-                WAM = (Σ(<code className="text-[#6f64a9]">m₁</code> &times;{' '}
-                <code className="text-[#6f64a9]">c₁</code> &times; 0.5) + Σ(
-                <code className="text-[#6f64a9]">m₂</code> &times;{' '}
-                <code className="text-[#6f64a9]">c₂</code> &times; 1.0)) ÷ (Σ(
-                <code className="text-[#6f64a9]">c₁</code> &times; 0.5) + Σ(
-                <code className="text-[#6f64a9]">c₂</code> &times; 1.0))
+                WAM = (Σ(
+                <code className="text-[#005c22] dark:text-[#00e654]">m₁</code>{' '}
+                &times;{' '}
+                <code className="text-[#005c22] dark:text-[#00e654]">c₁</code>{' '}
+                &times; 0.5) + Σ(
+                <code className="text-[#005c22] dark:text-[#00e654]">
+                  m₂
+                </code>{' '}
+                &times;{' '}
+                <code className="text-[#005c22] dark:text-[#00e654]">c₂</code>{' '}
+                &times; 1.0)) ÷ (Σ(
+                <code className="text-[#005c22] dark:text-[#00e654]">
+                  c₁
+                </code>{' '}
+                &times; 0.5) + Σ(
+                <code className="text-[#005c22] dark:text-[#00e654]">
+                  c₂
+                </code>{' '}
+                &times; 1.0))
               </p>
             </div>
           </div>
@@ -79,24 +94,28 @@ function About() {
             <div className="bg-muted p-4 rounded-md">
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
                 <p>
-                  <code className="text-[#6f64a9]">g</code> = grade value
+                  <code className="text-[#005c22] dark:text-[#00e654]">g</code>{' '}
+                  = grade value
                 </p>
                 <p>
-                  <code className="text-[#6f64a9]">c</code> = credit points
+                  <code className="text-[#005c22] dark:text-[#00e654]">c</code>{' '}
+                  = credit points
                 </p>
                 <p>
-                  <code className="text-[#6f64a9]">m₁</code> = first year mark
+                  <code className="text-[#005c22] dark:text-[#00e654]">m₁</code>{' '}
+                  = first year mark
                 </p>
                 <p>
-                  <code className="text-[#6f64a9]">c₁</code> = first year credit
-                  points
+                  <code className="text-[#005c22] dark:text-[#00e654]">c₁</code>{' '}
+                  = first year credit points
                 </p>
                 <p>
-                  <code className="text-[#6f64a9]">m₂</code> = later year mark
+                  <code className="text-[#005c22] dark:text-[#00e654]">m₂</code>{' '}
+                  = later year mark
                 </p>
                 <p>
-                  <code className="text-[#6f64a9]">c₂</code> = later year credit
-                  points
+                  <code className="text-[#005c22] dark:text-[#00e654]">c₂</code>{' '}
+                  = later year credit points
                 </p>
               </div>
             </div>