From e8d25c690a247d972c34f70e9c51f8e2e697282b Mon Sep 17 00:00:00 2001
From: Matt Bemis <mbemis@broadinstitute.org>
Date: Wed, 6 Nov 2024 14:12:59 -0500
Subject: [PATCH] cleanup

---
 .../dashboard/widgets/MailingListWidget.tsx   |  2 +-
 .../dashboard/widgets/StudyTeamWidget.tsx     |  2 +-
 .../dashboard/widgets/StudyTrendsWidget.tsx   |  2 +-
 .../portal/dashboard/widgets/StudyWidget.tsx  |  2 +-
 .../dashboard/widgets/TutorialsWidget.tsx     |  2 +-
 .../dashboard/widgets/WebsiteWidget.tsx       | 30 ++++++++++++-------
 6 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/ui-admin/src/portal/dashboard/widgets/MailingListWidget.tsx b/ui-admin/src/portal/dashboard/widgets/MailingListWidget.tsx
index f4354bc6b..dc8afe099 100644
--- a/ui-admin/src/portal/dashboard/widgets/MailingListWidget.tsx
+++ b/ui-admin/src/portal/dashboard/widgets/MailingListWidget.tsx
@@ -26,7 +26,7 @@ export const MailingListWidget = ({ portal }: { portal: Portal }) => {
   }, [portal.shortcode])
 
   return (
-    <InfoCard classNames={''}>
+    <InfoCard>
       <InfoCardHeader>
         <div className="d-flex align-items-center justify-content-between w-100">
           <span className="fw-bold">Mailing List</span>
diff --git a/ui-admin/src/portal/dashboard/widgets/StudyTeamWidget.tsx b/ui-admin/src/portal/dashboard/widgets/StudyTeamWidget.tsx
index d2a3d80e6..8237dda7a 100644
--- a/ui-admin/src/portal/dashboard/widgets/StudyTeamWidget.tsx
+++ b/ui-admin/src/portal/dashboard/widgets/StudyTeamWidget.tsx
@@ -27,7 +27,7 @@ export const StudyTeamWidget = ({ portal }: { portal: Portal }) => {
   })
 
   return (
-    <InfoCard classNames={''}>
+    <InfoCard>
       <InfoCardHeader>
         <div className="d-flex align-items-center justify-content-between w-100">
           <span className="fw-bold">Team Members</span>
diff --git a/ui-admin/src/portal/dashboard/widgets/StudyTrendsWidget.tsx b/ui-admin/src/portal/dashboard/widgets/StudyTrendsWidget.tsx
index 05b09db08..6b04ff109 100644
--- a/ui-admin/src/portal/dashboard/widgets/StudyTrendsWidget.tsx
+++ b/ui-admin/src/portal/dashboard/widgets/StudyTrendsWidget.tsx
@@ -35,7 +35,7 @@ export const StudyTrendsWidget = ({ portal, study }: { portal: Portal, study: St
   }
 
   return (
-    <InfoCard classNames={''}>
+    <InfoCard>
       <InfoCardHeader>
         <div className="d-flex align-items-center justify-content-between w-100">
           <span className="fw-bold text-wrap text-break">{study.name}</span>
diff --git a/ui-admin/src/portal/dashboard/widgets/StudyWidget.tsx b/ui-admin/src/portal/dashboard/widgets/StudyWidget.tsx
index bae70dfdf..50c4de2c7 100644
--- a/ui-admin/src/portal/dashboard/widgets/StudyWidget.tsx
+++ b/ui-admin/src/portal/dashboard/widgets/StudyWidget.tsx
@@ -27,7 +27,7 @@ export const StudyWidget = ({ portal }: { portal: Portal }) => {
   })
 
   return (
-    <InfoCard classNames={''}>
+    <InfoCard>
       <InfoCardHeader>
         <div className="d-flex align-items-center justify-content-between w-100">
           <span className="fw-bold">Studies</span>
diff --git a/ui-admin/src/portal/dashboard/widgets/TutorialsWidget.tsx b/ui-admin/src/portal/dashboard/widgets/TutorialsWidget.tsx
index ce6433f11..42f835d1d 100644
--- a/ui-admin/src/portal/dashboard/widgets/TutorialsWidget.tsx
+++ b/ui-admin/src/portal/dashboard/widgets/TutorialsWidget.tsx
@@ -8,7 +8,7 @@ import { InfoCard, InfoCardBody, InfoCardHeader } from 'components/InfoCard'
 
 export const TutorialsWidget = () => {
   return (
-    <InfoCard classNames={''}>
+    <InfoCard>
       <InfoCardHeader>
         <div className="d-flex align-items-center justify-content-between w-100">
           <span className="fw-bold">Help & Tutorials</span>
diff --git a/ui-admin/src/portal/dashboard/widgets/WebsiteWidget.tsx b/ui-admin/src/portal/dashboard/widgets/WebsiteWidget.tsx
index 1110166fe..571c63725 100644
--- a/ui-admin/src/portal/dashboard/widgets/WebsiteWidget.tsx
+++ b/ui-admin/src/portal/dashboard/widgets/WebsiteWidget.tsx
@@ -1,6 +1,6 @@
 import { Button } from 'components/forms/Button'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faEye, faGear, faImage, faPalette, faPencil } from '@fortawesome/free-solid-svg-icons'
+import { faArrowUpRightFromSquare, faEye, faGear, faImage, faPalette, faPencil } from '@fortawesome/free-solid-svg-icons'
 import React from 'react'
 import { Portal } from '@juniper/ui-core'
 import { DropdownButton } from 'study/participants/survey/SurveyResponseView'
@@ -13,7 +13,7 @@ export const WebsiteWidget = ({ portal }: { portal: Portal }) => {
     env.environmentName === 'live')?.portalEnvironmentConfig.participantHostname
 
   return (
-    <InfoCard classNames={''}>
+    <InfoCard>
       <InfoCardHeader>
         <div className="d-flex align-items-center justify-content-between w-100">
           <span className="fw-bold">Website</span>
@@ -31,15 +31,23 @@ export const WebsiteWidget = ({ portal }: { portal: Portal }) => {
         </div>
       </InfoCardHeader>
       <InfoCardBody>
-        <div className="d-flex">
-          <div style={{ minHeight: '200px' }}>
-            { livePortalUrl ?
-              <img className="border rounded-3"
-                style={{ maxWidth: '100%', height: 'auto' }}
-                src={`https://api.urlbox.io/v1/A8hJem0DKIAE8mDm/png?url=${livePortalUrl}`}
-                alt={'Website preview'}/> :
-              <span className="text-muted bg-gray">Website not yet published</span>
-            }
+        <div className="container">
+          <div className="w-100">
+            <div style={{ minHeight: '200px' }} className="d-flex justify-content-center align-items-center">
+              {livePortalUrl ?
+                <Button
+                  variant="light"
+                  className="border"
+                  onClick={() => {
+                    const url = livePortalUrl?.startsWith('http') ? livePortalUrl : `https://${livePortalUrl}`
+                    window.open(url, '_blank')
+                  }}
+                >
+                  <FontAwesomeIcon icon={faArrowUpRightFromSquare}/> Visit website
+                </Button> :
+                <span className="text-muted bg-gray">Website not yet published</span>
+              }
+            </div>
           </div>
         </div>
       </InfoCardBody>