From 2319a38894307c2b1bd123f890bb3bcb3319efbe Mon Sep 17 00:00:00 2001
From: Jacob Maynard <jacobamaynard@proton.me>
Date: Sun, 21 Dec 2025 11:32:51 -0600
Subject: [PATCH] styling fixes, add links to new resources page

---
 packages/landing/src/components/Navbar.jsx    |  8 +++---
 .../landing/src/components/SupportedTools.jsx | 26 +++++++++++++------
 packages/web/src/checklist-registry/types.js  |  4 ++-
 .../src/components/checklist-ui/ScoreTag.jsx  |  3 +--
 packages/web/src/config/api.js                |  1 -
 5 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/landing/src/components/Navbar.jsx b/packages/landing/src/components/Navbar.jsx
index c62fbb8ac..83ee7674b 100644
--- a/packages/landing/src/components/Navbar.jsx
+++ b/packages/landing/src/components/Navbar.jsx
@@ -65,7 +65,7 @@ export default function Navbar() {
                   <a
                     href={urls.signUp()}
                     rel='external'
-                    class='hidden items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-white shadow-sm transition-colors hover:bg-blue-700 focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:outline-none sm:inline-flex'
+                    class='hidden items-center gap-2 rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-white shadow-sm transition-colors hover:bg-blue-700 focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:outline-none sm:inline-flex'
                   >
                     Sign Up
                   </a>
@@ -79,7 +79,7 @@ export default function Navbar() {
                 <a
                   href={urls.dashboard()}
                   rel='external'
-                  class='hidden items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-white shadow-sm transition-colors hover:bg-blue-700 focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:outline-none sm:inline-flex'
+                  class='hidden items-center gap-2 rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-white shadow-sm transition-colors hover:bg-blue-700 focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:outline-none sm:inline-flex'
                 >
                   My Dashboard
                 </a>
@@ -164,7 +164,7 @@ function MobileMenu(props) {
                   <a
                     href={urls.signUp()}
                     rel='external'
-                    class='block w-full rounded-lg bg-blue-600 px-4 py-3 text-center font-medium text-white shadow-sm transition-colors hover:bg-blue-700'
+                    class='block w-full rounded-lg border border-transparent bg-blue-600 px-4 py-3 text-center font-medium text-white shadow-sm transition-colors hover:bg-blue-700'
                   >
                     Sign Up
                   </a>
@@ -174,7 +174,7 @@ function MobileMenu(props) {
               <a
                 href={urls.dashboard()}
                 rel='external'
-                class='block w-full rounded-lg bg-blue-600 px-4 py-3 text-center font-medium text-white shadow-sm transition-colors hover:bg-blue-700'
+                class='block w-full rounded-lg border border-transparent bg-blue-600 px-4 py-3 text-center font-medium text-white shadow-sm transition-colors hover:bg-blue-700'
               >
                 My Dashboard
               </a>
diff --git a/packages/landing/src/components/SupportedTools.jsx b/packages/landing/src/components/SupportedTools.jsx
index 14d0ecf84..4c16254d3 100644
--- a/packages/landing/src/components/SupportedTools.jsx
+++ b/packages/landing/src/components/SupportedTools.jsx
@@ -7,8 +7,8 @@ export default function SupportedTools() {
       status: 'available',
       description: 'Systematic reviews of interventions',
     },
-    { name: 'Cochrane RoB 2', status: 'coming', description: 'Randomized trials' },
     { name: 'ROBINS-I', status: 'coming', description: 'Non-randomized studies' },
+    { name: 'Cochrane RoB 2', status: 'coming', description: 'Randomized trials' },
     // { name: 'GRADE', status: 'coming', description: 'Certainty of evidence' },
   ];
 
@@ -25,12 +25,16 @@ export default function SupportedTools() {
         <For each={tools}>
           {tool => {
             const isAvailable = tool.status === 'available';
-            return (
-              <div
-                class={`rounded-xl border p-5 text-center ${
-                  isAvailable ? 'border-blue-700/20 bg-blue-600/10' : 'border-gray-200 bg-gray-50'
-                }`}
-              >
+            const baseClasses = `rounded-xl border p-5 text-center ${
+              isAvailable ? 'border-blue-700/20 bg-blue-600/10' : 'border-gray-200 bg-gray-50'
+            }`;
+            const interactiveClasses =
+              isAvailable ?
+                'cursor-pointer transition-all hover:border-blue-700/40 hover:bg-blue-600/20 hover:shadow-md active:scale-[0.98]'
+              : '';
+
+            const content = (
+              <>
                 <p class={`mb-1 font-semibold ${isAvailable ? 'text-blue-700' : 'text-gray-500'}`}>
                   {tool.name}
                 </p>
@@ -42,8 +46,14 @@ export default function SupportedTools() {
                 >
                   {isAvailable ? 'Available' : 'Coming Soon'}
                 </span>
-              </div>
+              </>
             );
+
+            return isAvailable ?
+                <a href='/resources' rel='external' class={`${baseClasses} ${interactiveClasses}`}>
+                  {content}
+                </a>
+              : <div class={baseClasses}>{content}</div>;
           }}
         </For>
       </div>
diff --git a/packages/web/src/checklist-registry/types.js b/packages/web/src/checklist-registry/types.js
index 692f545fc..205826b69 100644
--- a/packages/web/src/checklist-registry/types.js
+++ b/packages/web/src/checklist-registry/types.js
@@ -1,3 +1,5 @@
+import { LANDING_URL } from '@/config/api.js';
+
 /**
  * Checklist Type Constants and Metadata
  *
@@ -26,7 +28,7 @@ export const CHECKLIST_METADATA = {
     shortName: 'AMSTAR 2',
     description: 'Quality assessment of systematic reviews',
     version: '2017',
-    url: 'https://amstar.ca/Amstar_Checklist.php',
+    url: `${LANDING_URL}/resources`,
     scoreLevels: ['High', 'Moderate', 'Low', 'Critically Low'],
     scoreColors: {
       High: { bg: 'bg-green-100', text: 'text-green-800' },
diff --git a/packages/web/src/components/checklist-ui/ScoreTag.jsx b/packages/web/src/components/checklist-ui/ScoreTag.jsx
index a0f13f5f7..507a3faac 100644
--- a/packages/web/src/components/checklist-ui/ScoreTag.jsx
+++ b/packages/web/src/components/checklist-ui/ScoreTag.jsx
@@ -1,6 +1,5 @@
 import { Show, createMemo } from 'solid-js';
 import { FaSolidCircleInfo } from 'solid-icons/fa';
-import { AMSTAR2_URL } from '@/config/api.js';
 import { Tooltip } from '@corates/ui';
 import { getChecklistMetadata, DEFAULT_CHECKLIST_TYPE } from '@/checklist-registry';
 
@@ -29,7 +28,7 @@ function getScoreStyle(score, checklistType) {
  */
 function getInfoUrl(checklistType) {
   const metadata = getChecklistMetadata(checklistType);
-  return metadata.url || AMSTAR2_URL;
+  return metadata.url;
 }
 
 /**
diff --git a/packages/web/src/config/api.js b/packages/web/src/config/api.js
index a50af2817..d9ae116e3 100644
--- a/packages/web/src/config/api.js
+++ b/packages/web/src/config/api.js
@@ -11,7 +11,6 @@ function getApiBase() {
 export const API_BASE = getApiBase();
 export const LANDING_URL = import.meta.env.VITE_PUBLIC_APP_URL;
 export const BASEPATH = import.meta.env.VITE_BASEPATH;
-export const AMSTAR2_URL = 'https://www.bmj.com/content/358/bmj.j4008';
 
 /**
  * Get WebSocket URL from API base