Skip to content

Commit

Permalink
fix: fix global styling errors (#5)
Browse files Browse the repository at this point in the history
  • Loading branch information
@BradenM
BradenM committed Jan 4, 2020
1 parent ebf9dfc commit 841a9bc
Show file tree
Hide file tree
Showing 12 changed files with 160 additions and 91 deletions.
11 changes: 11 additions & 0 deletions app/app.js
View file
Expand Up @@ -29,6 +29,17 @@ import LanguageProvider from 'containers/LanguageProvider';
/* eslint-disable import/no-unresolved, import/extensions */
import '!file-loader?name=[name].[ext]!./images/favicon.ico';
import 'file-loader?name=.htaccess!./.htaccess';
/*
* app fonts
* jest requires 'index.css' for import to be mocked.
* see @ https://github.com/facebook/jest/issues/8988
*/
import 'typeface-montserrat/index.css';
import 'typeface-poppins/index.css';
import 'typeface-roboto/index.css';
// styles
import 'style/custom.scss';
import 'style/global.scss';
/* eslint-enable import/no-unresolved, import/extensions */

import configureStore from './configureStore';
Expand Down
1 change: 1 addition & 0 deletions app/components/atoms/Anicon/index.js
View file
Expand Up @@ -17,6 +17,7 @@ const HoverContainer = styled.div`
justify-content: center;
align-items: center;
text-align: center;
background-color: transparent;
`;

const Anicon = ({ name, loop, rotate, hoverable, moveTo, ...props }) => {
Expand Down
2 changes: 1 addition & 1 deletion app/components/atoms/Anicon/tests/__snapshots__/index.test.js.snap
View file
Expand Up @@ -2,7 +2,7 @@

exports[`<Anicon /> Should render and match the snapshot 1`] = `
<div
class="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
class="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
>
<div
style="width: 100%; height: 100%; transform: rotate(0deg); cursor: pointer;"
Expand Down
1 change: 1 addition & 0 deletions app/components/molecules/FeaturedProduct/index.js
View file
Expand Up @@ -24,6 +24,7 @@ const StyledCard = styled(Card)`
text-align: center;
cursor: pointer;
max-width: 12rem;
background-color: transparent;
${StyledTitle},
${StyledImg} {
Expand Down
1 change: 1 addition & 0 deletions app/components/molecules/IconGroup/index.js
View file
Expand Up @@ -13,6 +13,7 @@ import styled from 'styled-components';
const BorderlessItem = styled(ListGroup.Item)`
border: 0;
padding: 0 0.3em 0 0.3em;
background-color: transparent;
`;

const IconGroup = ({ children, containerClass, ...props }) => (
Expand Down
4 changes: 2 additions & 2 deletions app/components/molecules/IconGroup/tests/__snapshots__/index.test.js.snap
View file
Expand Up @@ -5,7 +5,7 @@ exports[`<IconGroup /> Should render and match the snapshot 1`] = `
class="border-0 list-group list-group-horizontal"
>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div>
<div>
Expand All @@ -17,7 +17,7 @@ exports[`<IconGroup /> Should render and match the snapshot 1`] = `
</div>
</div>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div>
<div>
Expand Down
14 changes: 7 additions & 7 deletions app/components/organisms/Header/tests/__snapshots__/index.test.js.snap
View file
Expand Up @@ -14,7 +14,7 @@ exports[`<Header /> Should render and match the snapshot 1`] = `
class="border-0 list-group list-group-horizontal"
>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div
class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
Expand All @@ -30,7 +30,7 @@ exports[`<Header /> Should render and match the snapshot 1`] = `
</div>
</div>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div
class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
Expand All @@ -46,7 +46,7 @@ exports[`<Header /> Should render and match the snapshot 1`] = `
</div>
</div>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div
class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
Expand All @@ -70,13 +70,13 @@ exports[`<Header /> Should render and match the snapshot 1`] = `
class="border-0 list-group list-group-horizontal"
>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div
class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
>
<div
class="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
class="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
>
<div
style="width: 40px; height: 100%; transform: rotate(90deg); cursor: pointer;"
Expand All @@ -85,13 +85,13 @@ exports[`<Header /> Should render and match the snapshot 1`] = `
</div>
</div>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div
class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
>
<div
class="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
class="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
>
<div
style="width: 40px; height: 100%; transform: rotate(0deg); cursor: pointer;"
Expand Down
14 changes: 7 additions & 7 deletions app/components/templates/HomeLayout/tests/__snapshots__/index.test.js.snap
View file
Expand Up @@ -38,7 +38,7 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
class="border-0 list-group list-group-horizontal"
>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div
class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
Expand All @@ -54,7 +54,7 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
</div>
</div>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div
class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
Expand All @@ -70,7 +70,7 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
</div>
</div>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div
class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
Expand All @@ -94,13 +94,13 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
class="border-0 list-group list-group-horizontal"
>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div
class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
>
<div
class="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
class="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
>
<div
style="width: 40px; height: 100%; transform: rotate(90deg); cursor: pointer;"
Expand All @@ -109,13 +109,13 @@ exports[`<HomeLayout /> Should render and match the snapshot 1`] = `
</div>
</div>
<div
class="IconGroup__BorderlessItem-sc-1br5l8c-0 igufRO list-group-item"
class="IconGroup__BorderlessItem-sc-1br5l8c-0 gWwTrs list-group-item"
>
<div
class="IconButton__IconContainer-pjjsvs-0 bKDZXR"
>
<div
class="Anicon__HoverContainer-sc-119yqeq-0 iCLpQU anicon-container"
class="Anicon__HoverContainer-sc-119yqeq-0 iityHb anicon-container"
>
<div
style="width: 40px; height: 100%; transform: rotate(0deg); cursor: pointer;"
Expand Down
15 changes: 6 additions & 9 deletions app/containers/App/index.js
View file
Expand Up @@ -7,23 +7,20 @@
*
*/

import HomePage from 'pages/HomePage/loadable';
import NotFoundPage from 'containers/NotFoundPage/Loadable';
import HomePage from 'pages/HomePage/loadable';
import React from 'react';
import Container from 'react-bootstrap/Container';
import { Route, Switch } from 'react-router-dom';
import GlobalStyle from '../../global-styles';

export default function App() {
return (
<>
<Container>
<Switch>
<Route exact path="/" component={HomePage} />
<Route component={NotFoundPage} />
</Switch>
<GlobalStyle />
</Container>
<Switch>
<Route exact path="/" component={HomePage} />
<Route component={NotFoundPage} />
</Switch>
<GlobalStyle />
</>
);
}
26 changes: 11 additions & 15 deletions app/containers/App/tests/__snapshots__/index.test.js.snap
View file
Expand Up @@ -2,20 +2,16 @@

exports[`<App /> should render and match the snapshot 1`] = `
<React.Fragment>
<ForwardRef
fluid={false}
>
<Switch>
<Route
component={[Function]}
exact={true}
path="/"
/>
<Route
component={[Function]}
/>
</Switch>
<GlobalStyleComponent />
</ForwardRef>
<Switch>
<Route
component={[Function]}
exact={true}
path="/"
/>
<Route
component={[Function]}
/>
</Switch>
<GlobalStyleComponent />
</React.Fragment>
`;
62 changes: 62 additions & 0 deletions app/style/global.scss
View file
@@ -0,0 +1,62 @@
// Global Styles

html,
body {
height: 100%;
width: 100%;
}

body {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

#app {
background-color: #fafafa;
min-height: 100%;
min-width: 100%;
}

p,
label {
font-family: 'Poppins', Georgia, Times, 'Times New Roman', serif;
line-height: 1.5em;
}

@media (max-width: 1200px) {
legend {
font-size: calc(1.275rem + 0.3vw);
}
h1,
.h1 {
font-size: calc(1.375rem + 1.5vw);
}
h2,
.h2 {
font-size: calc(1.325rem + 0.9vw);
}
h3,
.h3 {
font-size: calc(1.3rem + 0.6vw);
}
h4,
.h4 {
font-size: calc(1.275rem + 0.3vw);
}
.display-1 {
font-size: calc(1.725rem + 5.7vw);
}
.display-2 {
font-size: calc(1.675rem + 5.1vw);
}
.display-3 {
font-size: calc(1.575rem + 3.9vw);
}
.display-4 {
font-size: calc(1.475rem + 2.7vw);
}
.close {
font-size: calc(1.275rem + 0.3vw);
}
}

0 comments on commit 841a9bc

Please sign in to comment.