From 75b5bbb2d3985f7a4f05ef51848f7980422edbc7 Mon Sep 17 00:00:00 2001
From: "Yumiko (Yumi) Chow" <75456756+yumi520@users.noreply.github.com>
Date: Tue, 10 Feb 2026 22:57:33 -0500
Subject: [PATCH 1/3] created settings components

---
 frontend/src/main-page/MainPage.tsx           |  2 ++
 frontend/src/main-page/settings/Settings.tsx  | 26 ++++++++++++++
 .../main-page/settings/components/Button.tsx  | 34 +++++++++++++++++++
 .../settings/components/InfoCard.tsx          | 32 +++++++++++++++++
 4 files changed, 94 insertions(+)
 create mode 100644 frontend/src/main-page/settings/Settings.tsx
 create mode 100644 frontend/src/main-page/settings/components/Button.tsx
 create mode 100644 frontend/src/main-page/settings/components/InfoCard.tsx

diff --git a/frontend/src/main-page/MainPage.tsx b/frontend/src/main-page/MainPage.tsx
index 5c96ac0f..950a7de8 100644
--- a/frontend/src/main-page/MainPage.tsx
+++ b/frontend/src/main-page/MainPage.tsx
@@ -4,6 +4,7 @@ import GrantPage from "./grants/GrantPage";
 import Header from "./header/Header";
 import Users from "./users/Users";
 import RestrictedPage from "./restricted/RestrictedPage";
+import Settings from "./settings/Settings";
 
 
 function MainPage() {
@@ -18,6 +19,7 @@ function MainPage() {
         <Route path="/my-grants" element={<GrantPage showOnlyMyGrants={true} />} /> 
         <Route path="/users" element={<Users />} />
         <Route path="/restricted" element={<RestrictedPage />} />
+        <Route path="/settings" element={<Settings />} />
         {/* fallback route */}
         <Route path="*" element={<GrantPage />} />
       </Routes>
diff --git a/frontend/src/main-page/settings/Settings.tsx b/frontend/src/main-page/settings/Settings.tsx
new file mode 100644
index 00000000..caa6d22a
--- /dev/null
+++ b/frontend/src/main-page/settings/Settings.tsx
@@ -0,0 +1,26 @@
+import Button from "./components/Button";
+import InfoCard from "./components/InfoCard";
+import logo from "../../images/logo.svg";
+
+export default function Settings() {
+  return (
+    <div className="settings-page px-12 py-4 mb-8 ">
+      <h1 className="text-5xl font-bold mb-4 flex justify-start">Settings</h1>
+      <div>
+        <Button text="Upload Image" 
+            onClick={() => alert('add functionality to upload image')} 
+            className="bg-primary-800 text-white"
+            logo={logo}
+            logoPosition="left"
+            />
+            <Button text="Remove" 
+            onClick={() => alert('add functionality to remove image')} 
+            className="bg-white text-black border border-grey"
+            />
+        </div>
+        
+        <InfoCard title="Personal Information"
+        fields={[{ label: "First Name", value: "John" }, { label: "Last Name", value: "Doe" }, { label: "Email", value: "john.doe@gmail.com" }]} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/main-page/settings/components/Button.tsx b/frontend/src/main-page/settings/components/Button.tsx
new file mode 100644
index 00000000..2da0f168
--- /dev/null
+++ b/frontend/src/main-page/settings/components/Button.tsx
@@ -0,0 +1,34 @@
+type ButtonProps = {
+    text: string;
+    onClick: () => void;
+    className?: string;
+    logo?: string;
+    logoPosition?: 'left' | 'right';
+}
+
+
+// Button component where you can pass in text, onClick handler, optional className
+// for styling, and an optional logo with its position.
+//Styling is default, but can be overridden by passing in a className prop
+export default function Button({ text, onClick, className, logo, logoPosition }: ButtonProps) {
+  return (
+    <button onClick={onClick}
+    className={`
+        px-4 py-2 rounded-3xl font-medium bg-primary-800 text-black border
+        flex items-center justify-center
+        ${className}
+      `}
+    >
+      {logo && logoPosition === 'left' &&
+      <span className="mr-2">
+        <img src={logo}
+        alt="" className="w-4 h-4" />
+      </span>}
+      {text}
+      {logo && logoPosition === 'right' &&
+      <span className="ml-2">
+        <img src={logo} alt="" className="w-4 h-4" />
+      </span>}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/main-page/settings/components/InfoCard.tsx b/frontend/src/main-page/settings/components/InfoCard.tsx
new file mode 100644
index 00000000..1555b5cf
--- /dev/null
+++ b/frontend/src/main-page/settings/components/InfoCard.tsx
@@ -0,0 +1,32 @@
+type InfoField = {
+  label: string;
+  value: string;
+};
+
+type InfoCardProps = {
+  title?: string;
+  fields: InfoField[];
+};
+
+export default function InfoCard({ title, fields }: InfoCardProps) {
+  return (
+    <div className="w-full max-w-md rounded-lg bg-white p-4 shadow-sm flex flex-col">
+      {title && (
+        <h2 className="mb-4 text-lg font-bold flex justify-start">
+          {title}
+        </h2>
+      )}
+
+      <div className="grid grid-cols-2 gap-4 text-left">
+        {fields.map((field) => (
+          <div key={field.label}>
+            <p className="text-xs text-gray-500">{field.label}</p>
+            <p className="text-sm font-medium text-gray-900">
+              {field.value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

From b4af4c37c0f10d558d46abddba7a74e92259118f Mon Sep 17 00:00:00 2001
From: "Yumiko (Yumi) Chow" <75456756+yumi520@users.noreply.github.com>
Date: Wed, 11 Feb 2026 18:27:20 -0500
Subject: [PATCH 2/3] added the rest of styling

---
 frontend/src/main-page/settings/Settings.tsx | 76 +++++++++++++++-----
 1 file changed, 59 insertions(+), 17 deletions(-)

diff --git a/frontend/src/main-page/settings/Settings.tsx b/frontend/src/main-page/settings/Settings.tsx
index caa6d22a..ff6dcdfb 100644
--- a/frontend/src/main-page/settings/Settings.tsx
+++ b/frontend/src/main-page/settings/Settings.tsx
@@ -4,23 +4,65 @@ import logo from "../../images/logo.svg";
 
 export default function Settings() {
   return (
-    <div className="settings-page px-12 py-4 mb-8 ">
-      <h1 className="text-5xl font-bold mb-4 flex justify-start">Settings</h1>
-      <div>
-        <Button text="Upload Image" 
-            onClick={() => alert('add functionality to upload image')} 
-            className="bg-primary-800 text-white"
-            logo={logo}
-            logoPosition="left"
-            />
-            <Button text="Remove" 
-            onClick={() => alert('add functionality to remove image')} 
-            className="bg-white text-black border border-grey"
-            />
+    <div className="px-12 py-8 max-w-5xl">
+      <h1 className="text-4xl font-bold mb-8 flex justify-start">Settings</h1>
+
+      <div className="mb-12">
+        <div className="flex items-center gap-6">
+          {/* Avatar */}
+          <img
+            src={logo}
+            alt="Profile"
+            className="w-24 h-24 rounded-full object-cover"
+          />
+
+          {/* Buttons + helper text */}
+          <div className="flex flex-col gap-2">
+            <h2 className="text-2xl font-bold mb-4 flex justify-start">Profile Picture</h2>
+            <div className="flex gap-3">
+              
+              <Button
+                text="Upload Image"
+                onClick={() => alert("add upload functionality")}
+                className="bg-primary-800 text-white"
+              />
+              <Button
+                text="Remove"
+                onClick={() => alert("remove image")}
+                className="bg-white text-black border border-gray-300"
+              />
+            </div>
+
+            <p className="text-sm text-gray-500">
+              We support PNGs, JPEGs, and PDFs under 10 MB
+            </p>
+          </div>
         </div>
-        
-        <InfoCard title="Personal Information"
-        fields={[{ label: "First Name", value: "John" }, { label: "Last Name", value: "Doe" }, { label: "Email", value: "john.doe@gmail.com" }]} />
+      </div>
+
+      <InfoCard
+        title="Personal Information"
+        fields={[
+          { label: "First Name", value: "John" },
+          { label: "Last Name", value: "Doe" },
+          { label: "Email Address", value: "john.doe@gmail.com" },
+        ]}
+      />
+
+      <div className="flex justify-between items-center mt-12">
+        <div>
+          <h2 className="text-2xl font-bold mb-1 flex justify-start">Change Password</h2>
+          <p className="text-gray-500">
+            Re-enter your current password in order to change your password.
+          </p>
+        </div>
+
+        <Button
+          text="Change Password"
+          onClick={() => alert("change password")}
+          className="bg-white text-black border border-gray-300"
+        />
+      </div>
     </div>
   );
-}
\ No newline at end of file
+}

From 53e4c0f0d2333f22389a107fcafc8aed9c93cf32 Mon Sep 17 00:00:00 2001
From: "Yumiko (Yumi) Chow" <75456756+yumi520@users.noreply.github.com>
Date: Sat, 14 Feb 2026 22:53:01 -0500
Subject: [PATCH 3/3] fixed styling details

---
 frontend/src/main-page/settings/Settings.tsx  | 19 ++++++++++----
 .../settings/components/InfoCard.tsx          | 26 ++++++++++++-------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/frontend/src/main-page/settings/Settings.tsx b/frontend/src/main-page/settings/Settings.tsx
index ff6dcdfb..1753fef3 100644
--- a/frontend/src/main-page/settings/Settings.tsx
+++ b/frontend/src/main-page/settings/Settings.tsx
@@ -18,18 +18,19 @@ export default function Settings() {
 
           {/* Buttons + helper text */}
           <div className="flex flex-col gap-2">
-            <h2 className="text-2xl font-bold mb-4 flex justify-start">Profile Picture</h2>
+            <h2 className="text-2xl font-bold mb-1 flex justify-start">Profile Picture</h2>
             <div className="flex gap-3">
               
               <Button
                 text="Upload Image"
                 onClick={() => alert("add upload functionality")}
-                className="bg-primary-800 text-white"
+                //To-do: add a upload logo next to the "Upload Image" button
+                className="bg-primary-900 text-white"
               />
               <Button
                 text="Remove"
                 onClick={() => alert("remove image")}
-                className="bg-white text-black border border-gray-300"
+                className="bg-white text-black border-2 border-grey-500"
               />
             </div>
 
@@ -42,6 +43,14 @@ export default function Settings() {
 
       <InfoCard
         title="Personal Information"
+        action={
+          <Button
+            //To-do: add a edit logo next to the "Edit" button
+            text="Edit"
+            onClick={() => alert("edit personal info")}
+            className="bg-white text-black border-2 border-grey-500"
+          />
+        }
         fields={[
           { label: "First Name", value: "John" },
           { label: "Last Name", value: "Doe" },
@@ -49,7 +58,7 @@ export default function Settings() {
         ]}
       />
 
-      <div className="flex justify-between items-center mt-12">
+      <div className="flex gap-40 items-center mt-12">
         <div>
           <h2 className="text-2xl font-bold mb-1 flex justify-start">Change Password</h2>
           <p className="text-gray-500">
@@ -60,7 +69,7 @@ export default function Settings() {
         <Button
           text="Change Password"
           onClick={() => alert("change password")}
-          className="bg-white text-black border border-gray-300"
+          className="bg-white text-black border-2 border-grey-500"
         />
       </div>
     </div>
diff --git a/frontend/src/main-page/settings/components/InfoCard.tsx b/frontend/src/main-page/settings/components/InfoCard.tsx
index 1555b5cf..a8ffa24e 100644
--- a/frontend/src/main-page/settings/components/InfoCard.tsx
+++ b/frontend/src/main-page/settings/components/InfoCard.tsx
@@ -1,3 +1,5 @@
+import type { ReactNode } from "react";
+
 type InfoField = {
   label: string;
   value: string;
@@ -6,22 +8,28 @@ type InfoField = {
 type InfoCardProps = {
   title?: string;
   fields: InfoField[];
+  action?: ReactNode;
 };
 
-export default function InfoCard({ title, fields }: InfoCardProps) {
+export default function InfoCard({ title, fields, action }: InfoCardProps) {
   return (
-    <div className="w-full max-w-md rounded-lg bg-white p-4 shadow-sm flex flex-col">
-      {title && (
-        <h2 className="mb-4 text-lg font-bold flex justify-start">
-          {title}
-        </h2>
+    <div className="w-full max-w-3xl rounded-lg bg-white p-6 shadow-sm flex flex-col">
+      {(title || action) && (
+        <div className="mb-4 flex items-center justify-between">
+          {title && (
+            <h2 className="text-xl font-bold flex justify-start">
+              {title}
+            </h2>
+          )}
+          {action}
+        </div>
       )}
 
-      <div className="grid grid-cols-2 gap-4 text-left">
+      <div className="grid grid-cols-2 gap-6 text-left">
         {fields.map((field) => (
           <div key={field.label}>
-            <p className="text-xs text-gray-500">{field.label}</p>
-            <p className="text-sm font-medium text-gray-900">
+            <p className="text-sm text-gray-500">{field.label}</p>
+            <p className="text-base font-medium text-gray-900">
               {field.value}
             </p>
           </div>