mirrors/thunderhub
1
0
Fork 0
mirror of https://github.com/apotdevin/thunderhub.git synced 2025-02-23 06:35:05 +01:00
Code Issues Projects Releases Wiki Activity

chore: styling changes

Browse source
This commit is contained in:
AnthonyPotdevin 2020-01-19 14:08:32 +01:00
parent b6b678affe
commit fcff6f9207
10 changed files with 43 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/buttons/colorButton/ColorButton.tsx
View file

@ -4,6 +4,8 @@ import {
textColor,
colorButtonBackground,
colorButtonColor,
disabledButtonBackground,
disabledButtonBorder,
} from '../../../styles/Themes';
import { ChevronRight } from '../../generic/Icons';
@ -57,9 +59,9 @@ const BorderButton = styled(GeneralButton)`
const DisabledButton = styled(GeneralButton)`
border: none;
background-color: #262626;
background-color: ${disabledButtonBackground};
color: #8c8c8c;
border: 1px solid #595959;
border: 1px solid ${disabledButtonBorder};
cursor: default;
`;

2
src/components/generic/Styled.tsx
View file

@ -103,7 +103,7 @@ export const Input = styled.input`
padding: 5px;
height: 30px;
width: 80%;
margin: 10px;
margin: 8px 0;
border: 1px solid #c8ccd4;
background: none;
border-radius: 5px;

6
src/sections/content/Content.tsx
View file

@ -12,13 +12,7 @@ import { ChainTransactions } from '../../views/chain/ChainTransactions';
import { ForwardsList } from '../../views/forwards/ForwardList';
const ContentStyle = styled.div`
/* display: flex;
justify-content: center;
align-items: center; */
/* padding: 0 10px; */
/* background-color: blue; */
grid-area: content;
margin-right: 0.5rem;
`;
export const Content = () => {

25
src/sections/header/Header.tsx
View file

@ -4,6 +4,8 @@ import { textColor, cardColor } from '../../styles/Themes';
import { HomeButton } from '../../views/entry/HomePage.styled';
import { Link } from 'react-router-dom';
import { useAccount } from '../../context/AccountContext';
import { SingleLine, Sub4Title } from '../../components/generic/Styled';
import { Cpu } from '../../components/generic/Icons';
const HeaderStyle = styled.div`
display: flex;
@ -27,23 +29,32 @@ const Wrapper = styled.div`
const HeaderTitle = styled.div`
color: ${textColor};
font-weight: bolder;
font-weight: 900;
`;
export const Header = () => {
const { loggedIn } = useAccount();
const { loggedIn, name } = useAccount();
const renderLoggedIn = () => <Sub4Title>{`Account: ${name}`}</Sub4Title>;
const renderLoggedOut = () => (
<Link to="/login" style={{ textDecoration: 'none' }}>
<HomeButton>Login</HomeButton>
</Link>
);
return (
<HeaderStyle>
<Wrapper>
<Link to="/" style={{ textDecoration: 'none' }}>
<SingleLine>
<Cpu/>
<HeaderTitle>ThunderHub</HeaderTitle>
</SingleLine>
</Link>
{!loggedIn && (
<Link to="/login" style={{ textDecoration: 'none' }}>
<HomeButton>Login</HomeButton>
</Link>
)}
<SingleLine>
{loggedIn ? renderLoggedIn() : renderLoggedOut()}
</SingleLine>
</Wrapper>
</HeaderStyle>
);

1
src/sections/navigation/Navigation.tsx
View file

@ -21,7 +21,6 @@ import {
const NavigationStyle = styled.div`
grid-area: nav;
margin-left: 0.5rem;
`;
const StickyCard = styled.div`

10
src/styles/Themes.ts
View file

@ -41,6 +41,16 @@ export const colorButtonBorder: { [key: string]: string } = {
dark: '#EFFFFA',
};
export const disabledButtonBackground = theme('mode', {
light: '#f5f5f5',
dark: 'rgba(0,0,0,0.4)',
});
export const disabledButtonBorder = theme('mode', {
light: '#f5f5f5',
dark: 'rgba(0,0,0,0.4)',
});
// ---------------------------------------
// CARD COLORS
// ---------------------------------------

5
src/views/fees/FeeCard.tsx
View file

@ -5,6 +5,7 @@ import {
SingleLine,
DarkSubTitle,
Input,
RightAlign,
} from '../../components/generic/Styled';
import { renderLine } from '../../components/generic/Helpers';
import { MainInfo, NodeTitle, ColLine } from './Fees.style';
@ -91,7 +92,7 @@ export const FeeCard = ({
onChange={e => setFeeRate(parseInt(e.target.value))}
/>
</SingleLine>
<SingleLine>
<RightAlign>
<SecureButton
callback={updateFees}
variables={{
@ -106,7 +107,7 @@ export const FeeCard = ({
Update Fees
<ChevronRight />
</SecureButton>
</SingleLine>
</RightAlign>
</>
);
};

5
src/views/fees/Fees.tsx
View file

@ -10,6 +10,7 @@ import {
Separation,
DarkSubTitle,
Input,
RightAlign,
} from '../../components/generic/Styled';
import { useAccount } from '../../context/AccountContext';
import { getAuthString } from '../../utils/auth';
@ -98,7 +99,7 @@ export const FeesView = () => {
}
/>
</SingleLine>
<SingleLine>
<RightAlign>
<SecureButton
callback={updateFees}
variables={{
@ -113,7 +114,7 @@ export const FeesView = () => {
Update Fees
<ChevronRight />
</SecureButton>
</SingleLine>
</RightAlign>
</>
)}
</Card>

2
src/views/main/Main.tsx
View file

@ -9,7 +9,7 @@ const Container = styled.div`
grid-template-areas: 'nav content content';
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
gap: 10px;
gap: 16px;
`;
const MainView = () => (

4
src/views/settings/Danger.tsx
View file

@ -51,7 +51,7 @@ export const DangerView = () => {
{getStorageSaved().map((entry, index) => {
return (
<ColorButton
color={colorButtonBorder[theme]}
color={'red'}
onClick={() => {
deleteAuth(entry.index);
refreshAccount();
@ -67,7 +67,7 @@ export const DangerView = () => {
<SubTitle>Delete all Accounts and Settings:</SubTitle>
<ButtonRow>
<ColorButton
color={colorButtonBorder[theme]}
color={'red'}
onClick={() => {
deleteStorage();
refreshAccount();