Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-06 16:06:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: make style names shorter and more readable

Browse Source
This commit is contained in:
dfireBird
2020-10-01 21:54:48 +05:30
parent 0b35ea1a66
commit d3132de490
2 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PageNavigation/index.tsx
+16 -16
View File
@@ -13,33 +13,33 @@ interface IPageContentProps {
export const PageNavigation: FC<IPageContentProps> = ({ previous, next }) => { export const PageNavigation: FC<IPageContentProps> = ({ previous, next }) => {
return ( return (
<SC.PageNavigationContent> <SC.Content>
{previous ? ( {previous ? (
<SC.PageNavigationPageContent> <SC.PageContent>
<SC.PageNavigationText>Previous</SC.PageNavigationText> <SC.Text>Previous</SC.Text>
<SC.PageNavigationLink to={`/resources/${previous.relativePath}`}> <SC.NavLink to={`/resources/${previous.relativePath}`}>
<SC.PreviousArrow /> <SC.PreviousArrow />
<SC.PageNavigationPageTitle> <SC.PageTitle>
{previous.title} {previous.title}
</SC.PageNavigationPageTitle> </SC.PageTitle>
</SC.PageNavigationLink> </SC.NavLink>
</SC.PageNavigationPageContent> </SC.PageContent>
) : ( ) : (
<div> </div> <div> </div>
)} )}
{next ? ( {next ? (
<SC.PageNavigationPageContent> <SC.PageContent>
<SC.PageNavigationText>Next</SC.PageNavigationText> <SC.Text>Next</SC.Text>
<SC.PageNavigationLink to={`/resources/${next.relativePath}`}> <SC.NavLink to={`/resources/${next.relativePath}`}>
<SC.PageNavigationPageTitle> <SC.PageTitle>
{next.title} {next.title}
</SC.PageNavigationPageTitle> </SC.PageTitle>
<SC.NextArrow /> <SC.NextArrow />
</SC.PageNavigationLink> </SC.NavLink>
</SC.PageNavigationPageContent> </SC.PageContent>
) : ( ) : (
<div> </div> <div> </div>
)} )}
</SC.PageNavigationContent> </SC.Content>
) )
} }
src/components/PageNavigation/styles.tsx
+5 -5
View File
@@ -3,21 +3,21 @@ import { Link } from "gatsby"
import fontFamily from "../../design/typography" import fontFamily from "../../design/typography"
import ArrowRight from "../../icons/arrow-right.svg" import ArrowRight from "../../icons/arrow-right.svg"
export const PageNavigationContent = styled.div` export const Content = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-content: center; align-content: center;
} }
` `
export const PageNavigationText = styled.p` export const Text = styled.p`
font-family: ${fontFamily.body}; font-family: ${fontFamily.body};
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
margin: 0 19px 7px 17px; margin: 0 19px 7px 17px;
` `
export const PageNavigationLink = styled(Link)` export const NavLink = styled(Link)`
display: flex; display: flex;
text-decoration: none; text-decoration: none;
text-align: right; text-align: right;
@@ -33,7 +33,7 @@ export const PageNavigationLink = styled(Link)`
} }
` `
export const PageNavigationPageContent = styled.div` export const PageContent = styled.div`
width: 200px; width: 200px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -48,7 +48,7 @@ export const PageNavigationPageContent = styled.div`
} }
` `
export const PageNavigationPageTitle = styled(PageNavigationText)` export const PageTitle = styled(Text)`
margin: 0 10px; margin: 0 10px;
margin-bottom: 0; margin-bottom: 0;
background: -webkit-linear-gradient(91.81deg, #feaf6d 0%, #ff70a5 100%); background: -webkit-linear-gradient(91.81deg, #feaf6d 0%, #ff70a5 100%);