From c5cb31f052b57a85b1e3b1f3366a8d21e40c736c Mon Sep 17 00:00:00 2001
From: Achraf Eddaqqaq <51858084+aeddaqqa@users.noreply.github.com>
Date: Tue, 11 Jul 2023 23:17:38 +0100
Subject: [PATCH] adjust settings area styling (#140)

* adjust settings area styling

* add privacy policy link
---
 src/layout/RoutesSuite.tsx    |  3 +--
 src/layout/SettingsLayout.tsx | 21 +++++++++++-------
 src/views/login/LoginPage.tsx | 25 +++++++++++++++++++--
 src/views/settings/Links.tsx  | 41 ++++++++++++++++++++++++++++++-----
 4 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/src/layout/RoutesSuite.tsx b/src/layout/RoutesSuite.tsx
index 741bdc6a..c8d6f33b 100644
--- a/src/layout/RoutesSuite.tsx
+++ b/src/layout/RoutesSuite.tsx
@@ -15,7 +15,6 @@ import Settings from '../views/settings/index'
 import SettingsLayout from './SettingsLayout'
 
 export default function RoutesSuite() {
-
     const navigate = useNavigate()
     const activeNetwork = useAppSelector(getActiveNetwork)
 
@@ -74,7 +73,7 @@ export default function RoutesSuite() {
                     <Route path="/settings" element={<SettingsLayout />}>
                         <Route index element={<Settings />} />
                         <Route path="save-account" element={<Settings />} />
-                        <Route path="create-multisig" element={<div>create multisig</div>} />
+                        {/* <Route path="create-multisig" element={<div>create multisig</div>} /> */}
                     </Route>
                 </Route>
                 <Route path="/login" element={<LoginPage />} />
diff --git a/src/layout/SettingsLayout.tsx b/src/layout/SettingsLayout.tsx
index 2e409ead..60c6c948 100644
--- a/src/layout/SettingsLayout.tsx
+++ b/src/layout/SettingsLayout.tsx
@@ -6,27 +6,32 @@ const SettingsLayout = () => {
     return (
         <Box
             sx={{
+                width: '100%',
                 height: '100%',
-                width: '100vw',
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
             }}
         >
-            <Box
+            <Toolbar
                 sx={{
-                    width: '100%',
                     borderBottom: '1px solid',
                     borderColor: 'rgba(145, 158, 171, 0.24)',
-                    height: 'auto',
+                    background: theme => theme.palette.background.paper,
+                    flexGrow: 1,
+                    p: '1.5rem',
+                    zIndex: 9,
+                    position: 'fixed',
+                    top: '65px',
+                    width: '100vw',
+                    height: '61px',
                     display: 'flex',
                     justifyContent: 'center',
+                    right: 0,
                 }}
             >
-                <Toolbar sx={{ flexGrow: 1, maxWidth: '1536px', px: '0rem !important' }}>
-                    <Links />
-                </Toolbar>
-            </Box>
+                <Links />
+            </Toolbar>
             <Outlet />
         </Box>
     )
diff --git a/src/views/login/LoginPage.tsx b/src/views/login/LoginPage.tsx
index 82841627..0b7f0e2c 100644
--- a/src/views/login/LoginPage.tsx
+++ b/src/views/login/LoginPage.tsx
@@ -7,9 +7,16 @@ import { Link, useNavigate } from 'react-router-dom'
 import { styled } from '@mui/material/styles'
 import { mountAccounts } from 'wallet/mountAccounts'
 
+const StyledExternalLink = styled('a')(({ theme }) => ({
+    color: theme.palette.text.primary,
+    textDecoration: 'underline !important',
+    mx: '.5rem',
+}))
+
 const StyledLink = styled(Link)(({ theme }) => ({
     color: theme.palette.text.primary,
     textDecoration: 'underline !important',
+    mx: '.5rem',
 }))
 
 const LoadAccountMenu = () => {
@@ -112,9 +119,23 @@ export default function LoginPage() {
                     </StyledLink>
                     <Typography variant="body2" color="text.secondary">
                         By using this application, you agree to the&nbsp;
-                        <StyledLink to="/legal" style={{ textDecoration: 'none' }}>
+                        <StyledExternalLink
+                            href="/legal"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{ textDecoration: 'none' }}
+                        >
                             Terms of Use
-                        </StyledLink>
+                        </StyledExternalLink>
+                        &nbsp;and&nbsp;
+                        <StyledExternalLink
+                            href="https://camino.network/privacy-policy/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{ textDecoration: 'none' }}
+                        >
+                            Privacy Policy
+                        </StyledExternalLink>
                     </Typography>
                 </Box>
             </Paper>
diff --git a/src/views/settings/Links.tsx b/src/views/settings/Links.tsx
index 2a793588..ed9975a9 100644
--- a/src/views/settings/Links.tsx
+++ b/src/views/settings/Links.tsx
@@ -3,6 +3,7 @@ import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
 import Box from '@mui/material/Box'
 import { useNavigate } from 'react-router'
+import { Typography } from '@mui/material'
 
 function a11yProps(index: number) {
     return {
@@ -21,14 +22,14 @@ export default function Links() {
                 display: 'flex',
                 cursor: 'pointer',
                 width: '100%',
-                height: '48px',
+                maxWidth: '1536px',
             }}
         >
             <Tabs
                 value={value}
                 onChange={handleChange}
                 textColor="secondary"
-                sx={{ '& .MuiTabs-indicator': { display: 'none' } }}
+                sx={{ '& .MuiTabs-indicator': { display: 'none' }, height: '61px' }}
                 scrollButtons="auto"
                 variant="scrollable"
                 allowScrollButtonsMobile
@@ -36,21 +37,49 @@ export default function Links() {
                 <Tab
                     className="tab"
                     disableRipple
-                    label="Save account"
+                    label={
+                        <Typography
+                            sx={{
+                                fontFamily: 'Inter',
+                                fontSize: '14px',
+                                fontStyle: 'normal',
+                                fontWeight: '600',
+                                lineHeight: '20px',
+                                color: theme => theme.palette.text.primary,
+                            }}
+                        >
+                            Save account
+                        </Typography>
+                    }
                     onClick={() => navigate('/settings')}
                     {...a11yProps(0)}
                     sx={{
-                        alignItems: { xs: 'baseline', sm: 'self-start' },
+                        display: 'flex',
+                        padding: '10px 12px',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        position: 'relative',
+                        height: '61px',
+                        '&::after': {
+                            content: '""',
+                            display: value === 0 ? 'block' : 'none',
+                            width: '100%',
+                            height: '4px',
+                            position: 'absolute',
+                            bottom: '0px',
+                            borderRadius: '4px 4px 0px 0px',
+                            background: '#0085FF',
+                        },
                     }}
                 />
-                <Tab
+                {/* <Tab
                     className="tab"
                     disableRipple
                     label="Multisignature Wallet"
                     onClick={() => navigate('create-multisig')}
                     {...a11yProps(1)}
                     sx={{ alignItems: { xs: 'baseline', sm: 'self-start' } }}
-                />
+                /> */}
             </Tabs>
         </Box>
     )