SALG-1278: Initial styling of category selection and route browsing

Author: yepzdk

src/App.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useMemo, useRef, useContext } from "react";
-import { Routes, Navigate, Route, useNavigate } from "react-router-dom";
+import { Routes, Navigate, Route } from "react-router-dom";
 import TagPage from "./components/tags/TagPage";
 import LatLongContext from "./context/latitude-longitude-context";
 import AudioContext from "./context/audio-context";
@@ -21,7 +21,6 @@ function App() {
   const [source, setSource] = useState(null);
   const [cache, setCache] = useState({});
   const audioRef = useRef();
-  const navigate = useNavigate();
 
   const cacheContext = useMemo(
     () => ({
@@ -119,12 +118,7 @@ function App() {
   const { fileUrl } = useContext(ApiEndpointContext);
 
   return (
-    <div className="App">
-      <div>
-        <button type="button" onClick={() => navigate(-1)}>
-          go back
-        </button>
-      </div>
+    <div className="App h-full min-h-screen w-screen p-3 text-zinc-800 dark:text-white bg-zinc-100 dark:bg-zinc-800">
       <LatLongContext.Provider value={contextLatLong}>
         <CacheContext.Provider value={cacheContext}>
           <AudioContext.Provider value={audio}>

src/components/BackButton.jsx

@@ -0,0 +1,27 @@
+import { React } from "react";
+import { useNavigate } from "react-router-dom";
+import { ReactComponent as AngleLeft } from "../icons/angle-left-solid.svg";
+import { ReactComponent as Xmark } from "../icons/xmark-solid.svg";
+
+function BackButton({ children }) {
+  const navigate = useNavigate();
+
+  return (
+    <button
+      className="relative flex place-content-center dark:bg-zinc-800 dark:text-white text-sm"
+      type="button"
+      onClick={() => navigate(-1)}
+    >
+      <span className="bg-zinc-300 dark:bg-zinc-700 flex place-content-center px-3 mr-2 rounded">
+        {children === "Afslut" ? (
+          <Xmark className="inline w-2" />
+        ) : (
+          <AngleLeft className="inline w-2" />
+        )}
+      </span>
+      {children}
+    </button>
+  );
+}
+
+export default BackButton;

src/components/map/MapWrapper.jsx

@@ -168,11 +168,14 @@ function MapWrapper({ mapData, goToView }) {
     }
   }, [mapData]);
 
+  // TODO: Remove zoom and info btn
+
   return (
-    <div className="map-container">
-      <div ref={mapElement} className="map" id="map">
+    <div className="map-container absolute left-0 top-0 h-screen px-3 pt-12 pb-3">
+      <div ref={mapElement} className="map rounded-xl overflow-hidden" id="map">
         <div id="tooltip" className="tooltip" />
       </div>
+      <div className="map-color-overlay absolute left-0 top-0 bottom-0 right-0 w-screen h-screen bg-zinc-400 dark:bg-zinc-800 opacity-70 dark:opacity-80" />
     </div>
   );
 }

src/components/map/map-wrapper.css

@@ -2,7 +2,7 @@
 
 .map-container,
 .map {
-	height: 400px;
+	height: 100%;
 	width: 100%;
 	display: block;
 	/* filter: brightness(55%); */
@@ -389,7 +389,7 @@
 	padding: 0 15px;
     height: 40px;
 	align-items: center;
-	justify-content: center; 
+	justify-content: center;
 }
 
 .tooltip:not(:empty) .tooltip-btn {

src/components/routes/Route.jsx

@@ -16,13 +16,13 @@ function Route({ id }) {
   if (route === null) return null;
 
   return (
-    <span>
-      <Link className="" to={`/route/${id}`}>
-        {route.name}
-      </Link>
-      <div>{route.description}</div>
-      <Image src={route.image} />
-    </span>
+    <Link className="bg-zinc-100 dark:bg-zinc-700 flex" to={`/route/${id}`}>
+      <Image className="flex-1 w-32" src={route.image} />
+      <div className="flex-initial text-left leading-none p-3">
+        <span className="block mb-1">{route.name}</span>
+        <span className="text-xs ">{route.description}</span>
+      </div>
+    </Link>
   );
 }
 

src/components/routes/RouteCarousel.jsx

@@ -7,6 +7,7 @@ import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a lo
 function RouteCarousel({ routes, onCarouselChange }) {
   return (
     <Carousel
+      className="absolute left-0 bottom-0 right-0 m-5 rounded-lg overflow-hidden max-h-96 md:max-w-xs"
       showThumbs={false}
       showStatus={false}
       autoplay

src/components/routes/RoutePage.jsx

@@ -3,6 +3,7 @@ import { useParams } from "react-router-dom";
 import useFetch from "../../util/useFetch";
 import PointOfInterest from "../points-of-interest/PointOfInterest";
 import { getAngleFromLocationToDestination } from "../../util/helper";
+import BackButton from "../BackButton";
 
 function RoutePage() {
   const { id } = useParams();
@@ -91,7 +92,8 @@ function RoutePage() {
   if (selectedRoute === null) return null;
   return (
     <>
-      <h1>{selectedRoute.name}</h1>
+      <BackButton>Afslut</BackButton>
+      <h1 className="text-xl font-bold my-3">{selectedRoute.name}</h1>
       {pointsOfInterest &&
         pointsOfInterest
           .toReversed()

src/components/routes/SelectedRoute.jsx

@@ -1,6 +1,7 @@
 import { React, useEffect, useState } from "react";
 import MapWrapper from "../map/MapWrapper";
 import { getFeaturesForMap } from "../../util/helper";
+import BackButton from "../BackButton";
 
 function SelectedRoute({ selectedRoute }) {
   const [featuresForMap, setFeaturesForMap] = useState(null);
@@ -18,23 +19,30 @@ function SelectedRoute({ selectedRoute }) {
   return (
     <>
       <MapWrapper mapData={featuresForMap} goToView={featuresForMap[0]} />
-      <h1>{selectedRoute.name}</h1>
-      <div>
-        <label htmlFor="distance">
-          Distance
-          <div id="distance">{selectedRoute.distance}</div>
-        </label>
-        <label htmlFor="poi">
-          Dele
-          <div id="poi">{selectedRoute.pointsOfInterest.length}</div>
-        </label>
-        {/* todo skeleton screen (I think I recall tailwind having these ootb) or some wait indication */}
-        {/* todo how to sum up podcasts */}
-        <label htmlFor="length">
-          Afspilningstid
-          {/* todo */}
-          <div id="length" />
-        </label>
+      <BackButton>Kategorier</BackButton>
+      <div className="relative ml-2">
+        <h1 className="text-4xl font-bold mt-10 mb-5">{selectedRoute.name}</h1>
+        <div className="info-box bg-zinc-100 dark:bg-zinc-700 rounded p-3 w-32">
+          <label htmlFor="distance" className="mb-5">
+            <span className="text-xs">Distance</span>
+            <div id="distance" className="text-lg">
+              {selectedRoute.distance}
+            </div>
+          </label>
+          <label htmlFor="poi" className="mb-5">
+            <span className="text-xs">Dele</span>
+            <div id="poi" className="text-lg">
+              {selectedRoute.pointsOfInterest.length}
+            </div>
+          </label>
+          {/* todo skeleton screen (I think I recall tailwind having these ootb) or some wait indication */}
+          {/* todo how to sum up podcasts */}
+          <label htmlFor="length">
+            <span className="text-xs">Afspilningstid</span>
+            {/* todo */}
+            <div id="length" className="text-lg" />
+          </label>
+        </div>
       </div>
     </>
   );

src/components/tags/Tag.jsx

@@ -4,11 +4,13 @@ import { Link } from "react-router-dom";
 function Tag({ name, numberOfRoutes, id }) {
   if (numberOfRoutes === 0) return null;
   return (
-    <div>
-      <Link className="" to={`/tag/${id}`}>
-        {name}
-      </Link>
-    </div>
+    <Link
+      className="block bg-emerald-500 mb-3 rounded-md p-3"
+      to={`/tag/${id}`}
+    >
+      <span className="block text-lg font-bold">{name}</span>
+      <span className="text-s text-zinc-600">{numberOfRoutes} historier</span>
+    </Link>
   );
 }
 

src/components/tags/TagsList.jsx

@@ -16,7 +16,7 @@ function TagsList() {
 
   return (
     <div>
-      <h1>Kategorier</h1>
+      <h1 className="mb-3">Kategorier</h1>
       {tags.map(({ name, routes, id }) => (
         <Tag key={name} numberOfRoutes={routes.length} name={name} id={id} />
       ))}