Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Configure/Configure.js
Show All 23 Lines | |||||
import { ReactComponent as Trashcan } from '@assets/trashcan.svg'; | import { ReactComponent as Trashcan } from '@assets/trashcan.svg'; | ||||
import { ReactComponent as Edit } from '@assets/edit.svg'; | import { ReactComponent as Edit } from '@assets/edit.svg'; | ||||
import { Event } from '@utils/GoogleAnalytics'; | import { Event } from '@utils/GoogleAnalytics'; | ||||
const { Panel } = Collapse; | const { Panel } = Collapse; | ||||
const SettingsLink = styled.a` | const SettingsLink = styled.a` | ||||
text-decoration: underline; | text-decoration: underline; | ||||
color: #ff8d00; | color: ${props => props.theme.primary}; | ||||
:visited { | :visited { | ||||
text-decoration: underline; | text-decoration: underline; | ||||
color: #ff8d00; | color: ${props => props.theme.primary}; | ||||
} | } | ||||
`; | `; | ||||
const SWRow = styled.div` | const SWRow = styled.div` | ||||
border-radius: 3px; | border-radius: 3px; | ||||
padding: 10px 0; | padding: 10px 0; | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
Show All 16 Lines | const SWName = styled.div` | ||||
@media (max-width: 500px) { | @media (max-width: 500px) { | ||||
width: 100%; | width: 100%; | ||||
justify-content: center; | justify-content: center; | ||||
margin-bottom: 15px; | margin-bottom: 15px; | ||||
} | } | ||||
h3 { | h3 { | ||||
font-size: 16px; | font-size: 16px; | ||||
color: #444; | color: ${props => props.theme.wallet.text.secondary}; | ||||
margin: 0; | margin: 0; | ||||
text-align: left; | text-align: left; | ||||
white-space: nowrap; | white-space: nowrap; | ||||
overflow: hidden; | overflow: hidden; | ||||
text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
} | } | ||||
`; | `; | ||||
Show All 11 Lines | button { | ||||
cursor: pointer; | cursor: pointer; | ||||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||||
font-size: 14px; | font-size: 14px; | ||||
} | } | ||||
} | } | ||||
svg { | svg { | ||||
stroke: #444; | stroke: ${props => props.theme.wallet.text.secondary}; | ||||
fill: #444; | fill: ${props => props.theme.wallet.text.secondary}; | ||||
width: 25px; | width: 25px; | ||||
height: 25px; | height: 25px; | ||||
margin-right: 20px; | margin-right: 20px; | ||||
cursor: pointer; | cursor: pointer; | ||||
:first-child:hover { | :first-child:hover { | ||||
stroke: #ff8d00; | stroke: ${props => props.theme.primary}; | ||||
fill: #ff8d00; | fill: ${props => props.theme.primary}; | ||||
} | } | ||||
:hover { | :hover { | ||||
stroke: red; | stroke: ${props => props.theme.settings.delete}; | ||||
fill: red; | fill: ${props => props.theme.settings.delete}; | ||||
} | } | ||||
} | } | ||||
`; | `; | ||||
const AWRow = styled.div` | const AWRow = styled.div` | ||||
padding: 10px 0; | padding: 10px 0; | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
margin-bottom: 6px; | margin-bottom: 6px; | ||||
h3 { | h3 { | ||||
font-size: 16px; | font-size: 16px; | ||||
display: inline-block; | display: inline-block; | ||||
color: #444; | color: ${props => props.theme.wallet.text.secondary}; | ||||
margin: 0; | margin: 0; | ||||
text-align: left; | text-align: left; | ||||
font-weight: bold; | font-weight: bold; | ||||
@media (max-width: 500px) { | @media (max-width: 500px) { | ||||
font-size: 14px; | font-size: 14px; | ||||
} | } | ||||
} | } | ||||
h4 { | h4 { | ||||
font-size: 16px; | font-size: 16px; | ||||
display: inline-block; | display: inline-block; | ||||
color: #ff8d00 !important; | color: ${props => props.theme.primary} !important; | ||||
margin: 0; | margin: 0; | ||||
text-align: right; | text-align: right; | ||||
} | } | ||||
@media (max-width: 500px) { | @media (max-width: 500px) { | ||||
flex-direction: column; | flex-direction: column; | ||||
margin-bottom: 12px; | margin-bottom: 12px; | ||||
} | } | ||||
`; | `; | ||||
const StyledConfigure = styled.div` | const StyledConfigure = styled.div` | ||||
h2 { | h2 { | ||||
color: #444; | color: ${props => props.theme.wallet.text.secondary}; | ||||
font-size: 25px; | font-size: 25px; | ||||
} | } | ||||
p { | p { | ||||
color: #444; | color: ${props => props.theme.wallet.text.secondary}; | ||||
} | } | ||||
`; | `; | ||||
const StyledSpacer = styled.div` | const StyledSpacer = styled.div` | ||||
height: 1px; | height: 1px; | ||||
width: 100%; | width: 100%; | ||||
background-color: #e2e2e2; | background-color: ${props => props.theme.wallet.borders.color}; | ||||
margin: 60px 0 50px; | margin: 60px 0 50px; | ||||
`; | `; | ||||
const Configure = () => { | const Configure = () => { | ||||
const ContextValue = React.useContext(WalletContext); | const ContextValue = React.useContext(WalletContext); | ||||
const { wallet, loading, apiError } = ContextValue; | const { wallet, loading, apiError } = ContextValue; | ||||
const { | const { | ||||
▲ Show 20 Lines • Show All 433 Lines • Show Last 20 Lines |