Merge pull request #700 from UTDNebula/new-tab-branch

TyHil · web-flow · commit 87588a70653c · 2025-06-03T15:53:36.000-05:00
Side-bar opens a New tab
diff --git a/src/components/BetaBanner.tsx b/src/components/BetaBanner.tsx
@@ -10,7 +10,7 @@ const BetaBanner: FC = () => {
             e.preventDefault();
             window.open('https://forms.gle/wx4zxm3cemut31tNA', '_blank');
           }}
-          className="flex items-center justify-center rounded-md bg-white px-2 py-1 font-medium hover:bg-gray-50"
+          className="flex items-center justify-center rounded-md bg-white px-2 py-1 font-medium hover:bg-gray-50 cursor-pointer"
         >
           Report a bug
         </button>
@@ -25,7 +25,7 @@ const BetaBanner: FC = () => {
               '_blank',
             );
           }}
-          className="flex items-center justify-center rounded-md bg-white px-2 py-1 font-medium hover:bg-gray-50"
+          className="flex items-center justify-center rounded-md bg-white px-2 py-1 font-medium hover:bg-gray-50 cursor-pointer"
         >
           Learn more
         </button>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -49,7 +49,7 @@ const Button: FC<ButtonProps> = ({
   return (
     <button
       {...props}
-      className={`relative ${colorClasses[color]} ${sizeClasses[size]} flex h-fit ${widthClasses[width]} ${fontClasses[font]} items-center justify-center rounded-md transition duration-200 ease-in-out ${className} disabled:opacity-50`}
+      className={`relative ${colorClasses[color]} ${sizeClasses[size]} flex h-fit ${widthClasses[width]} ${fontClasses[font]} items-center justify-center rounded-md transition duration-200 ease-in-out ${className} disabled:opacity-50 cursor-pointer`}
     >
       {icon && <span className={isLoading ? 'opacity-0' : ''}>{icon}</span>}
       {Children.count(children) > 0 && (
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
@@ -109,7 +109,7 @@ export default function PlansPage() {
                 <button
                   id="tutorial-2"
                   data-testid="add-new-plan-btn"
-                  className="flex h-12 flex-row items-center gap-4 rounded-md bg-primary p-6 text-white transition-all hover:bg-primary-600 active:bg-primary-600"
+                  className="flex h-12 flex-row items-center gap-4 rounded-md bg-primary p-6 text-white transition-all hover:bg-primary-600 active:bg-primary-600 cursor-pointer"
                 >
                   <PlusIcon />
                   <p>Add New Plan</p>
diff --git a/src/components/home/Sidebar.tsx b/src/components/home/Sidebar.tsx
@@ -28,16 +28,19 @@ export default function Sidebar({ isMobile }: { isMobile: boolean }) {
       url: '/app/home',
       label: 'Dashboard',
       Icon: HomeIcon,
+      newTab: false,
     },
     {
       url: '/app/profile',
       label: 'Profile',
       Icon: ProfileIcon,
+      newTab: false,
     },
     {
       url: 'https://discord.utdnebula.com/',
       label: 'Join Our Discord',
       Icon: GlobalIcon,
+      newTab: true,
     },
   ];
 
@@ -65,8 +68,8 @@ export default function Sidebar({ isMobile }: { isMobile: boolean }) {
           </div>
         )}
         <ul className="flex flex-col gap-y-[25px]">
-          {sidebarItems.map(({ url, label, Icon }, i) => (
-            <Link key={url + i} href={url}>
+          {sidebarItems.map(({ url, label, Icon, newTab }, i) => (
+            <Link key={url + i} href={url} target={newTab ? '_blank' : ''}>
               <li
                 className={`${
                   router.pathname === url && 'rounded-lg bg-primary font-medium text-white'
@@ -83,7 +86,7 @@ export default function Sidebar({ isMobile }: { isMobile: boolean }) {
         <div className="grow"></div>
 
         <button
-          className="mx-4 flex  items-center gap-6 px-5 pb-5 align-bottom"
+          className="mx-4 flex  items-center gap-6 px-5 pb-5 align-bottom cursor-pointer"
           onClick={() => signOut()}
         >
           <LogoutIcon className="h-6 w-6" />
diff --git a/src/components/landing/PlanCard.tsx b/src/components/landing/PlanCard.tsx
@@ -40,7 +40,7 @@ export default function PlanCard({ id, name, major }: PlanCardProps) {
       <div className="relative w-full rounded-2xl border-b-12 border-[#A3A3A3] border-b-primary bg-white text-[#1C2A6D] transition-all hover:scale-110 hover:border-b-0 hover:bg-primary hover:text-white">
         <button
           onClick={handlePlanClick}
-          className="flex h-[180px] w-full flex-col px-8 py-6 text-left"
+          className="flex h-[180px] w-full flex-col px-8 py-6 text-left cursor-pointer"
         >
           <div className="flex w-full flex-row items-center justify-between">
             <h4 className="overflow-hidden text-ellipsis whitespace-nowrap text-[15px] font-normal ">
@@ -52,7 +52,7 @@ export default function PlanCard({ id, name, major }: PlanCardProps) {
             >
               <button
                 aria-label="Customise options"
-                className="h-10 w-10 self-stretch rounded-full hover:bg-neutral-200 hover:text-black"
+                className="h-10 w-10 self-stretch rounded-full hover:bg-neutral-200 hover:text-black cursor-pointer"
               >
                 <DotsHorizontalIcon className="m-auto rotate-90" />
               </button>
diff --git a/src/components/planner/CourseInfoHoverCard.tsx b/src/components/planner/CourseInfoHoverCard.tsx
@@ -70,7 +70,7 @@ const CourseDescription = ({ description }: { description: string }) => {
           }}
         />{' '}
         <button
-          className={`${showMore ? '' : 'inline'} font-medium text-primary`}
+          className={`${showMore ? '' : 'inline'} font-medium text-primary cursor-pointer`}
           onClick={() => {
             setShowMore(!showMore);
           }}
diff --git a/src/components/planner/EditableMajor.tsx b/src/components/planner/EditableMajor.tsx
@@ -28,7 +28,7 @@ const EditableMajor = ({
     <>
       {!editMajor ? (
         <button
-          className="flex items-center gap-x-3 rounded-2xl bg-primary-100 px-3 py-2 tracking-tight"
+          className="flex items-center gap-x-3 rounded-2xl bg-primary-100 px-3 py-2 tracking-tight cursor-pointer"
           onClick={() => setEditMajor(true)}
         >
           <span className="text-lg font-semibold text-primary-800" data-testid="plan-major">
diff --git a/src/components/planner/Sidebar/Accordion.tsx b/src/components/planner/Sidebar/Accordion.tsx
@@ -20,7 +20,7 @@ export default function Accordion({
   return (
     <div className={` rounded-md ${filled ? ' opacity-50' : ''}`}>
       <button
-        className="flex w-full flex-row items-center justify-between px-2 duration-500"
+        className="flex w-full flex-row items-center justify-between px-2 duration-500 cursor-pointer"
         onClick={toggleAccordion}
       >
         {header}
diff --git a/src/components/planner/Sidebar/RequirementsContainer.tsx b/src/components/planner/Sidebar/RequirementsContainer.tsx
@@ -30,7 +30,7 @@ function RequirementContainerHeader({
   const { value, max, unit } = progress;
   return (
     <div className="flex w-full flex-row items-start justify-start">
-      <button onClick={() => setCarousel(false)}>
+      <button onClick={() => setCarousel(false)} className="cursor-pointer">
         <svg
           width="30"
           height="27"
@@ -309,6 +309,7 @@ export default function RequirementsContainer({
                     toggleCarousel();
                     setRequirementIdx(idx);
                   }}
+                  className="cursor-pointer"
                 >
                   <div
                     className="flex items-center justify-between gap-x-4 rounded-md border border-neutral-300 px-5 py-4"
diff --git a/src/components/planner/Tiles/SemesterTile.tsx b/src/components/planner/Tiles/SemesterTile.tsx
@@ -131,7 +131,10 @@ export const MemoizedSemesterTile = memo(
               >
                 {displaySemesterCode(semester.code)}
               </h3>
-              <button onClick={() => handleSemesterLock(semester.id.toString(), !semester.locked)}>
+              <button
+                onClick={() => handleSemesterLock(semester.id.toString(), !semester.locked)}
+                className="cursor-pointer"
+              >
                 {!semester.locked ? <UnlockedIcon /> : <LockIcon />}
               </button>
             </div>
diff --git a/src/components/planner/Tiles/SemesterTileDropdown.tsx b/src/components/planner/Tiles/SemesterTileDropdown.tsx
@@ -37,7 +37,7 @@ const SemesterTileDropdown: FC<SemesterTileDropdownProps> = ({
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
-        <button aria-label="Customise options" className="self-stretch">
+        <button aria-label="Customise options" className="self-stretch cursor-pointer">
           <DotsHorizontalIcon className="m-auto" />
         </button>
       </DropdownMenu.Trigger>
diff --git a/src/components/planner/Toolbar/EditablePlanTitle.tsx b/src/components/planner/Toolbar/EditablePlanTitle.tsx
@@ -42,7 +42,7 @@ export default function EditableMajorTitle({
     <>
       {!editTitle ? (
         <button
-          className="flex flex-row items-center gap-x-3"
+          className="flex flex-row items-center gap-x-3 cursor-pointer"
           id="tutorial-editor-4"
           onClick={() => {
             setEditTitle(true);
diff --git a/src/components/planner/Toolbar/Toolbar.tsx b/src/components/planner/Toolbar/Toolbar.tsx
@@ -70,7 +70,10 @@ const Toolbar: FC<ToolbarProps> = ({
   return (
     <div className="flex flex-row items-start gap-2 py-1 text-primary-900">
       <ToolbarWrapper>
-        <button type="button" className="rounded-xs transition-all hover:bg-black/10">
+        <button
+          type="button"
+          className="rounded-xs transition-all hover:bg-black/10 cursor-pointer"
+        >
           <Link href="/app/home">
             <ArrowBackIcon fontSize="medium" />
           </Link>
diff --git a/src/components/template/CustomPlan.tsx b/src/components/template/CustomPlan.tsx
@@ -321,7 +321,7 @@ export default function CustomPlan({ onDismiss }: { onDismiss: () => void }) {
       <div className="salt contents">
         <button
           ref={dropRef}
-          className="group flex flex-col items-center justify-center gap-0.5 rounded-md border border-neutral-200 bg-inherit py-10 transition-colors"
+          className="group flex flex-col items-center justify-center gap-0.5 rounded-md border border-neutral-200 bg-inherit py-10 transition-colors cursor-pointer"
           onClick={() => fileInputRef.current && fileInputRef.current.click()}
           data-testid="upload-transcript-btn"
         >
@@ -381,6 +381,7 @@ export default function CustomPlan({ onDismiss }: { onDismiss: () => void }) {
                 setTransferCredits([]);
                 setTakenCourses([]);
               }}
+              className="cursor-pointer"
             >
               <svg
                 width="32"
diff --git a/src/components/template/Page.tsx b/src/components/template/Page.tsx
@@ -37,7 +37,7 @@ export function Page({
         </div>
         <button
           onClick={close}
-          className="h-min w-min p-2 text-neutral-500 transition-colors hover:text-neutral-700"
+          className="h-min w-min p-2 text-neutral-500 transition-colors hover:text-neutral-700 cursor-pointer"
         >
           <CloseIcon fontSize="small" />
         </button>
@@ -51,6 +51,7 @@ export function Page({
             key={index}
             isLoading={loading}
             disabled={disabled}
+            className="cursor-pointer"
             {...props}
           >
             {name}
diff --git a/src/pages/app/onboarding.tsx b/src/pages/app/onboarding.tsx
@@ -139,13 +139,6 @@ export default function OnboardingPage() {
             >
               Create Account
             </Button>
-            {/* <button
-              onClick={incrementPage}
-              disabled={!validNextPage}
-              className="w-full rounded-lg bg-[#6366F1] py-3 text-center text-[16px] font-semibold text-white hover:bg-[#EEF2FF] hover:text-[#312E81] disabled:opacity-50"
-            >
-              Create Account
-            </button> */}
           </div>
         </section>
       </div>
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
@@ -160,7 +160,7 @@ export function AuthPage(props: {
                           callbackUrl: '/app/home',
                         });
                       }}
-                      className={`-ml-2 h-10 rounded-full px-3 text-gray-200 `}
+                      className={`-ml-2 h-10 rounded-full px-3 text-gray-200 cursor-pointer `}
                     >
                       {AuthIcons[provider.id]}
                     </button>

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ const Button: FC<ButtonProps> = ({`
`49`	`49`	`return (`
`50`	`50`	`<button`
`51`	`51`	`{...props}`
`52`		- className={`relative ${colorClasses[color]} ${sizeClasses[size]} flex h-fit ${widthClasses[width]} ${fontClasses[font]} items-center justify-center rounded-md transition duration-200 ease-in-out ${className} disabled:opacity-50`}
	`52`	+ className={`relative ${colorClasses[color]} ${sizeClasses[size]} flex h-fit ${widthClasses[width]} ${fontClasses[font]} items-center justify-center rounded-md transition duration-200 ease-in-out ${className} disabled:opacity-50 cursor-pointer`}
`53`	`53`	`>`
`54`	`54`	`{icon && <span className={isLoading ? 'opacity-0' : ''}>{icon}</span>}`
`55`	`55`	`{Children.count(children) > 0 && (`
Original file line number	Diff line number	Diff line change
`@@ -109,7 +109,7 @@ export default function PlansPage() {`
`109`	`109`	`<button`
`110`	`110`	`id="tutorial-2"`
`111`	`111`	`data-testid="add-new-plan-btn"`
`112`		`- className="flex h-12 flex-row items-center gap-4 rounded-md bg-primary p-6 text-white transition-all hover:bg-primary-600 active:bg-primary-600"`
	`112`	`+ className="flex h-12 flex-row items-center gap-4 rounded-md bg-primary p-6 text-white transition-all hover:bg-primary-600 active:bg-primary-600 cursor-pointer"`
`113`	`113`	`>`
`114`	`114`	`<PlusIcon />`
`115`	`115`	`<p>Add New Plan</p>`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@ export default function PlanCard({ id, name, major }: PlanCardProps) {`
`40`	`40`	`<div className="relative w-full rounded-2xl border-b-12 border-[#A3A3A3] border-b-primary bg-white text-[#1C2A6D] transition-all hover:scale-110 hover:border-b-0 hover:bg-primary hover:text-white">`
`41`	`41`	`<button`
`42`	`42`	`onClick={handlePlanClick}`
`43`		`- className="flex h-[180px] w-full flex-col px-8 py-6 text-left"`
	`43`	`+ className="flex h-[180px] w-full flex-col px-8 py-6 text-left cursor-pointer"`
`44`	`44`	`>`
`45`	`45`	`<div className="flex w-full flex-row items-center justify-between">`
`46`	`46`	`<h4 className="overflow-hidden text-ellipsis whitespace-nowrap text-[15px] font-normal ">`
`@@ -52,7 +52,7 @@ export default function PlanCard({ id, name, major }: PlanCardProps) {`
`52`	`52`	`>`
`53`	`53`	`<button`
`54`	`54`	`aria-label="Customise options"`
`55`		`- className="h-10 w-10 self-stretch rounded-full hover:bg-neutral-200 hover:text-black"`
	`55`	`+ className="h-10 w-10 self-stretch rounded-full hover:bg-neutral-200 hover:text-black cursor-pointer"`
`56`	`56`	`>`
`57`	`57`	`<DotsHorizontalIcon className="m-auto rotate-90" />`
`58`	`58`	`</button>`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ const EditableMajor = ({`
`28`	`28`	`<>`
`29`	`29`	`{!editMajor ? (`
`30`	`30`	`<button`
`31`		`- className="flex items-center gap-x-3 rounded-2xl bg-primary-100 px-3 py-2 tracking-tight"`
	`31`	`+ className="flex items-center gap-x-3 rounded-2xl bg-primary-100 px-3 py-2 tracking-tight cursor-pointer"`
`32`	`32`	`onClick={() => setEditMajor(true)}`
`33`	`33`	`>`
`34`	`34`	`<span className="text-lg font-semibold text-primary-800" data-testid="plan-major">`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export default function Accordion({`
`20`	`20`	`return (`
`21`	`21`	<div className={` rounded-md ${filled ? ' opacity-50' : ''}`}>
`22`	`22`	`<button`
`23`		`- className="flex w-full flex-row items-center justify-between px-2 duration-500"`
	`23`	`+ className="flex w-full flex-row items-center justify-between px-2 duration-500 cursor-pointer"`
`24`	`24`	`onClick={toggleAccordion}`
`25`	`25`	`>`
`26`	`26`	`{header}`