Merge pull request #57 from itk-dev/feature/3175-make-light-mode-work

Feature/3175 make light mode work

Author: Sine Jespersen

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+- [PR-57](https://github.com/itk-dev/aapodwalk/pull/57)
+  - Improve lightmode
 - [PR-56](https://github.com/itk-dev/aapodwalk/pull/56)
   - Rename component `Map.jsx` -> `MapComponent.jsx` to "[not shadow the global "Map" property](https://eslint.org/docs/latest/rules/no-shadow)"
   - Create a mapper to map lats/longs to fit the outer bounds react-leaflet uses

src/components/FAQ.jsx

@@ -5,25 +5,25 @@ const FAQ = () => {
   return (
     <>
       <h1 className="text-2xl font-extrabold">Hjælp og vejledning</h1>
-      <section className="bg-zinc-100 dark:bg-zinc-900 flex flex-row relative my-2 rounded font-bold p-5 flex flex-col mt-5">
+      <section className="bg-emerald-400 dark:bg-zinc-900 flex flex-row relative my-2 rounded font-bold p-5 flex flex-col mt-5">
         Oplysninger om Aarhus Kommune Kultur og Borgerservices behandling af dine personoplysninger ved anvendelse af
         Podwalk
         <Link
           to={"/personal-information-policy"}
-          className="text-emerald-400 dark:text-emerald-600 font-bold underline mt-5"
+          className="text-zinc-900 dark:text-emerald-600 font-bold underline mt-5"
         >
           Læs hele oplysningsteksten
         </Link>
       </section>
-      <section className="bg-zinc-100 dark:bg-zinc-900 flex flex-row relative my-2 rounded font-bold p-5 flex flex-col mt-5">
+      <section className="bg-emerald-400 dark:bg-zinc-900 flex flex-row relative my-2 rounded font-bold p-5 flex flex-col mt-5">
         Sådan bruger du navigationen
-        <Link to={"/navigation-help"} className="text-emerald-400 dark:text-emerald-800 font-bold underline mt-3">
+        <Link to={"/navigation-help"} className="text-zinc-900 dark:text-emerald-800 font-bold underline mt-3">
           Vedledning til navigation
         </Link>
       </section>
-      <section className="bg-zinc-100 dark:bg-zinc-900 flex flex-row relative my-2 rounded font-bold p-5 flex flex-col mt-5">
+      <section className="bg-emerald-400 dark:bg-zinc-900 flex flex-row relative my-2 rounded font-bold p-5 flex flex-col mt-5">
         Tilgængelighedserklæring
-        <Link className="text-emerald-400 dark:text-emerald-800 font-bold underline mt-5">
+        <Link className="text-zinc-900 dark:text-emerald-800 font-bold underline mt-5">
           {/* todo add Tilgængelighedserklæring */}
           Tilgængelighed og en erklæring herom
         </Link>

src/components/MapConsentBanner.jsx

@@ -14,7 +14,7 @@ function MapConsentBanner() {
   if (openStreetMapConsent === false || openStreetMapConsent === true) return null;
 
   return (
-    <div className="fixed left-3 bottom-3 right-3 dark:bg-zinc-600 flex flex-col gap-3 rounded-lg p-3 bg-emerald-400">
+    <div className="fixed left-3 bottom-3 right-3 dark:bg-zinc-600 flex flex-col gap-3 rounded-lg p-3 bg-zinc-300">
       <div>
         <h2 className="mb-1 font-bold">Samtykke</h2>
         <div className="mt-1 flex flex-col">

src/components/Navbar.jsx

@@ -14,7 +14,7 @@ const Navbar = () => {
         {pathname === "/" && <img src={Logo} alt="" className="w-10 h-10" />}
         {pathname !== "/" && <BackButton />}
         <Link
-          className="flex place-content-center rounded-full text-xl w-9 h-9 bg-black justify-center items-center"
+          className="flex place-content-center rounded-full text-xl w-9 h-9 bg-emerald-400 dark:bg-black justify-center items-center"
           to="/faq"
         >
           <FontAwesomeIcon icon={faQuestion} />

src/components/points/OrderComponent.jsx

@@ -2,7 +2,7 @@ import { React } from "react";
 
 const OrderComponent = ({ order }) => {
   return (
-    <div className="flex place-content-center rounded text-xl w-6 h-6 bg-black justify-center mb-2 items-center flex dark:bg-emerald-800">
+    <div className="flex place-content-center rounded text-xl w-6 h-6 bg-black justify-center mb-2 items-center bg-white flex dark:bg-emerald-800">
       {order}
     </div>
   );

src/components/points/Point.jsx

@@ -80,15 +80,15 @@ function Point({
         className={`relative text-left w-full ${unlocked ? "" : "pointer-events-none"}`}
       >
         <div
-          className={`bg-zinc-100 dark:bg-zinc-700 flex flex-row relative h-32 my-2 rounded flex items-center ${
+          className={`bg-emerald-400 dark:bg-zinc-700 flex flex-row relative h-32 my-2 rounded flex items-center ${
             unlocked ? "" : "opacity-35 blur-sm bg-zinc-100 dark:bg-zinc-900"
           }`}
         >
           <Image src={image} className="w-24 h-24 rounded grow w-1/4 ml-2 object-cover" />
           <div className="w-3/4 ml-2">
             <OrderComponent order={order} />
             <h2 className="text-xl font-bold">{name}</h2>
-            <div className="line-clamp-2 text-zinc-300 mr-2">{subtitles}</div>
+            <div className="line-clamp-2 text-zinc-900 dark:text-zinc-300 mr-2">{subtitles}</div>
           </div>
         </div>
       </button>

src/components/routes/Route.jsx

@@ -14,7 +14,7 @@ function Route({ route }) {
 
   return (
     <Link
-      className="bg-zinc-100 dark:bg-zinc-900 flex flex-row relative h-32 my-2 rounded"
+      className="bg-emerald-400 dark:bg-zinc-900 flex flex-row relative h-32 my-2 rounded"
       to={`/route/${route.id}`}
       onClick={() => setSelectedRoute(route)}
     >

src/components/tags/Tag.jsx

@@ -25,8 +25,10 @@ function Tag({ title, id }) {
 
   return (
     <button
-      className={`block mr-1 rounded px-2 mt-1 h-6 font-bold bg-zinc-200 text-black ${
-        selectedTag === id ? "bg-emerald-400 dark:bg-emerald-800 text-white" : ""
+      className={`${
+        selectedTag === id
+          ? "block mr-1 rounded px-2 mt-1 h-6 font-bold bg-emerald-400 dark:bg-emerald-800 text-black"
+          : "block mr-1 rounded px-2 mt-1 h-6 font-bold bg-zinc-200 text-black"
       }`}
       type="button"
       onClick={() => setSelectedTag(id)}

src/components/tags/TagList.jsx

@@ -7,7 +7,7 @@ function TagList({ tags, classes = "" }) {
     setDisplayTags(tags.map(({ title }) => title).join(", "));
   }, []);
 
-  return <span className={`text-emerald-400 dark:text-emerald-800 font-bold text-sm ${classes}`}>{displayTags}</span>;
+  return <span className={`text-black dark:text-emerald-800 font-bold text-sm ${classes}`}>{displayTags}</span>;
 }
 
 export default TagList;