changed some color box problems

elhagen13 · Nov 19, 2023 · 2d78410 · 2d78410
1 parent 0f457f1
commit 2d78410
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/packages/studywell-frontend/src/components/colorbox/ColorBox.js b/packages/studywell-frontend/src/components/colorbox/ColorBox.js
@@ -12,7 +12,7 @@ const ColorBox = ({ color, onClick }) => {
 };
 
 const ColorBoxContainer = () => {
-  const [backgroundColor, setBackgroundColor] = useState("#374954"); // Initial background color
+  const [backgroundColor, setBackgroundColor] = useState(document.body.style.backgroundColor); // Initial background color
 
   const colors = [
     "#374954",

diff --git a/packages/studywell-frontend/src/pages/LongBreak.js b/packages/studywell-frontend/src/pages/LongBreak.js
@@ -3,6 +3,8 @@ import "../components/timer/Timer.css";
 import React from "react";
 import Timer from "../components/timer/Timer";
 import "./Page.css";
+import ColorBox from "../components/colorbox/ColorBox";
+
 
 function LongBreak() {
   return (
@@ -13,6 +15,7 @@ function LongBreak() {
       <div className="break_text">
         <p>Stretch and grab a snack!</p>
       </div>
+      <ColorBox />
     </div>
   );
 }

diff --git a/packages/studywell-frontend/src/pages/ShortBreak.js b/packages/studywell-frontend/src/pages/ShortBreak.js
@@ -2,6 +2,8 @@ import "../App.css";
 import "../components/timer/Timer.css";
 import "./Page.css";
 import Timer from "../components/timer/Timer";
+import ColorBox from "../components/colorbox/ColorBox";
+
 
 function ShortBreak() {
   return (
@@ -12,6 +14,7 @@ function ShortBreak() {
       <div className="break_text">
         <p>Stretch and grab a snack!</p>
       </div>
+      <ColorBox />
     </div>
   );
 }