SC-8: adding styling conventions

webapp/src/components/navbar.tsx

@@ -29,7 +29,7 @@ const NavBar: React.FC = () => {
             </div>
 
             <div className="flex gap-4 py-2">
-                <Link href="/login" className="hover:underline bg-green-500 text-white px-4 py-2 rounded-full">Login</Link>
+                <Link href="/login" className="btn-login px-4 py-2 ">Login</Link>
             </div>
         </nav>
     );

webapp/src/components/ui/button.tsx

@@ -8,7 +8,7 @@ interface ButtonProps {
   route?: string; // Optional re-routing
 }
 
-export function Button({ children, onClick, className = "", route }: ButtonProps) {
+export function Button({ children, onClick, className = "btn-primary", route }: ButtonProps) {
   const router = useRouter();
 
   const handleClick = () => {
@@ -19,7 +19,7 @@ export function Button({ children, onClick, className = "", route }: ButtonProps
   return (
     <button
       onClick={handleClick}
-      className={`bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 ${className}`}
+      className={`btn-primary ${className}`}
     >
       {children}
     </button>

webapp/src/components/ui/card.tsx

@@ -7,7 +7,7 @@ interface CardProps {
 
 export function Card({ children, className = "" }: CardProps) {
   return (
-    <div className={`bg-white rounded-lg shadow-md ${className}`}>
+    <div className={`card-grey ${className}`}>
       {children}
     </div>
   );

webapp/src/globals.css

@@ -2,20 +2,56 @@
 @tailwind components;
 @tailwind utilities;
 
+/*background should always be white, black text*/
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --background: #ffffff; 
+  --foreground: #171717; 
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* Header */
+h1 {
+  @apply text-4xl font-bold text-black;
+}
+
+h2 {
+  @apply text-3xl font-semibold text-black;
+}
+
+h3 {
+  @apply text-2xl font-medium text-black;
+}
+
+
+/*  Button Variants */
+.btn-primary {
+  @apply bg-blue-800 block w-full rounded-md text-white hover:bg-blue-800 focus:ring-blue-950;
+}
+
+.btn-secondary {
+  @apply bg-gray-600 text-white hover:bg-gray-500 focus:ring-gray-600;
+}
+
+.btn-login {
+  @apply bg-white text-black block w-full rounded-md hover:bg-gray-200 focus:ring-gray-300;
+}
+
+/* Greyed-Out Cardholder Styling */
+.card-grey {
+  @apply bg-gray-200 rounded-lg shadow-md p-4 flex items-center justify-center text-gray-500;
+}
+
+@layer components {
+  .label-style {
+      @apply block text-sm font-semibold text-gray-900;
+  }
+
+  .input-style {
+    @apply block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-600 focus:ring-offset-2;
+}
+}

webapp/src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import "@/globals.css";
 import { AppProps } from "next/app";
 import Layout from "@/components/layout";
+import '../globals.css';
 
 export default function App({ Component, pageProps }: AppProps) {
     return (

webapp/src/pages/about_us.tsx

@@ -5,27 +5,27 @@ const AboutUs = (): JSX.Element => (
 
       {/* Title */}
       <div className="text-center my-8">
-        <h1 className="text-3xl font-bold">About Us</h1>
+        <h1>About Us</h1>
       </div>
 
       {/* Content */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 px-12">
         <div className="bg-gray-100 p-4 rounded shadow">
-          <h2 className="font-bold mb-2">What we do:</h2>
+          <h2 className="text-center">What we do:</h2>
           <p>After we received your donations, we purchase your chosen stock and hold it*. Every month, we will donate the dividends to your preferred charity. 
             Now your favourite charity no longer has to worry about fluctuating donations!</p>
           <p><small>*Your stock may be sold and reinvested into a different stock if we determine that the stock is no longer suitable to hold (eg. significant decrease in value, no longer offering dividends).</small></p>
         </div>
         <div className="bg-gray-100 p-4 rounded shadow">
-          <h2 className="font-bold mb-2">Which stocks do we invest in?</h2>
+          <h2 className="text-center">Which stocks do we invest in?</h2>
           <p>A stock</p>
           <p>B stock</p>
           <p>C stock</p>
           <p>...</p>
           <p>We choose stocks based off of price, dividend yield, and safety.</p>
         </div>
         <div className="bg-gray-100 p-4 rounded shadow">
-          <h2 className="font-bold mb-2">Find us on other platforms!</h2>
+          <h2 className="text-center" >Find us on other platforms!</h2>
           <p>Instagram: @stockcharity</p>
           <p>Email: questions@stockcharity.com</p>
         </div>

webapp/src/pages/charity-signup.tsx

@@ -39,8 +39,7 @@ const CharitySignUp: React.FC = () => {
           <div>
             <label
               htmlFor="first-name"
-              className="block text-sm font-semibold text-gray-900"
-            >
+              className="label-style"              >
               First name
             </label>
             <div className="mt-2.5">
@@ -49,15 +48,15 @@ const CharitySignUp: React.FC = () => {
                 name="first-name"
                 id="first-name"
                 autoComplete="given-name"
-                className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-600 focus:ring-offset-2"
+                className="input-style"
               />
             </div>
           </div>
           <div>
             <label
               htmlFor="last-name"
-              className="block text-sm font-semibold text-gray-900"
-            >
+              className="label-style"
+              >
               Last name
             </label>
             <div className="mt-2.5">
@@ -66,15 +65,15 @@ const CharitySignUp: React.FC = () => {
                 name="last-name"
                 id="last-name"
                 autoComplete="family-name"
-                className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-600 focus:ring-offset-2"
+                className="input-style"
               />
             </div>
           </div>
           <div className="sm:col-span-2">
             <label
               htmlFor="company"
-              className="block text-sm font-semibold text-gray-900"
-            >
+              className="label-style"
+              >
               Charity Name
             </label>
             <div className="mt-2.5">
@@ -83,15 +82,15 @@ const CharitySignUp: React.FC = () => {
                 name="company"
                 id="company"
                 autoComplete="organization"
-                className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-600 focus:ring-offset-2"
+                className="input-style"
               />
             </div>
           </div>
           <div className="sm:col-span-2">
             <label
               htmlFor="email"
-              className="block text-sm font-semibold text-gray-900"
-            >
+              className="label-style"
+              >
               Email
             </label>
             <div className="mt-2.5">
@@ -100,15 +99,15 @@ const CharitySignUp: React.FC = () => {
                 name="email"
                 id="email"
                 autoComplete="email"
-                className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-600 focus:ring-offset-2"
+                className="input-style"
               />
             </div>
           </div>
           <div className="sm:col-span-2">
             <label
               htmlFor="phone-number"
-              className="block text-sm font-semibold text-gray-900"
-            >
+              className="label-style"
+              >
               Phone number
             </label>
             <div className="mt-2.5">
@@ -137,16 +136,16 @@ const CharitySignUp: React.FC = () => {
           <div className="sm:col-span-2">
             <label
               htmlFor="message"
-              className="block text-sm font-semibold text-gray-900"
-            >
+              className="label-style"
+              >
               Message
             </label>
             <div className="mt-2.5">
               <textarea
                 name="message"
                 id="message"
                 rows={4}
-                className="block w-full rounded-md border border-gray-300 bg-white px-3.5 py-2 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-600 focus:ring-offset-2"
+                className="input-style"
               ></textarea>
             </div>
           </div>
@@ -186,7 +185,7 @@ const CharitySignUp: React.FC = () => {
         <div className="mt-10">
           <button
             type="submit"
-            className="block w-full rounded-md bg-cyan-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-600 focus:ring-offset-2"
+            className="btn-primary px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm"
           >
             Submit
           </button>

webapp/src/pages/donate.tsx

@@ -5,18 +5,20 @@ const Donate = (): JSX.Element => (
     <h1>Donate</h1>
     <form className="flex flex-col gap-2">
       {/* Placeholder form until we try to integrate with stripe */}
-      <label htmlFor="email">Email</label>
-      <input id="email" type="email" placeholder="Email" />
-      <label htmlFor="card-number">Card Number</label>
-      <input id="card-number" type="number" placeholder="Card Number" />
+      <label 
+      className="label-style"
+      htmlFor="email">Email</label>
+      <input id="email" type="email" className = 'input-style' placeholder="Email" />
+      <label className="label-style" htmlFor="card-number">Card Number</label>
+      <input id="card-number" className = 'input-style' type="number" placeholder="Card Number" />
       <div className="flex flex-row gap-x-2">
-        <input className="grow" type="date" />
-        <input className="grow" type="number" placeholder="CVC" />
+        <input className = 'input-style grow' type="date" />
+        <input className="input-style grow" type="number" placeholder="CVC" />
       </div>
-      <label htmlFor="name">Cardholder Name</label>
-      <input id="name" type="text" placeholder="Name" />
-      <label htmlFor="country">Country</label>
-      <input id="country" type="text" placeholder="Country" />
+      <label className="label-style" htmlFor="name">Cardholder Name</label>
+      <input id="name" type="text" className = 'input-style' placeholder="Name" />
+      <label className="label-style" htmlFor="country">Country</label>
+      <input id="country" type="text" className = 'input-style' placeholder="Country" />
       <div className="flex gap-x-2 m-auto">
           <input id="terms" type="checkbox" />
           <label htmlFor="terms">I agree to the terms and conditions</label>

webapp/src/pages/home.tsx

@@ -4,12 +4,12 @@ import { Button } from "@/components/ui/button";
 
 export default function HomePage() {
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-700 p-4">
+    <div className="min-h-screen flex flex-col items-center justify-center p-4">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-5xl">
         {/* Left Section - What we do */}
         <Card className="bg-gray-200 flex items-center justify-center">
           <CardContent className="text-center">
-            <h2 className="text-2xl font-bold text-black mb-4">What we do</h2>
+            <h2 className="mb-4">What we do</h2>
             <p className="text-gray-700">
               Donations for charities are inconsistent and many charities struggle with finances. 
               To solve this problem, we are creating Stock Charity, a charity that uses donations 
@@ -22,7 +22,7 @@ export default function HomePage() {
         <div className="flex flex-col items-center space-y-8">
           {/* Donate Button */}
           <Button 
-            className="bg-blue-500 hover:bg-blue-600 text-2xl px-8 py-4"
+            className= "btn-primary text-2xl px-8 py-4"
             route="/charity-signup">
             DONATE
           </Button>