Styling ready to claim section.

src/custom/components/FaqDrawer/index.tsx

@@ -0,0 +1,94 @@
+import styled from 'styled-components/macro'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-flow: column wrap;
+  width: 100%;
+  gap: 0;
+  margin: 0 0 24px;
+`
+
+const Item = styled.div`
+  width: 100%;
+  display: block;
+  position: relative;
+  padding: 4px 60px 12px 12px;
+
+  > div {
+    font-size: 16px;
+    padding: 0;
+    margin: 0;
+    height: 0;
+    overflow: hidden;
+    position: relative;
+    opacity: 0;
+    transition: 0.4s ease-in-out;
+  }
+
+  > input {
+    display: none;
+    appearance: none;
+  }
+
+  > input:checked ~ div {
+    height: auto;
+    opacity: 0.7;
+    margin: 0 0 12px;
+  }
+
+  > input:checked ~ label {
+    padding: 0 0 12px;
+  }
+
+  > input:checked ~ label > span {
+    transform: rotate(45deg);
+  }
+
+  > label {
+    cursor: pointer;
+    display: block;
+    width: 100%;
+    padding: 0;
+    font-weight: 500;
+    font-size: 21px;
+  }
+
+  > label > span {
+    display: block;
+    position: absolute;
+    right: 0;
+    font-size: 34px;
+    top: -2px;
+    line-height: 1;
+    opacity: 0.5;
+    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  }
+
+  > label:hover > span {
+    opacity: 1;
+  }
+`
+
+type FaqDrawerProps = {
+  items: {
+    title: string
+    content: string
+  }[]
+}
+
+export function FaqDrawer({ items }: FaqDrawerProps) {
+  return (
+    <Wrapper>
+      {items?.length > 0 &&
+        items.map(({ title, content }, index) => (
+          <Item key={index}>
+            <input id={`q${index}`} type="checkbox" />
+            <label htmlFor={`q${index}`}>
+              {title} <span>+</span>
+            </label>
+            <div>{content}</div>
+          </Item>
+        ))}
+    </Wrapper>
+  )
+}

src/custom/pages/Claim/InvestmentFlow/index.tsx

@@ -10,12 +10,14 @@ import {
   AccountClaimSummary,
   StepExplainer,
   Badge,
+  UserMessage,
   BannerExplainer,
 } from 'pages/Claim/styled'
 import { InvestSummaryRow } from 'pages/Claim/InvestmentFlow/InvestSummaryRow'
 import { ClaimSummaryView } from 'pages/Claim/ClaimSummary'
 
 import { Stepper } from 'components/Stepper'
+import { FaqDrawer } from 'components/FaqDrawer'
 
 import {
   useClaimState,
@@ -40,6 +42,7 @@ import { ExplorerDataType } from 'utils/getExplorerLink'
 import { BadgeVariant } from 'components/Badge'
 import { OperationType } from 'components/TransactionConfirmationModal'
 import RoundArrow from 'assets/cow-swap/round-arrow.svg'
+import ImportantIcon from 'assets/cow-swap/important.svg'
 import CowProtocolImage from 'assets/cow-swap/cowprotocol.svg'
 import SVG from 'react-inlinesvg'
 
@@ -57,6 +60,19 @@ const STEPS_DATA = [
   },
 ]
 
+const FAQ_DATA = [
+  {
+    title: 'What will happen?',
+    content:
+      'By sending this Ethereum transaction, you will be investing tokens from the connected account and exchanging them for vCOW tokens that will be received by the claiming account specified above.',
+  },
+  {
+    title: 'Can I modify (partially) invested amounts later?',
+    content:
+      'No. Once you send the transaction, you cannot increase or reduce the investment. Investment opportunities can only be exercised once.',
+  },
+]
+
 export type InvestmentFlowProps = Pick<ClaimCommonTypes, 'hasClaims'> & {
   isAirdropOnly: boolean
   modalCbs: {
@@ -271,18 +287,14 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, modalCbs }: I
           </AccountClaimSummary>
 
           <h4>Ready to claim your vCOW?</h4>
-          <p>
-            <b>What will happen?</b> By sending this Ethereum transaction, you will be investing tokens from the
-            connected account and exchanging them for vCOW tokens that will be received by the claiming account
-            specified above.
-          </p>
-          <p>
-            <b>Can I modify the invested amounts or invest partial amounts later?</b> No. Once you send the transaction,
-            you cannot increase or reduce the investment. Investment opportunities can only be exercised once.
-          </p>
-          <p>
-            <b>Important!</b> Please make sure you intend to claim and send vCOW to the mentioned receiving account(s).
-          </p>
+          <FaqDrawer items={FAQ_DATA} />
+          <UserMessage>
+            <SVG src={ImportantIcon} description="Important!" />
+            <span>
+              <b>Important!</b> Please make sure you intend to claim and send vCOW to the above mentioned receiving
+              account.
+            </span>
+          </UserMessage>
         </InvestContent>
       ) : null}
     </InvestFlow>