Add custom alerts, update needs funds copy

frontend/components/Main/Main.tsx

@@ -39,10 +39,10 @@ export const Main = () => {
       style={{ borderTopColor: 'transparent' }}
     >
       <Flex vertical>
-        <MainNeedsFunds />
         <MainOlasBalance />
         <MainRewards />
         <MainGasBalance />
+        <MainNeedsFunds />
         <MainAddFunds />
       </Flex>
     </Card>

frontend/components/Main/MainAddFunds.tsx

@@ -1,10 +1,8 @@
 import {
   CopyOutlined,
   // QrcodeOutlined,
-  WarningOutlined,
 } from '@ant-design/icons';
 import {
-  Alert,
   Button,
   Flex,
   message,
@@ -18,11 +16,12 @@ import { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { copyToClipboard, truncateAddress } from '@/common-util';
-import { COLOR, COW_SWAP_GNOSIS_XDAI_OLAS_URL } from '@/constants';
+import { COW_SWAP_GNOSIS_XDAI_OLAS_URL } from '@/constants';
 import { UNICODE_SYMBOLS } from '@/constants/unicode';
 import { useWallet } from '@/hooks/useWallet';
 import { Address } from '@/types';
 
+import { Alert } from '../common/Alert';
 import { CardSection } from '../styled/CardSection';
 
 const { Text } = Typography;
@@ -94,16 +93,15 @@ export const MainAddFunds = () => {
 const AddFundsWarningAlertSection = () => (
   <CardSection>
     <Alert
-      className="card-section-alert"
       type="warning"
+      fullWidth
       showIcon
-      icon={<WarningOutlined />}
       message={
         <Flex vertical gap={2.5}>
-          <Text className="text-base" strong style={{ color: COLOR.BROWN }}>
+          <Text className="text-base" strong>
             Only send funds on Gnosis Chain!
           </Text>
-          <Text className="text-base" style={{ color: COLOR.BROWN }}>
+          <Text className="text-base">
             You will lose any assets you send on other chains.
           </Text>
         </Flex>
@@ -121,7 +119,7 @@ const AddFundsAddressSection = ({
   truncatedFundingAddress?: string;
   handleCopy: () => void;
 }) => (
-  <CardSection gap={10} justify="center" align="center">
+  <CardSection gap={10} justify="center" align="center" padding="16px 24px">
     <Tooltip
       title={
         <span className="can-select-text flex">
@@ -132,9 +130,7 @@ const AddFundsAddressSection = ({
       <Text title={fundingAddress}>GNO: {truncatedFundingAddress ?? '--'}</Text>
     </Tooltip>
 
-    <Button onClick={handleCopy}>
-      <CopyOutlined />
-    </Button>
+    <Button onClick={handleCopy} icon={<CopyOutlined />} size="large" />
 
     {/* <Popover
       title="Scan QR code"
@@ -145,15 +141,13 @@ const AddFundsAddressSection = ({
         />
       }
     >
-      <Button>
-        <QrcodeOutlined />
-      </Button>
+      <Button icon={<QrcodeOutlined />} size="large" />
     </Popover> */}
   </CardSection>
 );
 
 const AddFundsGetTokensSection = () => (
-  <CardSection justify="center" bordertop="true">
+  <CardSection justify="center" bordertop="true" padding="16px 24px">
     <Link target="_blank" href={COW_SWAP_GNOSIS_XDAI_OLAS_URL}>
       Get OLAS + XDAI on Gnosis Chain {UNICODE_SYMBOLS.EXTERNAL_LINK}
     </Link>

frontend/components/Main/MainGasBalance.tsx

@@ -70,8 +70,13 @@ export const MainGasBalance = () => {
   const { isBalanceLoaded } = useBalance();
 
   return (
-    <CardSection justify="space-between" bordertop="true" borderbottom="true">
-      <Text>
+    <CardSection
+      justify="space-between"
+      bordertop="true"
+      borderbottom="true"
+      padding="16px 24px"
+    >
+      <Text type="secondary">
         Gas and trading balance&nbsp;
         {masterSafeAddress && (
           <Tooltip

frontend/components/Main/MainNeedsFunds.tsx

@@ -1,15 +1,16 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Alert, Flex, Typography } from 'antd';
+import { Flex, Typography } from 'antd';
 import { formatUnits } from 'ethers/lib/utils';
 import { ReactNode, useMemo } from 'react';
 
-import { COLOR, SERVICE_TEMPLATES } from '@/constants';
+import { SERVICE_TEMPLATES } from '@/constants';
 import { UNICODE_SYMBOLS } from '@/constants/unicode';
 import { useBalance } from '@/hooks';
 
+import { Alert } from '../common/Alert';
 import { CardSection } from '../styled/CardSection';
 
-const { Text } = Typography;
+const { Text, Paragraph } = Typography;
+const COVER_PREV_BLOCK_BORDER_STYLE = { marginTop: '-1px' };
 
 export const useNeedsFunds = () => {
   const serviceTemplate = SERVICE_TEMPLATES[0];
@@ -71,22 +72,29 @@ export const MainNeedsFunds = () => {
 
   const message: ReactNode = useMemo(
     () => (
-      <Flex vertical>
-        <Text strong style={{ color: 'inherit' }}>
-          Your agent needs funds
-        </Text>
-        <small>
+      <Flex vertical gap={4}>
+        <Text className="font-weight-600 mb-4">Your agent needs funds</Text>
+        <Paragraph className="mb-4">
+          USE THE ACCOUNT CREDENTIALS PROVIDED IN THE “ADD FUNDS” INSTRUCTIONS
+          BELOW.
+        </Paragraph>
+        <Paragraph className="mb-4">
           To run your agent, you must add these amounts to your account:
-        </small>
-        <ul className="alert-list text-sm font-weight-600">
-          {!hasEnoughOlas && (
-            <li>
-              {UNICODE_SYMBOLS.OLAS}
-              {serviceFundRequirements.olas} OLAS (for staking)
-            </li>
-          )}
-          {!hasEnoughEth && <li>${serviceFundRequirements.eth} XDAI</li>}
-        </ul>
+        </Paragraph>
+        {!hasEnoughOlas && (
+          <Text>
+            <span className="font-weight-600">{`${UNICODE_SYMBOLS.OLAS}${serviceFundRequirements.olas} OLAS `}</span>
+            - for staking.
+          </Text>
+        )}
+        {!hasEnoughEth && (
+          <Text>
+            <span className="font-weight-600">
+              {`${serviceFundRequirements.eth} XDAI `}
+            </span>
+            - for gas & trading balance.
+          </Text>
+        )}
       </Flex>
     ),
     [serviceFundRequirements, hasEnoughEth, hasEnoughOlas],
@@ -96,19 +104,8 @@ export const MainNeedsFunds = () => {
   if (!isBalanceLoaded) return null;
 
   return (
-    <CardSection>
-      <Alert
-        className="card-section-alert"
-        icon={
-          <InfoCircleOutlined
-            className="mb-auto"
-            style={{ color: COLOR.PURPLE_DARK }}
-          />
-        }
-        showIcon
-        message={message}
-        type="info"
-      />
+    <CardSection style={COVER_PREV_BLOCK_BORDER_STYLE}>
+      <Alert showIcon message={message} type="primary" fullWidth />
     </CardSection>
   );
 };

frontend/components/Main/MainRewards.tsx

@@ -17,7 +17,10 @@ const RewardsRow = styled(Row)`
   margin: 0 -24px;
   > .ant-col {
     padding: 24px;
-    border-right: 1px solid ${COLOR.BORDER_GRAY};
+
+    &:not(:last-child) {
+      border-right: 1px solid ${COLOR.BORDER_GRAY};
+    }
   }
 `;
 
@@ -32,7 +35,7 @@ const DisplayRewards = () => {
     <RewardsRow>
       <Col span={12}>
         <Flex vertical gap={4} align="flex-start">
-          <Text>Staking rewards today</Text>
+          <Text type="secondary">Staking rewards today</Text>
           {isBalanceLoaded ? (
             <>
               <Text strong style={{ fontSize: 20 }}>
@@ -55,7 +58,7 @@ const DisplayRewards = () => {
 
       <Col span={12}>
         <Flex vertical gap={4} align="flex-start">
-          <Text>Staked amount</Text>
+          <Text type="secondary">Staked amount</Text>
           {isBalanceLoaded ? (
             <>
               <Text strong style={{ fontSize: 20 }}>

frontend/components/Settings/Settings.tsx

@@ -1,16 +1,16 @@
 import { CloseOutlined, SettingOutlined } from '@ant-design/icons';
-import { Alert, Button, Card, Flex, Typography } from 'antd';
+import { Button, Card, Flex, Typography } from 'antd';
 import Link from 'next/link';
 import { useMemo } from 'react';
 
 import { truncateAddress } from '@/common-util';
-import { COLOR } from '@/constants';
 import { UNICODE_SYMBOLS } from '@/constants/unicode';
 import { PageState, SettingsScreen } from '@/enums';
 import { usePageState } from '@/hooks';
 import { useMasterSafe } from '@/hooks/useMasterSafe';
 import { useSettings } from '@/hooks/useSettings';
 
+import { Alert } from '../common/Alert';
 import { CardTitle } from '../common/CardTitle';
 import { CardSection } from '../styled/CardSection';
 import { SettingsAddBackupWallet } from './SettingsAddBackupWallet';
@@ -98,17 +98,13 @@ const NoBackupWallet = () => {
       <CardSection style={{ marginTop: 12, marginBottom: 18 }}>
         <Alert
           type="warning"
-          className="card-section-alert"
+          fullWidth
           showIcon
           message={
             <>
               <Flex vertical gap={5}>
-                <Text strong style={{ color: COLOR.BROWN }}>
-                  Your funds are at risk!
-                </Text>
-                <Text style={{ color: COLOR.BROWN }}>
-                  You will lose any assets you send on other chains.
-                </Text>
+                <Text strong>Your funds are at risk!</Text>
+                <Text>You will lose any assets you send on other chains.</Text>
               </Flex>
             </>
           }

frontend/components/Setup/Create/SetupEoaFunding.tsx

@@ -1,10 +1,8 @@
 import {
   CopyOutlined,
-  InfoCircleOutlined,
   // QrcodeOutlined
 } from '@ant-design/icons';
 import {
-  Alert,
   Button,
   Flex,
   message,
@@ -18,10 +16,10 @@ import styled from 'styled-components';
 
 import { Chain } from '@/client';
 import { copyToClipboard } from '@/common-util';
+import { Alert } from '@/components/common/Alert';
 import { CardFlex } from '@/components/styled/CardFlex';
 import { CardSection } from '@/components/styled/CardSection';
 import {
-  COLOR,
   COW_SWAP_GNOSIS_XDAI_OLAS_URL,
   MIN_ETH_BALANCE_THRESHOLDS,
 } from '@/constants';
@@ -141,15 +139,15 @@ const SetupEoaFundingWaiting = ({
     <>
       <CardSection>
         <Alert
-          className="card-section-alert"
+          fullWidth
           type="warning"
           showIcon
           message={
             <Flex vertical gap={5}>
-              <Typography.Text strong style={{ color: COLOR.BROWN }}>
+              <Typography.Text strong>
                 Only send funds on Gnosis Chain!
               </Typography.Text>
-              <Typography.Text style={{ color: COLOR.BROWN }}>
+              <Typography.Text>
                 You will lose any assets you send on other chains.
               </Typography.Text>
             </Flex>
@@ -194,9 +192,8 @@ const SetupEoaFundingWaiting = ({
           {`GNO: ${masterEoa}`}
         </span>
         <Alert
-          className="account-creation-alert"
+          type="info"
           showIcon
-          icon={<InfoCircleOutlined />}
           message={
             'After this point, do not send more funds to this address. Once your account is created, you will be given a new address - send further funds there.'
           }
@@ -218,14 +215,6 @@ const AccountCreationCard = styled.div`
   padding: 16px;
   background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23A3AEBB' stroke-width='2' stroke-dasharray='6' stroke-dashoffset='15' stroke-linecap='square'/%3e%3c/svg%3e");
   border-radius: 12px;
-
-  .account-creation-alert {
-    margin-top: 8px;
-    background: #e6f4ff;
-    border: 1px solid #91caff;
-    color: #002c8c;
-    align-items: flex-start;
-  }
 `;
 
 const ICON_STYLE = { color: '#606F85' };

frontend/components/common/Alert.tsx

@@ -0,0 +1,28 @@
+import {
+  ExclamationCircleOutlined,
+  InfoCircleOutlined,
+  WarningOutlined,
+} from '@ant-design/icons';
+import { Alert as AlertAntd, AlertProps } from 'antd';
+
+type AlertType = 'primary' | 'info' | 'warning' | 'error';
+
+const icons = {
+  primary: <InfoCircleOutlined />,
+  info: <InfoCircleOutlined />,
+  warning: <WarningOutlined />,
+  error: <ExclamationCircleOutlined />,
+};
+
+export const Alert = ({
+  type,
+  fullWidth,
+  ...rest
+}: { type: AlertType; fullWidth?: boolean } & Omit<AlertProps, 'type'>) => (
+  <AlertAntd
+    type={type === 'primary' ? undefined : type}
+    className={`custom-alert custom-alert--${type} ${fullWidth ? 'custom-alert--full-width' : ''}`}
+    icon={rest.showIcon ? icons[type] : undefined}
+    {...rest}
+  />
+);

frontend/components/styled/CardSection.tsx

@@ -6,7 +6,7 @@ import { COLOR } from '@/constants';
 type CardSectionProps = FlexProps & {
   bordertop?: 'true' | 'false';
   borderbottom?: 'true' | 'false';
-  padding?: number;
+  padding?: string;
 };
 
 /**
@@ -17,7 +17,7 @@ export const CardSection = styled(Flex)<CardSectionProps>`
   ${(props) => {
     const { padding, borderbottom, bordertop } = props;
 
-    const paddingStyle = `padding: ${Number(padding) ? `${padding}` : '24'}px;`;
+    const paddingStyle = `padding: ${padding ?? '24px'};`;
     const borderTopStyle =
       bordertop === 'true' ? `border-top: 1px solid ${COLOR.BORDER_GRAY};` : '';
     const borderBottomStyle =

frontend/constants/color.ts

@@ -6,6 +6,6 @@ export const COLOR = {
   BLUE: '#1677FF',
   ORANGE: '#FAAD14',
   WHITE: '#ffffff',
-  BORDER_GRAY: '#f0f0f0',
+  BORDER_GRAY: '#DFE5EE',
   BROWN: '#873800',
 };