refactor: enhance UI components and layout for approval

apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx

@@ -45,6 +45,11 @@ export const CurrencyInputBox = styled.div<{ isInvalid?: boolean }>`
     gap: 8px;
   }
 
+  ${Media.upToTiny()} {
+    grid-template-columns: repeat(1, auto);
+    grid-template-rows: max-content;
+  }
+
   > div {
     display: flex;
     align-items: center;

apps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/ApprovalAmountInput.tsx

@@ -67,7 +67,7 @@ export function ApprovalAmountInput({ initialAmount, tokenWithLogo, onReset }: A
   return (
     <styledEl.EditWrapper>
       <styledEl.InputHeader>
-        Approval amount: <styledEl.ResetBtn onClick={onReset}>{resetLabel}</styledEl.ResetBtn>
+        Approval amount <styledEl.ResetBtn onClick={onReset}>{resetLabel}</styledEl.ResetBtn>
       </styledEl.InputHeader>
       <CurrencyInputPanel
         className={'custom-input-panel'}

apps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/styled.ts

@@ -7,7 +7,7 @@ export const EditWrapper = styled.div`
   flex-direction: column;
   background: var(${UI.COLOR_PAPER_DARKER});
   padding: 14px;
-  margin: 15px;
+  margin: 10px;
   border-radius: 14px;
   border: 2px solid var(${UI.COLOR_PAPER_DARKEST});
 
@@ -21,6 +21,7 @@ export const InputHeader = styled.div`
   display: flex;
   font-size: 13px;
   color: var(${UI.COLOR_TEXT_OPACITY_70});
+  gap: 5px;
 `
 
 export const ResetBtn = styled.button`
@@ -31,6 +32,13 @@ export const ResetBtn = styled.button`
   font-weight: 500;
   color: var(${UI.COLOR_TEXT_OPACITY_70});
   background: var(${UI.COLOR_PAPER});
-  line-height: 100%;
-  margin-left: 5px;
+  line-height: 1;
+  transition:
+    background var(${UI.ANIMATION_DURATION}) ease-in-out,
+    color var(${UI.ANIMATION_DURATION}) ease-in-out;
+
+  &:hover {
+    color: var(${UI.COLOR_PAPER});
+    background: var(${UI.COLOR_PRIMARY_LIGHTER});
+  }
 `

apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/ChangeApproveAmountModalPure.tsx

@@ -35,7 +35,7 @@ export function ChangeApproveAmountModalPure({
         </styledEl.Title>
       </ModalHeader>
       <styledEl.SwapInfo>
-        <TokenLogo token={inputToken} size={55} />
+        <TokenLogo token={inputToken} size={54} />
         <styledEl.SetTitle>Set approval amount</styledEl.SetTitle>
         <SwapAmountPreview />
       </styledEl.SwapInfo>

apps/cowswap-frontend/src/modules/erc20Approve/containers/ChangeApproveAmountModal/styled.ts

@@ -1,4 +1,4 @@
-import { ButtonPrimary, UI } from '@cowprotocol/ui'
+import { ButtonPrimary, Media, UI } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
@@ -7,20 +7,26 @@ export const Wrapper = styled.div`
   width: 100%;
   overflow: auto;
   background: var(${UI.COLOR_PAPER});
-  border-radius: 20px;
+  border-radius: 21px;
 `
 
 export const SwapInfo = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
+  gap: 21px;
   align-items: center;
-  margin: 48px 0 19px 0;
+  margin: 24px 0;
+  font-size: 13px;
 `
 
 export const SetTitle = styled.div`
   font-size: 23px;
-  margin: 16px 0;
+  text-align: center;
+
+  ${Media.upToSmall()} {
+    font-size: 18px;
+  }
 `
 
 export const Title = styled.div`
@@ -30,6 +36,6 @@ export const Title = styled.div`
 `
 
 export const BtnWrapper = styled.div`
-  margin: 15px;
+  margin: 0 10px 10px;
 `
 export const ActionButton = styled(ButtonPrimary)``

apps/cowswap-frontend/src/modules/erc20Approve/containers/SwapAmountPreview/SwapAmountPreview.tsx

@@ -13,7 +13,9 @@ import { useDerivedTradeState } from 'modules/trade'
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
+  flex-flow: row wrap;
   gap: 4px;
+  padding: 0 10px;
 `
 
 const CapitalizedFirst = styled.span`

apps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/Toggle.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 
 import EDIT from '@cowprotocol/assets/cow-swap/edit.svg'
 import { TokenAmount, TokenSymbol } from '@cowprotocol/ui'
@@ -30,7 +30,10 @@ export function Toggle({
             }
           }}
         >
-          <TokenAmount amount={amountToApprove} /> <TokenSymbol token={amountToApprove.currency} /> <SVG src={EDIT} />
+          <TokenAmount amount={amountToApprove} /> <TokenSymbol token={amountToApprove.currency} />{' '}
+          <styledEl.EditIcon>
+            <SVG src={EDIT} description="Edit" />
+          </styledEl.EditIcon>
         </styledEl.PartialAmountWrapper>
       </Option>
       <Option isActive={!isPartialApproveEnabled} onClick={() => enablePartialApprove(false)} title={'Full approval'}>

apps/cowswap-frontend/src/modules/erc20Approve/pure/Toggle/styled.ts

@@ -1,21 +1,44 @@
-import { UI } from '@cowprotocol/ui'
+import { UI, Media } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
+export const EditIcon = styled.div`
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(${UI.COLOR_TEXT});
+
+  > svg > path {
+    fill: currentColor;
+  }
+`
+
 export const ToggleWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   border-radius: 12px;
   background: var(${UI.COLOR_BACKGROUND});
   color: var(${UI.COLOR_TEXT_PAPER});
   min-height: 58px;
+
+  ${Media.upToTiny()} {
+    flex-flow: column wrap;
+  }
 `
 
 export const OptionWrapper = styled.button<{ isActive?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
   border: none;
   border-radius: 9px;
   margin: 4px;
-  flex: 1;
+  padding: 8px 4px;
+  flex: 1 1 50%;
   line-height: 1;
   font-size: 12px;
   cursor: ${({ isActive }) => (isActive ? 'default' : 'pointer')};
@@ -24,16 +47,35 @@ export const OptionWrapper = styled.button<{ isActive?: boolean }>`
 `
 
 export const PartialAmountWrapper = styled.div<{ isActive?: boolean }>`
-  display: inline-block;
-  border-radius: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  width: fit-content;
+  border-radius: 9px;
   font-size: 12px;
-  padding: 1px 6px;
+  letter-spacing: -0.3px;
+  padding: 3px 7px;
+  margin: 0 auto;
   cursor: ${({ isActive }) => (isActive ? 'default' : 'pointer')};
+  background: var(${UI.COLOR_INFO_BG});
+  transition:
+    background var(${UI.ANIMATION_DURATION}) ease-in-out,
+    color var(${UI.ANIMATION_DURATION}) ease-in-out;
+
+  &:hover {
+    background: var(${UI.COLOR_PRIMARY_LIGHTER});
+    color: var(${UI.COLOR_PAPER});
+
+    ${EditIcon} {
+      color: var(${UI.COLOR_PAPER});
+    }
+  }
 `
 
 export const OptionTitle = styled.div`
   font-size: 14px;
   font-weight: 600;
-  margin: 0 0 5px 0;
+  margin: 0;
   color: inherit;
 `