Fixes on Scales and styles

Author: jesubohr

.vscode/settings.json

@@ -1,3 +1,20 @@
 {
-    "editor.tabSize": 4
+  "prettier.singleQuote": false,
+  "prettier.trailingComma": "none",
+  "prettier.arrowParens": "always",
+  "prettier.printWidth": 80,
+  "prettier.tabWidth": 2,
+  "prettier.useTabs": false,
+  "prettier.semi": false,
+  "prettier.bracketSpacing": true,
+  "prettier.bracketSameLine": false,
+  "prettier.jsxSingleQuote": false,
+  "prettier.proseWrap": "preserve",
+  "prettier.requireConfig": false,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
 }

src/components/Buttons/Scale.jsx

@@ -28,28 +28,18 @@ export default function ScaleButton({
   return (
     <div
       className={
-        "flex items-center justify-between gap-4" +
-        " px-5 " +
+        "flex items-center justify-start gap-2.5 px-3 py-2 " +
         "max-w-xs sm:max-w-md md:max-w-none w-full md:w-fit rounded " +
         "text-base sm:text-2xl md:text-2xl " +
         "text-gray-900 dark:text-gray-50 font-medium " +
         "backdrop-blur-sm backdrop-brightness-50 backdrop-opacity-10 dark:backdrop-brightness-200 dark:backdrop-opacity-60 " +
-        `border-4 ${className}`
+        `border-4 cursor-pointer ${className}`
       }
     >
-      <div className="my-2 flex gap-1">
         <InfoCircleButton onClick={showBasicModal} />
-        <button
-          title={`Ir a escala: ${name}`}
-          className="grow md:grow-0 w-max h-full text-left font-light"
-          onClick={() => {
-            navigate(`/app/scales/${id + 1}`);
-          }}
-        >
-          {name}
-        </button>
-      </div>
-      <FavoriteButton id={id} />
+        <span onClick={() => navigate(`/app/scales/${id + 1}`) }>{name}</span>
+        <div className="grow" onClick={() => navigate(`/app/scales/${id + 1}`) }></div>
+        <FavoriteButton id={id} className="justify-self-end" />
     </div>
   );
 }

src/components/MainContent.jsx

@@ -2,8 +2,8 @@ export default function MainContent ({ className = "", landing = false, children
     return (
         <main className={
             "flex flex-col items-center " +
-            "mx-auto px-5 md:px-20 xl:px-0 " +
-            "min-h-[calc(100vh-75px)] max-w-7xl " +
+            "mx-auto px-5 md:px-12 xl:px-0 " +
+            "min-h-[calc(100vh-75px)] max-w-5xl " +
             ((landing) ? "relative w-full " : "pt-8 pb-12 ") +
             `${className}`
         }>

src/components/ScoreVerdict.jsx

@@ -3,13 +3,7 @@ import Icon from "./Icon";
 import { addResult } from "../utils/api";
 import toast from "react-hot-toast";
 
-export default function ScoreVerdict({
-  scaleResults,
-  totalScore,
-  dni,
-  scaleName,
-  scaleSphere,
-}) {
+export default function ScoreVerdict({ scaleResults, totalScore, dni, scaleName, scaleSphere }) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   async function handleSave(e) {
     e.preventDefault();

src/libs/framinghamHombres.json

@@ -162,28 +162,28 @@
   "interpretations": {
     "results": [
       {
-        "min": -2,
-        "max": 2,
+        "min": -9999,
+        "max": 5,
         "result": "Bajo riesgo."
       },
       {
-        "min": 3,
-        "max": 5,
+        "min": 5,
+        "max": 9,
         "result": "Riesgo ligero."
       },
       {
-        "min": 6,
-        "max": 8,
+        "min": 10,
+        "max": 19,
         "result": "Riesgo moderado."
       },
       {
-        "min": 9,
-        "max": 12,
+        "min": 20,
+        "max": 39,
         "result": "Riesgo alto."
       },
       {
-        "min": 13,
-        "max": 19,
+        "min": 39,
+        "max": 9999,
         "result": "Riesgo muy alto."
       }
     ],

src/libs/framinghamMujeres.json

@@ -162,29 +162,29 @@
   "interpretations": {
     "results": [
       {
-        "min": -2,
+        "min": -9999,
         "max": 5,
         "result": "Riesgo bajo."
       },
       {
-        "min": 6,
+        "min": 5,
         "max": 9,
         "result": "Riesgo ligero."
       },
       {
         "min": 10,
-        "max": 14,
+        "max": 19,
         "result": "Riesgo moderado."
       },
       {
-        "min": 15,
-        "max": 24,
+        "min": 20,
+        "max": 39,
         "result": "Riesgo alto."
       },
       {
-        "min": 19,
-        "max": 23,
-        "result": "Sin riesgo de desarrollar úlceras por presión."
+        "min": 39,
+        "max": 9999,
+        "result": "Riesgo muy alto."
       }
     ],
     "titles": ["Resultado", "Riesgo coronario a 10 años."]

src/main.jsx

@@ -31,7 +31,7 @@ ReactDOM.render(
           </Route>
           <Route path="scales" element={<Scales />} />
           <Route path="scales">
-            <Route path="9" element={<FraminghamScale />} />
+            <Route path="8" element={<FraminghamScale />} />
             <Route path=":scaleId" element={<Scale />} />
           </Route>
           <Route path="favorites" element={<Favorites />} />