Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Homepage UI fix #481

Open
wants to merge 8 commits into
base: trunk
Choose a base branch
from
Open

Homepage UI fix #481

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9fd5289
cryptonomic logo
Aeesh Apr 15, 2021
084ba3d
added cryptonomic logo to home page
Aeesh Apr 19, 2021
35fcdaf
added links
Aeesh Apr 19, 2021
9a3a827
UI fix
Aeesh Apr 19, 2021
76aedf1
reverted change
Aeesh Apr 19, 2021
a1f2c66
modified svg tag to img
Aeesh Apr 19, 2021
c0bbb87
link icon
Aeesh Apr 19, 2021
3d68e2c
removed inline styling
Aeesh Apr 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/assets/images/Cryptonomic_logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/assets/images/link_icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 9 additions & 4 deletions src/components/Home/Banner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import React from 'react';
import {
Title,
Text,
Title2,
BottomDiv,
Holder,
styles
styles,
LogoCon
} from './style';

import DownArrow from '../../../assets/icons/down-arrow.png';
import CryptonomicLogo from '../../../assets/images/Cryptonomic_logo.svg';

import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
Expand All @@ -17,12 +19,15 @@ const Banner = (props: any) => {
<Holder>
<Title ref={props.actionBtnRef}>ARRONAX</Title>
<Text>Blockchain Analytics Tool </Text>
<LogoCon>
<Text> Brought to you by </Text>
<img src={CryptonomicLogo} alt="Brought to you by Cryptonomic"/>
</LogoCon>
<Button onClick={props.redirectToDashboard} className={props.classes.primaryBtn} variant="contained" color="primary" disableElevation>
Explore Data
Create Data Queries
</Button>

<BottomDiv>
<Title2>Discover Arronax</Title2>
<img src={DownArrow} alt="img"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alt, same here if you can

</BottomDiv>
</Holder>
Expand Down
33 changes: 20 additions & 13 deletions src/components/Home/Banner/style.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ export const Title = styled.h1 `
`;

export const Text = styled.p `
font-family: Futura;
font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 38px;
line-height: 50px;
letter-spacing: 5.76333px;
color: #FFFFFF;
margin: 0 0 50px;
margin: 0 0 10px;
`;

export const BottomDiv = styled.div `
Expand All @@ -39,26 +39,33 @@ export const BottomDiv = styled.div `
margin: 0 auto;
`;

export const Title2 = styled.h4 `
font-family: Roboto;
font-weight:300;
margin: 0 0 25px;
font-size: 25px;
line-height: 29px;
letter-spacing: 3.04333px;
color: #FFFFFF;
export const LogoCon = styled.div`
display: flex;
align-self: center;
height: 48px;
margin: 20px auto 50px;

p {
font-size: 16px;
}
img {
width: 112px;
height: 48px;
}
`;

export const styles: any = {
primaryBtn: {
marginTop: '50px',
padding: '10px 30px',
fontSize: '16px',
fontSize: '20px',
fontWeight: 'bold',
fontFamily: 'Futura',
fontFamily: 'Roboto',
height: 'auto',
lineHeight: '21px',
lineHeight: '23.44px',
borderRadius: '5px',
letterSpacing: '2.42667px',
textTransform: 'none',
boxShadow: ' none !important',
outline: 'none !important',
border: '1px solid #FF7477;',
Expand Down
54 changes: 24 additions & 30 deletions src/containers/Homepage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ import ThoughtBubbleIcon from '../../assets/icons/thought_bubble_icon.svg';
import PlaceholderImage from '../../assets/images/placeholder.png';
import PlaceholderImage1 from '../../assets/images/placeholder1.png';
import PlaceholderImage2 from '../../assets/images/placeholder2.png';
import link_icon from '../../assets/images/link_icon.svg'

import { Props, States, Transactions, Accounts, Bakers } from './types';

Expand Down Expand Up @@ -354,17 +355,6 @@ class Home extends React.Component<Props, States> {
</Grid>
<Grid item xs={6}>
<img src={PlaceholderImage} alt="img"/>
<AnchorTag>
<Link to="hourlytransactionsUrl">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.7771 0.212143L19.7871 1.22286L9.08001 11.93L8.07001 10.92L18.7771 0.212143Z" fill="#2D9CDB"/>
<path d="M20 7.14286H18.5715V1.42857H12.8572V0H20V7.14286Z" fill="#2D9CDB"/>
<path d="M16.4286 20H2.14286C0.928571 20 0 19.0714 0 17.8571V3.57143C0 2.35715 0.928571 1.42857 2.14286 1.42857H10V2.85715H2.14286C1.71429 2.85715 1.42857 3.14286 1.42857 3.57143V17.8571C1.42857 18.2857 1.71429 18.5714 2.14286 18.5714H16.4286C16.8571 18.5714 17.1429 18.2857 17.1429 17.8571V10H18.5714V17.8571C18.5714 19.0714 17.6429 20 16.4286 20Z" fill="#2D9CDB"/>
</svg>
View Query
</Link>
</AnchorTag>
{/* <Link to={this.hourlyTransactionsQuery}/> */}
</Grid>
<Grid item xs={6}>
<MapHolder ref={this.container}>
Expand All @@ -374,6 +364,12 @@ class Home extends React.Component<Props, States> {
<svg className={classes.blockDisplay} ref={this.transactionPerHour}></svg>
}
</MapHolder>
<AnchorTag>
<Link to={{ pathname: "https://periscope.arronax.io/operations?q=trancations"}} target="_blank" >
View Graph on Periscope
<img src={link_icon} alt="link_icon"/>
</Link>
</AnchorTag>
</Grid>
</Grid>
</Padding>
Expand All @@ -398,17 +394,19 @@ class Home extends React.Component<Props, States> {
</React.Fragment>
}
</MapHolder>
<AnchorTag>
<Link to={{ pathname: "https://periscope.arronax.io/blocks?q=priorityBlocks"}} target="_blank" >
View Graph on Periscope
<img src={link_icon} alt="link_icon"/>
</Link>
</AnchorTag>
</Grid>
<Grid item xs={6}>
<img src={PlaceholderImage1} alt="img"/>
<img style={{marginBottom: '-18px'}} src={PlaceholderImage1} alt="img"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please pass margin bottom in class to avoid inline styles

<AnchorTag className={classes.alignRight}>
<Link to={topBakersUrl}>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.7771 0.212143L19.7871 1.22286L9.08001 11.93L8.07001 10.92L18.7771 0.212143Z" fill="#2D9CDB"/>
<path d="M20 7.14286H18.5715V1.42857H12.8572V0H20V7.14286Z" fill="#2D9CDB"/>
<path d="M16.4286 20H2.14286C0.928571 20 0 19.0714 0 17.8571V3.57143C0 2.35715 0.928571 1.42857 2.14286 1.42857H10V2.85715H2.14286C1.71429 2.85715 1.42857 3.14286 1.42857 3.57143V17.8571C1.42857 18.2857 1.71429 18.5714 2.14286 18.5714H16.4286C16.8571 18.5714 17.1429 18.2857 17.1429 17.8571V10H18.5714V17.8571C18.5714 19.0714 17.6429 20 16.4286 20Z" fill="#2D9CDB"/>
</svg>
View Query
<Link to={{ pathname: "https://harpoon.arronax.io/"}} target="_blank" >
View Baker Stats on Harpoon
<img src={link_icon} alt="link_icon"/>
</Link>
</AnchorTag>
</Grid>
Expand All @@ -426,16 +424,6 @@ class Home extends React.Component<Props, States> {
</Grid>
<Grid item xs={6}>
<img src={PlaceholderImage2} alt="img"/>
<AnchorTag>
<Link to={topAccountsUrl}>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.7771 0.212143L19.7871 1.22286L9.08001 11.93L8.07001 10.92L18.7771 0.212143Z" fill="#2D9CDB"/>
<path d="M20 7.14286H18.5715V1.42857H12.8572V0H20V7.14286Z" fill="#2D9CDB"/>
<path d="M16.4286 20H2.14286C0.928571 20 0 19.0714 0 17.8571V3.57143C0 2.35715 0.928571 1.42857 2.14286 1.42857H10V2.85715H2.14286C1.71429 2.85715 1.42857 3.14286 1.42857 3.57143V17.8571C1.42857 18.2857 1.71429 18.5714 2.14286 18.5714H16.4286C16.8571 18.5714 17.1429 18.2857 17.1429 17.8571V10H18.5714V17.8571C18.5714 19.0714 17.6429 20 16.4286 20Z" fill="#2D9CDB"/>
</svg>
View Query
</Link>
</AnchorTag>
</Grid>
<Grid item xs={6}>
<MapHolder>
Expand All @@ -445,6 +433,12 @@ class Home extends React.Component<Props, States> {
<svg className={classes.blockDisplay} ref={this.topAccountsRef}></svg>
}
</MapHolder>
<AnchorTag>
<Link to={{ pathname: "https://periscope.arronax.io/accounts"}} target="_blank" >
View Graph on Periscope
<img src={link_icon} alt="link_icon"/>
</Link>
</AnchorTag>
</Grid>
</Grid>
</Padding>
Expand All @@ -460,7 +454,7 @@ class Home extends React.Component<Props, States> {
</Grid>
<Grid className={classes.alignRight} item xs={6}>
<Button className={classes.outlineBtn} onClick={this.redirectToDashboard} variant="contained" color="primary" disableElevation>
Explore Data
Enter Arronax
</Button>
</Grid>
</Grid>
Expand Down
16 changes: 10 additions & 6 deletions src/containers/Homepage/style.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,17 +100,21 @@ export const MapHolder = styled.div`
`;

export const AnchorTag = styled.div `
text-align:left;
text-align: left;
margin: 10px 0;
a {
font-family: Roboto;
font-size: 24px;
line-height: 28px;
font-size: 20px;
line-height: 23px;
letter-spacing: 0.01em;
color: #2D9CDB;
margin: 0 20px;
margin: 0px 20px;
text-decoration:none;
}
svg {
margin-right:5px;
img {
width: 18px;
height: 16px;
margin: 0px 7px ;
vertical-align: unset;
}
`;
Expand Down