Fee subsidy modal styles

src/custom/components/CowBalance/index.tsx

@@ -9,6 +9,21 @@ import { CowSubsidyInfoProps } from 'components/CowSubsidyModal'
 
 const Wrapper = styled(ClaimSummaryWrapper)`
   border-radius: 100px;
+  margin: 0;
+
+  ${ClaimTotal} {
+    > b {
+      margin: 0 0 4px;
+    }
+
+    > p {
+      font-size: 24px;
+
+      ${({ theme }) => theme.mediaWidth.upToSmall`
+        font-size: 18px;
+      `};
+    }
+  }
 `
 
 type CowBalanceProps = Omit<CowSubsidyInfoProps, 'subsidy'> & {
@@ -18,7 +33,7 @@ type CowBalanceProps = Omit<CowSubsidyInfoProps, 'subsidy'> & {
 const CowBalance = ({ balance, title }: CowBalanceProps) => {
   return (
     <Wrapper>
-      <CowProtocolLogo size={100} />
+      <CowProtocolLogo size={80} />
 
       {title && (
         <ClaimSummaryTitle>

src/custom/components/CowProtocolLogo/index.tsx

@@ -1,11 +1,10 @@
 import styled from 'styled-components/macro'
-import CowProtocolIcon from 'assets/cow-swap/cowprotocol.svg'
+import CowProtocolIcon from 'assets/cow-swap/cow_v2.svg'
 
 export const Icon = styled.span<Props>`
   --defaultSize: 24px;
   --smallSize: ${({ size }) => (size ? `calc(${size}px / 1.5)` : 'calc(var(--defaultSize) / 1.5)')};
-  ${({ theme }) => theme.cowToken.background};
-  ${({ theme }) => theme.cowToken.boxShadow};
+  background: url(${CowProtocolIcon}) no-repeat center/contain;
   height: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
   width: ${({ size }) => (size ? `${size}px` : 'var(--defaultSize)')};
   display: inline-block;
@@ -18,19 +17,6 @@ export const Icon = styled.span<Props>`
     height: var(--smallSize);
     border-radius: var(--smallSize);
   `};
-
-  &::after {
-    content: '';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 8%;
-    bottom: 0;
-    margin: auto;
-    background: url(${CowProtocolIcon}) no-repeat center/70%;
-  }
 `
 
 interface Props {

src/custom/components/CowSubsidyModal/SubsidyTable.tsx

@@ -1,67 +1,146 @@
 import styled from 'styled-components/macro'
 import { formatSmartLocaleAware } from 'utils/format'
-import { ClaimTr } from 'pages/Claim/ClaimsTable'
 import { COW_SUBSIDY_DATA } from './constants'
 import { CowSubsidy } from '.'
 import { transparentize } from 'polished'
-import { FlyoutRowActiveIndicator } from '../Header/NetworkSelector'
 
 import { BigNumber } from 'bignumber.js'
 import { formatUnits } from '@ethersproject/units'
 import { V_COW } from 'constants/tokens'
 import { SupportedChainId } from 'constants/chains'
+import { useIsDarkMode } from 'state/user/hooks'
 
 const StyledSubsidyTable = styled.table`
   width: 100%;
+  margin: 0 0 24px;
+
+  thead,
+  tbody {
+    width: 100%;
+    display: block;
+  }
+
+  tbody {
+    border-radius: 16px;
+    border: none;
+    border: 1px solid ${({ theme }) => theme.text2};
+  }
+
+  thead > tr {
+    border: 0;
+  }
 `
 
-const SubsidyTr = styled(ClaimTr)<{ selected?: boolean }>`
+const SubsidyTr = styled.tr<{ selected?: boolean; darkMode?: boolean }>`
   position: relative;
-  ${({ selected, theme }) =>
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border: 1px solid transparent;
+  gap: 0;
+  background: transparent;
+  border-bottom: 1px solid ${({ theme }) => transparentize(0.4, theme.text2)};
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  > th {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  > td {
+    font-size: 15px;
+  }
+
+  > td:first-child {
+    border-right: 1px solid ${({ theme }) => transparentize(0.4, theme.text2)};
+  }
+
+  > td,
+  > th {
+    padding: 12px;
+    text-align: center;
+  }
+
+  ${({ selected, theme, darkMode }) =>
     selected &&
     `
-    background: ${transparentize(0.7, theme.primary1)};
+    background: ${darkMode ? transparentize(0.85, theme.orange) : transparentize(0.75, theme.orange)};
+
+    &::before {
+      position: absolute;
+      left: 16px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      content: "";
+      width: 6px;
+      height: 6px;
+      border-radius: 6px;
+      background-color: ${theme.orange};
+      animation: 2s ease-in-out infinite pulse;
+      box-shadow: 0;
+    }
+
+    &::after {
+      content: '';
+      height: calc(100% + 3px);
+      width:  calc(100% + 4px);
+      display: block;
+      top: -2px;
+      left: -2px;
+      position: absolute;
+      border-radius: 3px;
+      border: 2px solid ${theme.orange};
+    }
 
+    &:first-child,
+    &:first-child::after {
+      border-radius: 16px 16px 3px 3px;
+    }
+
+    &:last-child,
+    &:last-child::after {
+      border-radius: 3px 3px 16px 16px;
+    }
 
     > td {
-      border: 1.2px solid ${theme.primary1};
-      color: ${theme.primary1};
+      color: ${darkMode ? theme.orange : theme.text1};
       font-weight: 500;
 
-      > ${FlyoutRowActiveIndicator} {
-        position: absolute;
-        left: 8%;
-
-        background-color: ${theme.primary1};
-        box-shadow: 0px 0px 8px ${transparentize(0.3, theme.primary1)};
-      }
-
       &:first-child {
-        border-right: none;
-
         display: flex;
         align-items: center; 
         justify-content: center;
       }
+
       &:last-child {
         border-left: none;
       }
     }
   `}
 
-  > th {
-    font-weight: 300;
-  }
-  > td,
-  th {
-    padding: 10px;
-    text-align: center;
-  }
+  ${({ theme }) =>
+    `
+    @keyframes pulse {
+      0% {
+        box-shadow: 0 0 0 0 ${transparentize(0.7, theme.orange)};
+      }
+
+      100% {
+        box-shadow: 0 0 0 8px ${transparentize(1, theme.orange)};
+      }
+    }
+  `}
 `
 
 const COW_DECIMALS = V_COW[SupportedChainId.MAINNET].decimals
 
 function SubsidyTable({ discount }: CowSubsidy) {
+  const darkMode = useIsDarkMode()
+
   return (
     <StyledSubsidyTable>
       <thead>
@@ -77,9 +156,8 @@ function SubsidyTable({ discount }: CowSubsidy) {
           const formattedThreshold = new BigNumber(formatUnits(threshold, COW_DECIMALS))
 
           return (
-            <SubsidyTr key={i} selected={selected}>
+            <SubsidyTr key={i} selected={selected} darkMode={darkMode}>
               <td>
-                {selected && <FlyoutRowActiveIndicator active />}
                 <span>{i && '>' + formatSmartLocaleAware(formattedThreshold)}</span>
               </td>
               <td>{thresholdDiscount}%</td>

src/custom/components/CowSubsidyModal/constants.ts

@@ -1,5 +1,5 @@
 // used in modal and popover
-export const SUBSIDY_INFO_MESSAGE = 'As a (v)COW token holder you will be eligible for a fee discount.'
+export const SUBSIDY_INFO_MESSAGE = '(v)COW token holders are eligible for a fee discount'
 export const COW_SUBSIDY_DATA: [string, number][] = [
   ['0', 0],
   // 100

src/custom/components/CowSubsidyModal/index.tsx

@@ -7,7 +7,7 @@ import {
 } from 'components/TransactionConfirmationModal'
 import { useActiveWeb3React } from 'hooks/web3'
 import { GpModal } from 'components/Modal'
-import { AutoColumn } from 'components/SearchModal/CommonBases'
+import { AutoColumn } from 'components/Column'
 import { Text } from 'rebass'
 
 import Row from 'components/Row'
@@ -27,8 +27,8 @@ export interface CowSubsidyInfoProps {
 }
 
 const CowSubsidyInfo = ({ account, balance, subsidy }: CowSubsidyInfoProps) => (
-  <AutoColumn style={{ marginTop: 20, padding: '2rem 0' }} gap="24px" justify="center">
-    <Text fontWeight={500} fontSize={16} style={{ textAlign: 'center', width: '85%', wordBreak: 'break-word' }}>
+  <AutoColumn style={{ marginTop: 32 }} gap="18px" justify="center">
+    <Text fontWeight={400} fontSize={15} style={{ textAlign: 'center', width: '100%', wordBreak: 'break-word' }}>
       {SUBSIDY_INFO_MESSAGE}
     </Text>
     {/* VCOW LOGO */}
@@ -64,10 +64,12 @@ export default function CowSubsidyModal({
   if (!chainId) return null
 
   return (
-    <GpModal isOpen={isOpen} onDismiss={onDismiss} maxHeight={90}>
+    <GpModal isOpen={isOpen} onDismiss={onDismiss} maxHeight={90} maxWidth={500} padding={'12px 0 18px'}>
       <ConfirmationModalContent
         {...restProps}
         title="CoWmunity fees discount"
+        titleSize={21}
+        styles={{ textAlign: 'center', width: '100%' }}
         onDismiss={onDismiss}
         topContent={TopContent}
         bottomContent={BottomContent}

src/custom/components/Modal/index.ts

@@ -5,12 +5,19 @@ import { HeaderRow, ContentWrapper, CloseIcon, HoverText } from 'components/Wall
 export * from '@src/components/Modal'
 export { default } from '@src/components/Modal'
 
-export const GpModal = styled(Modal)<{ maxWidth?: number; backgroundColor?: string; border?: string }>`
+export const GpModal = styled(Modal)<{
+  maxWidth?: number
+  backgroundColor?: string
+  border?: string
+  padding?: string
+}>`
   > [data-reach-dialog-content] {
     background-color: ${({ backgroundColor, theme }) => (backgroundColor ? backgroundColor : theme.bg1)};
     max-width: ${({ maxWidth }) => (maxWidth ? `${maxWidth}px` : '470px')};
     border: ${({ border }) => (border ? border : 'inherit')};
     z-index: 100;
+    padding: ${({ padding }) => (padding ? padding : 'none')};
+    margin: auto;
 
     ${({ theme }) => theme.mediaWidth.upToSmall`
       max-height: 100%;

src/custom/components/TransactionConfirmationModal/TransactionConfirmationModalMod.tsx

@@ -38,6 +38,7 @@ import {
   ConfirmationModalContentProps,
   TransactionSubmittedContent,
   GPModalHeader,
+  CloseIconWrapper,
   OperationType,
 } from '.' // mod
 
@@ -201,6 +202,8 @@ const StyledLogo = styled.img`
 
 export function ConfirmationModalContent({
   title,
+  titleSize, // mod
+  styles, // mod
   bottomContent,
   onDismiss,
   topContent,
@@ -215,10 +218,15 @@ export function ConfirmationModalContent({
       <Section>
         {/* <RowBetween> */}
         <GPModalHeader>
-          <Text fontWeight={500} fontSize={16}>
+          <Text
+            fontWeight={500}
+            fontSize={titleSize || 16} // MOD
+            style={styles} //MOD
+          >
             {title}
           </Text>
-          <CloseIcon onClick={onDismiss} />
+          {/* <CloseIcon onClick={onDismiss} /> */}
+          <CloseIconWrapper onClick={onDismiss} /> {/* MOD */}
         </GPModalHeader>
         {/* </RowBetween> */}
         {topContent()}

src/custom/components/TransactionConfirmationModal/index.tsx

@@ -38,10 +38,10 @@ const Section = styled.div`
   flex-flow: column wrap;
 `
 
-const CloseIconWrapper = styled(CloseIcon)`
+export const CloseIconWrapper = styled(CloseIcon)<{ margin?: string }>`
   display: flex;
-  margin: 16px 16px 0 auto;
-  opacity: 0.75;
+  margin: ${({ margin }) => margin ?? '0 0 0 auto'};
+  opacity: 0.5;
   transition: opacity 0.2s ease-in-out;
 
   &:hover {
@@ -171,7 +171,7 @@ const ConfirmedIcon = styled(ColumnCenter)`
 const UpperSection = styled.div`
   display: flex;
   flex-flow: column wrap;
-  padding: 16px 0;
+  padding: 16px;
 
   > div {
     padding: 0;
@@ -565,6 +565,8 @@ export function TransactionSubmittedContent({
 
 export interface ConfirmationModalContentProps {
   title: ReactNode
+  titleSize?: number
+  styles?: React.CSSProperties
   onDismiss: () => void
   topContent: () => ReactNode
   bottomContent?: () => ReactNode | undefined