From f4c1be2fc74bd94ccaeafba1ef29a7a0227159fd Mon Sep 17 00:00:00 2001
From: kristo-baricevic <108290619+kristo-baricevic@users.noreply.github.com>
Date: Tue, 13 Feb 2024 14:00:44 -0500
Subject: [PATCH 1/4] commit ignore

---
 frontend/.gitignore                      | 2 ++
 frontend/src/assets/chart-line-solid.svg | 1 +
 frontend/src/pages/Help/ChartLine.tsx    | 9 +++++++++
 3 files changed, 12 insertions(+)
 create mode 100644 frontend/src/assets/chart-line-solid.svg
 create mode 100644 frontend/src/pages/Help/ChartLine.tsx

diff --git a/frontend/.gitignore b/frontend/.gitignore
index d67a573c..6e10711f 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 
+config/env/env.dev
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
diff --git a/frontend/src/assets/chart-line-solid.svg b/frontend/src/assets/chart-line-solid.svg
new file mode 100644
index 00000000..aef9871e
--- /dev/null
+++ b/frontend/src/assets/chart-line-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/pages/Help/ChartLine.tsx b/frontend/src/pages/Help/ChartLine.tsx
new file mode 100644
index 00000000..9368f407
--- /dev/null
+++ b/frontend/src/pages/Help/ChartLine.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+const ChartLine = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z" />
+  </svg>
+);
+
+export default React.memo(ChartLine);

From 9066bce3bdf2ddb48f50f8259ac48c535e2da386 Mon Sep 17 00:00:00 2001
From: kristo-baricevic <108290619+kristo-baricevic@users.noreply.github.com>
Date: Tue, 13 Feb 2024 14:18:47 -0500
Subject: [PATCH 2/4] updated DataSources

---
 .vscode/settings.json                   |  1 +
 frontend/src/pages/Help/ChartLine.tsx   |  9 -----
 frontend/src/pages/Help/DataSources.tsx | 45 +++++++++++++++++++------
 frontend/src/pages/Help/HowTo.tsx       |  8 ++---
 frontend/src/pages/Help/LineChart.tsx   |  9 +++++
 5 files changed, 49 insertions(+), 23 deletions(-)
 delete mode 100644 frontend/src/pages/Help/ChartLine.tsx
 create mode 100644 frontend/src/pages/Help/LineChart.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c398cb0a..29d57ae1 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "prescribers",
         "satoshi"
     ]
 }
\ No newline at end of file
diff --git a/frontend/src/pages/Help/ChartLine.tsx b/frontend/src/pages/Help/ChartLine.tsx
deleted file mode 100644
index 9368f407..00000000
--- a/frontend/src/pages/Help/ChartLine.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-const ChartLine = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-    <path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z" />
-  </svg>
-);
-
-export default React.memo(ChartLine);
diff --git a/frontend/src/pages/Help/DataSources.tsx b/frontend/src/pages/Help/DataSources.tsx
index a4c21449..66dd7379 100644
--- a/frontend/src/pages/Help/DataSources.tsx
+++ b/frontend/src/pages/Help/DataSources.tsx
@@ -1,20 +1,45 @@
 import Layout from "../Layout/Layout";
+import LineChart from "./LineChart";
 
-function DataSources() {
+interface DataProps {
+  title: string;
+  paragraph: string[];
+}
+
+const data: DataProps = {
+  title: "How Do We Get Our Data?",
+  paragraph: [
+    "Balancer gets it data from publicly available peer-reviewed research "+
+    "as well as through extensive interviews with prescribers. ",
+    "Check back soon for more comprehensive information."
+  ],
+};
+
+function HowTo() {
   return (
     <Layout>
-      <div className="mt-20 flex w-full max-w-6xl flex-col items-center justify-center md:mt-28">
-        <div className="mt-10">
-          <h1 className="head_text"></h1>
-          <h2 className="desc">How Do We Find Our Data?</h2>
-          <p className="mx-auto mt-5 hidden
-          max-w-[100%] text-center font-satoshi text-log text-gray-400 sm:text-x; md:block">
-            Data sources coming soon!
-          </p>
+      <div className="mt-20 flex w-full max-w-6xl flex-col items-center justify-center px-8">
+        <div className="mt-10 h-44 w-44">
+        <LineChart />
+        </div>
+        <h3 className="flex items-center justify-center py-4 text-xl">
+          {data.title}
+        </h3>
+        <div className="flex flex-col min-w-68 rounded-xl border-2 border-blue-100 bg-neutral-50 px-4 py-4 shadow-md">
+          <div className="flex flex-col px-2 py-2">
+            <p className="font-satoshi text-sm text-gray-700">
+              {data.paragraph[0]}
+            </p>
+          </div>
+          <div className="flex flex-col px-2 py-2">
+            <p className="font-satoshi text-sm text-gray-700">
+              {data.paragraph[1]}
+            </p>
+          </div>
         </div>
       </div>
     </Layout>
   );
 }
 
-export default DataSources;
+export default HowTo;
diff --git a/frontend/src/pages/Help/HowTo.tsx b/frontend/src/pages/Help/HowTo.tsx
index 11a20551..7737538a 100644
--- a/frontend/src/pages/Help/HowTo.tsx
+++ b/frontend/src/pages/Help/HowTo.tsx
@@ -19,10 +19,10 @@ const howToData: HowToProps = {
     "2. Select the patient's current state.",
     "3. Answer 'yes' or 'no' to the questions related to patient characteristics.",
     "4. Check off any relevant reproductive status information.",
-    "5. Type out a list of the patient's current medications. ",
-    "6. You can separate medications with commas. It doesn't matter if you use the generic or " +
-    "brand name of the medication; Balancer will understand.",
-    "7. Type out a list of any medications you want Balancer to exclude from the recommended " +
+    "5. Type out a list of the patient's current medications. You can separate medications " +
+    "with commas. It doesn't matter if you use the generic or brand name of the medication; " + 
+    "Balancer will understand.",
+    "6. Type out a list of any medications you want Balancer to exclude from the recommended " +
       "medications list. (For example, if a patient has already tried a particular medication " +
       "without success, enter the name of that medication and Balancer will be sure not to " +
       "suggest it in the results page.) You can separate medications with commas. Again, " +
diff --git a/frontend/src/pages/Help/LineChart.tsx b/frontend/src/pages/Help/LineChart.tsx
new file mode 100644
index 00000000..d3822893
--- /dev/null
+++ b/frontend/src/pages/Help/LineChart.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+const LineChart = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="#0047ab" d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z" />
+  </svg>
+);
+
+export default React.memo(LineChart);

From 0a4a098a30489615ac9b7b34be53a11db7e8d538 Mon Sep 17 00:00:00 2001
From: kristo-baricevic <108290619+kristo-baricevic@users.noreply.github.com>
Date: Thu, 22 Feb 2024 18:21:13 -0500
Subject: [PATCH 3/4] font sizes

---
 frontend/src/pages/Help/Help.tsx  | 4 ++--
 frontend/src/pages/Help/HowTo.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Help/Help.tsx b/frontend/src/pages/Help/Help.tsx
index b5c8fdf9..c1067ed3 100644
--- a/frontend/src/pages/Help/Help.tsx
+++ b/frontend/src/pages/Help/Help.tsx
@@ -48,9 +48,9 @@ function Help() {
     <Layout>
       <div className="mt-20 flex w-full max-w-6xl flex-col items-center justify-center px-4">
         <div className="flex justify-center text-center">
-          <h1 className="mt-20 font-satoshi text-3xl text-blue-600">
+          <h2 className="mt-20 font-satoshi text-3xl text-blue-600">
             Help & Support Page
-          </h1>
+          </h2>
         </div>
         <div className="flex text-center py-2">
           <h3 className="font-satoshi text-gray-600">
diff --git a/frontend/src/pages/Help/HowTo.tsx b/frontend/src/pages/Help/HowTo.tsx
index 7737538a..cd35153a 100644
--- a/frontend/src/pages/Help/HowTo.tsx
+++ b/frontend/src/pages/Help/HowTo.tsx
@@ -35,15 +35,15 @@ function HowTo() {
   return (
     <Layout>
       <div className="mt-20 flex w-full max-w-6xl flex-col items-center justify-center px-8">
-        <h3 className="mt-10 flex items-center justify-center py-4 text-xl">
+        <h3 className="mt-10 flex items-center justify-center py-4 text-4xl">
           {howToData.title}
         </h3>
         <div className="flex flex-col rounded-xl border-2 border-blue-100 bg-neutral-50 px-4 py-4 shadow-md">
           <div className="flex flex-col px-2 py-2">
-            <p className="font-satoshi text-sm text-gray-700">
+            <p className="font-satoshi text-md text-gray-700">
               {howToData.paragraph[0]}
             </p>
-            <p className="py-2 font-satoshi text-sm text-gray-600">
+            <p className="py-2 font-satoshi text-md text-gray-600">
               {howToData.paragraph[1]}
             </p>
           </div>
@@ -52,7 +52,7 @@ function HowTo() {
               {howToData.instructions.map((text, index) => {
                 return (
                   <li
-                    className="py-1 font-satoshi text-sm text-gray-700"
+                    className="py-1 font-satoshi text-md text-gray-700"
                     key={index}
                   >
                     {text}

From b727f6aac39c3af2f88c31b1ad52bb32f0ed4283 Mon Sep 17 00:00:00 2001
From: kristo-baricevic <108290619+kristo-baricevic@users.noreply.github.com>
Date: Thu, 22 Feb 2024 18:45:00 -0500
Subject: [PATCH 4/4] updated fonts and size of card

---
 frontend/src/pages/About/About.tsx   | 10 ----------
 frontend/src/pages/Help/Help.tsx     |  2 --
 frontend/src/pages/Help/HelpCard.tsx | 23 +++++++++++++++--------
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/About/About.tsx b/frontend/src/pages/About/About.tsx
index 3c3761cb..f280ebb3 100644
--- a/frontend/src/pages/About/About.tsx
+++ b/frontend/src/pages/About/About.tsx
@@ -81,16 +81,6 @@ function About() {
               </div>
             </div>
           </div>
-          <div className="flex w-full flex-col items-center">
-            <div>
-              <div className="mt-8 text-4xl font-bold">44 million</div>
-              <div className="text-lg">Transactions every 24 hours</div>
-              <div className="mt-5 text-4xl font-bold">$119 million</div>
-              <div className="text-lg">Assets under holding</div>
-              <div className="mt-5 text-4xl font-bold">46,000</div>
-              <div className="text-lg">New users annually</div>
-            </div>
-          </div>
         </div>
 
         {/* Support Us section */}
diff --git a/frontend/src/pages/Help/Help.tsx b/frontend/src/pages/Help/Help.tsx
index c1067ed3..1765e708 100644
--- a/frontend/src/pages/Help/Help.tsx
+++ b/frontend/src/pages/Help/Help.tsx
@@ -61,14 +61,12 @@ function Help() {
           {data.icon.map((icon, index) => (
             <Link to={data.link[index]} key={index} className="flex"> 
 
-            <div className="">
             <HelpCard
               key={index}
               icon={icon}
               title={data.title[index]}
               paragraph={data.paragraph[index]}
             />
-            </div>
             </Link>
           ))}
         </div>
diff --git a/frontend/src/pages/Help/HelpCard.tsx b/frontend/src/pages/Help/HelpCard.tsx
index cc61e42d..751b0bbe 100644
--- a/frontend/src/pages/Help/HelpCard.tsx
+++ b/frontend/src/pages/Help/HelpCard.tsx
@@ -23,17 +23,24 @@ function HelpCard(data: HelpProps) {
     }
     setTitle(data.title);
     setParagraph(data.paragraph);
-    if (data.icon == "UserDoctor") {
-      setIcon(<UserDoctor />);
-    } else if (data.icon == "FeedbackIcon") {
-      setIcon(<FeedbackIcon />);
-    } else if (data.icon == "MagnifyingGlassChart") {
-      setIcon(<MagnifyingGlassChart />);
+    switch (data.icon) {
+      case "UserDoctor":
+        setIcon(<UserDoctor />);
+        break;
+      case "FeedbackIcon":
+        setIcon(<FeedbackIcon />);
+        break;
+      case "MagnifyingGlassChart":
+        setIcon(<MagnifyingGlassChart />);
+        break;
+      default:
+        setIcon(null); 
     }
-  }, [paragraph, data, title]);
+  }, 
+  [data.icon, data.title, data.paragraph]); 
 
   return (
-    <div className="flex h-72 w-full max-w-6xl flex-col items-center justify-center rounded-xl border-2 border-blue-100 bg-neutral-50 px-4 shadow-md md:mt-28">
+    <div className="flex h-72 w-full max-w-6xl min-w-[280px] flex-col items-center justify-center rounded-xl border-2 border-blue-100 bg-neutral-50 px-4 shadow-md md:mt-28">
       <div className="flex h-full flex-col items-center">
         {icon && <div className="mt-6 h-24 w-24">{icon}</div>}
         <div className="mt-6 flex flex-col">