Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

dependency and style updates

  • Loading branch information
cadejscroggins committed Aug 31, 2019
1 parent 61e0bc3 commit 2643dced91f6be36b65942b3b1950a4c6a2b07cd
@@ -22,9 +22,7 @@ module.exports = {
},
{
resolve: 'gatsby-plugin-google-fonts',
options: {
fonts: ['Lato:400,700,900'],
},
options: { fonts: ['Lato:400,700,900'] },
},
{
resolve: 'gatsby-plugin-manifest',
@@ -9,23 +9,26 @@
},
"dependencies": {
"classnames": "^2.2.6",
"gatsby": "^2.13.20",
"gatsby-plugin-google-analytics": "^2.1.4",
"eslint-plugin-flowtype": "^2.50.3",
"gatsby": "^2.15.1",
"gatsby-plugin-google-analytics": "^2.1.12",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-manifest": "^2.2.3",
"gatsby-plugin-react-helmet": "^3.1.2",
"gatsby-plugin-sass": "^2.1.3",
"gatsby-plugin-manifest": "^2.2.12",
"gatsby-plugin-react-helmet": "^3.1.5",
"gatsby-plugin-sass": "^2.1.12",
"knuth-shuffle": "^1.0.8",
"lodash": "^4.17.14",
"lodash": "^4.17.15",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-helmet": "^5.2.1",
"store": "^2.0.12",
"webpack": "^4.35.3"
"typescript": "^3.6.2",
"webpack": "^4.39.3"
},
"devDependencies": {
"eslint": "^6.3.0",
"prettier": "^1.18.2"
}
}
@@ -1,10 +1,13 @@
import React from 'react';
import bg from '../images/bg.jpg';
import cn from 'classnames';
import './Background.scss';

const Background = ({ hide }) => (
<img alt="" className={cn({ App_background: true, hide })} src={bg} />
const Background = ({ src, hide }) => (
<img
alt=""
className={cn({ App_background: true, hide })}
src="https://source.unsplash.com/collection/8541150"
/>
);

export default Background;
@@ -10,10 +10,14 @@
top: 0;
left: 0;
z-index: $z-neg;
transition: opacity $speed-slowest;
transition: opacity $speed-slow, transform $speed-normal;
opacity: 0.3;

&.hide {
opacity: 0;

@media (min-width: $break-lg) {
transform: translateX($player-width / -2);
}
}
}
@@ -8,12 +8,19 @@ const Footer = () => (
<a href="https://8tracks.com" rel="noopener noreferrer" target="_blank">
8tracks
</a>
&nbsp; &amp; &nbsp;
,{' '}
<a href="https://www.last.fm" rel="noopener noreferrer" target="_blank">
Last.fm
</a>{' '}
&amp;{' '}
<a
href="https://unsplash.com/collections/8541150/line-radio-background-images"
rel="noopener noreferrer"
target="_blank"
>
Unsplash
</a>
</span>
<span className="Footer_line" />
<span>
Source on &nbsp;
<a
@@ -4,12 +4,15 @@
.Footer {
@extend .fade_in;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 0 $padding-md $padding-lg;
font-size: 0.8rem;
line-height: 1.6rem;

@media (min-width: $break-md) {
flex-direction: row;
padding: 0 $padding-lg $padding-lg;
}

@@ -18,17 +21,6 @@
}

a {
color: $accent-primary;
text-decoration: underline;
}
}

.Footer_line {
@media (min-width: $break-md) {
position: relative;
top: 1px;
height: 1px;
width: 30vw;
background-color: $background-primary-darker;
}
}
@@ -17,7 +17,7 @@ const Header = props => (
<img alt="Line Radio" src={logo} />
</a>
</h1>
<h2>Streamlined Music Discovery</h2>
<h2>Streamlined music discovery.</h2>
<CurrentTags currentTags={props.currentTags} removeTag={props.removeTag} />
</header>
);
@@ -31,7 +31,6 @@

h2 {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;

@media (min-width: $break-md) {
@@ -54,12 +54,12 @@
justify-content: space-between;
align-items: center;
padding: $padding-xs;
background-color: $background-secondary-light;
background-color: $background-secondary;
border-radius: $border-radius $border-radius 0 0;
transition: background-color $speed-fast;

&:hover {
background-color: $background-secondary;
background-color: $background-secondary-light;
}
}

@@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
import cn from 'classnames';
import { callGa } from '../utilities/helpers';

export default class Suggestion extends React.PureComponent {
@@ -20,11 +21,14 @@ export default class Suggestion extends React.PureComponent {
};

render() {
const { suggestion } = this.props;
const { playerVisible, suggestion } = this.props;

return (
!!suggestion.length && (
<button onClick={this.handleSuggestionClick}>
<button
className={cn({ playerVisible })}
onClick={this.handleSuggestionClick}
>
{this.getSuggestionText()}
</button>
)
@@ -41,5 +41,13 @@
&:active {
transform: translateY(0);
}

&.playerVisible {
background-color: $background-secondary;

&:hover {
background-color: $background-secondary-light;
}
}
}
}
@@ -30,12 +30,14 @@
border-radius: 2rem;
background-color: $background-secondary;
box-shadow: $box-shadow-button;
transition: background-color $speed-fast;
color: $text-secondary;
font-size: 1.2rem;
font-weight: $font-weight-black;
line-height: $padding-md;

&:hover {
background-color: $background-secondary-light;
text-decoration: line-through;
cursor: pointer;
}
BIN -667 KB src/images/bg.jpg
Binary file not shown.
@@ -37,7 +37,7 @@ $speed-fast: 0.2s;
$speed-normal: 0.3s;
$speed-slow: 0.5s;
$speed-slower: 1s;
$speed-slowest: 1.5s;
$speed-slowest: 2s;
$translate-distance: 2px;

// boxes

0 comments on commit 2643dce

Please sign in to comment.
You can’t perform that action at this time.