Skip to content

F
frontend
Commit 57906c02 authored by ArminaAiren's avatar ArminaAiren
Browse files
Options

redesign fixes

parent da444cf4
Show whitespace changes
Inline Side-by-side
Showing with 63 additions and 19 deletions
icons/social/tweet.svg
View file @ 57906c02
<svg width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.067 3.928A9.984 9.984 0 0 0 10.997 1 9.983 9.983 0 0 0 3.93 3.928 9.973 9.973 0 0 0 1 11.003a9.969 9.969 0 0 0 2.929 7.069A9.983 9.983 0 0 0 10.998 21a9.984 9.984 0 0 0 7.069-2.928 9.97 9.97 0 0 0 2.928-7.07 9.974 9.974 0 0 0-2.928-7.074Zm-.554 13.59a9.187 9.187 0 0 1-6.516 2.702 9.187 9.187 0 0 1-6.515-2.702 9.175 9.175 0 0 1-2.701-6.515 9.178 9.178 0 0 1 2.7-6.521 9.182 9.182 0 0 1 6.517-2.696 9.181 9.181 0 0 1 6.515 2.696 9.177 9.177 0 0 1 2.701 6.52c0 2.542-1.03 4.85-2.701 6.516Z" fill="currentColor" stroke="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.825 7.067c-.404.238-.858.41-1.334.504a2.088 2.088 0 0 0-1.534-.654c-1.151 0-2.093.925-2.093 2.06 0 .166.028.32.061.47a5.945 5.945 0 0 1-4.318-2.153c-.177.31-.287.659-.287 1.035 0 .72.411 1.35.965 1.716-.343-.005-.703-.1-.911-.255v.028c0 .266.014.51.108.742a2.062 2.062 0 0 0 1.522 1.273c-.183.05-.369.078-.563.078a1.91 1.91 0 0 1-.397-.045 2.109 2.109 0 0 0 1.952 1.44c-.72.553-1.618.88-2.598.88-.171 0-.332-.011-.504-.028.93.581 2.031.925 3.21.925 3.272 0 5.283-2.265 5.808-4.617.095-.42.129-.836.129-1.246v-.265a4.167 4.167 0 0 0 1.05-1.069 4.43 4.43 0 0 1-1.196.327c.437-.26.774-.659.93-1.146Z" fill="currentColor"/></svg>
\ No newline at end of file
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.067 3.928A9.984 9.984 0 0 0 10.997 1 9.983 9.983 0 0 0 3.93 3.928 9.973 9.973 0 0 0 1 11.003a9.969 9.969 0 0 0 2.929 7.069A9.983 9.983 0 0 0 10.998 21a9.984 9.984 0 0 0 7.069-2.928 9.97 9.97 0 0 0 2.928-7.07 9.974 9.974 0 0 0-2.928-7.074Zm-.554 13.59a9.187 9.187 0 0 1-6.516 2.702 9.187 9.187 0 0 1-6.515-2.702 9.175 9.175 0 0 1-2.701-6.515 9.178 9.178 0 0 1 2.7-6.521 9.182 9.182 0 0 1 6.517-2.696 9.181 9.181 0 0 1 6.515 2.696 9.177 9.177 0 0 1 2.701 6.52c0 2.542-1.03 4.85-2.701 6.516Z" fill="currentColor" stroke="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15.825 7.067c-.404.238-.858.41-1.334.504a2.088 2.088 0 0 0-1.534-.654c-1.151 0-2.093.925-2.093 2.06 0 .166.028.32.061.47a5.945 5.945 0 0 1-4.318-2.153c-.177.31-.287.659-.287 1.035 0 .72.411 1.35.965 1.716-.343-.005-.703-.1-.911-.255v.028c0 .266.014.51.108.742a2.062 2.062 0 0 0 1.522 1.273c-.183.05-.369.078-.563.078a1.91 1.91 0 0 1-.397-.045 2.109 2.109 0 0 0 1.952 1.44c-.72.553-1.618.88-2.598.88-.171 0-.332-.011-.504-.028.93.581 2.031.925 3.21.925 3.272 0 5.283-2.265 5.808-4.617.095-.42.129-.836.129-1.246v-.265a4.167 4.167 0 0 0 1.05-1.069 4.43 4.43 0 0 1-1.196.327c.437-.26.774-.659.93-1.146Z" fill="currentColor"/></svg>
\ No newline at end of file
pages/watchlist.tsx
View file @ 57906c02
import React from 'react';
import type { NextPage } from 'next';
import Head from 'next/head'
import WatchList from '../ui/pages/Watchlist';
const WatchListPage: NextPage = () => {
return <WatchList/>;
return (
<>
<Head><title>Watch list</title></Head>
<WatchList/>
</>
);
}
export default WatchListPage
theme/foundations/typography.ts
View file @ 57906c02
......@@ -5,6 +5,13 @@ const typography = {
heading: `Poppins, ${ theme.fonts.heading }`,
body: `Inter, ${ theme.fonts.body }`,
},
textStyles: {
h2: {
fontSize: [ '32px' ],
fontWeight: 'semibold',
lineHeight: '40px',
},
},
}
export default typography;
ui/Page/Page.tsx
View file @ 57906c02
import React from 'react';
import { Box, HStack, LightMode, VStack } from '@chakra-ui/react';
import AccountNav from '../navigation/Navigation';
import Navigation from '../navigation/Navigation';
import Header from '../header/Header';
interface Props {
......@@ -17,12 +17,22 @@ const Page = ({ children }: Props) => {
bgColor="white"
spacing={ 12 }
alignItems="stretch"
paddingRight="60px"
paddingRight={ 15 }
>
<AccountNav/>
<Navigation/>
<VStack>
<Header/>
<Box borderRadius="base" w="100%" overflow="hidden" bgColor="white" padding="32px 20px">{ children }</Box>
<Box
as="main"
borderRadius="base"
w="100%"
overflow="hidden"
bgColor="white"
px={ 5 }
py={ 8 }
>
{ children }
</Box>
</VStack>
</HStack>
</LightMode>
......
ui/header/Header.tsx
View file @ 57906c02
......@@ -3,7 +3,15 @@ import { HStack, Text } from '@chakra-ui/react';
const AccountNav = () => {
return (
<HStack height="60px" width="100%" bg="gray.50" alignItems="center" justifyContent="center" marginTop={ 9 }>
<HStack
as="header"
height="60px"
width="100%"
bg="gray.50"
alignItems="center"
justifyContent="center"
marginTop={ 9 }
>
<Text>Header</Text>
</HStack>
)
......
ui/navigation/AccountNavLink.tsx
View file @ 57906c02
......@@ -16,8 +16,11 @@ const AccountNavLink = ({ text, pathname, icon }: Props) => {
return (
<NextLink href={ pathname } passHref>
<Link
as="li"
listStyleType="none"
w="220px"
p="15px 20px"
px={ 5 }
py={ 4 }
color={ isActive ? 'blue.600' : 'gray.600' }
bgColor={ isActive ? 'blue.50' : 'transparent' }
_hover={{ color: 'blue.600' }}
......
ui/navigation/AccountNavigation.tsx
View file @ 57906c02
import React from 'react';
import { VStack } from '@chakra-ui/react';
import { Box, VStack } from '@chakra-ui/react';
import AccountNavLink from './AccountNavLink';
import WatchlistIcon from '../../icons/watchlist.svg'
import PrivateTagIcon from '../../icons/privattags.svg'
......@@ -17,9 +17,11 @@ const navItems = [
const AccountNavigation = () => {
return (
<VStack spacing="3">
<Box as="nav">
<VStack as="ul" spacing="3">
{ navItems.map((item) => <AccountNavLink key={ item.text } { ...item }/>) }
</VStack>
</Box>
)
}
......
ui/navigation/MainNavLink.tsx
View file @ 57906c02
......@@ -17,8 +17,11 @@ const MainNavLink = ({ text, pathname, icon }: Props) => {
return (
<NextLink href={ pathname } passHref>
<Link
as="li"
listStyleType="none"
w="220px"
p="15px 20px"
px={ 5 }
py={ 4 }
color={ isActive ? 'blue.600' : 'gray.600' }
bgColor={ isActive ? 'blue.50' : 'transparent' }
borderRadius="base"
......
ui/navigation/MainNavigation.tsx
View file @ 57906c02
import React from 'react';
import { VStack } from '@chakra-ui/react';
import { Box, VStack } from '@chakra-ui/react';
import MainNavLink from './MainNavLink';
import BlocksIcon from '../../icons/block.svg'
import TransactionsIcon from '../../icons/transactions.svg'
......@@ -17,9 +17,11 @@ const navItems = [
const MainNavigation = () => {
return (
<VStack spacing="3">
<Box as="nav">
<VStack as="ul" spacing="3">
{ navItems.map((item) => <MainNavLink key={ item.text } { ...item }/>) }
</VStack>
</Box>
)
}
......
ui/navigation/NavFooter.tsx
View file @ 57906c02
......@@ -17,6 +17,7 @@ const SOCIAL_LINKS = [
const NavFooter = () => {
return (
<VStack
as="footer"
spacing={ 8 }
borderTop="1px solid"
borderColor="gray.200"
......
ui/navigation/Navigation.tsx
View file @ 57906c02
......@@ -15,10 +15,11 @@ const Navigation = () => {
spacing={ 12 }
borderRight="1px solid"
borderColor="gray.200"
padding="48px 40px"
px={ 10 }
py={ 12 }
width="300px"
>
<HStack justifyContent="space-between" w="100%" padding={ 4 }>
<HStack as="header" justifyContent="space-between" w="100%" padding={ 4 }>
<Icon as={ logoIcon } width="142px" height="26px" color="blue.600"/>
<Icon as={ networksIcon } width="20px" height="20px"/>
</HStack>
......
ui/pages/Watchlist.tsx
View file @ 57906c02
......@@ -41,6 +41,7 @@ const WatchList: React.FC = () => {
return (
<Page>
<Box h="100%">
<Box as="h1" textStyle="h2" marginBottom={ 8 }>Watch list</Box>
<Text marginBottom="40px">An Email notification can be sent to you when an address on your watch list sends or receives any transactions.</Text>
{ Boolean(watchlist.length) && (
<WatchlistTable
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment