Merge pull request #154 from CudoVentures/cudos-dev

Cudos dev
cudoventures · Jun 5, 2023 · 26b944d · 26b944d
2 parents 52ca121 + 0a24771
commit 26b944d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/src/assets/vectors/change-icon.svg b/src/assets/vectors/change-icon.svg
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material'
+import { Box, Divider, Typography } from '@mui/material'
 import { useSelector } from 'react-redux'
 import { RootState } from 'store'
 import { headerStyles } from './headerstyles'
@@ -12,6 +12,7 @@ import TestNetLogoHeader from 'assets/vectors/testnet-logo-header.svg?component'
 import CudosLogo from 'assets/vectors/cudos-logo.svg?component'
 import LinkIcon from 'assets/vectors/link-icon.svg?component'
 import { useEffect, useState } from 'react'
+import ChangeIcon from 'assets/vectors/change-icon.svg?component'
 
 const Header = () => {
 
@@ -47,6 +48,19 @@ const Header = () => {
         </Box>
         {isWelcomePage ? null :
           <Box gap={2} sx={{ marginRight: '2rem', display: 'flex', alignItems: 'center', flexDirection: isMidLowewRes ? 'column' : 'row' }}>
+            <Box
+              gap={1}
+              sx={headerStyles.linkHolder}
+              onClick={() => window
+                .open('https://frontier.osmosis.zone/?from=ATOM&to=CUDOS', 'Swap Cudos')
+                ?.focus()}
+            >
+              <ChangeIcon />
+              <Typography variant="body2" fontWeight={700}>
+                Swap
+              </Typography>
+            </Box>
+            <Divider orientation='vertical' style={headerStyles.divider} />
             <Box
               gap={1}
               sx={headerStyles.linkHolder}
@@ -58,9 +72,9 @@ const Header = () => {
               <Typography variant="body2" fontWeight={700}>
                 Cudos Bridge
               </Typography>
-              <LinkIcon style={{ color: 'white' }} />
+              <LinkIcon />
             </Box>
-            <Box sx={{ display: 'flex' }}>
+            <Box sx={{ display: 'flex', marginLeft: '10px' }}>
               <NetworkInfo />
               <UserInfo />
             </Box>

diff --git a/src/components/Layout/headerstyles.ts b/src/components/Layout/headerstyles.ts
@@ -1,16 +1,24 @@
+import { COLORS_DARK_THEME } from "theme/colors";
+
 export const headerStyles = {
   linkHolder: {
     cursor: 'pointer',
     width: 'max-content',
-    marginRight: '10px',
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    '&:hover': {
+      color: COLORS_DARK_THEME.PRIMARY_BLUE
+    }
   },
   logoHolder: {
     cursor: 'pointer',
     display: 'flex',
     textDecoration: 'none'
   },
+  divider: {
+    height: '20px',
+    background: '#7D87AA'
+  },
   headerContainer: {
     padding: '2rem',
     justifyContent: 'space-between',