Merge pull request #121 from Rucha-Ambaliya/feature/convert-styling-o…

…f-Home.jsx-Prediction Converted styling of Home.jsx in disease prdiction
PratikMane0112 · Jan 11, 2025 · 4464f64 · 4464f64
2 parents 991fd12 + 86bf57f
commit 4464f64
Showing 1 changed file with 33 additions and 12 deletions.
diff --git a/frontend/src/components/diseasePrediction/Home.jsx b/frontend/src/components/diseasePrediction/Home.jsx
@@ -1,20 +1,41 @@
 import React from "react";
 
 const Home = (props) => {
-
   return (
     <>
-      <div id="home" className="tablet:grid-col padding-x-2">
-        <p>Before using this symptom checker, please read carefully and accept our Terms and Services:</p>
-        <ul>
-          <li>🔹 This checkup is not a diagnosis.</li>
-          <li>🔹 This checkup is for informational purposes and is not a qualified medical opinion.</li>
-          <li>🔹 Information that you provide is anonymous and not shared with anyone.</li>
+      <div id="" className="max-w-[400px] pt-8 leading-9 tablet:grid-col padding-x-2">
+        <p className="text-blue-6 ">
+          Before using this symptom checker, please read carefully and accept
+          our Terms and Services:
+        </p>
+        <ul className="text-blue-6">
+          <li className="px-[0.6rem] py-[0.2rem]">
+            🔹 This checkup is not a diagnosis.
+          </li>
+          <li className="px-[0.6rem] py-[0.2rem]">
+            🔹 This checkup is for informational purposes and is not a qualified
+            medical opinion.
+          </li>
+          <li className="px-[0.6rem] py-[0.2rem]">
+            🔹 Information that you provide is anonymous and not shared with
+            anyone.
+          </li>
         </ul>
-        <form className="usa-form TermsCheckbox">
-          <div className="usa-checkbox">
-            <input checked={props.isChecked} onChange={props.checked} className="usa-checkbox__input" id="truth" type="checkbox" name="historical-figures-1" value="truth" />
-            <label className="usa-checkbox__label" htmlFor="truth">
+        <form className="usa-form text-[1rem] text-blue-5">
+          <div className="flex justify-start items-center">
+            <input
+              checked={props.isChecked}
+              onChange={props.checked}
+              className="mr-[10px] peer relative top-[10px]"
+              id="truth"
+              type="checkbox"
+              name="historical-figures-1"
+              value="truth"
+            />
+            <label
+              className="text-blue-8 h-4 peer-checked:outline-none"
+              htmlFor="truth"
+            >
               I agree to the TelMedSphere terms and conditions
             </label>
           </div>
@@ -24,4 +45,4 @@ const Home = (props) => {
   );
 };
 
-export default Home;
+export default Home;