From c9e8f3b162c5c0cba2b889ae1c5aa627220f80da Mon Sep 17 00:00:00 2001 From: Julia Dai Date: Fri, 11 Oct 2024 11:18:07 +0200 Subject: [PATCH 01/11] vf-166 update team division cards styling --- src/pages/public/Team/components/Division.tsx | 91 ++++++++----------- 1 file changed, 37 insertions(+), 54 deletions(-) diff --git a/src/pages/public/Team/components/Division.tsx b/src/pages/public/Team/components/Division.tsx index 77bfb0ce..4537a1a7 100644 --- a/src/pages/public/Team/components/Division.tsx +++ b/src/pages/public/Team/components/Division.tsx @@ -18,66 +18,49 @@ const Division = ({ url, }: Props): JSX.Element => { const navigate = useNavigate(); + + const chosenStyle = + title === "Styret" + ? "w-64" + : "w-64"; + return ( -
-
- {title} +
navigate(`/team/${url}`)}> +
+

+ {title} +

-
- {text} -
-
- - - - - - - {mail} - -
-
- - - -
{`${numberOfMembers} medlemmer`}
-
-
+
+

{text}

-
-
- ); -}; + ) +} -export default Division; +export default Division; \ No newline at end of file From 321f6fabcad660ae7de866f5722b983e42d66355 Mon Sep 17 00:00:00 2001 From: Julia Dai Date: Tue, 15 Oct 2024 15:25:43 +0200 Subject: [PATCH 02/11] vf-166 Create new tab component --- .../public/Kontakt/components/KontaktOss.tsx | 35 +---- src/pages/public/Team/components/Team.tsx | 6 +- src/pages/public/Team/components/TeamTabs.tsx | 127 +++++++++--------- 3 files changed, 73 insertions(+), 95 deletions(-) diff --git a/src/pages/public/Kontakt/components/KontaktOss.tsx b/src/pages/public/Kontakt/components/KontaktOss.tsx index ab8193e8..a8e216a9 100644 --- a/src/pages/public/Kontakt/components/KontaktOss.tsx +++ b/src/pages/public/Kontakt/components/KontaktOss.tsx @@ -1,7 +1,8 @@ import React, { useEffect } from "react"; import Division from "./Division.js"; +import { Tabs } from "../../Team/components/TeamTabs.js"; -interface TabProps { +interface KontaktTabProps { divisions: DivisionList[]; } @@ -149,7 +150,7 @@ const HovedstyretTab = ({ open }: { open: boolean }): JSX.Element => { ); }; -const Tabs = ({ divisions }: TabProps): JSX.Element => { +const KontactTabs = ({ divisions }: KontaktTabProps): JSX.Element => { const initialTabState = () => { const storedTab = sessionStorage.getItem("kontaktTab"); return storedTab ? Number.parseInt(storedTab, 10) : 1; @@ -160,33 +161,7 @@ const Tabs = ({ divisions }: TabProps): JSX.Element => { }, [openTab]); return (
-
- {divisions.map((data) => { - const chosenStyle = - openTab === data.number - ? "border-t-gray-200 border-l-gray-200 border-r-gray-200 border-b-white text-vektor-darblue z-50" - : "text-vektor-darblue z-50"; - return ( -
- -
- ); - })} -
+
@@ -197,4 +172,4 @@ const Tabs = ({ divisions }: TabProps): JSX.Element => { ); }; -export default Tabs; +export default KontactTabs; diff --git a/src/pages/public/Team/components/Team.tsx b/src/pages/public/Team/components/Team.tsx index 9c1e33fb..77e87c39 100644 --- a/src/pages/public/Team/components/Team.tsx +++ b/src/pages/public/Team/components/Team.tsx @@ -1,5 +1,5 @@ import TeamCard from "./TeamCard"; -import Tabs from "./TeamTabs"; +import TeamTabs from "./TeamTabs"; const teamInfo = { title: "Våre team", @@ -18,7 +18,7 @@ const teamInfo = { const Team = (): JSX.Element => { return ( -
+
{

{teamInfo.title}

- void; +}; + +interface TeamTabProps { + divisions: DivisionList[]; } interface DivisionList { @@ -19,7 +25,7 @@ const TrondheimTab = ({ open }: { open: boolean }): JSX.Element => { }`} > { url="trondheim/styret" /> { url="trondheim/evaluering" /> { url="trondheim/rekruttering" /> { url="trondheim/skolekoordinering" /> { url="trondheim/sponsor" /> { url="trondheim/IT" /> { }`} > { url="aas/styret" /> { url="aas/sponsor-okonomi" /> { url="aas/skolekoordinering" /> { url="aas/evaluering-rekruttering-profilering" /> { }`} > { url="bergen/styret" /> { url="bergen/skolekoordinering" /> { ); }; -const Tabs = ({ divisions }: TabProps): JSX.Element => { + + +export const Tabs = ({divisions, tabstate, setOpenTab}: TabProps): JSX.Element => { + + return ( +
+ {divisions.map((data) => { + const chosenStyle = + tabstate === data.number + ? "bg-vektor-darblue text-white" + : "bg-transparent hover:bg-[#c7ecf8]"; + return ( +
+ +
+ ); + })} +
+ ) +} + +const TeamTabs = ({ divisions }: TeamTabProps): JSX.Element => { const initialTabState = () => { const storedTab = sessionStorage.getItem("teamTab"); return storedTab ? Number.parseInt(storedTab, 10) : 1; }; - const [openTab, setOpenTab] = React.useState(initialTabState); + const [openTab, setOpenTab] = React.useState(initialTabState); + useEffect(() => { sessionStorage.setItem("teamTab", openTab.toString()); }, [openTab]); + return ( -
-
- -
- - - - -
+
+ +
+ + + +
- ); -}; + ) +} -export default Tabs; +export default TeamTabs; From 6ca5adab6fd8debf40824c69cb1dc0fda463bc1c Mon Sep 17 00:00:00 2001 From: Julia Dai Date: Fri, 18 Oct 2024 11:38:37 +0200 Subject: [PATCH 03/11] vf-166 Add light blue global color --- tailwind.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/tailwind.config.ts b/tailwind.config.ts index 3cdd2eee..2b8a7404 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -22,6 +22,7 @@ export default { "vektor-bg": "#fafdff", "table-grey": "#EFEFEF", "vektor-kontrollblue": "#292E4C", + "vektor-light-blue": "#c7ecf8", }, }, }, From 28d2bc9f391c0c27808b02be39d17dbf2de06e83 Mon Sep 17 00:00:00 2001 From: Julia Dai Date: Fri, 18 Oct 2024 11:51:33 +0200 Subject: [PATCH 04/11] vf-166 Fix styling of contact page --- src/pages/public/Kontakt/components/Division.tsx | 2 +- .../public/Kontakt/components/KontaktOss.tsx | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/pages/public/Kontakt/components/Division.tsx b/src/pages/public/Kontakt/components/Division.tsx index e4668367..ad1c7040 100644 --- a/src/pages/public/Kontakt/components/Division.tsx +++ b/src/pages/public/Kontakt/components/Division.tsx @@ -28,7 +28,7 @@ const Division = ({ }: DivisionProps): JSX.Element => { return ( <> -
+
{name}
{subtitle &&
{subtitle}
} diff --git a/src/pages/public/Kontakt/components/KontaktOss.tsx b/src/pages/public/Kontakt/components/KontaktOss.tsx index a8e216a9..9b3c244d 100644 --- a/src/pages/public/Kontakt/components/KontaktOss.tsx +++ b/src/pages/public/Kontakt/components/KontaktOss.tsx @@ -71,7 +71,7 @@ const AasTab = ({ open }: { open: boolean }): JSX.Element => { const BergenTab = ({ open }: { open: boolean }): JSX.Element => { return ( -
+
{ ); }; -const KontactTabs = ({ divisions }: KontaktTabProps): JSX.Element => { +const KontaktTabs = ({ divisions }: KontaktTabProps): JSX.Element => { const initialTabState = () => { const storedTab = sessionStorage.getItem("kontaktTab"); return storedTab ? Number.parseInt(storedTab, 10) : 1; @@ -160,16 +160,19 @@ const KontactTabs = ({ divisions }: KontaktTabProps): JSX.Element => { sessionStorage.setItem("kontaktTab", openTab.toString()); }, [openTab]); return ( -
- -
+
+
+ +
+
+
); }; -export default KontactTabs; +export default KontaktTabs; From 17f78f175eb037d4f0886d939a86114fcc43e566 Mon Sep 17 00:00:00 2001 From: Julia Dai Date: Fri, 18 Oct 2024 11:52:15 +0200 Subject: [PATCH 05/11] vf-166 Use global colors on team tabs --- src/pages/public/Team/components/Division.tsx | 2 +- src/pages/public/Team/components/TeamTabs.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/public/Team/components/Division.tsx b/src/pages/public/Team/components/Division.tsx index 4537a1a7..d672509a 100644 --- a/src/pages/public/Team/components/Division.tsx +++ b/src/pages/public/Team/components/Division.tsx @@ -25,7 +25,7 @@ const Division = ({ : "w-64"; return ( -
navigate(`/team/${url}`)}> +
navigate(`/team/${url}`)}>

{title} diff --git a/src/pages/public/Team/components/TeamTabs.tsx b/src/pages/public/Team/components/TeamTabs.tsx index e14a5ad1..e4f60a3e 100644 --- a/src/pages/public/Team/components/TeamTabs.tsx +++ b/src/pages/public/Team/components/TeamTabs.tsx @@ -190,7 +190,7 @@ const HovedstyretTab = ({ open }: { open: boolean }): JSX.Element => {

Hovedstyret

-
+
Hovedstyret er det nasjonale styret i vektorprogrammet. De er et overordnet organ med ansvar for drifting av hele organisasjonen.
@@ -257,12 +257,12 @@ const HovedstyretTab = ({ open }: { open: boolean }): JSX.Element => { export const Tabs = ({divisions, tabstate, setOpenTab}: TabProps): JSX.Element => { return ( -
+
{divisions.map((data) => { const chosenStyle = tabstate === data.number - ? "bg-vektor-darblue text-white" - : "bg-transparent hover:bg-[#c7ecf8]"; + ? "bg-vektor-darblue text-white hover:bg-vektor-darblue" + : "bg-transparent hover:bg-vektor-light-blue"; return (
+ + + {divisions.map((data) => { + const chosenStyle = + tabstate === data.number + ? "font-semibold text-vektor-darblue" + : "hover:text-vektor-light-blue"; + return ( +
+ { + e.preventDefault(); + setOpenTab(data.number); + setIsOpen(false); + }} + > + {data.name} + + +
+ ); + })} + + + ); + } + return ( -
+
{divisions.map((data) => { const chosenStyle = tabstate === data.number ? "bg-vektor-darblue text-white hover:bg-vektor-darblue" - : "bg-transparent hover:bg-vektor-light-blue"; + : "bg-transparent hover:bg-vektor-light-blue dark:text-white"; return (
@@ -127,7 +127,7 @@ const Division = ({
{contact && ( -
+
{`Kontakt styret i ${name}`}
@@ -185,7 +185,7 @@ const Division = ({
diff --git a/src/pages/public/Team/components/TeamTabs.tsx b/src/pages/public/Team/components/TeamTabs.tsx index 30855b15..3c1c2b60 100644 --- a/src/pages/public/Team/components/TeamTabs.tsx +++ b/src/pages/public/Team/components/TeamTabs.tsx @@ -188,7 +188,7 @@ const BergenTab = ({ open }: { open: boolean }): JSX.Element => { const HovedstyretTab = ({ open }: { open: boolean }): JSX.Element => { const navigate = useNavigate(); - return (/* w-full max-w-4xl mx-auto p-4 md:p-8 grid grid-cols-1 sm:grid-cols-2 gap-4 */ /* flex flex-col items-start md:col-span-1 md:w-auto */ + return (
{ @@ -289,7 +289,7 @@ export const Tabs = ({divisions, tabstate, setOpenTab}: TabProps): JSX.Element = + + + {divisions.map((data) => { + const chosenStyle = + tabstate === data.number + ? "font-semibold text-vektor-darkblue" + : "hover:text-vektor-light-blue"; + return ( +
+ { + e.preventDefault(); + setOpenTab(data.number); + setIsOpen(false); + }} + > + {data.name} + + +
+ ); + })} + + + ); + } + + + return ( +
+ {divisions.map((data) => { + const chosenStyle = + tabstate === data.number + ? "bg-vektor-darkblue text-white hover:bg-vektor-darkblue" + : "bg-transparent hover:bg-vektor-light-blue dark:text-white"; + return ( +
+ +
+ ); + })} +
+ ) +} + +export default Tabs; \ No newline at end of file diff --git a/src/pages/public/Kontakt/components/KontaktOss.tsx b/src/pages/public/Kontakt/components/KontaktOss.tsx index 9c7bd5b7..217589cb 100644 --- a/src/pages/public/Kontakt/components/KontaktOss.tsx +++ b/src/pages/public/Kontakt/components/KontaktOss.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import Division from "./Division.js"; -import { Tabs } from "../../Team/components/TeamTabs.js"; +import Tabs from "@/components/Tabs.js"; interface KontaktTabProps { divisions: DivisionList[]; diff --git a/src/pages/public/Team/components/TeamTabs.tsx b/src/pages/public/Team/components/TeamTabs.tsx index 3c1c2b60..13cf2926 100644 --- a/src/pages/public/Team/components/TeamTabs.tsx +++ b/src/pages/public/Team/components/TeamTabs.tsx @@ -1,20 +1,7 @@ import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import Division from "./Division"; -import { DropdownMenu, - DropdownMenuContent, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuTrigger, -} from "@radix-ui/react-dropdown-menu"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faAngleDown } from "@fortawesome/free-solid-svg-icons"; - -interface TabProps { - divisions: DivisionList[]; - tabstate: number; - setOpenTab: (number: number) => void; -}; +import Tabs from "@/components/Tabs"; interface TeamTabProps { divisions: DivisionList[]; @@ -262,96 +249,6 @@ const HovedstyretTab = ({ open }: { open: boolean }): JSX.Element => { }; - - -export const Tabs = ({divisions, tabstate, setOpenTab}: TabProps): JSX.Element => { - const [isSmallScreen, setIsSmallScreen] = useState(false); - const [isOpen, setIsOpen] = useState(false); - - useEffect(() => { - const checkScreenSize = () => { - const isSmall = window.matchMedia("(max-width: 860px)").matches; - setIsSmallScreen(isSmall); - } - - checkScreenSize(); - window.addEventListener("resize", checkScreenSize); - - return () => { - window.removeEventListener("resize", checkScreenSize); - } - - - }, []) - - if (isSmallScreen) { - return ( - - - - - - {divisions.map((data) => { - const chosenStyle = - tabstate === data.number - ? "font-semibold text-vektor-darkblue" - : "hover:text-vektor-light-blue"; - return ( -
- { - e.preventDefault(); - setOpenTab(data.number); - setIsOpen(false); - }} - > - {data.name} - - -
- ); - })} - - - ); - } - - - return ( -
- {divisions.map((data) => { - const chosenStyle = - tabstate === data.number - ? "bg-vektor-darkblue text-white hover:bg-vektor-darkblue" - : "bg-transparent hover:bg-vektor-light-blue dark:text-white"; - return ( -
- -
- ); - })} -
- ) -} - const TeamTabs = ({ divisions }: TeamTabProps): JSX.Element => { const initialTabState = () => { const storedTab = sessionStorage.getItem("teamTab");