Consistent StyledComponents naming

12 · May 19, 2019 · b99091d · b99091d
1 parent 1456c37
commit b99091d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/src/Components/Line/index.jsx b/src/Components/Line/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Roundel from '../Roundel';
-import { LineStyle, Heading, Title, Details } from '../../Helpers/styles';
+import { LineStyled, HeadingStyled, TitleStyled, DetailsStyled } from '../../Helpers/styles';
 import {
   SPECIAL_SERVICE,
   CLOSED,
@@ -38,16 +38,16 @@ const Line = ({ line }) => {
   const description = ` ${article(statusSeverity)} ${statusSeverityDescription.toLowerCase()}`;
 
   return (
-    <LineStyle key={name} name={name}>
-      <Heading key={name} name={name}>
+    <LineStyled key={name} name={name}>
+      <HeadingStyled key={name} name={name}>
         <Roundel />
         <span>
-          <Title>{name}</Title>
+          <TitleStyled>{name}</TitleStyled>
           {description}
         </span>
-      </Heading>
-      {statusSeverity !== 10 ? <Details>{reason}</Details> : ''}
-    </LineStyle>
+      </HeadingStyled>
+      {statusSeverity !== 10 ? <DetailsStyled>{reason}</DetailsStyled> : ''}
+    </LineStyled>
   );
 };
 

diff --git a/src/Containers/App/index.jsx b/src/Containers/App/index.jsx
@@ -2,7 +2,7 @@ import React, { Fragment, useState, useEffect } from 'react';
 import Line from '../../Components/Line';
 import dataBroker from '../../Helpers/dataBroker';
 import sortData from '../../Helpers/sortData';
-import { Global, Wrapper } from '../../Helpers/styles';
+import { GlobalStyled, WrapperStyled } from '../../Helpers/styles';
 
 const endpoint =
   'https://api.tfl.gov.uk/line/mode/tube%2Cdlr%2Coverground%2Ctflrail%2Ctram%2Ccable-car/status';
@@ -25,12 +25,12 @@ const App = () => {
 
   return (
     <Fragment>
-      <Global />
-      <Wrapper>
+      <GlobalStyled />
+      <WrapperStyled>
         {lines.map(line => (
           <Line key={line.name} line={line} />
         ))}
-      </Wrapper>
+      </WrapperStyled>
     </Fragment>
   );
 };

diff --git a/src/Helpers/styles.js b/src/Helpers/styles.js
@@ -28,7 +28,7 @@ const lineBackgroundColour = ({ name }) => {
   return LINE_COLOURS[convertedName.toLowerCase()] || WHITE;
 };
 
-export const Global = createGlobalStyle`
+export const GlobalStyled = createGlobalStyle`
   @import url('https://fonts.googleapis.com/css?family=Poppins');
 
   body {
@@ -37,10 +37,17 @@ export const Global = createGlobalStyle`
     -moz-osx-font-smoothing: grayscale;
     font-feature-settings: none;
     font-family: 'Poppins', sans-serif;
+    font-size: 1rem;
+    line-height: 1.5rem;
+
+    @media only screen and (max-width: ${DEVICE_BREAKPOINT_PX}px) {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+    }
   }
 `;
 
-export const Wrapper = styled.div`
+export const WrapperStyled = styled.div`
   margin: 0 auto;
   width: 60%;
   display: flex;
@@ -52,10 +59,10 @@ export const Wrapper = styled.div`
   }
 `;
 
-export const LineStyle = styled.div`
+export const LineStyled = styled.div`
   width: 100%;
 `;
-export const Heading = styled.div`
+export const HeadingStyled = styled.div`
   padding: 10px;
   color: ${WHITE};
   height: 35px;
@@ -67,19 +74,17 @@ export const Heading = styled.div`
   background: ${props => lineBackgroundColour(props)};
 
   @media only screen and (max-width: ${DEVICE_BREAKPOINT_PX}px) {
-    span {
-      font-size: 0.875rem;
-    }
+    font-size: 0.875rem;
   }
 `;
 
-export const Title = styled.div`
+export const TitleStyled = styled.div`
   font-weight: 600;
   margin-left: 15px;
   display: inline-block;
 `;
 
-export const Details = styled.div`
+export const DetailsStyled = styled.div`
   background: ${WHITE};
   padding: 15px 10px;
 `;