Vf 171 mobile view foreldre (#336)

* vf-170 universal colors on appHeader * vf-170 universal colors on mobile meny x drawer * vf-170 standarize login btn * vf-170 univarsal colors footer * higher quality logo in tab bar * vf-170 universal colors assistenter * universal colors assistenter * unviersal colors forforeldre * universal colors for skoler * rewrite styling to fit mobile * vf-170 fix error message from darkmodetoggle * vf-171 create divider component * vf-171 add divider to foreldre * vf-171 fit styling to big screen * vf-171 add functionality picture on left to textPictureCard * vf-171 fix omOss to work with new textpicturecard
vektorprogrammet · Oct 15, 2024 · c42d50f · c42d50f
1 parent edf5c40
commit c42d50f
Show file tree

Hide file tree

Showing 20 changed files with 97 additions and 81 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/images/vektor-logo-circle.svg" />
     <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#E2F4FA">
 
@@ -16,7 +16,7 @@
     <link rel="manifest" href="/manifest.json" />
     <title>Vektorprogrammet</title>
   </head>
-  <body>
+  <body class="bg-vektor-bg dark:bg-vektor-bg-dark">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="/src/index.tsx"></script>

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.css b/src/App.css
@@ -4,19 +4,10 @@
   transition: background-color 0.5s;
 }
 
-.dark .App {
-  background-color: #2a2a2a;
-}
-
 .Banner {
   background-color: #6fceee;
 }
 
-
-.Footer {
-  background-color: #223c70;
-}
-
 .iconWrapper:hover .icon {
   fill: #6fceee;
 }
diff --git a/src/components/AppFooter/AppFooter.tsx b/src/components/AppFooter/AppFooter.tsx
@@ -4,7 +4,7 @@ import FooterSponsors from "./components/FooterSponsors";
 
 const AppFooter = (): JSX.Element => {
   return (
-    <footer className="Footer">
+    <footer className="bg-vektor-DARKblue">
       <div className="max-w-6xl mx-auto p-2 py-8 flex justify-between place-items-center flex-col space-y-8 lg:flex-row lg:space-x-4 lg:space-y-0">
         <img
           src="/images/vektor-logo-white.svg"

diff --git a/src/components/AppFooter/components/DarkModeToggle.tsx b/src/components/AppFooter/components/DarkModeToggle.tsx
@@ -43,9 +43,9 @@ const DarkModeToggle = () => {
         viewBox="0 0 24 24" 
         fill="none" 
         stroke="currentColor" 
-        stroke-width="2" 
-        stroke-linecap="round" 
-        stroke-linejoin="round"
+        strokeWidth="2" 
+        strokeLinecap="round" 
+        strokeLinejoin="round"
       >
         <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
       </svg>

diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
@@ -0,0 +1,14 @@
+import Logo from '/images/vektor-logo-circle.svg';
+
+const Divider = (): JSX.Element => {
+  return (
+    <div className="w-full flex md:hidden lg:hidden flex-col items-center opacity-30 h-24 mt-5 mb-5">
+      <img src={Logo} className="w-10 relative top-6 bg-vektor-bg dark:bg-vektor-bg-dark" alt="Vektorprogrammet logo"/>
+      <div className="w-10/12 h-1 rounded-full bg-vektor-blue" />
+    </div>
+  );
+}
+
+
+
+export default Divider;
diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
@@ -43,12 +43,12 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border-2 border-black bg-accent",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border-2 border-black bg-vektor-bg dark:bg-vektor-bg-dark dark:border-[rgba(255,255,255,0.2)]",
         className
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[150px] rounded-full bg-[rgba(0,0,0,0.8)]" />
+      <div className="mx-auto mt-4 h-2 w-[150px] rounded-full bg-[rgba(0,0,0,0.8)] dark:bg-[rgba(255,255,255,0.5)]" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>

diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx
@@ -15,7 +15,7 @@ const activeStyle: React.CSSProperties = {
 const AppHeader = (): JSX.Element => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [loginPopupVisible, setLoginPopupVisible] = useState(false);
-  const isLoggedIn = true;
+  const isLoggedIn = false;
   const navRoutes = routes.filter(route => route.path);
   const linkElements = navRoutes.map((route) => (
       <NavLink
@@ -30,7 +30,7 @@ const AppHeader = (): JSX.Element => {
 
   return (
     <div className="sticky top-0 z-50">
-      <div className="hidden md:flex justify-around p-1 lg:px-8 w-full bg-[rgba(226,244,250,0.9)] backdrop-blur-sm dark:bg-[#2a2a2a]">
+      <div className="hidden md:flex justify-around p-1 lg:px-8 w-full bg-vektor-bg backdrop-blur-sm bg-opacity-90 dark:bg-vektor-bg-dark dark:bg-opacity-90">
         <div className="flex w-fit items-center">
           <div className="btn btn-ghost btn-circle btn-md hover:bg-white">
             <div className="w-full rounded-full">

diff --git a/src/components/Header/LoginButtons.tsx b/src/components/Header/LoginButtons.tsx
@@ -9,7 +9,7 @@ const LoginButtons = ({
     <div className="flex space-x-4">
       <button
         type="button"
-        className="login-buttons bg-blue-400 hover:bg-blue-900 text-white px-4 py-2 rounded-full duration-300"
+        className="btn btn-success text-white rounded-full btn-sm"
         onClick={() => setVisible(true)}
       >
         Logg inn

diff --git a/src/components/Header/MobileMenu.tsx b/src/components/Header/MobileMenu.tsx
@@ -43,7 +43,7 @@ const MobileMenu = (props: Props): JSX.Element => {
 
   const linkElements = routes.map((route) => (
     <li key={route.name}>
-      <Link className="text-lg" reloadDocument to={route.path ?? ""}>
+      <Link className="text-lg dark:text-white" reloadDocument to={route.path ?? ""}>
           {route.name}
         </Link>
     </li>
@@ -53,8 +53,8 @@ const MobileMenu = (props: Props): JSX.Element => {
       <Drawer>
         <DrawerTrigger>
           <div className="flex fixed top-12 right-0 bg-[rgba(0,0,0,0.8)] p-1 pr-2 rounded-l-full" >
-            <div className="btn btn-md btn-ghost btn-circle avatar bg-accent">
-              <div className="w-full rounded-full border-solid border-2 border-gray-600">
+            <div className="btn btn-md btn-ghost btn-circle avatar bg-vektor-bg">
+              <div className="w-full rounded-full">
                 <img src="/images/team/IT-Tor.png" alt="profile avatar" />
               </div>
             </div>

diff --git a/src/components/TextPictureCard.tsx b/src/components/TextPictureCard.tsx
@@ -1,9 +1,12 @@
+import Divider from "@/components/Divider";
+
 interface Props {
+  key: string;
   title: string;
   text: string;
-  imgPath: URL;
+  imgPath: string;
   alt: string;
-  pictureOnLeft?: boolean;
+  pictureOnLeft: boolean; 
 }
 
 const TextPictureCard = ({
@@ -15,22 +18,24 @@ const TextPictureCard = ({
 }: Props): JSX.Element => {
   const image = (
     <img
-      src={imgPath.href}
+      src={imgPath}
       alt={alt}
-      className="max-h-96 mt-6 rounded-lg mx-auto sm:w-auto md:max-w-md"
+      className="flex max-h-96 rounded-lg sm:w-auto md:max-w-md"
     />
   );
 
   return (
-    <div className="flex w-full mx-auto justify-between flex-wrap mt-10">
-      {pictureOnLeft && image}
-      <div className="max-w-6xl m-auto">
-        <h1 className="text-center mt-7 text-2xl dark:text-gray-200">
+    <div className={`flex ${pictureOnLeft ? 'md:flex-row-reverse' : ''} w-full gap-5 md:gap-14 justify-center flex-wrap`}>
+      {image}
+      <div className="flex flex-col max-w-6xl gap-3 md:gap-5 m-auto">
+        <h1 className="text-center text-xl md:text-3xl font-bold text-vektor-DARKblue dark:text-text-dark">
           {title}
         </h1>
-        <p className="max-w-lg text-xl mt-3 px-3 dark:text-gray-300">{text}</p>
+        <p className="max-w-lg text-md md:text-lg dark:text-text-dark">
+          {text}
+        </p>
       </div>
-      {!pictureOnLeft && image}
+      <Divider/>
     </div>
   );
 };

diff --git a/src/index.css b/src/index.css
@@ -4,7 +4,6 @@
 @tailwind utilities;
 /* width */
 body{
-  background-color: #E2F4FA;
   overscroll-behavior: none;
 }
 

diff --git a/src/pages/public/Assistenter/components/Assistenter.tsx b/src/pages/public/Assistenter/components/Assistenter.tsx
@@ -14,21 +14,21 @@ const Assistenter = (): JSX.Element => {
     });
 
   return (
-    <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">
+    <div className="leading-relaxed font-sans flex flex-col justify-center items-center dark:text-text-dark mt-10">
+        <h1 className="font-sans max-w-2xl mt-10 text-vektor-DARKblue text-4xl text-center font-bold mx-3 dark:text-text-dark">
           {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 dark:bg-neutral-800">
-        <div className="conte mx-8 bg-center font-sans font-bold text-secondary dark:text-gray-300">
+      <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 dark:text-text-dark">
           Disse avdelingene har opptak nå:
         </div>
         <button
           type="button"
           onClick={scrollToCard}
-          className="btn btn-secondary text-white font-bold py-2 px-4"
+          className="btn btn-success text-white font-bold py-2 px-4"
         >
           Scroll ned for å søke!
         </button>
@@ -49,11 +49,11 @@ const Assistenter = (): JSX.Element => {
           ))}
         </div>
       </div>
-      <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">
+      <div className="mb-16 flex flex-col items-center dark:text-text-dark" id="tc">
+        <div className="my-2 mb-2 font-bold text-2xl text-secondary w-fit dark:text-text-dark">
           Lærerassistent i matematikk
         </div>
-        <div className="mb-4 w-3/5 dark:text-gray-300">
+        <div className="mb-4 w-3/5 dark:text-text-dark">
           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
@@ -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 dark:text-gray-300">
+        <div className="mt-4 w-3/5 dark:text-text-dark">
           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 å
@@ -78,8 +78,8 @@ const Assistenter = (): JSX.Element => {
         </div>
       </div>
 
-      <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">
+      <div className="mb-16 flex flex-col items-center dark:text-text-dark">
+        <div className="font-bold text-2xl my-2 mb-3 text-vektor-darblue text-center dark:text-text-dark">
           Arbeidsoppgaver
         </div>
 
@@ -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 dark:text-gray-300">
+      <div className="text-vektor-DARKblue font-bold my-8 text-2xl text-center dark:text-text-dark">
         Hvordan blir jeg Vektorassistent?
       </div>
-      <div className="flex flex-row space-x-16 dark:text-gray-300">
+      <div className="flex flex-row space-x-16 dark:text-text-dark">
         <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 dark:text-gray-300">
+            <div className="text-vektor-darblue font-bold my-3 text-lg dark:text-text-dark">
               Opptakskrav
             </div>
 
@@ -114,7 +114,7 @@ const Assistenter = (): JSX.Element => {
         </div>
 
         <div className="flex-2 ...">
-          <div className="font-bold text-vektor-darblue my-3 text-lg dark:text-gray-300">
+          <div className="font-bold text-vektor-DARKblue my-3 text-lg dark:text-text-dark">
             Opptaksprosessen
           </div>
           <ol className="whitespace-normal md:whitespace-pre list-decimal leading-loose ">
@@ -135,15 +135,15 @@ const Assistenter = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="font-bold text-vektor-darblue text-3xl mt-16 mb-8 dark:text-gray-200">
+      <div className="font-bold text-vektor-DARKblue text-3xl mt-16 mb-8 dark:text-text-dark">
         Søk nå!
       </div>
 
       <div ref={cardElement}>
         <Citycard />
       </div>
 
-      <div className="font-bold mb-16 text-vektor-darblue">
+      <div className="font-bold mb-16 text-vektor-DARKblue">
         Har du noen spørsmål? Sjekk ut ofte stilte spørsmål og svar.
       </div>
     </div>

diff --git a/src/pages/public/Assistenter/components/AssistenterCard.tsx b/src/pages/public/Assistenter/components/AssistenterCard.tsx
@@ -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 dark:text-gray-300">{text}</div>
+        <div className="font-sans text-center my-1 dark:text-text-dark">{text}</div>
       </div>
     </div>
   );

diff --git a/src/pages/public/Assistenter/components/NoApplyCard.tsx b/src/pages/public/Assistenter/components/NoApplyCard.tsx
@@ -7,8 +7,7 @@ export const NoApplyCard = (props: any) => {
       <div className="block mt-3">
         <input
           type="email"
-          className="inline-flex items-center form-input block block border-solid border-2
-                     border-grey"
+          className="inline-flex items-center form-input border-solid border-2 border-grey"
           placeholder="E-post"
         />
       </div>
@@ -30,7 +29,7 @@ export const NoApplyCard = (props: any) => {
 
       <button
         type="submit"
-        className="bg-vektor-darblue hover:bg-vektor-blue text-white font-bold py-2 px-4 border border-blue-700 m-8 rounded"
+        className="bg-vektor-darkblue hover:bg-vektor-blue text-white font-bold py-2 px-4 border border-blue-700 m-8 rounded"
       >
         Send
       </button>

diff --git a/src/pages/public/ForForeldre/components/ForForeldre.tsx b/src/pages/public/ForForeldre/components/ForForeldre.tsx
@@ -1,24 +1,29 @@
 import getContent from "api/ForForeldre";
 import TextPictureCard from "@/components/TextPictureCard";
+import Divider from "@/components/Divider";
 
 const ForForeldre = (): JSX.Element => {
   const { title, ingress, cards, bottomText } = getContent();
   return (
-    <div className="max-w-screen-lg mt-20 mb-20 mx-auto flex flex-col items-center dark:text-gray-300">
-      <h1 className="max-w-2xl text-gray-600 text-4xl text-center font-bold mx-3 dark:text-gray-200">
-        {title}
-      </h1>
-      <p className="max-w-2xl text-center mt-4 mb-20 text-xl mx-3">{ingress}</p>
-      {cards.map(({ title: cardTitle, text, image }) => (
+    <div className="flex flex-col items-center p-5 mt-40 mb-20 mx-auto gap-10 md:gap-40 dark:text-text-dark">
+      <div className="flex flex-col gap-3 md:gap-5">
+        <h1 className="max-w-3xl text-vektor-DARKblue text-2xl md:text-4xl text-center font-bold dark:text-text-dark">
+          {title}
+        </h1>
+        <p className="max-w-3xl text-md md:text-lg">{ingress}</p>
+        <Divider />
+      </div>
+      {cards.map((card, index) => (
         <TextPictureCard
-          key={cardTitle}
-          title={cardTitle}
-          text={text}
-          imgPath={image.url}
-          alt={image.alt}
+          key={card.title}
+          title={card.title}
+          text={card.text}
+          imgPath={card.image.url.toString()}
+          alt={card.image.alt}
+          pictureOnLeft={index % 2 === 0}
         />
       ))}
-      <p className="max-w-2xl text-center mt-20 text-xl mx-auto">
+      <p className="max-w-3xl text-md md:text-lg">
         {bottomText}
       </p>
     </div>

diff --git a/src/pages/public/ForSkoler/components/ForSkoler.tsx b/src/pages/public/ForSkoler/components/ForSkoler.tsx
@@ -55,7 +55,7 @@ const ForSkoler = (): JSX.Element => {
             "Assistentene kan brukes som hjelp i undervisningen. Her er noen forslag vi har gode erfaringer med:",
           ]}
         >
-          <ul className="pl-4 ml-4 mb-3 list-disc dark:text-gray-300">
+          <ul className="pl-4 ml-4 mb-3 list-disc dark:text-text-dark">
             {[
               "Hjelpe til med oppgaveløsing i klasserom",
               "Utfordre de sterkeste elevene med vanskeligere oppgaver",
-Original file line number
+Diff line change
@@ Expand Up @@
             <div className="font-sans font-bold text-xl text-primary text-center p-1">
               {title}
             </div>
-            <div className="font-sans text-center my-1 dark:text-gray-300">{text}</div>
+            <div className="font-sans text-center my-1 dark:text-text-dark">{text}</div>
           </div>
         </div>
       );
@@ Expand Down @@