aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-25 17:54:53 +0800
committerGitHub <noreply@github.com>2018-10-25 17:54:53 +0800
commite5d3e3b33a88e2b08ed02cb39910fab28e130594 (patch)
tree6ab79e457f3e010ed00ce653442d5ffdce1cf123 /packages/dev-tools-pages
parent1c8ea1336e9e0c018ceb38cba90943f1b50eb23a (diff)
downloaddexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar
dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.gz
dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.bz2
dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.lz
dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.xz
dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.tar.zst
dexon-sol-tools-e5d3e3b33a88e2b08ed02cb39910fab28e130594.zip
Feature/tweaks (#8)
* show copy button on focs * change base link styling * text-decoration underline on basic links * basic hover and focus styles on button and tabs * add links in footer * change breakpoints vars * medium breakpoint on footer
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r--packages/dev-tools-pages/ts/components/Button.tsx3
-rw-r--r--packages/dev-tools-pages/ts/components/Code.tsx3
-rw-r--r--packages/dev-tools-pages/ts/components/Footer.tsx25
-rw-r--r--packages/dev-tools-pages/ts/components/Header.tsx4
-rw-r--r--packages/dev-tools-pages/ts/components/Tabs.tsx28
-rw-r--r--packages/dev-tools-pages/ts/globalStyles.tsx7
-rw-r--r--packages/dev-tools-pages/ts/variables.tsx5
7 files changed, 53 insertions, 22 deletions
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx
index eae6aaf54..90d991496 100644
--- a/packages/dev-tools-pages/ts/components/Button.tsx
+++ b/packages/dev-tools-pages/ts/components/Button.tsx
@@ -23,6 +23,9 @@ const Button =
border-radius: 5rem;
padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')};
display: inline-block;
+ :hover, :focus {
+ color: ${props => props.colors.main};
+ }
${props =>
props.large &&
media.small`
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 02bd0382e..88cfba7f8 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -21,6 +21,9 @@ const Button = styled(BaseButton)`
top: 1rem;
right: 1rem;
transition: opacity 0.2s;
+ :focus {
+ opacity: 1;
+ }
`;
const Base =
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx
index df2d920ac..de479a81e 100644
--- a/packages/dev-tools-pages/ts/components/Footer.tsx
+++ b/packages/dev-tools-pages/ts/components/Footer.tsx
@@ -27,7 +27,11 @@ function Footer(props: Props) {
<ListItem key={title}>
<Icon as={icon} />
<div>
- <Beta>{title}</Beta>
+ <Beta>
+ <StyledLink colors={colors} href="#">
+ {title}
+ </StyledLink>
+ </Beta>
<p>{subtitle}</p>
</div>
</ListItem>
@@ -59,13 +63,13 @@ const Top = styled.div`
justify-content: space-between;
margin-bottom: 9.375rem;
- ${media.small`
+ ${media.medium`
display: block;
margin-bottom: 5.3125rem;
`};
${Alpha} {
- ${media.small`margin-bottom: 3.8125rem;`};
+ ${media.medium`margin-bottom: 3.8125rem;`};
}
`;
@@ -92,9 +96,13 @@ const List = styled.ul`
margin: 0;
padding: 0;
+ ${media.medium`
+
+ width: 100%;
+ `};
+
${media.small`
display: block;
- width: 100%;
`};
`;
@@ -123,4 +131,13 @@ const Small = styled.small`
max-width: 37.5rem;
`;
+const StyledLink =
+ styled.a <
+ { colors: any } >
+ `
+ :hover {
+ color: ${props => props.colors.main};
+ }
+`;
+
export default withContext(Footer);
diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx
index aeefae3cc..44074cca3 100644
--- a/packages/dev-tools-pages/ts/components/Header.tsx
+++ b/packages/dev-tools-pages/ts/components/Header.tsx
@@ -62,7 +62,9 @@ const Title = styled.h1`
`;
const StyledLink = styled(Small)`
- color: inherit;
+ :hover {
+ text-decoration: underline;
+ }
`;
const Link = StyledLink as any;
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 5307483e8..4d436f519 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -24,23 +24,25 @@ const StyledTab = styled(Tab)`
&:not(:first-of-type) {
margin-left: 0.25rem;
}
- &:focus,
- &:hover {
- color: red;
- outline: 0;
- }
`;
const Root =
styled.div <
- { primaryColor: string } >
+ { colors: any } >
`
- ${StyledTab} {
- background-color: ${props => props.primaryColor};
- }
- ${StyledTab}[aria-selected="true"] {
- background-color: ${colors.gray};
- }
+ ${StyledTab} {
+ background-color: ${props => props.colors.secondary};
+ &[aria-selected="true"] {
+ background-color: ${colors.gray};
+
+ }
+
+ &[aria-selected="false"]:focus,
+ &[aria-selected="false"]:hover {
+ color: ${props => props.colors.main};
+ cursor: pointer;
+ }
+ }
`;
interface TabsProps extends Props {
@@ -50,7 +52,7 @@ interface TabsProps extends Props {
function Tabs(props: TabsProps) {
return (
<Breakout>
- <Root primaryColor={props.colors.secondary}>
+ <Root colors={props.colors}>
<ReactTabs>
<StyledTabList>
{React.Children.map(props.children, child => {
diff --git a/packages/dev-tools-pages/ts/globalStyles.tsx b/packages/dev-tools-pages/ts/globalStyles.tsx
index 16adc61a7..270929123 100644
--- a/packages/dev-tools-pages/ts/globalStyles.tsx
+++ b/packages/dev-tools-pages/ts/globalStyles.tsx
@@ -50,11 +50,16 @@ const BaseStyles = createGlobalStyle`
}
a {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ a:not([class]) {
color: ${(props: any) => props.colors.type};
text-decoration: none;
&:hover {
- color: red; //what should this be?
+ text-decoration: underline;
}
}
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index b23bb3e52..8f08d13eb 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -14,9 +14,8 @@ interface SizesInterface {
}
const sizes: SizesInterface = {
- large: 992,
- medium: 768,
- small: 376,
+ medium: 900,
+ small: 650,
};
const media = Object.keys(sizes).reduce((acc: any, label: string) => {