Fix theme color

estitpab · Jul 26, 2023 · 86c39b1 · 86c39b1
1 parent 7c61eea
commit 86c39b1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/src/components/Calculator.tsx b/src/components/Calculator.tsx
@@ -31,14 +31,14 @@ const Calculator = () => {
             lightTheme && "text-gray-900"
           )}`}
         >
-          Allure moyenne (min / sec) :
+          Allure moyenne (min / km) :
           <input
             name="pace"
             type="number"
             step="0.01"
             onChange={handlePaceChange}
             value={pace}
-            className={`text-center text-5xl mb-10 mt-1 w-full rounded-md shadow-sm border-gray-700 "bg-gray-800 bg-gray-800 text-white ${clsx(
+            className={`text-center text-5xl mb-10 mt-1 w-full rounded-md shadow-sm border-gray-700 bg-gray-800 text-white ${clsx(
               lightTheme && ["bg-gray-200", "text-gray-900"]
             )}`}
           />

diff --git a/src/components/TimeBlock.tsx b/src/components/TimeBlock.tsx
@@ -10,11 +10,11 @@ interface Props {
 const TimeBlock = ({ distance, pace, note }: Props) => {
   return (
     <div
-      className={`relative overflow-hidden flex flex-col justify-center rounded-xl border border-gray-800 p-3 ${clsx(
+      className={`relative overflow-hidden flex flex-col justify-start rounded-xl border border-gray-800 p-3 ${clsx(
         Boolean(note) && "pb-8"
       )}`}
     >
-      <h2 className="text-3xl font-bold title-gradient">{distance} km</h2>
+      <h2 className="text-2xl md:text-3xl font-bold title-gradient">{distance} km</h2>
       <p>{calculateEstimatedTime(pace, distance)}</p>
       {note && (
         <p className=" bg-blue-900 absolute bottom-0 w-full left-0 text-blue-300 text-sm">

diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
@@ -13,21 +13,31 @@ const Layout = ({ children }: Props) => {
   const lightTheme = theme === "light";
 
   const handleThemeChange = () => {
-    setTheme(theme === "dark" ? "light" : "dark");
+    setTheme((prevTheme) => (prevTheme === "dark" ? "light" : "dark"));
   };
 
   return (
     <ThemeContext.Provider value={theme}>
-      <section className={`bg-gray-900 text-white ${clsx(
-              lightTheme && [
-                "bg-white",
-                "text-gray-900"
-              ]
-            )}`}>
+      <section
+        className={`bg-gray-900 text-white ${clsx(
+          lightTheme && ["bg-white", "text-gray-900"]
+        )}`}
+      >
         <div className="mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center">
-          <div className="mx-auto max-w-3xl text-center">{children}</div>
+          <div
+            className={`mx-auto max-w-3xl text-center ${
+              lightTheme ? "text-gray-900" : "text-white"
+            }`}
+          >
+            {children}
+          </div>
         </div>
-        <button onClick={handleThemeChange}>Afficher le thème {theme === "dark" ? "light" : "dark"}</button>
+        <button
+          className={`${lightTheme ? "text-gray-900" : "text-white"}`}
+          onClick={handleThemeChange}
+        >
+          Afficher le thème {theme === "dark" ? "light" : "dark"}
+        </button>
       </section>
     </ThemeContext.Provider>
   );