187808979 web url modal (#1344)

* Fixes broken cypress test * Webview modal styling tuneup
concord-consortium · Jul 15, 2024 · 95f7ac2 · 95f7ac2
1 parent 2e0e5f0
commit 95f7ac2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/v3/src/components/codap-modal.scss b/v3/src/components/codap-modal.scss
@@ -21,6 +21,16 @@ $header-height: 30px;
       display: flex;
       align-items: center;
       justify-content: center;
+
+      .codap-modal-icon {
+        height: 20px;
+        width: 20px;
+        &.white-icon {
+          path {
+            fill: white;
+          }
+        }
+      }
     }
 
     .codap-header-title {

diff --git a/v3/src/components/web-view/web-view-url-modal.tsx b/v3/src/components/web-view/web-view-url-modal.tsx
@@ -1,9 +1,10 @@
 import {
-  Button, FormControl, Input, ModalBody, ModalFooter, ModalHeader, Tooltip
+  Button, FormControl, FormLabel, Input, ModalBody, ModalFooter, ModalHeader, Tooltip
 } from "@chakra-ui/react"
 import React, { useRef, useState } from "react"
 import { CodapModal } from "../codap-modal"
 import { t } from "../../utilities/translation/translate"
+import MediaToolIcon from "../../assets/icons/icon-media-tool.svg"
 
 interface IProps {
   currentValue?: string
@@ -42,15 +43,16 @@ export const WebViewUrlModal = ({ currentValue="", isOpen, onAccept, onClose }:
   }, {
     label: t("V3.WebView.Modal.okBtnTitle"),
     tooltip: t("DG.DocumentController.enterViewWebPageOKTip"),
-    onClick: applyValue
+    onClick: applyValue,
+    default: true
   }]
 
   return (
     <CodapModal
       closeOnOverlayClick={false}
       isOpen={isOpen}
-      modalHeight={"140px"}
-      modalWidth={"350px"}
+      modalHeight={"120px"}
+      modalWidth={"400px"}
       onClick={focusInput}
       onClose={closeModal}
     >
@@ -60,29 +62,34 @@ export const WebViewUrlModal = ({ currentValue="", isOpen, onAccept, onClose }:
         fontSize="md"
         h="30"
       >
-        <div className="codap-header-title-simple">
-          {t("DG.DocumentController.enterURLPrompt")}
+        <div className="codap-modal-icon-container">
+          <MediaToolIcon className="codap-modal-icon white-icon"/>
         </div>
+        <div className="codap-header-title"/>
       </ModalHeader>
       <ModalBody>
         <FormControl display="flex" flexDirection="column" data-testid="web-view-url-form">
-          <Input
-            data-testid="web-view-url-input"
-            onChange={handleValueChange}
-            onKeyDown={e => e.stopPropagation()}
-            onKeyUp={handleKeyUp}
-            placeholder={t("V3.WebView.Modal.PlaceholderText")}
-            ref={inputRef}
-            value={value}
-          />
+          <FormLabel className="web-view-url-prompt">
+            {t("DG.DocumentController.enterURLPrompt")}
+            <Input
+              data-testid="web-view-url-input"
+              onChange={handleValueChange}
+              onKeyDown={e => e.stopPropagation()}
+              onKeyUp={handleKeyUp}
+              placeholder={t("V3.WebView.Modal.PlaceholderText")}
+              ref={inputRef}
+              value={value}
+            />
+          </FormLabel>
         </FormControl>
       </ModalBody>
       <ModalFooter mt="-5">
         {
           buttons.map((b, idx) => (
             <Tooltip key={idx} label={b.tooltip} h="20px" fontSize="12px" color="white" openDelay={1000}
               placement="bottom" bottom="15px" left="15px" data-testid="modal-tooltip">
-              <Button size="xs" variant="ghost" ml="5" onClick={b.onClick} data-testid={`${b.label}-button`}>
+              <Button size="xs" variant={`${b.default ? "default" : ""}`} ml="5" onClick={b.onClick}
+                _hover={{backgroundColor: "#72bfca", color: "white"}} data-testid={`${b.label}-button`}>
                 {b.label}
               </Button>
             </Tooltip>