feat: fix new cow modal styles (#3177)

* feat: fix new cow modal styles * feat: fix new cow modal styles * feat: fix new cow modal styles --------- Co-authored-by: Michel <[email protected]>
cowprotocol · Oct 3, 2023 · 1d709b5 · 1d709b5
1 parent cfa48e7
commit 1d709b5
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 61 deletions.
diff --git a/apps/cowswap-frontend/src/common/constants/theme.ts b/apps/cowswap-frontend/src/common/constants/theme.ts
@@ -24,6 +24,7 @@ export enum UI {
 
   // Icons
   ICON_SIZE_NORMAL = '--cow-icon-size-normal',
+  ICON_SIZE_LARGE = '--cow-icon-size-large',
   ICON_COLOR_NORMAL = '--cow-icon-color-normal',
 
   // States

diff --git a/apps/cowswap-frontend/src/common/pure/Modal/index.tsx b/apps/cowswap-frontend/src/common/pure/Modal/index.tsx
@@ -105,6 +105,7 @@ export const CowModal = styled(Modal)<{
     transition: max-width 0.4s ease;
     background-color: var(${UI.COLOR_CONTAINER_BG_01});
     overflow: hidden;
+    border-radius: var(${UI.BORDER_RADIUS_NORMAL});
 
     ${({ theme }) => theme.mediaWidth.upToSmall`
       max-height: 100vh;
@@ -146,3 +147,8 @@ export const CowModal = styled(Modal)<{
     }
   }
 `
+
+export const NewCowModal = styled(Modal)`
+  width: 100vw;
+  height: 100vh;
+`
diff --git a/apps/cowswap-frontend/src/common/pure/Modal/styled.tsx b/apps/cowswap-frontend/src/common/pure/Modal/styled.tsx
@@ -59,6 +59,7 @@ export const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
     justify-content: center;
 
     background-color: ${({ theme }) => theme.modalBG};
+    backdrop-filter: blur(5px);
   }
 `
 

diff --git a/apps/cowswap-frontend/src/common/pure/NewModal/index.tsx b/apps/cowswap-frontend/src/common/pure/NewModal/index.tsx
@@ -12,36 +12,36 @@ const ModalInner = styled.div`
   width: 100%;
   height: auto;
   margin: auto;
+  background: transparent;
+  padding: 0;
+  position: relative;
+`
+
+const Wrapper = styled.div<{ maxWidth?: number | string; minHeight?: number | string }>`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  overflow-y: auto;
   background: var(${UI.COLOR_CONTAINER_BG_01});
   border-radius: var(${UI.BORDER_RADIUS_NORMAL});
   box-shadow: var(${UI.BOX_SHADOW_NORMAL});
-  padding: 0;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    margin: 8vh 0 0;
+    margin: 0;
     border-radius: 0;
     border-top-left-radius: var(${UI.BORDER_RADIUS_NORMAL});
     border-top-right-radius: var(${UI.BORDER_RADIUS_NORMAL});
     box-shadow: none;
   `}
-`
-
-const Wrapper = styled.div<{ maxWidth?: number | string; minHeight?: number | string }>`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  margin: auto;
-  background: var(${UI.MODAL_BACKDROP});
-  overflow-y: auto;
 
   ${ModalInner} {
     max-width: ${({ maxWidth }) => (maxWidth ? `${maxWidth}px` : '100%')};
     min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '100%')};
 
     ${({ theme }) => theme.mediaWidth.upToSmall`
       max-width: 100%;
-      min-height: initial;
-      height: auto;
+      height: 100%;
     `}
   }
 `
@@ -62,18 +62,18 @@ const Heading = styled.h2`
 `
 
 const IconX = styled.div`
-  position: fixed;
-  top: 18px;
-  right: 18px;
+  position: absolute;
+  top: 16px;
+  right: 10px;
   cursor: pointer;
-  opacity: 0.6;
+  opacity: 0.7;
   transition: opacity 0.2s ease-in-out;
   margin: 0 0 0 auto;
 
   > svg {
     width: var(${UI.ICON_SIZE_NORMAL});
     height: var(${UI.ICON_SIZE_NORMAL});
-    fill: var(${UI.ICON_COLOR_NORMAL});
+    color: var(${UI.ICON_COLOR_NORMAL});
   }
 
   &:hover {
@@ -152,12 +152,12 @@ export function NewModal({ maxWidth = 450, minHeight = 450, title, children, onD
     <Wrapper maxWidth={maxWidth} minHeight={minHeight}>
       <ModalInner>
         {title && <Heading>{title}</Heading>}
+        <IconX onClick={() => onDismiss && onDismiss()}>
+          <SVG src={CLOSE_ICON} />
+        </IconX>
+
         <NewModalContent>{children}</NewModalContent>
       </ModalInner>
-
-      <IconX onClick={() => onDismiss && onDismiss()}>
-        <SVG src={CLOSE_ICON} />
-      </IconX>
     </Wrapper>
   )
 }
diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
@@ -413,6 +413,7 @@ export const UniThemedGlobalStyle = css`
 
     // Icons
     ${UI.ICON_SIZE_NORMAL}: 24px;
+    ${UI.ICON_SIZE_LARGE}: 36px;
     ${UI.ICON_COLOR_NORMAL}: var(${UI.COLOR_TEXT1});
 
     // [STATE] Information (light blue)

diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeConfirmModal/index.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeConfirmModal/index.tsx
@@ -3,7 +3,7 @@ import { useAtomValue } from 'jotai'
 import { useIsSafeWallet, useWalletInfo } from '@cowprotocol/wallet'
 
 import { PermitModal } from 'common/containers/PermitModal'
-import { CowModal } from 'common/pure/Modal'
+import { CowModal, NewCowModal } from 'common/pure/Modal'
 import { OrderSubmittedContent } from 'common/pure/OrderSubmittedContent'
 import { TransactionErrorContent } from 'common/pure/TransactionErrorContent'
 
@@ -26,47 +26,58 @@ export function TradeConfirmModal(props: TradeConfirmModalProps) {
 
   if (!account) return null
 
-  return (
-    <CowModal isOpen={isOpen} onDismiss={onDismiss}>
-      {(() => {
-        if (error) {
-          return <TransactionErrorContent message={error} onDismiss={onDismiss} />
-        }
+  const renderModalContent = () => {
+    if (error) {
+      return <TransactionErrorContent message={error} onDismiss={onDismiss} />
+    }
 
-        if (pendingTrade && permitSignatureState) {
-          // TODO: potentially replace TradeConfirmPendingContent completely with PermitModal
-          // We could use this not just for permit, but for any token, even already approved
-          const step = permitSignatureState === 'signed' ? 'submit' : 'approve'
+    if (pendingTrade && permitSignatureState) {
+      // TODO: potentially replace TradeConfirmPendingContent completely with PermitModal
+      // We could use this not just for permit, but for any token, even already approved
+      const step = permitSignatureState === 'signed' ? 'submit' : 'approve'
+      return (
+        <PermitModal
+          inputAmount={pendingTrade.inputAmount}
+          outputAmount={pendingTrade.outputAmount}
+          step={step}
+          onDismiss={onDismiss}
+        />
+      )
+    }
 
-          return (
-            <PermitModal
-              inputAmount={pendingTrade.inputAmount}
-              outputAmount={pendingTrade.outputAmount}
-              step={step}
-              onDismiss={onDismiss}
-            />
-          )
-        }
+    if (pendingTrade) {
+      return <TradeConfirmPendingContent pendingTrade={pendingTrade} onDismiss={onDismiss} />
+    }
 
-        if (pendingTrade) {
-          return <TradeConfirmPendingContent pendingTrade={pendingTrade} onDismiss={onDismiss} />
-        }
+    if (transactionHash) {
+      return (
+        <OrderSubmittedContent
+          chainId={chainId}
+          account={account}
+          isSafeWallet={isSafeWallet}
+          onDismiss={onDismiss}
+          hash={transactionHash}
+        />
+      )
+    }
 
-        // TODO: use <TransactionSubmittedContent/> for Swap
-        if (transactionHash) {
-          return (
-            <OrderSubmittedContent
-              chainId={chainId}
-              account={account}
-              isSafeWallet={isSafeWallet}
-              onDismiss={onDismiss}
-              hash={transactionHash}
-            />
-          )
-        }
+    return children
+  }
 
-        return children
-      })()}
-    </CowModal>
-  )
+  const renderModal = () => {
+    if (permitSignatureState) {
+      return (
+        <NewCowModal isOpen={isOpen} onDismiss={onDismiss}>
+          {renderModalContent()}
+        </NewCowModal>
+      )
+    }
+    return (
+      <CowModal isOpen={isOpen} onDismiss={onDismiss}>
+        {renderModalContent()}
+      </CowModal>
+    )
+  }
+
+  return renderModal()
 }