From 518603426425627db0920adccfc0664a4947f685 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 11 Jan 2022 17:24:21 +0100
Subject: [PATCH] Fix: CSS in modal header

---
 src/components/Modal/index.tsx                | 55 +++----------------
 .../SendModal/screens/ModalHeader/index.tsx   | 10 ++--
 .../SendModal/screens/ModalHeader/style.ts    |  8 ++-
 3 files changed, 20 insertions(+), 53 deletions(-)

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 66c2dffa3c..48e7c819b1 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,7 +1,8 @@
-import { Button, Icon, Loader, theme, Title as TitleSRC } from '@gnosis.pm/safe-react-components'
+import { Button, Loader, theme, Title as TitleSRC } from '@gnosis.pm/safe-react-components'
 import { ButtonProps as ButtonPropsMUI, Modal as ModalMUI } from '@material-ui/core'
 import cn from 'classnames'
-import { ReactElement, ReactNode, ReactNodeArray } from 'react'
+import { ReactElement, ReactNode } from 'react'
+import { ModalHeader } from 'src/routes/safe/components/Balances/SendModal/screens/ModalHeader'
 import styled from 'styled-components'
 
 type Theme = typeof theme
@@ -86,36 +87,6 @@ export default GnoModal
 /* Generic Modal */
 /*****************/
 
-/*** Header ***/
-const HeaderSection = styled.div`
-  display: flex;
-  padding: 24px 18px 24px 24px;
-  border-bottom: 2px solid ${({ theme }) => theme.colors.separator};
-
-  h5 {
-    color: ${({ theme }) => theme.colors.text};
-  }
-
-  .close-button {
-    align-self: flex-end;
-    background: none;
-    border: none;
-    padding: 5px;
-    width: 26px;
-    height: 26px;
-
-    span {
-      margin-right: 0;
-    }
-
-    :hover {
-      background: ${({ theme }) => theme.colors.separator};
-      border-radius: 16px;
-      cursor: pointer;
-    }
-  }
-`
-
 const TitleStyled = styled(TitleSRC)`
   display: flex;
   align-items: center;
@@ -148,21 +119,11 @@ const Title = ({ children, ...props }: TitleProps): ReactElement => (
 
 interface HeaderProps {
   children?: ReactNode
-  onClose?: (event: any) => void
+  onClose?: () => unknown
 }
 
-const Header = ({ children, onClose }: HeaderProps): ReactElement => {
-  return (
-    <HeaderSection className="modal-header">
-      {children}
-
-      {onClose && (
-        <button className="close-button" onClick={onClose}>
-          <Icon size="sm" type="cross" />
-        </button>
-      )}
-    </HeaderSection>
-  )
+const Header = ({ children = '', onClose = () => null }: HeaderProps): ReactElement => {
+  return <ModalHeader title={children} onClose={onClose} />
 }
 
 Header.Title = Title
@@ -174,7 +135,7 @@ const BodySection = styled.div<{ withoutPadding: BodyProps['withoutPadding'] }>`
 `
 
 interface BodyProps {
-  children: ReactNode | ReactNodeArray
+  children: ReactNode
   withoutPadding?: boolean
 }
 
@@ -281,7 +242,7 @@ const Buttons = ({ cancelButtonProps = {}, confirmButtonProps = {} }: ButtonsPro
 }
 
 interface FooterProps {
-  children: ReactNode | ReactNodeArray
+  children: ReactNode
   withoutBorder?: boolean
 }
 
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/index.tsx
index d911d70ba8..4147adad88 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/index.tsx
@@ -1,7 +1,7 @@
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
-import { ReactElement } from 'react'
+import { ReactElement, ReactNode } from 'react'
 
 import ChainIndicator from 'src/components/ChainIndicator'
 import Paragraph from 'src/components/layout/Paragraph'
@@ -12,9 +12,9 @@ import { styles } from './style'
 const useStyles = makeStyles(styles)
 
 interface HeaderProps {
-  onClose: () => void
+  onClose: () => unknown
   subTitle?: string
-  title: string
+  title: ReactNode
   iconUrl?: string
 }
 
@@ -24,11 +24,11 @@ export const ModalHeader = ({ onClose, subTitle, title, iconUrl }: HeaderProps):
 
   return (
     <Row align="center" className={classes.heading} grow>
-      {iconUrl && <img className={classes.icon} alt={title} src={iconUrl} />}
+      {iconUrl && <img className={classes.icon} alt={typeof title === 'string' ? title : undefined} src={iconUrl} />}
       <Paragraph className={classes.headingText} noMargin weight="bolder">
         {title}
       </Paragraph>
-      <Paragraph className={classes.annotation}>{subTitle ? subTitle : ''}</Paragraph>
+      <Paragraph className={classes.annotation}>{subTitle}</Paragraph>
       <Row className={classes.chainIndicator}>
         {connectedNetwork.chainId && <ChainIndicator chainId={connectedNetwork.chainId} />}
       </Row>
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/style.ts b/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/style.ts
index ac61abdbd6..d303b67c0c 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/style.ts
+++ b/src/routes/safe/components/Balances/SendModal/screens/ModalHeader/style.ts
@@ -3,19 +3,23 @@ import { createStyles } from '@material-ui/core'
 
 export const styles = createStyles({
   heading: {
-    padding: `${md} ${lg}`,
+    padding: `${md} ${lg} 12px`,
     justifyContent: 'flex-start',
     boxSizing: 'border-box',
     maxHeight: '74px',
+    flexWrap: 'nowrap',
   },
   annotation: {
     letterSpacing: '-1px',
     color: secondaryText,
     marginRight: 'auto',
     marginLeft: '20px',
+    whiteSpace: 'nowrap',
+    flex: 1,
   },
   headingText: {
     fontSize: lg,
+    whiteSpace: 'nowrap',
   },
   closeIcon: {
     height: '35px',
@@ -25,6 +29,8 @@ export const styles = createStyles({
     padding: `0 ${md}`,
     height: '20px',
     alignItems: 'center',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
   },
   icon: {
     width: '20px',