lsst-epo · alexgoff · May 8, 2024 · May 3, 2024 · May 3, 2024 · May 3, 2024
diff --git a/components/atomic/ExpandContract/ExpandContract.tsx b/components/atomic/ExpandContract/ExpandContract.tsx
@@ -22,7 +22,7 @@ const ExpandContract: FunctionComponent<ExpandContractProps> = ({
       aria-controls={controlsId}
       className={className}
     >
-      <IconComposer icon={isOpen ? "close" : "expand"} />
+      <IconComposer size={16} icon={isOpen ? "close" : "expand"} />
     </Styled.Button>
   );
 };

diff --git a/components/atomic/ExpandContract/styles.ts b/components/atomic/ExpandContract/styles.ts
@@ -13,6 +13,7 @@ export const Button = styled.button`
 
   &::before {
     outline: 1px solid var(--button-border-color);
+    outline-offset: -1px;
     position: absolute;
     width: 100%;
     height: 100%;
@@ -23,6 +24,6 @@ export const Button = styled.button`
   &:focus {
     --button-border-color: var(--neutral95, #1f2121);
     outline: 1px solid var(--button-border-color);
-    outline-offset: -2px;
+    outline-offset: -3px;
   }
 `;
diff --git a/components/content-blocks/CameraFilterTool/index.tsx b/components/content-blocks/CameraFilterTool/index.tsx
@@ -1,11 +1,9 @@
-"use client";
 import { FunctionComponent } from "react";
 import { graphql, useFragment, FragmentType } from "@/gql/public-schema";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "@/lib/i18n";
 import { BaseContentBlockProps } from "@/components/shapes";
-import WidgetContainer from "@/components/layout/WidgetContainer";
+import WidgetContainerWithModal from "@/components/layout/WidgetContainerWithModal";
 import CameraFilterTool from "@rubin-epo/epo-widget-lib/CameraFilter";
-import withModal from "@/components/hoc/withModal/withModal";
 import * as Styled from "./styles";
 
 const Fragment = graphql(`
@@ -16,31 +14,25 @@ const Fragment = graphql(`
 
 const CameraFilterToolBlock: FunctionComponent<
   BaseContentBlockProps<FragmentType<typeof Fragment>>
-> = ({ openModal, isOpen, data }) => {
+> = async ({ data, locale }) => {
   const { widgetInstructions } = useFragment(Fragment, data);
-  const { t } = useTranslation();
+  const { t } = await useTranslation(locale, "translation");
 
   return (
     <>
-      {!isOpen && widgetInstructions && (
-        <Styled.WidgetInstructions
-          dangerouslySetInnerHTML={{ __html: widgetInstructions }}
-        />
-      )}
-      <WidgetContainer
-        title={t("widgets.camera_filter_tool")}
-        paddingSize={isOpen ? "small" : "none"}
+      <Styled.WidgetInstructions
+        dangerouslySetInnerHTML={{ __html: widgetInstructions || "" }}
+      />
+      <WidgetContainerWithModal
+        title={t("widgets.camera_filter_tool") || undefined}
         instructions={widgetInstructions || undefined}
-        variant="light"
-        interactive
-        {...{ openModal, isOpen }}
       >
         <CameraFilterTool />
-      </WidgetContainer>
+      </WidgetContainerWithModal>
     </>
   );
 };
 
 CameraFilterToolBlock.displayName = "ContentBlock.CameraFilterTool";
 
-export default withModal(CameraFilterToolBlock);
+export default CameraFilterToolBlock;
diff --git a/components/content-blocks/ColorFilterTool/index.tsx b/components/content-blocks/ColorFilterTool/index.tsx
@@ -49,14 +49,6 @@ const ColorFilterToolBlock: FunctionComponent<ColorFilterProps> = ({
   return (
     <WidgetContainer
       {...{ openModal, isOpen }}
-      style={{
-        "--color-tool-padding": "var(--PADDING_SMALL, 20px)",
-        "--widget-container-padding": "var(--color-tool-padding)",
-        "--widget-content-width": "1200px",
-      }}
-      data-modal-open={isOpen}
-      interactive={false}
-      variant="light"
       caption={t("widgets.color_filter_tool.read_only_caption", { name })}
       title={displayName || title}
     >

diff --git a/components/content-blocks/FilterTool/index.tsx b/components/content-blocks/FilterTool/index.tsx
@@ -3,9 +3,7 @@ import { FunctionComponent, useState } from "react";
 import { graphql, useFragment, FragmentType } from "@/gql/public-schema";
 import { BaseContentBlockProps } from "@/components/shapes";
 import { useTranslation } from "react-i18next";
-import WidgetContainer from "@/components/layout/WidgetContainer";
 import FilterTool from "@rubin-epo/epo-widget-lib/FilterTool";
-import withModal from "@/components/hoc/withModal/withModal";
 import * as Styled from "./styles";
 
 const Fragment = graphql(`
@@ -20,39 +18,38 @@ const Fragment = graphql(`
 
 const FilterToolBlock: FunctionComponent<
   BaseContentBlockProps<FragmentType<typeof Fragment>>
-> = ({ data, openModal, isOpen }) => {
+> = ({ data }) => {
   const { t } = useTranslation();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {
-    preSelectedColor = "none",
+    preSelectedColor,
     readOnly = false,
     widgetInstructions,
   } = useFragment(Fragment, data);
-  const [selectedColor, setSelectedColor] = useState(preSelectedColor);
+  const [selectedColor, setSelectedColor] = useState(
+    preSelectedColor || "none"
+  );
 
   return (
     <>
-      {!isOpen && widgetInstructions && (
+      {widgetInstructions && (
         <Styled.WidgetInstructions
           dangerouslySetInnerHTML={{ __html: widgetInstructions }}
         />
       )}
-      <WidgetContainer
+      <Styled.WidgetContainer
         title={t("widgets.filter_tool")}
-        paddingSize="none"
         instructions={widgetInstructions || undefined}
-        {...{ openModal, isOpen }}
       >
         <FilterTool
-          isDisabled={readOnly || undefined}
+          isDisabled={!!readOnly}
           selectedColor={selectedColor}
           selectionCallback={(selection) => setSelectedColor(selection)}
         />
-      </WidgetContainer>
+      </Styled.WidgetContainer>
     </>
   );
 };
 
 FilterToolBlock.displayName = "ContentBlock.FilterTool";
 
-export default withModal(FilterToolBlock);
+export default FilterToolBlock;
diff --git a/components/content-blocks/FilterTool/styles.ts b/components/content-blocks/FilterTool/styles.ts
@@ -1,6 +1,11 @@
 "use client";
+import WidgetContainerWithModal from "@/components/layout/WidgetContainerWithModal";
 import styled from "styled-components";
 
+export const WidgetContainer = styled(WidgetContainerWithModal)`
+  --widget-padding: 0px;
+`;
+
 export const WidgetInstructions = styled.div`
   color: var(--text-color);
   margin-block-end: var(--interaction-group-margin);

diff --git a/components/content-blocks/InteractionGroupContainer/styles.ts b/components/content-blocks/InteractionGroupContainer/styles.ts
@@ -6,6 +6,7 @@ export const Heading = styled.h2`
   margin-block-end: ${fluidScale("2em", "1.5em")};
 `;
 export const InteractionGroup = styled.div`
+  --widget-background-color: var(--white, #fff);
   --interaction-group-margin: var(
     --content-block-margin,
     ${fluidScale("var(--PADDING_MEDIUM, 40px)", "var(--PADDING_SMALL, 20px)")}

diff --git a/components/content-blocks/MagnitudeScatterPlot/index.tsx b/components/content-blocks/MagnitudeScatterPlot/index.tsx
@@ -69,7 +69,6 @@ const MagnitudeScatterPlotBlock: FunctionComponent<
   return (
     <WidgetContainerWithModal
       title={t("widgets.light_curve.title") || undefined}
-      interactive={false}
     >
       <ObservationsPlot
         name={displayName || title || undefined}

diff --git a/components/dynamic/SupernovaDistanceDistribution/index.tsx b/components/dynamic/SupernovaDistanceDistribution/index.tsx
@@ -154,8 +154,6 @@ const SupernovaDistanceDistributionContainer: FunctionComponent<
   return (
     <WidgetContainerWithModal
       title={t("widgets.supernova_three_vector") || undefined}
-      variant="light"
-      fillScreen
       {...{ instructions }}
     >
       <SupernovaDistanceDistribution

diff --git a/components/hoc/withModal/withModal.tsx b/components/hoc/withModal/withModal.tsx
@@ -64,18 +64,16 @@ function withModal<T extends ModalProps>(
         id={contentId}
         closeModal={closeModal}
       >
+        <WrappedComponent
+          {...{
+            ...props,
+            hasModal: true,
+            isOpen,
+            openModal,
+            closeModal,
+          }}
+        />
         {isOpen && <Modal.Header {...{ isOpen, closeModal, contentId }} />}
-        <Modal.ComponentContainer data-modal-open={isOpen}>
-          <WrappedComponent
-            {...{
-              ...props,
-              hasModal: true,
-              isOpen,
-              openModal,
-              closeModal,
-            }}
-          />
-        </Modal.ComponentContainer>
       </Modal.Base>
     );
   };

diff --git a/components/layout/Modal/Base/styles.ts b/components/layout/Modal/Base/styles.ts
@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 
 export const Dialog = styled.div`
-  container: contentModal / inline-size;
+  container-type: inline-size;
 
   &[data-modal-open="true"] {
     position: fixed;
@@ -19,14 +19,10 @@ export const Dialog = styled.div`
       overflow-y: auto;
       width: 100%;
       height: 100%;
-      display: grid;
+      display: flex;
       align-items: center;
       justify-items: center;
-      grid-template-columns: 1fr;
-      grid-template-rows: min-content 1fr;
-      grid-template-areas:
-        "header"
-        "component";
+      position: relative;
     }
   }
 `;

diff --git a/components/layout/Modal/Header/index.tsx b/components/layout/Modal/Header/index.tsx
@@ -13,13 +13,11 @@ const ModalHeader: FunctionComponent<ModalHeaderProps> = ({
   closeModal,
 }) => {
   return (
-    <Styled.Header>
-      <Styled.Close
-        isOpen={isOpen}
-        onToggle={closeModal}
-        controlsId={contentId}
-      />
-    </Styled.Header>
+    <Styled.Close
+      isOpen={isOpen}
+      onToggle={closeModal}
+      controlsId={contentId}
+    />
   );
 };
 

diff --git a/components/layout/Modal/Header/styles.ts b/components/layout/Modal/Header/styles.ts
@@ -1,19 +1,11 @@
 import styled from "styled-components";
 import ExpandContract from "@/atomic/ExpandContract/ExpandContract";
 
-export const Header = styled.div`
-  background-color: var(--header-background-color, transparent);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  grid-area: header;
-  padding: 1ch;
-  width: 100%;
-  z-index: 1;
-`;
-
 export const Close = styled(ExpandContract)`
-  margin-left: auto;
+  position: absolute !important;
+  right: calc(var(--PADDING_SMALL) / 1.5);
+  top: calc(var(--PADDING_SMALL) / 1.5);
+  z-index: 1;
 `;
 
 export const Title = styled.span`

diff --git a/components/layout/Modal/styles.ts b/components/layout/Modal/styles.ts
@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 export const ComponentContainer = styled.div`
   grid-area: component;
+  container-type: inline-size;
   width: 100%;
   height: 100%;
   display: flex;

diff --git a/components/layout/WidgetContainer/InteractionText/styles.ts b/components/layout/WidgetContainer/InteractionText/styles.ts
@@ -3,10 +3,9 @@ import styled from "styled-components";
 
 export const InstructionsContainer = styled.div`
   color: var(--widget-text-color);
-  grid-area: instructions;
   display: flex;
   justify-content: center;
-  margin-block: 1em;
+  height: var(--instructions-height, 2em);
 `;
 
 export const InfoButton = styled.button`