Merge pull request #5 from kristo-baricevic/listOfMed

List of med

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "prescribers",
         "satoshi"
     ]
 }

frontend/.gitignore

@@ -12,6 +12,8 @@ dist
 dist-ssr
 *.local
 
+config/env/env.dev
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

frontend/src/pages/About/About.tsx

@@ -81,16 +81,6 @@ function About() {
               </div>
             </div>
           </div>
-          <div className="w-full flex 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 */}

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;

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">
@@ -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>

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">

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, " +
@@ -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}

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);