Refactor NoFundsCTAFlex styles and add link styles in MainAddFunds.tsx

valory-xyz · Apr 26, 2024 · 7404999 · 7404999
1 parent f138a17
commit 7404999
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 47 deletions.
diff --git a/frontend/components/Layout/Header.tsx b/frontend/components/Layout/Header.tsx
diff --git a/frontend/components/Main/MainAddFunds.tsx b/frontend/components/Main/MainAddFunds.tsx
@@ -85,9 +85,7 @@ export const MainAddFunds = () => {
           </Flex>
 
           <NoFundsCTAFlex vertical gap={10}>
-            <strong style={{ fontSize: 'medium', lineHeight: '0.9em' }}>
-              No OLAS or XDAI on Gnosis Chain?
-            </strong>
+            <strong>No OLAS or XDAI on Gnosis Chain?</strong>
             <Link
               target="_blank"
               href={'https://swap.cow.fi/#/100/swap/WXDAI/OLAS'}
@@ -107,6 +105,10 @@ const NoFundsCTAFlex = styled(Flex)<FlexProps>`
   border-radius: 2.5px;
   padding: 10px;
 
+  strong {
+    fontSize: medium, lineHeight: 0.9em
+  }
+
   a {
     font-size: medium;
     text-decoration: underline;

diff --git a/frontend/components/Settings.tsx b/frontend/components/Settings.tsx
@@ -1,16 +1,13 @@
 import { CloseOutlined, SettingOutlined } from '@ant-design/icons';
-import { Button, Card, Flex, Input, message, theme, Typography } from 'antd';
+import { Button, Card, Flex, Input, message, Typography } from 'antd';
 import { useState } from 'react';
 import styled from 'styled-components';
 
 import { PageState } from '@/enums';
 import { usePageState } from '@/hooks';
 
-const { useToken } = theme;
-
 export const Settings = () => {
   const { setPageState } = usePageState();
-  const { token } = useToken();
 
   const [isUpdating, setIsUpdating] = useState(false);
 
@@ -37,33 +34,26 @@ export const Settings = () => {
         </Button>
       }
     >
-      <Flex gap={5} vertical>
-        <Typography.Text>PASSWORD</Typography.Text>
-        {isUpdating ? (
-          <Input.Password></Input.Password>
-        ) : (
-          <Typography.Text>********</Typography.Text>
-        )}
+      <Flex justify="space-between" align="center">
+        <Flex gap={5} vertical>
+          <Typography.Text>Password</Typography.Text>
+          {isUpdating ? (
+            <Input.Password></Input.Password>
+          ) : (
+            <Typography.Text>********</Typography.Text>
+          )}
+        </Flex>
+        <Button disabled onClick={handleClick}>
+          {isUpdating ? 'Save' : 'Update'}
+        </Button>
       </Flex>
-      <Button
-        type="text"
-        disabled
-        onClick={handleClick}
-        style={{
-          marginTop: 'auto',
-          marginLeft: 'auto',
-          background: token.colorFillSecondary,
-        }}
-      >
-        {isUpdating ? 'Save' : 'Update'}
-      </Button>
     </Card>
   );
 };
 
 const CardTitleText = styled(Typography.Text)`
   margin: 0;
   display: inline-flex;
-  gap: 5;
+  gap: 5px;
   font-weight: 400;
 `;
diff --git a/frontend/components/Setup.tsx b/frontend/components/Setup.tsx
@@ -198,7 +198,6 @@ const SetupBackup = () => {
       <Input.TextArea
         readOnly
         value={mnemonic.join(' ')}
-        style={{ resize: 'none' }}
         autoSize={{ minRows: 3, maxRows: 6 }}
         disabled
       />