fix css build error

wearefuturegov · Nov 19, 2024 · cfc140e · cfc140e
1 parent 753a4a8
commit cfc140e
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 68 deletions.
diff --git a/src/components/DetailDialog/index.jsx b/src/components/DetailDialog/index.jsx
@@ -12,7 +12,8 @@ import Description from "../Description"
 import LocalOffer from "../LocalOffer"
 import Loader from "../Loader"
 import { ButtonLink } from "../Button"
-import Dialog, { Body as InheritedBody, Header, Title } from "../Dialog"
+import { Body as InheritedBody, Header, Title } from "../Dialog/Dialog.styles"
+import Dialog from "../Dialog"
 import SingleLocation from "./SingleLocation"
 import LocationAccordion from "./LocationAccordion"
 import { TickList, TickListItem } from "../TickList"

diff --git a/src/components/Dialog/Dialog.styles.js b/src/components/Dialog/Dialog.styles.js
@@ -0,0 +1,50 @@
+import styled from "styled-components"
+
+export const Icon = styled.img`
+  width: 30px;
+  height: 30px;
+`
+
+export const CloseButton = styled.button`
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  &:hover {
+    background: ${props => props.theme.styles.pale};
+  }
+  &:focus {
+    outline: 3px solid ${props => props.theme.styles.focus};
+  }
+`
+
+export const Header = styled.header`
+  padding: 25px;
+  @media screen and (min-width: ${props => props.theme.styles.breakpointM}) {
+    padding: 45px;
+  }
+`
+
+export const Body = styled.div`
+  padding: 25px;
+  @media screen and (min-width: ${props => props.theme.styles.breakpointM}) {
+    padding: 45px;
+  }
+  &:nth-of-type(even) {
+    background: ${props => props.theme.styles.pale};
+  }
+`
+
+export const Title = styled.h1`
+  color: ${props => props.theme.styles.text};
+  margin-bottom: 0px;
+  font-size: 1.5rem;
+  @media screen and (min-width: ${props => props.theme.styles.breakpointM}) {
+    font-size: 2rem;
+  }
+`
diff --git a/src/components/Dialog/index.jsx b/src/components/Dialog/index.jsx
@@ -3,6 +3,7 @@ import styled from "styled-components"
 import { Dialog } from "@reach/dialog"
 import "@reach/dialog/styles.css"
 import close from "./close.svg"
+import { Icon, CloseButton } from "./Dialog.styles"
 
 const StyledDialog = styled(Dialog)`
   position: relative;
@@ -29,29 +30,6 @@ const StyledDialog = styled(Dialog)`
   }
 `
 
-export const Icon = styled.img`
-  width: 30px;
-  height: 30px;
-`
-
-export const CloseButton = styled.button`
-  position: absolute;
-  right: 5px;
-  top: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  &:hover {
-    background: ${props => props.theme.styles.pale};
-  }
-  &:focus {
-    outline: 3px solid ${props => props.theme.styles.focus};
-  }
-`
-
 export default ({ handleDismiss, dialogTitle, children }) => (
   <StyledDialog onDismiss={handleDismiss} aria-label={dialogTitle}>
     <CloseButton onClick={handleDismiss}>
@@ -60,29 +38,3 @@ export default ({ handleDismiss, dialogTitle, children }) => (
     {children}
   </StyledDialog>
 )
-
-export const Header = styled.header`
-  padding: 25px;
-  @media screen and (min-width: ${props => props.theme.styles.breakpointM}) {
-    padding: 45px;
-  }
-`
-
-export const Body = styled.div`
-  padding: 25px;
-  @media screen and (min-width: ${props => props.theme.styles.breakpointM}) {
-    padding: 45px;
-  }
-  &:nth-of-type(even) {
-    background: ${props => props.theme.styles.pale};
-  }
-`
-
-export const Title = styled.h1`
-  color: ${props => props.theme.styles.text};
-  margin-bottom: 0px;
-  font-size: 1.5rem;
-  @media screen and (min-width: ${props => props.theme.styles.breakpointM}) {
-    font-size: 2rem;
-  }
-`
diff --git a/src/components/FamilyHubsNetwork/FamilyHubsNetworkDetailDialog.jsx b/src/components/FamilyHubsNetwork/FamilyHubsNetworkDetailDialog.jsx
@@ -0,0 +1,22 @@
+import React from "react"
+
+// import { theme } from "./../../themes/theme_generator"
+import { FamilyHubsNetworkLogo } from "../../components/FamilyHubsNetwork"
+import { Body } from "../../components/Dialog/Dialog.styles"
+
+export const FamilyHubsNetworkDetailDialog = () => {
+  return (
+    <>
+      <Body>
+        <FamilyHubsNetworkLogo />
+        <p>
+          The Family Hub network helps families with babies, children, and young
+          people from birth until they turn 19 (or up to 25 for those with
+          special educational needs and disabilities). As part of the Family Hub
+          Network in Buckinghamshire, we are committed to making it easier for
+          families to get the help and support they need.
+        </p>
+      </Body>
+    </>
+  )
+}
diff --git a/src/components/FamilyHubsNetwork/index.js b/src/components/FamilyHubsNetwork/index.js
@@ -1,2 +1,3 @@
 export * from "./FamilyHubsNetworkTag"
 export * from "./FamilyHubsNetworkLogo"
+export * from "./FamilyHubsNetworkDetailDialog"
diff --git a/src/components/PinboardDialog/index.jsx b/src/components/PinboardDialog/index.jsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react"
 import styled from "styled-components"
 
-import Dialog, { Header, Title } from "../Dialog"
+import { Header, Title } from "../Dialog/Dialog.styles"
+import Dialog from "../Dialog"
 import { PinboardContextConsumer } from "../../contexts/pinboardContext"
 import ServiceCard from "../ServiceCard"
 import ShareDialog from "../ShareDialog"

diff --git a/src/components/ShareDialog/index.jsx b/src/components/ShareDialog/index.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import styled from "styled-components"
 
 import { Dialog } from "@reach/dialog"
-import { CloseButton, Icon } from "../Dialog"
+import { CloseButton, Icon } from "../Dialog/Dialog.styles"
 import fetch from "isomorphic-unfetch"
 import { SolidButton } from "../Button"
 import close from "./close.svg"

diff --git a/src/themes/bfis/vars_bfis.jsx b/src/themes/bfis/vars_bfis.jsx
@@ -6,9 +6,8 @@ import ResponsiveSentence from "../../components/ResponsiveSentence"
 import { AStrong } from "../../components/A"
 import {
   FamilyHubsNetworkTag,
-  FamilyHubsNetworkLogo,
+  FamilyHubsNetworkDetailDialog,
 } from "../../components/FamilyHubsNetwork"
-import { Body } from "../../components/Dialog"
 
 export const vars_bfis = {
   slug: "bfis",
@@ -204,20 +203,7 @@ export const vars_bfis = {
   },
   DetailDialogExtra: ({ service }) => {
     if (service.meta?.some(m => m.key === "family-hub")) {
-      return (
-        <>
-          <Body>
-            <FamilyHubsNetworkLogo />
-            <p>
-              The Family Hub network helps families with babies, children, and
-              young people from birth until they turn 19 (or up to 25 for those
-              with special educational needs and disabilities). As part of the
-              Family Hub Network in Buckinghamshire, we are committed to making
-              it easier for families to get the help and support they need.
-            </p>
-          </Body>
-        </>
-      )
+      return <FamilyHubsNetworkDetailDialog />
     } else {
       return null
     }