Added info button and title to graph

Ph1so · Aug 13, 2024 · 44adb31 · 44adb31
1 parent 8e211f2
commit 44adb31
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 27 deletions.
diff --git a/src/components/AnalysisPage.css b/src/components/AnalysisPage.css
@@ -2,11 +2,14 @@
   min-height: 100vh; /* Ensure the container takes at least full viewport height */
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .content {
   flex: 1; /* This will push the footer to the bottom */
   padding: 20px;
+  position: relative;
 }
 
 footer.source {
@@ -15,6 +18,44 @@ footer.source {
   text-align: center; /* Center align the text */
 }
 
+.Title2-container {
+  display: flex;
+  flex-direction: column; 
+  font-family: "Rubik", sans-serif;
+  justify-content: center;
+  align-items: center;
+  padding: 2vmin;
+  font-weight: 400; /* Apply bold weight */
+  margin-bottom: 0vmin;
+  width: 100%;
+  max-width: 70vmin;
+  /* background-color: hsl(0, 0%, 98%); */
+  background-color: transparent;
+  border-radius: 0.8vmin;
+  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); */
+}
+.Title2 {
+  font-family: 'Merriweather Sans', sans-serif;
+  font-weight: 500;
+  line-height: 1.2;
+  font-size: 5.5em;
+  background-color: #9692fe;
+  background-size: cover;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  margin-bottom: 0em;
+
+}
+
+.Title2-container p {
+  font-size: .9em;
+  text-align: center; /* Center the paragraph */
+  margin-top: 0; /* Ensure there's no extra space above the paragraph */
+  color: #cccccc;
+}
+
+
 .source p {
   margin: 0;
   font-size: 14px;
@@ -30,28 +71,6 @@ footer.source {
   text-decoration: underline; /* Underline on hover */
 }
 
-.chartDesc {
-  text-align: center; /* Center-align text */
-  margin-top: 2vmin; /* Space above the description */
-}
-
-/* Responsive Design */
-@media (max-width: 600px) {
-  .source p {
-
-    font-size: 12px; /* Smaller text size for mobile devices */
-  }
-
-  .source a {
-    font-size: 12px; /* Adjust link font size for mobile */
-  }
-
-  .chartDesc {
-    font-size: 0.8rem; /* Smaller font size on mobile devices */
-
-  }
-}
-
 .Planner-Button {
   background-color: #9692fe;
   color: white;
@@ -69,4 +88,16 @@ footer.source {
   justify-content: center;
   /* Optional: to ensure the button is clearly visible */
   padding: 20px 0;
-}
+}
+
+@media (max-width: 480px) {
+  .Title2 {
+    font-size: 4.5em;
+  }
+}
+
+@media (max-width: 400px) {
+  .Title2 {
+    font-size: 4em;
+  }
+}
diff --git a/src/components/AnalysisPage.js b/src/components/AnalysisPage.js
@@ -15,11 +15,12 @@ const AnalysisPage = () => {
 
   return (
     <div className="analysis-page">
+      <div className='Title2-container'>
+      <div className="Title2">Analyzer</div>
+      <p>View if your total weekly sets per muscle group is optimal!</p>
+      </div>
       <div className="content">
         <BarChart />
-        <p className = "chartDesc">
-        Colored bars the dot lies in indicates if this amount is optimal for growth for this muscle group 
-      </p>
         <div className="Planner-Button-Container">
         <button 
           className="Planner-Button" 

diff --git a/src/components/BarChart.css b/src/components/BarChart.css
@@ -1,6 +1,6 @@
 .bar-chart-container {
   margin-top: 2vmin;
-  max-width: 80vw; /* Maximum width set to 80% of the viewport width */
+  max-width: 80vw;
   width: 100%;
   height: auto;
   margin: 0 auto;
@@ -13,6 +13,7 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  position: relative; /* Added to position the button within this container */
 }
 
 .bar-chart-container canvas {
@@ -35,6 +36,40 @@
   text-align: center; /* Center-align text */
 }
 
+.question-mark-button {
+  position: absolute;
+  top: 10px;  /* Adjust this value to align the button as desired */
+  right: 10px;  /* Adjust this value to align the button as desired */
+  background-color: #9692fe;
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.popup {
+  position: absolute;
+  top: 50px;
+  right: 10px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  padding: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  width: 200px;
+}
+
+.popup p {
+  color: #121212
+}
+
+
 /* Show warning message after 1 second */
 .bar-chart-container.loaded .warning-message {
   opacity: 1; /* Make visible */
@@ -52,6 +87,19 @@
     padding: 1vmin;
   }
 
+  .popup {
+    width: 150px; /* Smaller width for mobile */
+    padding: 10px; /* Adjust padding for mobile */
+    font-size: 14px;
+  }
+  .question-mark-button {
+    width: 20px;
+    height: 20px;
+    top: 5px;
+    right: 0px;
+    font-size: 12px;
+  }
+
   .warning-message {
     font-size: 0.8rem; /* Smaller font size on mobile devices */
   }

diff --git a/src/components/BarChart.js b/src/components/BarChart.js
@@ -21,6 +21,8 @@ const BarChart = () => {
     considerMore: [],
     considerLess: []
   });
+  // State for handling the pop-up visibility
+  const [isPopupVisible, setIsPopupVisible] = useState(false);
 
   const [loaded, setLoaded] = useState(false); // New state for animation
   const [pointRadius, setPointRadius] = useState(7);
@@ -305,6 +307,21 @@ const BarChart = () => {
           {warnings.considerLess && `Consider less sets for ${warnings.considerLess}`}
         </p>
       </div>
+      {/* Question Mark Button */}
+<button 
+  className="question-mark-button" 
+  onClick={() => setIsPopupVisible(!isPopupVisible)}
+>
+  ?
+</button>
+
+{/* Pop-up */}
+{isPopupVisible && (
+  <div className="popup">
+    <p>Colored bars the dot lies in indicates if this amount is optimal for growth for this muscle group 
+    </p>
+  </div>
+)}
     </div>
 
   );