Dark mode FTW

JoakimEwenson · Jan 29, 2022 · 1b8de14 · 1b8de14 · vercel · Jan 29, 2022
1 parent aa9dd81
commit 1b8de14
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 53 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
     <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
     <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
   </head>
-  <body class="bg-neutral-100 font-poppins">
+  <body class="bg-neutral-100 dark:bg-neutral-800 font-poppins">
     <noscript>Du behöver slå på Javascript för att kunna nyttja den här sidan.</noscript>
     <div id="root"></div>
   </body>

diff --git a/src/Components/NearbyLocations.js b/src/Components/NearbyLocations.js
@@ -90,7 +90,7 @@ export default function NearbyLocations({ lat, long, locationId, numResults, has
       ) : (
         ""
       )}
-      <div className="bg-white rounded-lg container max-w-4xl mx-auto p-3">
+      <div className="bg-white dark:bg-neutral-700 text-neutral-800 dark:text-neutral-200 rounded-lg container max-w-4xl mx-auto p-3">
         {isLoading ? (
           <div className="text-xl md:text-3xl">Hämtar närliggande stationer...</div>
         ) : (
@@ -134,7 +134,7 @@ export default function NearbyLocations({ lat, long, locationId, numResults, has
             </div>
             <h3 className="text-xl md:text-3xl">Närliggande mätstationer</h3>
             <div className="overflow-auto">
-              <table className="container max-w-4xl my-3 mx-auto prose">
+              <table className="container max-w-4xl my-3 mx-auto prose dark:prose-invert">
                 <thead>
                   <tr>
                     <th className="w-1/2 text-left">Plats</th>
@@ -144,7 +144,7 @@ export default function NearbyLocations({ lat, long, locationId, numResults, has
                 </thead>
                 <tbody>
                   {locationList.map((row) => (
-                    <tr key={row.id} className="border-bottom hover:bg-gray-100">
+                    <tr key={row.id} className="hover:bg-neutral-100 dark:hover:bg-neutral-600">
                       <td className="py-2 w-1/2 truncate">
                         <Link to={`/plats/${row.id}`}>{row.title}</Link>
                       </td>

diff --git a/src/Components/PageFooter.js b/src/Components/PageFooter.js
@@ -5,29 +5,29 @@ export default function PageFooter() {
     <footer className="w-full text-center mt-32 mb-5">
       <a
         href="https://github.com/JoakimEwenson/react-temp"
-        className="text-indigo-900 hover:text-indigo-600"
+        className="text-indigo-900 dark:text-indigo-500 hover:text-indigo-600"
         target="_blank"
         rel="noreferrer"
       >
         <i className="fab fa-github h-6 w-6 mx-5"></i>
       </a>
       <a
         href="https://twitter.com/JoakimEwenson"
-        className="text-indigo-900 hover:text-indigo-600"
+        className="text-indigo-900 dark:text-indigo-500 hover:text-indigo-600"
         target="_blank"
         rel="noreferrer"
       >
         <i className="fab fa-twitter h-6 w-6 mx-5"></i>
       </a>
       <a
         href="https://www.linkedin.com/in/joakim-ewenson-a1586377/"
-        className="text-indigo-900 hover:text-indigo-600"
+        className="text-indigo-900 dark:text-indigo-500 hover:text-indigo-600"
         target="_blank"
         rel="noreferrer"
       >
         <i className="fab fa-linkedin-in h-6 w-6 mx-5"></i>
       </a>
-      <a href="https://www.ewenson.se" className="text-indigo-900 hover:text-indigo-600" target="_blank" rel="noreferrer">
+      <a href="https://www.ewenson.se" className="text-indigo-900 dark:text-indigo-500 hover:text-indigo-600" target="_blank" rel="noreferrer">
         <i className="fab fa-wordpress h-6 w-6 mx-5"></i>
       </a>
     </footer>

diff --git a/src/Components/PageNav.js b/src/Components/PageNav.js
@@ -5,19 +5,19 @@ export default function PageNav() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <nav className="bg-indigo-900">
+    <nav className="">
       <div className="mx-auto px-2 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           <div className="flex-1 flex items-center justify-between sm:items-stretch sm:justify-between">
             <div className="flex-shrink-0 flex items-center">
               <Link
                 to="/"
-                className="text-white hover:text-slate-200 px-3 py-2 rounded-md text-sm font-medium"
+                className="text-indigo-900 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-500 px-3 py-2 rounded-md text-sm font-medium"
                 onClick={() => setIsOpen(false)}
               >
                 <div className="flex items-center space-x-2">
                   <svg
-                    className="h-8 w-8 text-white"
+                    className="h-8 w-8"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -30,20 +30,21 @@ export default function PageNav() {
                       d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
                     ></path>
                   </svg>
-                  <span className="text-lg sm:text-xl block">
-                    temperatur.nu
-                  </span>
+                  <span className="text-lg sm:text-xl block">temperatur.nu</span>
                 </div>
               </Link>
             </div>
             <div
-              className={"absolute top-16 right-0 bg-indigo-900 " + (isOpen ? "flex flex-col w-screen h-screen sm:h-fit items-center sm:items-start z-50" : "hidden")}
+              className={
+                "absolute top-16 right-0 bg-neutral-100 dark:bg-neutral-800 " +
+                (isOpen ? "flex flex-col w-screen h-screen sm:h-fit items-center sm:items-start z-50" : "hidden")
+              }
               id="mobile-menu"
             >
               <div className="px-2 pt-2 pb-3 space-y-16 sm:space-y-5">
                 <Link
                   to="/favoriter"
-                  className="text-slate-200 hover:text-white px-3 py-2 rounded-md text-sm font-bold w-full flex items-center"
+                  className="text-indigo-900 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500 px-3 pt-16 pb-2 sm:py-2 rounded-md text-sm font-bold w-full flex items-center"
                   onClick={() => setIsOpen(false)}
                 >
                   <svg
@@ -64,7 +65,7 @@ export default function PageNav() {
                 </Link>
                 <Link
                   to="/narliggande"
-                  className="flex items-center text-slate-200 hover:text-white px-3 py-2 rounded-md text-sm font-bold w-full"
+                  className="flex items-center text-indigo-900 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500 px-3 py-2 rounded-md text-sm font-bold w-full"
                   onClick={() => setIsOpen(false)}
                 >
                   <svg
@@ -87,11 +88,11 @@ export default function PageNav() {
                       d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                     />
                   </svg>
-                  Närliggande
+                  Nära
                 </Link>
                 <Link
                   to="/platslista"
-                  className="flex items-center text-slate-200 hover:text-white px-3 py-2 rounded-md text-sm font-bold w-full"
+                  className="flex items-center text-indigo-900 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500 px-3 py-2 rounded-md text-sm font-bold w-full"
                   onClick={() => setIsOpen(false)}
                 >
                   <svg
@@ -105,17 +106,17 @@ export default function PageNav() {
                       strokeLinecap="round"
                       strokeLinejoin="round"
                       strokeWidth={2}
-                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
+                      d="M8 16l2.879-2.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                     />
                   </svg>
-                  Alla mätpunkter
+                  Sök
                 </Link>
                 <Link
                   to="/om"
-                  className="flex items-center text-slate-200 hover:text-white px-3 py-2 rounded-md text-sm font-bold w-full"
+                  className="flex items-center text-indigo-900 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500 px-3 py-2 rounded-md text-sm font-bold w-full"
                   onClick={() => setIsOpen(false)}
                 >
-                                    <svg
+                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     className="h-5 w-5 mr-2"
                     fill="none"
@@ -137,7 +138,7 @@ export default function PageNav() {
               <button
                 onClick={() => setIsOpen(!isOpen)}
                 type="button"
-                className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                className="inline-flex items-center justify-center p-2 rounded-md text-indigo-900 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                 aria-controls="mobile-menu"
                 aria-expanded="false"
               >
@@ -171,7 +172,7 @@ export default function PageNav() {
               <div className="flex space-x-4">
                 <Link
                   to="/favoriter"
-                  className="text-slate-200 hover:text-white px-3 py-2 rounded-md text-sm font-bold flex items-center"
+                  className="text-indigo-900 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500 px-3 py-2 rounded-md text-sm font-bold flex items-center"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -191,7 +192,7 @@ export default function PageNav() {
                 </Link>
                 <Link
                   to="/narliggande"
-                  className="text-slate-200 hover:text-white px-3 py-2 rounded-md text-sm font-bold flex items-center"
+                  className="text-indigo-900 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500 px-3 py-2 rounded-md text-sm font-bold flex items-center"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -213,11 +214,11 @@ export default function PageNav() {
                       d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                     />
                   </svg>
-                  Närliggande
+                  Nära
                 </Link>
                 <Link
                   to="/platslista"
-                  className="text-slate-200 hover:text-white px-3 py-2 rounded-md text-sm font-bold flex items-center"
+                  className="text-indigo-900 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500 px-3 py-2 rounded-md text-sm font-bold flex items-center"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -230,14 +231,14 @@ export default function PageNav() {
                       strokeLinecap="round"
                       strokeLinejoin="round"
                       strokeWidth={2}
-                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
+                      d="M8 16l2.879-2.879m0 0a3 3 0 104.243-4.242 3 3 0 00-4.243 4.242zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                     />
                   </svg>
-                  Alla mätpunkter
+                  Sök
                 </Link>
                 <Link
                   to="/om"
-                  className="text-slate-200 hover:text-white px-3 py-2 rounded-md text-sm font-bold flex items-center"
+                  className="text-indigo-900 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-500 px-3 py-2 rounded-md text-sm font-bold flex items-center"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"

diff --git a/src/Pages/About.js b/src/Pages/About.js
@@ -4,8 +4,8 @@ export default function About() {
   document.title = "Om tjänsten";
   return (
     <div className="container mx-auto p-3">
-      <div className="bg-white rounded-lg max-w-4xl mx-auto p-5">
-        <article className="prose">
+      <div className="bg-white dark:bg-neutral-700 rounded-lg max-w-4xl mx-auto p-5">
+        <article className="prose dark:prose-invert">
           <h1 className="text-3xl sm:text-5xl">Webbapp för temperatur.nu skriven med React</h1>
           <p className="text-xs -mt-5 sm:-mt-8">
             <em>

diff --git a/src/Pages/Favorites.js b/src/Pages/Favorites.js
@@ -51,27 +51,27 @@ export default function Favorites({ userFavorites }) {
       {hasErrors ? <div className="container max-w-4xl mx-auto">{hasErrors.message}</div> : ""}
       {isLoading ? <LoadingSpinner /> : ""}
       {locationList.length === 0 ? (
-        <div className="container max-w-4xl mx-auto">
+        <div className="container bg-white dark:bg-neutral-700 prose dark:prose-invert rounded-lg max-w-4xl p-3 mx-auto">
           <div className="text-center">Du har ännu inte favoritmarkerat några mätstationer.</div>
         </div>
       ) : (
-        <div className="container bg-white rounded-lg max-w-4xl p-3 mx-auto prose">
-          <table className="container table-fixed">
+        <div className="container bg-white dark:bg-neutral-700 rounded-lg max-w-4xl p-3 mx-auto">
+          <table className="container max-w-4xl prose dark:prose-invert">
             <thead>
               <tr>
-                <th className="w-1/2">Plats</th>
-                <th className="w-1/4">Temperatur</th>
-                <th className="w-1/4"></th>
+                <th className="w-1/2 text-left">Plats</th>
+                <th className="w-1/4 text-right">Temperatur</th>
+                <th className="w-1/4">&nbsp;</th>
               </tr>
             </thead>
             <tbody>
               {locations.map((row) => (
-                <tr key={row.id} className="border-bottom hover:bg-gray-100">
-                  <td className="py-2 truncate">
+                <tr key={row.id} className="hover:bg-neutral-100 dark:hover:bg-neutral-600">
+                  <td className="w-1/2 py-2 truncate">
                     <Link to={`/plats/${row.id}`}>{row.title}</Link>
                   </td>
-                  <td className="py-2">{row.temp}&deg;C</td>
-                  <td className="py-2">
+                  <td className="w-1/4 py-2 text-right">{row.temp}&deg;C</td>
+                  <td className="w-1/4 py-2">
                     <svg
                       className="w-5 h-5 mx-3 text-yellow-500 cursor-pointer"
                       fill="none"

diff --git a/src/Pages/LocationData.js b/src/Pages/LocationData.js
@@ -76,7 +76,7 @@ export default function LocationData({ userFavorites, setUserFavorites, userHome
             ) : (
               ""
             )}
-            <div className="container bg-white rounded-lg max-w-4xl mx-auto p-3">
+            <div className="container bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-200 rounded-lg max-w-4xl mx-auto p-3">
               <div className="text-center">
                 <h1 className="text-xl sm:text-3xl font-bold">{locationData?.title}</h1>
                 {locationData?.kommun && locationData?.lan && (
@@ -112,7 +112,7 @@ export default function LocationData({ userFavorites, setUserFavorites, userHome
                 <div className="flex items-center justify-center mx-auto text-center my-3">
                   {userHome === locationData?.id ? (
                     <svg
-                      className="w-8 h-8 mx-3 text-indigo-900 cursor-pointer"
+                      className="w-8 h-8 mx-3 text-indigo-900 dark:text-indigo-500 cursor-pointer"
                       fill="currentColor"
                       viewBox="0 0 20 20"
                       xmlns="http://www.w3.org/2000/svg"
@@ -126,7 +126,7 @@ export default function LocationData({ userFavorites, setUserFavorites, userHome
                     </svg>
                   ) : (
                     <svg
-                      className="w-8 h-8 mx-3 text-gray-300 cursor-pointer"
+                      className="w-8 h-8 mx-3 text-neutral-300 dark:text-neutral-500 cursor-pointer"
                       fill="currentColor"
                       viewBox="0 0 20 20"
                       xmlns="http://www.w3.org/2000/svg"
@@ -161,7 +161,7 @@ export default function LocationData({ userFavorites, setUserFavorites, userHome
                     </svg>
                   ) : (
                     <svg
-                      className="w-8 h-8 mx-3 text-gray-300 cursor-pointer"
+                      className="w-8 h-8 mx-3 text-neutral-300 dark:text-neutral-500 cursor-pointer"
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"

diff --git a/src/Pages/LocationList.js b/src/Pages/LocationList.js
@@ -36,14 +36,14 @@ export default function LocationList({
 
   return (
     <div className="container mx-auto p-3">
-      {hasErrors ? <div className="container bg-white rounded-xl">{hasErrors.message}</div> : ""}
-      <div className="container bg-white rounded-lg max-w-4xl mx-auto p-3">
+      {hasErrors ? <div className="container bg-white dark:bg-neutral-700 rounded-xl">{hasErrors.message}</div> : ""}
+      <div className="container bg-white dark:bg-neutral-700 prose dark:prose-invert rounded-lg max-w-4xl mx-auto p-3">
         <form onSubmit={submitHandler} className="my-3 align-items-center">
           <div>
             <input
               type="search"
               id="locationSearchBar"
-              className="border w-full rounded-md p-2"
+              className="border border-neutral-100 dark:border-neutral-600 w-full rounded-md p-2 bg-neutral-100 dark:bg-neutral-600"
               placeholder="Sök mätplats"
               onChange={changeHandler}
               disabled={isLoading}
@@ -133,8 +133,8 @@ export default function LocationList({
         </p>
       </div>
       {isLoading ? <LoadingSpinner /> : ""}
-      <div className="container bg-white rounded-lg max-w-4xl my-3 mx-auto p-3 prose">
-        <table className="container table-fixed">
+      <div className="container bg-white dark:bg-neutral-700 rounded-lg max-w-4xl my-3 mx-auto p-3 prose">
+        <table className="container max-w-4xl prose dark:prose-invert">
           <thead>
             <tr>
               <th className="w-1/2">Plats</th>
@@ -144,7 +144,7 @@ export default function LocationList({
           </thead>
           <tbody>
             {locations.map((row) => (
-              <tr key={row.id} className="border-bottom hover:bg-gray-100">
+              <tr key={row.id} className="hover:bg-neutral-100 dark:hover:bg-neutral-600">
                 <td className="w-1/2 py-2 truncate">
                   <Link to={`/plats/${row.id}`}>{row.title}</Link>
                 </td>