urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-20 01:01:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add home icon, match new design somewhat

Browse Source
This commit is contained in:
finned-palmer 2021-09-11 10:52:57 -05:00
parent 3b35df4620
commit 4a53e89186
4 changed files with 33 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pkg/btc-wallet/src/App.tsx
View File

@ -6,6 +6,7 @@ import { Box, Reset } from '@tlon/indigo-react';
import StartupModal from './components/StartupModal';
import { useSettings } from './hooks/useSettings';
import Body from './components/Body';
import Header from './components/Header';
const App: React.FC = () => {
const { loaded, wallet, provider, scanProgress } = useSettings();
@ -27,9 +28,8 @@ const App: React.FC = () => {
minHeight={loaded && !scanning ? '100%' : 'none'}
height={loaded && !scanning ? 'none' : '100%'}
style={{ filter: blur ? 'blur(8px)' : 'none' }}
px={[0, 4]}
pb={[0, 4]}
>
<Header />
<Body />
</Box>
</ThemeProvider>

3
pkg/btc-wallet/src/components/Body.tsx
View File

@ -4,7 +4,6 @@ import { Switch, Route } from 'react-router-dom';
import Balance from './Balance';
import Transactions from './Transactions/Transactions';
import Warning from './Warning';
import Header from './Header';
import Settings from './Settings';
import { useSettings } from '../hooks/useSettings';
@ -25,13 +24,11 @@ const Body: React.FC = () => {
<Switch>
<Route path="/settings">
<Col display="flex" flexDirection="column" width={cardWidth}>
<Header settings={true} />
<Settings />
</Col>
</Route>
<Route path="/">
<Col display="flex" flexDirection="column" width={cardWidth}>
<Header settings={false} />
{!warning ? null : <Warning />}
<Balance />
<Transactions />

48
pkg/btc-wallet/src/components/Header.tsx
View File

@ -3,44 +3,29 @@ import { Box, Icon, Row, Text } from '@tlon/indigo-react';
import { Link } from 'react-router-dom';
import { useSettings } from '../hooks/useSettings';
const Header = ({ settings }: { settings: boolean }) => {
const Header = () => {
const { provider } = useSettings();
let icon = settings ? 'X' : 'Adjust';
let iconColor = settings ? 'black' : 'orange';
let iconLink = settings ? '/' : '/settings';
let connection = null;
let badge = null;
if (!(provider && provider.connected)) {
connection = (
<Text fontSize={1} color="red" fontWeight="bold" mr={3}>
Provider Offline
</Text>
);
if (!settings) {
badge = (
<Box
borderRadius="50%"
width="8px"
height="8px"
backgroundColor="red"
position="absolute"
top="0px"
right="0px"
></Box>
);
}
}
return (
<Row
height={8}
height={7}
width="100%"
justifyContent="space-between"
alignItems="center"
pt={5}
pb={5}
mb={5}
px={[0, 4]}
style={{
boxShadow: '0px 1px 0px rgba(0, 0, 0, 0.1)',
}}
>
<Row alignItems="center" justifyContent="center">
<Box
@ -60,19 +45,32 @@ const Header = ({ settings }: { settings: boolean }) => {
</Row>
<Row alignItems="center">
{connection}
<Link to={iconLink}>
<Link to="/~btc/settings">
<Box
backgroundColor="white"
borderRadius={4}
width={5}
height={5}
p={2}
m={2}
position="relative"
>
{badge}
<Icon icon={icon} color={iconColor} />
<Icon icon="Adjust" color="orange" />
</Box>
</Link>
<a href="/">
<Box
backgroundColor="white"
borderRadius={4}
width={5}
height={5}
p={2}
m={2}
position="relative"
>
<Icon icon="Home" color="orange" />
</Box>
</a>
</Row>
</Row>
);

10
pkg/btc-wallet/src/components/Settings.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { Row, Text, Button, Col } from '@tlon/indigo-react';
import { Box, Icon, Row, Text, Button, Col } from '@tlon/indigo-react';
import { useSettings } from '../hooks/useSettings';
import { api } from '../lib/api';
import { Link } from 'react-router-dom';
const Settings = () => {
const { wallet, provider } = useSettings();
@ -39,10 +40,15 @@ const Settings = () => {
borderRadius="48px"
backgroundColor="white"
>
<Row mb="12px">
<Row mb="12px" alignItems="center" justifyContent="space-between">
<Text fontSize={1} fontWeight="bold" color="black">
XPub Derivation
</Text>
<Link to="/~btc">
<Box backgroundColor="white" width={5} height={5} p={2} m={2}>
<Icon icon="X" />
</Box>
</Link>
</Row>
<Row
borderRadius="12px"