diff --git a/frontend/src/components/added-by/index.css b/frontend/src/components/added-by/index.css deleted file mode 100644 index 98f0d0cd..00000000 --- a/frontend/src/components/added-by/index.css +++ /dev/null @@ -1,18 +0,0 @@ -.ui.card .ui.avatar.added_by_avatar_image, -.ui.avatar.added_by_avatar_image { - width: 16px; - height: 16px; -} - -.ui.list.added-by-list { - font-size: 12px; - max-height: 300px; - overflow-y: scroll; - padding-right: 10px; -} -.ui.list.added-by-list::-webkit-scrollbar-track { - background: transparent; -} -.ui.list.added-by-list::-webkit-scrollbar { - width: 6px; -} diff --git a/frontend/src/components/added-by/index.js b/frontend/src/components/added-by/index.js index 5b75077e..527c2129 100644 --- a/frontend/src/components/added-by/index.js +++ b/frontend/src/components/added-by/index.js @@ -1,31 +1,34 @@ import React from 'react' import PropTypes from 'prop-types' -import { List, Popup, Icon, Image } from 'semantic-ui-react' +import { Popup, Icon } from 'semantic-ui-react' import dateFormat from 'dateformat' -import './index.css' +import './index.scss' const addedByContent = users => ( - + ) -const userPicture = data => { +const userPicture = (data, size = 'default') => { if (data && data.user && data.user.picture) - return + return ( + {data.user.fullname} + ) + return } diff --git a/frontend/src/components/added-by/index.scss b/frontend/src/components/added-by/index.scss new file mode 100644 index 00000000..628e3d30 --- /dev/null +++ b/frontend/src/components/added-by/index.scss @@ -0,0 +1,44 @@ +.addedByList { + font-size: 1.2rem; + max-height: 300px; + overflow-y: scroll; + padding: 0 1rem; + list-style-type: none; + + &::-webkit-scrollbar-track { + background: transparent; + } + &::-webkit-scrollbar { + width: 6px; + } +} + +.addedByList__item { + display: flex; + flex-direction: row; + align-content: center; + list-style-type: none; + line-height: 1.6rem; + font-weight: 500; + margin-bottom: 0.5rem; + + &:last-child { + margin: 0; + } +} +.addedByList__image { + margin: 0 1rem 0 0; +} + +.userIcon { + display: block; + border-radius: 50%; +} +.userIcon--defaultSize { + width: 3rem; + height: 3rem; +} +.userIcon--smallSize { + width: 1.6rem; + height: 1.6rem; +} diff --git a/frontend/src/components/controls/index.css b/frontend/src/components/controls/index.css index 065beeda..cecb8e38 100644 --- a/frontend/src/components/controls/index.css +++ b/frontend/src/components/controls/index.css @@ -1,5 +1,5 @@ .c-controls__wrapper { - width: 150px; + width: 15rem; display: flex; justify-content: space-between; } @@ -18,13 +18,13 @@ display: block; width: auto; margin: 0; - color: #181b22; + color: var(--iconDefault); transition: color 0.3s; } .c-controls__button--skip i.icon { - color: #dedee0; + color: var(--iconSecondary); } .c-controls__button--skip:hover i.icon { - color: #181b22; + color: var(--iconDefault); } diff --git a/frontend/src/components/remove-track/index.js b/frontend/src/components/remove-track/index.js index 10748d61..a833b06f 100644 --- a/frontend/src/components/remove-track/index.js +++ b/frontend/src/components/remove-track/index.js @@ -1,6 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' -import { Comment, Confirm } from 'semantic-ui-react' +import { Confirm } from 'semantic-ui-react' +import ClearIcon from '../svg/ClearIcon' +import './styles.scss' const RemoveTrack = props => { const [open, setOpen] = React.useState(false) @@ -13,9 +15,9 @@ const RemoveTrack = props => { return ( <> - - Remove - + svg { + display: block; + fill: #dee2e5; + transition: fill 0.3s; + } + &:hover > svg { + fill: red; + } +} diff --git a/frontend/src/components/svg/ClearIcon.js b/frontend/src/components/svg/ClearIcon.js new file mode 100644 index 00000000..a5ced5d5 --- /dev/null +++ b/frontend/src/components/svg/ClearIcon.js @@ -0,0 +1,15 @@ +import React from 'react' + +const ClearIcon = ({ width = '20', height = '20' }) => { + return ( + + + + + ) +} + +export default ClearIcon diff --git a/frontend/src/components/tracklist/index.css b/frontend/src/components/tracklist/index.css deleted file mode 100644 index 5a22cbdf..00000000 --- a/frontend/src/components/tracklist/index.css +++ /dev/null @@ -1,47 +0,0 @@ -.ui.comments .comment { - margin-bottom: 25px; -} - -.ui.comments .comment .author { - font-size: 1.1em; - margin-bottom: 2px; -} - -.ui.list>.item .remove-image { - cursor: pointer; -} - -.ui.comments .comment .avatar { - width: 70px; - margin: 0 1em 0 0; -} - -.comment .avatar .small img { - width: 110px; -} - -.ui.comments .comment.current-track { - background-color: #f7f7f7; - padding-bottom: .5em; - padding: 1em; -} - -.ui.comments .ui.avatar.image.added_by_avatar_image { - width: 20px; - height: 20px; - position: relative; - top: 6px; -} - -.ui.label.track-label { - margin-right: 8px; -} - -.rating-container .vote-track-label { - float: right; -} - -.track-search-link { - cursor: pointer; - color: #555; -} diff --git a/frontend/src/components/tracklist/index.js b/frontend/src/components/tracklist/index.js index 60e4ff3d..eacd0135 100644 --- a/frontend/src/components/tracklist/index.js +++ b/frontend/src/components/tracklist/index.js @@ -1,45 +1,33 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import { Comment, Label, Item } from 'semantic-ui-react' import { millisToMinutesAndSeconds } from 'utils/time' import defaultImage from 'components/current-track/default-artwork.png' import AddedBy from 'components/added-by' import VotedBy from 'components/voted-by' import RemoveTrack from 'components/remove-track' -import './index.css' +import './index.scss' -const TrackImage = props => ( - -) - -const ImageChooser = props => { +const TrackImage = props => { const image = props.image ? props.image : defaultImage - return + return ( +
+ {props.alt} +
+ ) } -const TrackHeading = props => {props.name} - -const TrackDescription = props => ( - - - {props.artistName} - {' '} - ({millisToMinutesAndSeconds(props.trackLength)}) - -) - const CurrentVote = props => { if (!props.metrics) return null const show = props.metrics.votes > 0 if (!show) return null - return ( - - - - ) + return } const ActionRemove = props => { @@ -55,24 +43,6 @@ const ActionRemove = props => { ) } -const CurrentPlays = props => { - let basic = true - let color = 'grey' - if (!props.metrics) return null - if (props.metrics.plays > 0) { - basic = false - color = null - } - - return ( - - - - ) -} - const ListItems = props => { let beenPlayed = false const isCurrentTrack = (current, uri) => current && current.uri === uri @@ -83,10 +53,41 @@ const ListItems = props => { if (isCurrent) beenPlayed = beenPlayed || true return ( - - - - +
+
+ +
+
+ {track.name} +
+
+ {track.artist.name} +
+
+ {millisToMinutesAndSeconds(track.length)} +
+
+ {track.metrics.plays} Plays +
+
+ +
+
+ +
+
+ +
+ {/* { - - - - + */} +
) }) } @@ -118,15 +111,13 @@ const Tracklist = props => { } return ( - - - + ) } diff --git a/frontend/src/components/tracklist/index.scss b/frontend/src/components/tracklist/index.scss new file mode 100644 index 00000000..0b806354 --- /dev/null +++ b/frontend/src/components/tracklist/index.scss @@ -0,0 +1,42 @@ +.trackRow { + display: grid; + grid-template-columns: 10rem 3fr 3fr 1fr 1fr 1fr 4rem 4rem; + align-items: center; + padding: 2.5rem 0; +} + +.trackCell--title, +.trackCell--artist { + display: flex; + overflow: hidden; + padding-right: 2rem; +} + +.trackCell__text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.trackCell--clear { + display: flex; + justify-content: flex-end; +} + +.trackRow:not(.trackRow--current) .trackCell__text { + color: var(--grey); +} + +.trackImage { + width: 6.4rem; + height: 6.4rem; + object-fit: cover; + + &--current { + box-shadow: 0 0 4px #191b23; + } +} + +.trackImage__wrapper { + margin: 0 3rem 0 0; +} diff --git a/frontend/src/components/volume-buttons/index.js b/frontend/src/components/volume-buttons/index.js index 9620c638..078bfd99 100644 --- a/frontend/src/components/volume-buttons/index.js +++ b/frontend/src/components/volume-buttons/index.js @@ -31,6 +31,7 @@ const VolumeDownButton = props => ( className='jb-volume-down' onClick={volumeDown(props.volume, props.onChange)} disabled={props.disabled} + size='huge' > @@ -41,6 +42,7 @@ const VolumeUpButton = props => ( className='jb-volume-up' onClick={volumeUp(props.volume, props.onChange)} disabled={props.disabled} + size='huge' > diff --git a/frontend/src/dashboard/index.js b/frontend/src/dashboard/index.js index ba8683e2..249a4c8d 100644 --- a/frontend/src/dashboard/index.js +++ b/frontend/src/dashboard/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { Dimmer, Divider, Grid, Header, Container } from 'semantic-ui-react' +import { Dimmer, Divider, Header } from 'semantic-ui-react' import Controls from 'components/controls' import DragInTrack from 'components/drag-in-track' import CurrentTrackContainer from 'containers/current-track-container' @@ -9,7 +9,7 @@ import SearchButton from 'search/components/button' import VolumeButtons from 'components/volume-buttons' import ClearPlaylist from 'components/clear-playlist' import SearchContainer from 'search' -import './index.css' +import './index.scss' const Dashboard = props => { const { @@ -34,7 +34,7 @@ const Dashboard = props => { - +
@@ -46,28 +46,26 @@ const Dashboard = props => { onNext={onNext} onPrevious={onPrevious} /> - +
- - - -
Current Track
- - - -
- Playlist -
- - - - +
+ +
+
+ Playlist +
+ +
+
diff --git a/frontend/src/dashboard/index.css b/frontend/src/dashboard/index.scss similarity index 56% rename from frontend/src/dashboard/index.css rename to frontend/src/dashboard/index.scss index 44a11764..8122a6be 100644 --- a/frontend/src/dashboard/index.css +++ b/frontend/src/dashboard/index.scss @@ -6,12 +6,8 @@ margin-right: 1em; } -.body-wrapper { +.jukeboxWrapper { + display: grid; + grid-template-columns: 400px 1fr; padding: 10px 20px 20px; } - -.dashboard-grid { - display: 'flex'; - min-height: 100vh; - flex-flow: 'column nowrap'; -} diff --git a/frontend/src/styles/_colors.scss b/frontend/src/styles/_colors.scss new file mode 100644 index 00000000..a32babed --- /dev/null +++ b/frontend/src/styles/_colors.scss @@ -0,0 +1,11 @@ +:root { + --black: #191b23; + --grey: rgba(100, 103, 113, 0.5); + --disabled: rgba(25, 27, 35, 0.15); + + --textDefault: var(--black); + --textSecondary: var(--grey); + + --iconDefault: var(--black); + --iconSecondary: var(--disabled); +} diff --git a/frontend/src/styles/_reset.scss b/frontend/src/styles/_reset.scss index 8c690fae..b021d0f4 100644 --- a/frontend/src/styles/_reset.scss +++ b/frontend/src/styles/_reset.scss @@ -3,4 +3,16 @@ body { margin: 0; padding: 0; font-family: 'Biotif', sans-serif; + color: var(--textDefault); +} + +html { + font-size: 62.5%; +} + +body { + font-family: 'Biotif', sans-serif; + color: var(--textDefault); + font-size: 1.5rem; + font-weight: 400; } diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index f24df9d8..4862bf2e 100644 --- a/frontend/src/styles/index.scss +++ b/frontend/src/styles/index.scss @@ -1,2 +1,3 @@ +@import './colors'; @import './fonts'; @import './reset';