From c25b89d065031365382820cd20606f98c735abcb Mon Sep 17 00:00:00 2001
From: Miranda Zheng <123515762+mirmirmirr@users.noreply.github.com>
Date: Fri, 24 Apr 2026 08:34:14 -0400
Subject: [PATCH 1/6] initial social buttons

---
 src/App.tsx                          |   4 +-
 src/components/Button.tsx            |   2 +-
 src/components/header/ButtonTray.tsx | 157 +++++++++++++++++++++++----
 3 files changed, 139 insertions(+), 24 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f89616c..1bb3c39 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 import ButtonTray from "@/components/header/ButtonTray";
+import SocialTray from "@/components/header/SocialTray";
 import { CourseWorkspaceProvider } from "@/core/workspace/provider";
 import WorkspaceDndProvider from "@/features/dnd/dnd.tsx";
 import Toolbox from "@/features/toolbox/Toolbox";
@@ -12,8 +13,9 @@ export default function App() {
   return (
     <CourseWorkspaceProvider>
       <WorkspaceDndProvider>
-        <div className="m-4 md:m-8 md:max-h-dvh overflow-hidden">
+        <div className="p-4 md:p-8 md:max-h-dvh overflow-hidden">
           <header className="top-0 flex h-20 items-center justify-center bg-carpipink relative z-10">
+            {/* <SocialTray /> */}
             <img src="/carpi-black.png" alt="Carpi Logo" className="h-full" />
             <ButtonTray />
           </header>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b82f912..007575d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -23,7 +23,7 @@ export default function Button({
           "p-3 rounded-full w-fit aspect-square flex items-center justify-center hover:cursor-pointer",
           inverted
             ? "bg-carpipink/20 text-carpipink hover:text-darkblue hover:bg-carpipink transition-colors"
-            : "bg-darkblue/20 hover:bg-darkblue hover:text-carpipink transition-colors",
+            : "bg-[color-mix(in_oklab,var(--color-darkblue)_25%,var(--color-carpipink)_75%)] hover:bg-darkblue hover:text-carpipink transition-colors",
         )}
       >
         {children}
diff --git a/src/components/header/ButtonTray.tsx b/src/components/header/ButtonTray.tsx
index 5cccc58..e307ae4 100644
--- a/src/components/header/ButtonTray.tsx
+++ b/src/components/header/ButtonTray.tsx
@@ -6,6 +6,8 @@ import {
   BiImport,
   BiReset,
   BiDotsVerticalRounded,
+  BiLogoDiscordAlt,
+  BiLogoGithub,
 } from "react-icons/bi";
 
 import Button from "@/components/Button";
@@ -16,7 +18,6 @@ import {
   SaveFileSchema,
 } from "@/core/workspace/utils/io/inputOutput";
 import { useInputOutput } from "@/core/workspace/utils/io/useInputOutput";
-import { cn } from "@/lib/classnames";
 
 export default function ButtonTray() {
   const [isOpen, setIsOpen] = useState(false);
@@ -86,7 +87,23 @@ export default function ButtonTray() {
     return true;
   };
 
-  const buttonList = (
+  const handleDiscordClick = () => {
+    window.open(
+      "https://discord.com/invite/xRBvFHgcYT",
+      "_blank",
+      "noopener,noreferrer",
+    );
+  };
+
+  const handleGithubClick = () => {
+    window.open(
+      "https://github.com/your-username/project-carpi",
+      "_blank",
+      "noopener,noreferrer",
+    );
+  };
+
+  const mainButtons = (
     <>
       <Button onClick={handleResetClick} tooltip="Reset Workspace">
         <BiReset className="w-5 h-5" />
@@ -100,6 +117,62 @@ export default function ButtonTray() {
     </>
   );
 
+  const socialButtons = (
+    <>
+      <Button onClick={handleDiscordClick} tooltip="Join our Discord">
+        <BiLogoDiscordAlt className="w-5 h-5" />
+      </Button>
+      <Button onClick={handleGithubClick} tooltip="View on GitHub">
+        <BiLogoGithub className="w-5 h-5" />
+      </Button>
+    </>
+  );
+
+  const mobileRadialButtons = [
+    {
+      id: "export",
+      component: (
+        <Button onClick={handleExportClick} tooltip="Export Plan">
+          <BiExport className="w-5 h-5" />
+        </Button>
+      ),
+    },
+    {
+      id: "discord",
+      component: (
+        <Button onClick={handleDiscordClick} tooltip="Join our Discord">
+          <BiLogoDiscordAlt className="w-5 h-5" />
+        </Button>
+      ),
+    },
+    {
+      id: "import",
+      component: (
+        <Button onClick={handleImportClick} tooltip="Import Plan">
+          <BiImport className="w-5 h-5" />
+        </Button>
+      ),
+    },
+
+    {
+      id: "github",
+      component: (
+        <Button onClick={handleGithubClick} tooltip="View on GitHub">
+          <BiLogoGithub className="w-5 h-5" />
+        </Button>
+      ),
+    },
+
+    {
+      id: "reset",
+      component: (
+        <Button onClick={handleResetClick} tooltip="Reset Workspace">
+          <BiReset className="w-5 h-5" />
+        </Button>
+      ),
+    },
+  ];
+
   return (
     <>
       <input
@@ -110,32 +183,72 @@ export default function ButtonTray() {
         className="hidden"
       />
 
-      <div className="absolute right-5 top-0 h-full flex items-center z-50">
-        <div className="hidden md:flex gap-2">{buttonList}</div>
-        <div className="md:hidden relative flex flex-col items-center justify-center">
-          <Button onClick={() => setIsOpen(!isOpen)} tooltip="More Options">
-            <BiDotsVerticalRounded className="w-5 h-5" />
-          </Button>
+      <div className="absolute right-4 md:right-0 top-0 h-full flex items-center z-50">
+        {/* DESKTOP */}
+        <div className="hidden md:flex gap-2">
+          {mainButtons}
+          <div className="w-0.5 bg-darkblue/10 rounded-full my-2 mx-1" />
+          {socialButtons}
+        </div>
 
+        {/* MOBILE */}
+        <div className="md:hidden relative flex items-center justify-center">
           <AnimatePresence>
-            {isOpen && (
-              <motion.div
-                initial={{ opacity: 0, y: -10, scale: 0.95 }}
-                animate={{ opacity: 1, y: 0, scale: 1 }}
-                exit={{ opacity: 0, y: -10, scale: 0.95 }}
-                transition={{ duration: 0.2 }}
-                className={cn(
-                  "absolute top-full mt-2 flex flex-col gap-2 p-2 rounded-full shadow-xl z-50",
-                  "bg-carpipink border-darkblue/10 border",
-                )}
-              >
-                {buttonList}
-              </motion.div>
-            )}
+            {isOpen &&
+              mobileRadialButtons.map((btn, index) => {
+                // Number of pixels the buttons push outwards
+                const RADIUS = index % 2 === 0 ? 60 : 105;
+                const START_ANGLE = 80;
+                const END_ANGLE = 190;
+
+                // Calculate the specific angle for this button
+                const angleDeg =
+                  START_ANGLE +
+                  index *
+                    ((END_ANGLE - START_ANGLE) /
+                      (mobileRadialButtons.length - 1));
+                const angleRad = angleDeg * (Math.PI / 180);
+
+                // Convert angle & radius into X and Y coordinate offsets
+                const x = RADIUS * Math.cos(angleRad);
+                const y = RADIUS * Math.sin(angleRad);
+
+                return (
+                  <motion.div
+                    key={btn.id}
+                    initial={{ opacity: 0, x: 0, y: 0, scale: 0.5 }}
+                    animate={{ opacity: 1, x, y, scale: 1 }}
+                    exit={{ opacity: 0, x: 0, y: 0, scale: 0.5 }}
+                    transition={{
+                      type: "spring",
+                      stiffness: 260,
+                      damping: 20,
+                      delay: index * 0.04,
+                    }}
+                    className="absolute z-40"
+                  >
+                    {btn.component}
+                  </motion.div>
+                );
+              })}
           </AnimatePresence>
+
+          <motion.div
+            animate={{
+              scale: isOpen ? 0.8 : 1,
+              rotate: isOpen ? 90 : 0,
+            }}
+            transition={{ type: "spring", stiffness: 300, damping: 20 }}
+            className="relative z-50 bg-carpipink rounded-full"
+          >
+            <Button onClick={() => setIsOpen(!isOpen)} tooltip="More Options">
+              <BiDotsVerticalRounded className="w-5 h-5" />
+            </Button>
+          </motion.div>
         </div>
       </div>
 
+      {/* RESET DIALOG */}
       <Dialog
         title="Resetting Workspace"
         open={activeDialog === "reset"}

From 54deaf8390525d1813bda8bc4b4840290283b46d Mon Sep 17 00:00:00 2001
From: Miranda Zheng <123515762+mirmirmirr@users.noreply.github.com>
Date: Fri, 24 Apr 2026 08:55:15 -0400
Subject: [PATCH 2/6] add color

---
 src/components/Button.tsx            |  3 ++
 src/components/header/ButtonTray.tsx | 47 ++++++++++++++++++++++------
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 007575d..b33b3dd 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -7,6 +7,7 @@ interface ButtonProps {
   children: ReactNode;
   tooltip: string;
   inverted?: boolean; // Optional prop to invert colors
+  customStyles?: string; // Optional prop for additional custom styles
 }
 
 export default function Button({
@@ -14,6 +15,7 @@ export default function Button({
   children,
   tooltip,
   inverted,
+  customStyles = "",
 }: ButtonProps) {
   return (
     <div className="relative group flex flex-col items-center">
@@ -24,6 +26,7 @@ export default function Button({
           inverted
             ? "bg-carpipink/20 text-carpipink hover:text-darkblue hover:bg-carpipink transition-colors"
             : "bg-[color-mix(in_oklab,var(--color-darkblue)_25%,var(--color-carpipink)_75%)] hover:bg-darkblue hover:text-carpipink transition-colors",
+          customStyles,
         )}
       >
         {children}
diff --git a/src/components/header/ButtonTray.tsx b/src/components/header/ButtonTray.tsx
index e307ae4..48b1436 100644
--- a/src/components/header/ButtonTray.tsx
+++ b/src/components/header/ButtonTray.tsx
@@ -18,6 +18,7 @@ import {
   SaveFileSchema,
 } from "@/core/workspace/utils/io/inputOutput";
 import { useInputOutput } from "@/core/workspace/utils/io/useInputOutput";
+import { cn } from "@/lib/classnames";
 
 export default function ButtonTray() {
   const [isOpen, setIsOpen] = useState(false);
@@ -132,7 +133,11 @@ export default function ButtonTray() {
     {
       id: "export",
       component: (
-        <Button onClick={handleExportClick} tooltip="Export Plan">
+        <Button
+          onClick={handleExportClick}
+          tooltip="Export Plan"
+          customStyles="bg-darkblue text-carpipink"
+        >
           <BiExport className="w-5 h-5" />
         </Button>
       ),
@@ -140,33 +145,47 @@ export default function ButtonTray() {
     {
       id: "discord",
       component: (
-        <Button onClick={handleDiscordClick} tooltip="Join our Discord">
-          <BiLogoDiscordAlt className="w-5 h-5" />
+        <Button
+          onClick={handleDiscordClick}
+          tooltip="Join our Discord"
+          customStyles="bg-[#5865f2] text-[#e0e3ff] p-1.5"
+        >
+          <BiLogoDiscordAlt className="w-8 h-8" />
         </Button>
       ),
     },
     {
       id: "import",
       component: (
-        <Button onClick={handleImportClick} tooltip="Import Plan">
+        <Button
+          onClick={handleImportClick}
+          tooltip="Import Plan"
+          customStyles="bg-darkblue text-carpipink"
+        >
           <BiImport className="w-5 h-5" />
         </Button>
       ),
     },
-
     {
       id: "github",
       component: (
-        <Button onClick={handleGithubClick} tooltip="View on GitHub">
-          <BiLogoGithub className="w-5 h-5" />
+        <Button
+          onClick={handleGithubClick}
+          tooltip="View on GitHub"
+          customStyles="bg-[#8534F3] text-[#e0e3ff] p-1.5"
+        >
+          <BiLogoGithub className="w-8 h-8" />
         </Button>
       ),
     },
-
     {
       id: "reset",
       component: (
-        <Button onClick={handleResetClick} tooltip="Reset Workspace">
+        <Button
+          onClick={handleResetClick}
+          tooltip="Reset Workspace"
+          customStyles="bg-darkblue text-carpipink"
+        >
           <BiReset className="w-5 h-5" />
         </Button>
       ),
@@ -241,7 +260,15 @@ export default function ButtonTray() {
             transition={{ type: "spring", stiffness: 300, damping: 20 }}
             className="relative z-50 bg-carpipink rounded-full"
           >
-            <Button onClick={() => setIsOpen(!isOpen)} tooltip="More Options">
+            <Button
+              onClick={() => setIsOpen(!isOpen)}
+              tooltip="More Options"
+              customStyles={cn(
+                isOpen
+                  ? "bg-darkblue text-carpipink transition-colors duration-300"
+                  : "",
+              )}
+            >
               <BiDotsVerticalRounded className="w-5 h-5" />
             </Button>
           </motion.div>

From 2283b5be6e0a10a45211eb828389e5e3783a9859 Mon Sep 17 00:00:00 2001
From: Miranda Zheng <123515762+mirmirmirr@users.noreply.github.com>
Date: Fri, 24 Apr 2026 09:36:36 -0400
Subject: [PATCH 3/6] update github link

---
 src/components/header/ButtonTray.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/header/ButtonTray.tsx b/src/components/header/ButtonTray.tsx
index 48b1436..30901a7 100644
--- a/src/components/header/ButtonTray.tsx
+++ b/src/components/header/ButtonTray.tsx
@@ -98,7 +98,7 @@ export default function ButtonTray() {
 
   const handleGithubClick = () => {
     window.open(
-      "https://github.com/your-username/project-carpi",
+      "https://github.com/Project-CARPI",
       "_blank",
       "noopener,noreferrer",
     );

From efa4cf2f7b66da18704e3b7a40402103c4f36bc1 Mon Sep 17 00:00:00 2001
From: Miranda Zheng <123515762+mirmirmirr@users.noreply.github.com>
Date: Fri, 24 Apr 2026 09:48:24 -0400
Subject: [PATCH 4/6] fix lint error

---
 src/App.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1bb3c39..0d15998 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 import ButtonTray from "@/components/header/ButtonTray";
-import SocialTray from "@/components/header/SocialTray";
 import { CourseWorkspaceProvider } from "@/core/workspace/provider";
 import WorkspaceDndProvider from "@/features/dnd/dnd.tsx";
 import Toolbox from "@/features/toolbox/Toolbox";

From 9914bf05b94da0e1f9ce8ac586b499424f0710ab Mon Sep 17 00:00:00 2001
From: Miranda Zheng <123515762+mirmirmirr@users.noreply.github.com>
Date: Fri, 24 Apr 2026 09:48:51 -0400
Subject: [PATCH 5/6] add hover effects

---
 src/components/Button.tsx            | 16 ++++++++--------
 src/components/header/ButtonTray.tsx | 17 +++++++++++++----
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b33b3dd..ca1bfe8 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -6,8 +6,8 @@ interface ButtonProps {
   onClick?: () => void;
   children: ReactNode;
   tooltip: string;
-  inverted?: boolean; // Optional prop to invert colors
-  customStyles?: string; // Optional prop for additional custom styles
+  inverted?: boolean;
+  customStyles?: string;
 }
 
 export default function Button({
@@ -18,14 +18,14 @@ export default function Button({
   customStyles = "",
 }: ButtonProps) {
   return (
-    <div className="relative group flex flex-col items-center">
+    <div className="relative flex flex-col items-center">
       <button
         onClick={onClick}
         className={cn(
-          "p-3 rounded-full w-fit aspect-square flex items-center justify-center hover:cursor-pointer",
+          "peer group p-3 rounded-full w-fit aspect-square flex items-center justify-center hover:cursor-pointer",
           inverted
-            ? "bg-carpipink/20 text-carpipink hover:text-darkblue hover:bg-carpipink transition-colors"
-            : "bg-[color-mix(in_oklab,var(--color-darkblue)_25%,var(--color-carpipink)_75%)] hover:bg-darkblue hover:text-carpipink transition-colors",
+            ? "bg-carpipink/20 text-carpipink hover:text-darkblue hover:bg-carpipink"
+            : "bg-[color-mix(in_oklab,var(--color-darkblue)_25%,var(--color-carpipink)_75%)] hover:bg-darkblue hover:text-carpipink",
           customStyles,
         )}
       >
@@ -35,13 +35,13 @@ export default function Button({
       {/* Tooltip Container */}
       <div
         className={cn(
-          "absolute -bottom-7 z-50 hidden group-hover:flex flex-col items-center ",
+          "absolute -bottom-7 z-50 hidden peer-hover:flex flex-col items-center ",
           inverted ? " text-darkblue" : " text-carpipink",
         )}
       >
         <div
           className={cn(
-            "w-2 h-2  rotate-45",
+            "w-2 h-2 rotate-45",
             inverted ? "bg-carpipink" : "bg-darkblue",
           )}
         />
diff --git a/src/components/header/ButtonTray.tsx b/src/components/header/ButtonTray.tsx
index 30901a7..656ca07 100644
--- a/src/components/header/ButtonTray.tsx
+++ b/src/components/header/ButtonTray.tsx
@@ -120,11 +120,20 @@ export default function ButtonTray() {
 
   const socialButtons = (
     <>
-      <Button onClick={handleDiscordClick} tooltip="Join our Discord">
-        <BiLogoDiscordAlt className="w-5 h-5" />
+      <Button
+        onClick={handleDiscordClick}
+        tooltip="Join our Discord"
+        customStyles="hover:bg-[#5865f2] hover:text-[#e0e3ff] hover:p-1.5 p-3 transition-all duration-300"
+      >
+        <BiLogoDiscordAlt className="group-hover:w-8 group-hover:h-8 w-5 h-5 transition-all duration-300" />
       </Button>
-      <Button onClick={handleGithubClick} tooltip="View on GitHub">
-        <BiLogoGithub className="w-5 h-5" />
+
+      <Button
+        onClick={handleGithubClick}
+        tooltip="View on GitHub"
+        customStyles="hover:bg-[#8534F3] hover:text-[#e0e3ff] hover:p-1.5 p-3 transition-all duration-300"
+      >
+        <BiLogoGithub className="group-hover:w-8 group-hover:h-8 w-5 h-5 transition-all duration-300" />
       </Button>
     </>
   );

From 2e5e09b28a8c31f9d4dededb5f07a6f9bd1a96e8 Mon Sep 17 00:00:00 2001
From: Miranda Zheng <123515762+mirmirmirr@users.noreply.github.com>
Date: Fri, 24 Apr 2026 09:50:26 -0400
Subject: [PATCH 6/6] close button tray on click

---
 src/components/header/ButtonTray.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/header/ButtonTray.tsx b/src/components/header/ButtonTray.tsx
index 656ca07..9137aa5 100644
--- a/src/components/header/ButtonTray.tsx
+++ b/src/components/header/ButtonTray.tsx
@@ -88,20 +88,17 @@ export default function ButtonTray() {
     return true;
   };
 
+  const openExternalLinkAndClose = (url: string) => {
+    window.open(url, "_blank", "noopener,noreferrer");
+    setIsOpen(false);
+  };
+
   const handleDiscordClick = () => {
-    window.open(
-      "https://discord.com/invite/xRBvFHgcYT",
-      "_blank",
-      "noopener,noreferrer",
-    );
+    openExternalLinkAndClose("https://discord.com/invite/xRBvFHgcYT");
   };
 
   const handleGithubClick = () => {
-    window.open(
-      "https://github.com/Project-CARPI",
-      "_blank",
-      "noopener,noreferrer",
-    );
+    openExternalLinkAndClose("https://github.com/Project-CARPI");
   };
 
   const mainButtons = (