adding a back button on skule hunt page to return to profile

UofT-Frosh-Orientation · Jul 19, 2024 · fb5391e · fb5391e
1 parent 48a3964
commit fb5391e
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/client/src/assets/misc/backarrow.png b/client/src/assets/misc/backarrow.png
diff --git a/client/src/assets/misc/left-arrow-svgrepo-com.svg b/client/src/assets/misc/left-arrow-svgrepo-com.svg
diff --git a/client/src/pages/ScuntHome/ScuntHome.jsx b/client/src/pages/ScuntHome/ScuntHome.jsx
@@ -21,6 +21,7 @@ import { getScuntTeams } from '../../state/scuntTeams/saga';
 // import { ProfilePageScuntTeam } from '../Profile/PageProfileFrosh';
 const { axios } = useAxios();
 import scuntLogo from '../../assets/scuntlogo/scunt_color_2t4.svg';
+import arrowLogo from '../../assets/misc/left-arrow-svgrepo-com.svg'
 import { SingleAccordion } from '../../components/text/Accordion/SingleAccordion/SingleAccordion';
 
 export const PageScuntHome = () => {
@@ -33,13 +34,23 @@ export const PageScuntHome = () => {
 
   return (
     <>
+      <BackToProfileButton />
       <ScuntCountdown />
       <ScuntLinks />
       <AboutScunt />
     </>
   );
 };
 
+const BackToProfileButton = () => {
+
+  return (
+    <Link to="/profile" className="back-button">
+      <img src={arrowLogo} alt="Back" className="back-icon" />
+    </Link>
+  );
+};
+
 const AboutScunt = () => {
   const { darkMode } = useContext(DarkModeContext);
 

diff --git a/client/src/pages/ScuntHome/ScuntHome.scss b/client/src/pages/ScuntHome/ScuntHome.scss
@@ -126,3 +126,17 @@
   margin: 10px 10px;
   color: var(--text-dynamic);
 }
+
+.back-button {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  display: inline-block;
+  background: none; 
+}
+
+.back-icon {
+  width: 24px;
+  height: 24px;
+  fill: purple;
+}