pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

fixed series control button style

Browse source
This commit is contained in:
Kim, Jimin 2022-01-23 15:20:15 +09:00
parent 1839805a79
commit 99e31446af
1 changed files with 49 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

94
source/src/pages/Page/SeriesControlButtons.tsx
View file

@ -1,4 +1,4 @@
import styled from "styled-components" import styled, { css } from "styled-components"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
@ -10,50 +10,48 @@ import {
import theming from "../../styles/theming" import theming from "../../styles/theming"
const StyledContainer = styled.div` const Container = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
size: 100%;
line-height: 1rem;
` `
const StyledLink = styled(Link)` const buttonStyle = css`
${theming.styles.navbarButtonStyle} ${theming.styles.navbarButtonStyle}
background-color: ${(props) => background-color: ${(props) =>
theming.theme(props.theme.currentTheme, { theming.theme(props.theme.currentTheme, {
light: "#EEEEEE",
dark: "#202225", dark: "#202225",
light: "#EEEEEE",
})}; })};
border-radius: 0.5rem;
height: 3rem;
height: 1rem; &:hover {
width: 2rem; background-color: ${(props) =>
theming.theme(props.theme.currentTheme, {
line-height: 1rem; dark: theming.dark.backgroundColor1,
text-align: center; light: theming.light.backgroundColor2,
})};
}
` `
const StyledDisabledLink = styled.div` const Button = styled.div`
font-size: 1rem; ${buttonStyle}
border-radius: 0.5rem; `
float: left;
padding: 14px 16px; const DisabledButton = styled.div`
text-decoration: none; ${buttonStyle}
transition: transform 0.1s linear;
color: grey; color: grey;
background-color: ${(props) => cursor: default;
theming.theme(props.theme.currentTheme, {
light: "#EEEEEE",
dark: "#202225",
})};
height: 1rem; &:hover {
width: 2rem; background-color: ${(props) =>
theming.theme(props.theme.currentTheme, {
line-height: 1rem; dark: "#202225",
text-align: center; light: "#EEEEEE",
user-select: none; })};
}
` `
const SeriesControlButtons = (props: { const SeriesControlButtons = (props: {
@ -62,31 +60,37 @@ const SeriesControlButtons = (props: {
nextURL?: string nextURL?: string
}) => { }) => {
return ( return (
<StyledContainer> <Container>
{props.prevURL ? ( {props.prevURL ? (
<StyledLink to={props.prevURL}> <Link to={props.prevURL}>
<FontAwesomeIcon icon={faArrowLeft} /> <Button>
</StyledLink> <FontAwesomeIcon icon={faArrowLeft} />
</Button>
</Link>
) : ( ) : (
<StyledDisabledLink> <DisabledButton>
<FontAwesomeIcon icon={faArrowLeft} /> <FontAwesomeIcon icon={faArrowLeft} />
</StyledDisabledLink> </DisabledButton>
)} )}
<StyledLink to={props.seriesHome}> <Link to={props.seriesHome}>
<FontAwesomeIcon icon={faListUl} /> <Button>
</StyledLink> <FontAwesomeIcon icon={faListUl} />
</Button>
</Link>
{props.nextURL ? ( {props.nextURL ? (
<StyledLink to={props.nextURL}> <Link to={props.nextURL}>
<FontAwesomeIcon icon={faArrowRight} /> <Button>
</StyledLink> <FontAwesomeIcon icon={faArrowRight} />
</Button>
</Link>
) : ( ) : (
<StyledDisabledLink> <DisabledButton>
<FontAwesomeIcon icon={faArrowRight} /> <FontAwesomeIcon icon={faArrowRight} />
</StyledDisabledLink> </DisabledButton>
)} )}
</StyledContainer> </Container>
) )
} }