Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vf 138 legge til darkmode på siden #315

Merged
merged 7 commits into from
Oct 11, 2024
Merged

Vf 138 legge til darkmode på siden #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f511e57
VF-138 Apply darkmode styling on assistent page
juliadai8 Apr 24, 2024
43a1345
VF-138 Apply dark mode on contact page
juliadai8 Aug 27, 2024
be37e7c
VF-138 Add darkmode to Utlegg table
juliadai8 Aug 30, 2024
800b96d
VF-138 fix header darkmode
juliadai8 Aug 30, 2024
8378738
Merge branch 'main' of https://github.com/vektorprogrammet/vektor-fro…
juliadai8 Aug 30, 2024
b141156
VF-138 minor darkmode fixes in mainpage and header
juliadai8 Sep 3, 2024
b7ff067
vf-138 same logo on light and dark mode
FilipSkaug Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions src/components/Header/AppHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,14 @@ const AppHeader = (): JSX.Element => {
));

return (
<nav className="md:sticky top-0 z-50 bg-[rgba(226,244,250,0.9)] backdrop-blur-sm">
<nav className="md:sticky top-0 z-50 bg-[rgba(226,244,250,0.9)] backdrop-blur-sm dark:bg-[#2a2a2a]">
<div className="hidden md:flex p-1 justify-between lg:px-8 w-full">
<div className="w-fit justify-center flex">
<Link to="/">
<img
src="/images/vektor-logo.svg"
alt="vektorprogrammet logo"
className="h-16 lg:h-20 dark:hidden"
/>
<img
src="/images/vektor-logo-darkmode.png"
alt="vektorprogrammet logo"
className="h-16 lg:h-20 hidden dark:block"
className="h-16 lg:h-20"
/>
</Link>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Header/MobileMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const MobileMenu = (props: Props): JSX.Element => {
} = props;
return (
<div className="fixed vektor-font">
<div className="relative md:hidden z-10 flex shadow-md w-screen text-3xl bg-white">
<div className="relative md:hidden z-10 flex shadow-md w-screen text-3xl bg-white dark:bg-neutral-700">
<div
role="button"
tabIndex={0}
Expand All @@ -47,7 +47,7 @@ const MobileMenu = (props: Props): JSX.Element => {
/>
</div>
<Link
className="relative font-bold vektor-dark-blue text-2xl flex my-3 m-auto"
className="relative font-bold vektor-dark-blue text-2xl flex my-3 m-auto dark:text-white"
onClick={() => {
if (menuOpen) {
setMenuOpen(!menuOpen);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/UserAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const UserAvatar = () => {
<img src="/images/team/IT-Tor.png" alt="profile avatar" />
</div>
</div>
<ul className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-[#EDF8FC] text-[#313131] rounded-box w-52">
<ul className="mt-3 p-2 shadow menu menu-compact dropdown-content bg-[#EDF8FC] text-[#313131] rounded-box w-52 dark:bg-neutral-700 dark:text-white">
<li>
<Link reloadDocument to="/kontrollpanel">
Kontrollpanel
Expand Down
11 changes: 6 additions & 5 deletions src/pages/public/Assistenter/components/ApplyReg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
export const ApplyCard = (props: any) => {
const { cities } = props;
return (
<form>
<h1 className="text-xl my-8 text-vektor-darblue font-bold text-center">
<form className="dark:bg-neutral-800">

<h1 className="text-xl my-8 text-vektor-darblue font-bold text-center dark:text-gray-200">
{cities}
</h1>

<div className="mt-1 mb-8 text-center">Søknadsfrist: </div>
<div className="mt-1 mb-8 text-center dark:text-gray-300">Søknadsfrist: </div>

<div className="grid justify-items-center">
<div className="grid justify-items-center dark:text-gray-800">
<div className="flex flex-wrap w-full my-4 space-x-8 justify-center">
<input
type="fornavn"
Expand Down Expand Up @@ -81,7 +82,7 @@ export const ApplyCard = (props: any) => {
Søk nå!
</button>
</div>
<div className="items-center mx-16 mb-10 text-center">
<div className="items-center mx-16 mb-10 text-center dark:text-gray-300">
Har du vært assistent tidligere? Da kan du søke på nytt her (krever
innlogging)
</div>
Expand Down
32 changes: 16 additions & 16 deletions src/pages/public/Assistenter/components/Assistenter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ const Assistenter = (): JSX.Element => {
});

return (
<div className="leading-relaxed font-sans flex flex-col justify-center items-center mt-10">
<h1 className="font-sans max-w-2xl mt-10 text-vektor-darblue text-4xl text-center font-bold mx-3">
<div className="leading-relaxed font-sans flex flex-col justify-center items-center dark:text-gray-300 mt-10">
<h1 className="font-sans max-w-2xl mt-10 text-vektor-darblue text-4xl text-center font-bold mx-3 dark:text-gray-200">
{title}
</h1>
<div className="mt-8 mb-20 text-xl w-3/5">
{ingress}
</div>
<div className="space-y-20 p-10 w-full text-center mb-14 border-secondary">
<div className="conte mx-8 bg-center font-sans font-bold text-secondary">
<div className="space-y-20 p-10 w-full text-center mb-14 border-secondary dark:bg-neutral-800">
<div className="conte mx-8 bg-center font-sans font-bold text-secondary dark:text-gray-300">
Disse avdelingene har opptak nå:
</div>
<button
Expand All @@ -49,11 +49,11 @@ const Assistenter = (): JSX.Element => {
))}
</div>
</div>
<div className="mb-16 flex flex-col items-center" id="tc">
<div className="my-2 mb-2 font-bold text-2xl text-secondary w-fit">
<div className="mb-16 flex flex-col items-center dark:text-gray-300" id="tc">
<div className="my-2 mb-2 font-bold text-2xl text-secondary w-fit dark:text-gray-300">
Lærerassistent i matematikk
</div>
<div className="mb-4 w-3/5">
<div className="mb-4 w-3/5 dark:text-gray-300">
Vektorprogrammet er en studentorganisasjon som sender realfagssterke
studenter til grunnskolen for å hjelpe elevene med matematikk i
skoletiden. Vi ser etter deg som lengter etter en mulighet til å lære
Expand All @@ -68,7 +68,7 @@ const Assistenter = (): JSX.Element => {
className="h-80 mt-6 rounded-lg mx-auto"
alt="vektorbilde"
/>
<div className="mt-4 w-3/5">
<div className="mt-4 w-3/5 dark:text-gray-300">
I tillegg vil du få muligheten til å delta på mange sosiale
arrangementer, alt fra fest og grilling til go-kart, laser tag og
spillkvelder. Samtidig arrangerer vi populærforedrag som er til for å
Expand All @@ -78,8 +78,8 @@ const Assistenter = (): JSX.Element => {
</div>
</div>

<div className="mb-16 flex flex-col items-center">
<div className="font-bold text-2xl my-2 mb-3 text-vektor-darblue text-center">
<div className="mb-16 flex flex-col items-center dark:text-gray-300">
<div className="font-bold text-2xl my-2 mb-3 text-vektor-darblue text-center dark:text-gray-300">
Arbeidsoppgaver
</div>

Expand All @@ -94,13 +94,13 @@ const Assistenter = (): JSX.Element => {
blir satt stor pris på av både barn og lærere!
</div>
</div>
<div className="text-vektor-darblue font-bold my-8 text-2xl text-center">
<div className="text-vektor-darblue font-bold my-8 text-2xl text-center dark:text-gray-300">
Hvordan blir jeg Vektorassistent?
</div>
<div className="flex flex-row space-x-16">
<div className="flex flex-row space-x-16 dark:text-gray-300">
<div className="flex-1 ...">
<ul className="leading-loose whitespace-normal md:whitespace-pre list-disc">
<div className="text-vektor-darblue font-bold my-3 text-lg">
<ul className="leading-loose whitespace-normal md:whitespace-pre list-disc ">
<div className="text-vektor-darblue font-bold my-3 text-lg dark:text-gray-300">
Opptakskrav
</div>

Expand All @@ -114,7 +114,7 @@ const Assistenter = (): JSX.Element => {
</div>

<div className="flex-2 ...">
<div className="font-bold text-vektor-darblue my-3 text-lg">
<div className="font-bold text-vektor-darblue my-3 text-lg dark:text-gray-300">
Opptaksprosessen
</div>
<ol className="whitespace-normal md:whitespace-pre list-decimal leading-loose ">
Expand All @@ -135,7 +135,7 @@ const Assistenter = (): JSX.Element => {
</div>
</div>

<div className="font-bold text-vektor-darblue text-3xl mt-16 mb-8">
<div className="font-bold text-vektor-darblue text-3xl mt-16 mb-8 dark:text-gray-200">
Søk nå!
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/pages/public/Assistenter/components/AssistenterCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const TextPictureCard = ({ title, text, imgPath, alt }: Props): JSX.Element => {
<div className="font-sans font-bold text-xl text-primary text-center p-1">
{title}
</div>
<div className="font-sans text-center my-1">{text}</div>
<div className="font-sans text-center my-1 dark:text-gray-300">{text}</div>
</div>
</div>
);
Expand Down
8 changes: 4 additions & 4 deletions src/pages/public/Assistenter/components/CityCard/Citycard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ const Tab = ({
city: City;
open: boolean;
}): JSX.Element => {
const chosenStyle = open ? `tab-active` : `text-vektor-darblue`;
const chosenStyle = open ? `tab-active dark:text-vektor-darblue` : `text-vektor-darblue dark:text-gray-300`;
return (
<button
type="button"
className={`tab tab-lifted w-1/3 text-base font-bold border-white ${chosenStyle}`}
className={`tab tab-lifted w-1/3 text-base font-bold border-white dark:hover:bg-neutral-700 ${chosenStyle}`}
onClick={onTabClick}
data-toggle="tab"
role="tablist"
Expand All @@ -30,7 +30,7 @@ const Tabs = (): JSX.Element => {
return (
<div className="w-full">
<div
className="tabs w-full flex text-sm font-medium text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-400"
className="tabs w-full flex text-sm font-medium text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-900"
role="tablist"
>
{Object.values(City).map((value) => (
Expand All @@ -42,7 +42,7 @@ const Tabs = (): JSX.Element => {
/>
))}
</div>
<div className="relative flex flex-col min-w-0 break-words w-full mb-6 border-b-[1px] border-r-[1px] border-l-[1px] px-4 py-5 flex-auto tab-content tab-space">
<div className="relative flex flex-col min-w-0 break-words w-full mb-6 border-b-[1px] border-r-[1px] border-l-[1px] px-4 py-5 flex-auto tab-content tab-space dark:bg-neutral-800">
<ApplyReg cities={openTab} />
</div>
</div>
Expand Down
24 changes: 12 additions & 12 deletions src/pages/public/Kontakt/components/Division.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ const Division = ({
}: DivisionProps): JSX.Element => {
return (
<>
<div className="grid grid-cols-2 gap-10">
<div className="grid grid-cols-2 gap-10 dark:bg-neutral-800 dark:text-neutral-300">
<div>
<div className="font-bold text-2xl text-blue-800">{name}</div>
{subtitle && <div className="text-base">{subtitle}</div>}
<div className="font-bold text-2xl text-blue-800 dark:text-neutral-200">{name}</div>
{subtitle && <div className="text-base dark:text-neutral-200">{subtitle}</div>}
{description && <div className="text-base">{description}</div>}
<div className="flex space-x-1 mt-8">
<svg
Expand All @@ -50,7 +50,7 @@ const Division = ({
<polyline points="3 7 12 13 21 7" />
</svg>
<a
className="truncate block max-w-[200px] text-sm hover:underline"
className="truncate block max-w-[200px] text-sm hover:underline dark:text-vektor-darblue"
href={`mailto:${mail}`}
>
{mail}
Expand Down Expand Up @@ -113,10 +113,10 @@ const Division = ({
{contactInfos.map((data, id) => {
return (
<div className="py-2 mt-5" key={data.name}>
<div className="text-blue-800">{contactInfos[id].name}</div>
<div className="text-blue-800 dark:text-gray-200">{contactInfos[id].name}</div>
{contactInfos[id].title && <div>{contactInfos[id].title}</div>}
<a
className="text-sm hover:underline"
className="text-sm hover:underline dark:text-vektor-darblue"
href={`mailto:${contactInfos[id].mail}`}
>
{contactInfos[id].mail}
Expand All @@ -127,13 +127,13 @@ const Division = ({
</div>
</div>
{contact && (
<div>
<div className="font-bold text-2xl text-blue-800 text-center pt-10">{`Kontakt styret i ${name}`}</div>
<div className="dark:bg-neutral-800">
<div className="font-bold text-2xl text-blue-800 text-center pt-10 dark:text-gray-200">{`Kontakt styret i ${name}`}</div>
<form>
<div className="mb-6 mt-7 grid xl:grid-cols-2 xl:gap-6">
<label
htmlFor="name"
className="block mb-2 text-sm font-medium text-gray-900"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Ditt navn
<input
Expand All @@ -145,7 +145,7 @@ const Division = ({
</label>
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Din e-post
<input
Expand All @@ -159,7 +159,7 @@ const Division = ({
<div className="mb-6">
<label
htmlFor="topic"
className="block mb-2 text-sm font-medium text-gray-900"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Emne
<input
Expand All @@ -173,7 +173,7 @@ const Division = ({
<div className="mb-6">
<label
htmlFor="message"
className="block mb-2 text-sm font-medium text-gray-900"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>
Melding
<textarea
Expand Down
8 changes: 4 additions & 4 deletions src/pages/public/Kontakt/components/KontaktOss.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,16 +164,16 @@ const Tabs = ({ divisions }: TabProps): JSX.Element => {
{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";
? "border-t-gray-200 border-l-gray-200 border-r-gray-200 border-b-white text-vektor-darblue z-50 dark:bg-neutral-800 dark:text-neutral-200 dark:border-t-white dark:border-l-white dark:border-r-white"
: "text-vektor-darblue z-50 dark:hover:bg-neutral-700 dark:border-b-white";
return (
<div
className="flex-auto text-center border-gray-200 border-b-2 -mb-[2px]"
key={data.name}
>
<button
type="button"
className={`rounded-t-lg -mb-[2px] z-50 text-base w-full font-bold py-3 border-b-gray-200 hover:border-2 hover:border-gray-200 hover:text-vektor-blue border-2 border-b-2 border-white ${chosenStyle}`}
className={`rounded-t-lg -mb-[2px] z-50 text-base w-full font-bold py-3 border-b-gray-200 hover:border-2 hover:border-t-gray-200 hover:text-vektor-blue border-2 border-b-2 border-white dark:border-transparent ${chosenStyle}`}
onClick={(e) => {
e.preventDefault();
setOpenTab(data.number);
Expand All @@ -187,7 +187,7 @@ const Tabs = ({ divisions }: TabProps): JSX.Element => {
);
})}
</div>
<div className="relative flex flex-col min-w-0 break-words w-full mb-6 border-b-2 border-r-2 border-l-2 px-4 py-5">
<div className="relative flex flex-col min-w-0 break-words w-full mb-6 border-b-2 border-r-2 border-l-2 px-4 py-5 dark:bg-neutral-800">
<TrondheimTab open={openTab === 1} />
<AasTab open={openTab === 2} />
<BergenTab open={openTab === 3} />
Expand Down
Loading
Loading