From 3987709f97d54b9e6a2d304778b8d9e11aa212bc Mon Sep 17 00:00:00 2001
From: dquilter <david@kyan.com>
Date: Tue, 10 May 2022 16:31:19 +0100
Subject: [PATCH 01/10] Break the Track Row

---
 frontend/src/components/tracklist/index.js    | 81 +++++++++++--------
 .../tracklist/{index.css => index.scss}       | 30 +++++--
 2 files changed, 73 insertions(+), 38 deletions(-)
 rename frontend/src/components/tracklist/{index.css => index.scss} (61%)

diff --git a/frontend/src/components/tracklist/index.js b/frontend/src/components/tracklist/index.js
index 60e4ff3d..e9a577ab 100644
--- a/frontend/src/components/tracklist/index.js
+++ b/frontend/src/components/tracklist/index.js
@@ -7,20 +7,20 @@ 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 => (
-  <Comment.Avatar className={props.isCurrent ? 'current-image' : null} src={props.src} />
-)
-
-const ImageChooser = props => {
+const TrackImage = props => {
   const image = props.image ? props.image : defaultImage
 
-  return <TrackImage src={image} isCurrent={props.isCurrent} />
+  return (
+    <img
+      src={image}
+      className={classnames('trackImage', { 'trackImage--current': props.isCurrent })}
+      alt={props.alt}
+    />
+  )
 }
 
-const TrackHeading = props => <Comment.Author>{props.name}</Comment.Author>
-
 const TrackDescription = props => (
   <Comment.Text>
     <Item as='a' className='track-search-link' onClick={props.onClick}>
@@ -83,10 +83,37 @@ const ListItems = props => {
     if (isCurrent) beenPlayed = beenPlayed || true
 
     return (
-      <Comment className={classnames({ 'current-track': isCurrent })} key={`${i}${track.uri}`}>
-        <ImageChooser image={track.image} isCurrent={isCurrent} />
-        <Comment.Content className={classnames({ 'track-info': !beenPlayed })}>
-          <TrackHeading name={track.name} />
+      <div
+        className={classnames('trackRow', { 'trackRow--current': isCurrent })}
+        key={`${i}${track.uri}`}
+      >
+        <div className='trackCell__title'>
+          <TrackImage image={track.image} alt={track.name} isCurrent={isCurrent} />
+          <p>{track.name}</p>
+        </div>
+        <div>
+          <p>{track.artist.name}</p>
+        </div>
+        <div>
+          <p>{track.length}</p>
+        </div>
+        <div>
+          <p>Plays</p>
+        </div>
+        <div></div>
+        <div>
+          <AddedBy users={addedBy} />
+        </div>
+        <div>
+          <ActionRemove
+            uri={track.uri}
+            name={track.name}
+            disabled={props.disabled}
+            isCurrent={isCurrent}
+            onClick={props.onRemove}
+          />
+        </div>
+        {/* <Comment.Content className={classnames({ 'track-info': !beenPlayed })}>
           <TrackDescription
             artistName={track.artist.name}
             trackLength={track.length}
@@ -96,18 +123,10 @@ const ListItems = props => {
             <CurrentVote metrics={track.metrics} />
             <CurrentPlays metrics={track.metrics} />
             <Comment.Action>
-              <AddedBy users={addedBy} />
             </Comment.Action>
-            <ActionRemove
-              uri={track.uri}
-              name={track.name}
-              disabled={props.disabled}
-              isCurrent={isCurrent}
-              onClick={props.onRemove}
-            />
           </Comment.Actions>
-        </Comment.Content>
-      </Comment>
+        </Comment.Content> */}
+      </div>
     )
   })
 }
@@ -118,15 +137,13 @@ const Tracklist = props => {
   }
 
   return (
-    <Comment.Group size='small'>
-      <ListItems
-        disabled={props.disabled}
-        tracks={props.tracks}
-        current={props.currentTrack}
-        onRemove={props.onRemoveTrack}
-        onArtistSearch={props.onArtistSearch}
-      />
-    </Comment.Group>
+    <ListItems
+      disabled={props.disabled}
+      tracks={props.tracks}
+      current={props.currentTrack}
+      onRemove={props.onRemoveTrack}
+      onArtistSearch={props.onArtistSearch}
+    />
   )
 }
 
diff --git a/frontend/src/components/tracklist/index.css b/frontend/src/components/tracklist/index.scss
similarity index 61%
rename from frontend/src/components/tracklist/index.css
rename to frontend/src/components/tracklist/index.scss
index 5a22cbdf..30a9bd3e 100644
--- a/frontend/src/components/tracklist/index.css
+++ b/frontend/src/components/tracklist/index.scss
@@ -7,7 +7,7 @@
   margin-bottom: 2px;
 }
 
-.ui.list>.item .remove-image {
+.ui.list > .item .remove-image {
   cursor: pointer;
 }
 
@@ -16,13 +16,9 @@
   margin: 0 1em 0 0;
 }
 
-.comment .avatar .small img {
-  width: 110px;
-}
-
 .ui.comments .comment.current-track {
   background-color: #f7f7f7;
-  padding-bottom: .5em;
+  padding-bottom: 0.5em;
   padding: 1em;
 }
 
@@ -45,3 +41,25 @@
   cursor: pointer;
   color: #555;
 }
+
+.trackRow {
+  display: grid;
+  grid-template-columns: 3fr 2fr 1fr 1fr 1fr 1fr 1fr;
+  align-items: center;
+}
+
+.trackCell__title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.trackImage {
+  width: 64px;
+  height: 64px;
+  object-fit: cover;
+
+  &--current {
+    box-shadow: 0 0 4px #191b23;
+  }
+}

From c379136b7638794e4b8ae9b45763ace17d36eb58 Mon Sep 17 00:00:00 2001
From: dquilter <david@kyan.com>
Date: Tue, 10 May 2022 16:32:45 +0100
Subject: [PATCH 02/10] Remove Unused Styles

---
 frontend/src/components/tracklist/index.scss | 44 --------------------
 1 file changed, 44 deletions(-)

diff --git a/frontend/src/components/tracklist/index.scss b/frontend/src/components/tracklist/index.scss
index 30a9bd3e..3ce8abb7 100644
--- a/frontend/src/components/tracklist/index.scss
+++ b/frontend/src/components/tracklist/index.scss
@@ -1,47 +1,3 @@
-.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;
-}
-
-.ui.comments .comment.current-track {
-  background-color: #f7f7f7;
-  padding-bottom: 0.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;
-}
-
 .trackRow {
   display: grid;
   grid-template-columns: 3fr 2fr 1fr 1fr 1fr 1fr 1fr;

From 0325fde815921856d65a5e07e005785ccc7c4c09 Mon Sep 17 00:00:00 2001
From: dquilter <david@kyan.com>
Date: Tue, 10 May 2022 16:42:41 +0100
Subject: [PATCH 03/10] Remove Semantic-UI Grid

---
 frontend/src/dashboard/index.js               | 46 +++++++++----------
 .../src/dashboard/{index.css => index.scss}   | 10 ++--
 2 files changed, 25 insertions(+), 31 deletions(-)
 rename frontend/src/dashboard/{index.css => index.scss} (56%)

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 => {
     <Dimmer.Dimmable blurring dimmed={!online}>
       <DragInTrack disabled={disabled} onDrop={onDrop}>
         <SearchContainer>
-          <Container className='header-wrapper' fluid>
+          <div className='header-wrapper'>
             <Settings />
             <VolumeButtons disabled={disabled} onVolumeChange={onVolumeChange} />
             <SearchButton onClick={onSearchClick} disabled={disabled} />
@@ -46,28 +46,26 @@ const Dashboard = props => {
               onNext={onNext}
               onPrevious={onPrevious}
             />
-          </Container>
+          </div>
           <Divider />
-          <Container className='body-wrapper' fluid>
-            <Grid stackable columns={2} className='dashboard-grid'>
-              <Grid.Column width={4}>
-                <Header size='small'>Current Track</Header>
-                <CurrentTrackContainer />
-              </Grid.Column>
-              <Grid.Column width={8}>
-                <Header size='small'>
-                  Playlist <ClearPlaylist disabled={disabled} onClear={onTracklistClear} />
-                </Header>
-                <TrackList
-                  disabled={disabled}
-                  tracks={tracklist}
-                  currentTrack={currentTrack}
-                  onRemoveTrack={onRemoveTrack}
-                  onArtistSearch={onArtistSearch}
-                />
-              </Grid.Column>
-            </Grid>
-          </Container>
+          <div className='jukeboxWrapper'>
+            <aside>
+              <Header size='small'>Current Track</Header>
+              <CurrentTrackContainer />
+            </aside>
+            <section>
+              <Header size='small'>
+                Playlist <ClearPlaylist disabled={disabled} onClear={onTracklistClear} />
+              </Header>
+              <TrackList
+                disabled={disabled}
+                tracks={tracklist}
+                currentTrack={currentTrack}
+                onRemoveTrack={onRemoveTrack}
+                onArtistSearch={onArtistSearch}
+              />
+            </section>
+          </div>
         </SearchContainer>
       </DragInTrack>
     </Dimmer.Dimmable>
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';
-}

From dcb12d1d97533af6b0ee555996bf2029685ab099 Mon Sep 17 00:00:00 2001
From: dquilter <david@kyan.com>
Date: Wed, 11 May 2022 08:59:32 +0100
Subject: [PATCH 04/10] Spacing

---
 frontend/src/components/tracklist/index.js   | 33 +++++++-------------
 frontend/src/components/tracklist/index.scss |  5 +++
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/tracklist/index.js b/frontend/src/components/tracklist/index.js
index e9a577ab..3bc82221 100644
--- a/frontend/src/components/tracklist/index.js
+++ b/frontend/src/components/tracklist/index.js
@@ -13,33 +13,22 @@ const TrackImage = props => {
   const image = props.image ? props.image : defaultImage
 
   return (
-    <img
-      src={image}
-      className={classnames('trackImage', { 'trackImage--current': props.isCurrent })}
-      alt={props.alt}
-    />
+    <figure className='trackImage__wrapper'>
+      <img
+        src={image}
+        className={classnames('trackImage', { 'trackImage--current': props.isCurrent })}
+        alt={props.alt}
+      />
+    </figure>
   )
 }
 
-const TrackDescription = props => (
-  <Comment.Text>
-    <Item as='a' className='track-search-link' onClick={props.onClick}>
-      {props.artistName}
-    </Item>{' '}
-    <small>({millisToMinutesAndSeconds(props.trackLength)})</small>
-  </Comment.Text>
-)
-
 const CurrentVote = props => {
   if (!props.metrics) return null
   const show = props.metrics.votes > 0
   if (!show) return null
 
-  return (
-    <Comment.Action as='span'>
-      <VotedBy total={props.metrics.votesAverage} show={show} />
-    </Comment.Action>
-  )
+  return <VotedBy total={props.metrics.votesAverage} show={show} />
 }
 
 const ActionRemove = props => {
@@ -95,12 +84,14 @@ const ListItems = props => {
           <p>{track.artist.name}</p>
         </div>
         <div>
-          <p>{track.length}</p>
+          <p>{millisToMinutesAndSeconds(track.length)}</p>
         </div>
         <div>
           <p>Plays</p>
         </div>
-        <div></div>
+        <div>
+          <CurrentVote metrics={track.metrics} />
+        </div>
         <div>
           <AddedBy users={addedBy} />
         </div>
diff --git a/frontend/src/components/tracklist/index.scss b/frontend/src/components/tracklist/index.scss
index 3ce8abb7..88c6afc8 100644
--- a/frontend/src/components/tracklist/index.scss
+++ b/frontend/src/components/tracklist/index.scss
@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: 3fr 2fr 1fr 1fr 1fr 1fr 1fr;
   align-items: center;
+  padding: 25px 0;
 }
 
 .trackCell__title {
@@ -19,3 +20,7 @@
     box-shadow: 0 0 4px #191b23;
   }
 }
+
+.trackImage__wrapper {
+  margin-right: 30px;
+}

From a34a1d78029851441de538127e851c2ed78e13dc Mon Sep 17 00:00:00 2001
From: dquilter <david@kyan.com>
Date: Wed, 11 May 2022 09:11:12 +0100
Subject: [PATCH 05/10] Colors and REMs

---
 frontend/src/components/controls/index.css   |  8 ++++----
 frontend/src/components/tracklist/index.js   |  2 +-
 frontend/src/components/tracklist/index.scss |  8 ++++----
 frontend/src/styles/_colors.scss             | 10 ++++++++++
 frontend/src/styles/_reset.scss              |  5 +++++
 frontend/src/styles/index.scss               |  1 +
 6 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/styles/_colors.scss

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/tracklist/index.js b/frontend/src/components/tracklist/index.js
index 3bc82221..5d7cdaa4 100644
--- a/frontend/src/components/tracklist/index.js
+++ b/frontend/src/components/tracklist/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { Comment, Label, Item } from 'semantic-ui-react'
+import { Comment, Label } from 'semantic-ui-react'
 import { millisToMinutesAndSeconds } from 'utils/time'
 import defaultImage from 'components/current-track/default-artwork.png'
 import AddedBy from 'components/added-by'
diff --git a/frontend/src/components/tracklist/index.scss b/frontend/src/components/tracklist/index.scss
index 88c6afc8..562e2162 100644
--- a/frontend/src/components/tracklist/index.scss
+++ b/frontend/src/components/tracklist/index.scss
@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: 3fr 2fr 1fr 1fr 1fr 1fr 1fr;
   align-items: center;
-  padding: 25px 0;
+  padding: 2.5rem 0;
 }
 
 .trackCell__title {
@@ -12,8 +12,8 @@
 }
 
 .trackImage {
-  width: 64px;
-  height: 64px;
+  width: 6.4rem;
+  height: 6.4rem;
   object-fit: cover;
 
   &--current {
@@ -22,5 +22,5 @@
 }
 
 .trackImage__wrapper {
-  margin-right: 30px;
+  margin-right: 3rem;
 }
diff --git a/frontend/src/styles/_colors.scss b/frontend/src/styles/_colors.scss
new file mode 100644
index 00000000..05a43955
--- /dev/null
+++ b/frontend/src/styles/_colors.scss
@@ -0,0 +1,10 @@
+:root {
+  --black: #191b23;
+  --grey: rgba(25, 27, 35, 0.15);
+
+  --textDefault: var(--black);
+  --textSecondary: var(--grey);
+
+  --iconDefault: var(--black);
+  --iconSecondary: var(--grey);
+}
diff --git a/frontend/src/styles/_reset.scss b/frontend/src/styles/_reset.scss
index 8c690fae..b7dff756 100644
--- a/frontend/src/styles/_reset.scss
+++ b/frontend/src/styles/_reset.scss
@@ -3,4 +3,9 @@ body {
   margin: 0;
   padding: 0;
   font-family: 'Biotif', sans-serif;
+  color: var(--textDefault);
+}
+
+html {
+  font-size: 62.5%;
 }
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';

From 7a002411b5c399d3980208d57d8bf179ebb019db Mon Sep 17 00:00:00 2001
From: dquilter <david@kyan.com>
Date: Thu, 12 May 2022 09:38:35 +0100
Subject: [PATCH 06/10] Fonts and Tidy Track List

---
 frontend/src/components/remove-track/index.js |  6 +++---
 frontend/src/components/tracklist/index.js    | 21 +------------------
 frontend/src/components/tracklist/index.scss  |  2 +-
 .../src/components/volume-buttons/index.js    |  2 ++
 frontend/src/styles/_reset.scss               |  7 +++++++
 5 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/remove-track/index.js b/frontend/src/components/remove-track/index.js
index 10748d61..0f6f95a1 100644
--- a/frontend/src/components/remove-track/index.js
+++ b/frontend/src/components/remove-track/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Comment, Confirm } from 'semantic-ui-react'
+import { Confirm } from 'semantic-ui-react'
 
 const RemoveTrack = props => {
   const [open, setOpen] = React.useState(false)
@@ -13,9 +13,9 @@ const RemoveTrack = props => {
 
   return (
     <>
-      <Comment.Action className='remove-track' onClick={show}>
+      <button className='remove-track' onClick={show}>
         Remove
-      </Comment.Action>
+      </button>
       <Confirm
         content={`Are you sure you want to remove: ${props.name}`}
         cancelButton='No thanks'
diff --git a/frontend/src/components/tracklist/index.js b/frontend/src/components/tracklist/index.js
index 5d7cdaa4..c42ea204 100644
--- a/frontend/src/components/tracklist/index.js
+++ b/frontend/src/components/tracklist/index.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { Comment, Label } from 'semantic-ui-react'
 import { millisToMinutesAndSeconds } from 'utils/time'
 import defaultImage from 'components/current-track/default-artwork.png'
 import AddedBy from 'components/added-by'
@@ -28,7 +27,7 @@ const CurrentVote = props => {
   const show = props.metrics.votes > 0
   if (!show) return null
 
-  return <VotedBy total={props.metrics.votesAverage} show={show} />
+  return <VotedBy total={props.metrics.votesAverage} show={show} size='large' />
 }
 
 const ActionRemove = props => {
@@ -44,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 (
-    <Comment.Action as='span'>
-      <Label className='track-label' size='tiny' color={color} basic={basic}>
-        Played <Label.Detail>{props.metrics.plays}</Label.Detail>
-      </Label>
-    </Comment.Action>
-  )
-}
-
 const ListItems = props => {
   let beenPlayed = false
   const isCurrentTrack = (current, uri) => current && current.uri === uri
diff --git a/frontend/src/components/tracklist/index.scss b/frontend/src/components/tracklist/index.scss
index 562e2162..c2f3b5ab 100644
--- a/frontend/src/components/tracklist/index.scss
+++ b/frontend/src/components/tracklist/index.scss
@@ -22,5 +22,5 @@
 }
 
 .trackImage__wrapper {
-  margin-right: 3rem;
+  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'
   >
     <Icon name='volume down' />
   </Button>
@@ -41,6 +42,7 @@ const VolumeUpButton = props => (
     className='jb-volume-up'
     onClick={volumeUp(props.volume, props.onChange)}
     disabled={props.disabled}
+    size='huge'
   >
     <Icon name='volume up' />
   </Button>
diff --git a/frontend/src/styles/_reset.scss b/frontend/src/styles/_reset.scss
index b7dff756..e67b2353 100644
--- a/frontend/src/styles/_reset.scss
+++ b/frontend/src/styles/_reset.scss
@@ -9,3 +9,10 @@ body {
 html {
   font-size: 62.5%;
 }
+
+body {
+  font-family: 'Biotif', sans-serif;
+  color: var(--textDefault);
+  font-size: 1.6rem;
+  font-weight: 500;
+}

From df88d1e1f5356ff2b2380951f85d63c12e92dad2 Mon Sep 17 00:00:00 2001
From: dquilter <david@kyan.com>
Date: Thu, 12 May 2022 10:01:33 +0100
Subject: [PATCH 07/10] Text Overflow

---
 frontend/src/components/tracklist/index.js   | 10 ++++++----
 frontend/src/components/tracklist/index.scss | 15 +++++++++++----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/tracklist/index.js b/frontend/src/components/tracklist/index.js
index c42ea204..85733161 100644
--- a/frontend/src/components/tracklist/index.js
+++ b/frontend/src/components/tracklist/index.js
@@ -57,12 +57,14 @@ const ListItems = props => {
         className={classnames('trackRow', { 'trackRow--current': isCurrent })}
         key={`${i}${track.uri}`}
       >
-        <div className='trackCell__title'>
+        <div className='trackCell--image'>
           <TrackImage image={track.image} alt={track.name} isCurrent={isCurrent} />
-          <p>{track.name}</p>
         </div>
-        <div>
-          <p>{track.artist.name}</p>
+        <div className='trackCell--title'>
+          <span className='trackCell__text'>{track.name}</span>
+        </div>
+        <div className='trackCell--artist'>
+          <span className='trackCell__text'>{track.artist.name}</span>
         </div>
         <div>
           <p>{millisToMinutesAndSeconds(track.length)}</p>
diff --git a/frontend/src/components/tracklist/index.scss b/frontend/src/components/tracklist/index.scss
index c2f3b5ab..9ca47de8 100644
--- a/frontend/src/components/tracklist/index.scss
+++ b/frontend/src/components/tracklist/index.scss
@@ -1,14 +1,21 @@
 .trackRow {
   display: grid;
-  grid-template-columns: 3fr 2fr 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: 10rem 3fr 3fr 1fr 1fr 1fr 4rem 4rem;
   align-items: center;
   padding: 2.5rem 0;
 }
 
-.trackCell__title {
+.trackCell--title,
+.trackCell--artist {
   display: flex;
-  flex-direction: row;
-  align-items: center;
+  overflow: hidden;
+  padding-right: 2rem;
+}
+
+.trackCell__text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .trackImage {

From 699aa05890b71b84cbc913bbbaf7bc187607d836 Mon Sep 17 00:00:00 2001
From: dquilter <david@kyan.com>
Date: Thu, 12 May 2022 17:07:29 +0100
Subject: [PATCH 08/10] Active Styles

---
 frontend/src/components/tracklist/index.js   | 4 ++--
 frontend/src/components/tracklist/index.scss | 4 ++++
 frontend/src/styles/_colors.scss             | 5 +++--
 frontend/src/styles/_reset.scss              | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/tracklist/index.js b/frontend/src/components/tracklist/index.js
index 85733161..fd7159a0 100644
--- a/frontend/src/components/tracklist/index.js
+++ b/frontend/src/components/tracklist/index.js
@@ -67,10 +67,10 @@ const ListItems = props => {
           <span className='trackCell__text'>{track.artist.name}</span>
         </div>
         <div>
-          <p>{millisToMinutesAndSeconds(track.length)}</p>
+          <span className='trackCell__text'>{millisToMinutesAndSeconds(track.length)}</span>
         </div>
         <div>
-          <p>Plays</p>
+          <span className='trackCell__text'>{track.metrics.plays} Plays</span>
         </div>
         <div>
           <CurrentVote metrics={track.metrics} />
diff --git a/frontend/src/components/tracklist/index.scss b/frontend/src/components/tracklist/index.scss
index 9ca47de8..79a8a240 100644
--- a/frontend/src/components/tracklist/index.scss
+++ b/frontend/src/components/tracklist/index.scss
@@ -18,6 +18,10 @@
   text-overflow: ellipsis;
 }
 
+.trackRow:not(.trackRow--current) .trackCell__text {
+  color: var(--grey);
+}
+
 .trackImage {
   width: 6.4rem;
   height: 6.4rem;
diff --git a/frontend/src/styles/_colors.scss b/frontend/src/styles/_colors.scss
index 05a43955..a32babed 100644
--- a/frontend/src/styles/_colors.scss
+++ b/frontend/src/styles/_colors.scss
@@ -1,10 +1,11 @@
 :root {
   --black: #191b23;
-  --grey: rgba(25, 27, 35, 0.15);
+  --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(--grey);
+  --iconSecondary: var(--disabled);
 }
diff --git a/frontend/src/styles/_reset.scss b/frontend/src/styles/_reset.scss
index e67b2353..64a1a0fd 100644
--- a/frontend/src/styles/_reset.scss
+++ b/frontend/src/styles/_reset.scss
@@ -13,6 +13,6 @@ html {
 body {
   font-family: 'Biotif', sans-serif;
   color: var(--textDefault);
-  font-size: 1.6rem;
+  font-size: 1.5rem;
   font-weight: 500;
 }

From 5002b1bee838f12f169b55623ae404bb6571b9d5 Mon Sep 17 00:00:00 2001
From: dquilter <david@kyan.com>
Date: Fri, 13 May 2022 15:07:41 +0100
Subject: [PATCH 09/10] Refactors AddedBy

---
 frontend/src/components/added-by/index.css  | 18 ---------
 frontend/src/components/added-by/index.js   | 31 ++++++++-------
 frontend/src/components/added-by/index.scss | 44 +++++++++++++++++++++
 3 files changed, 61 insertions(+), 32 deletions(-)
 delete mode 100644 frontend/src/components/added-by/index.css
 create mode 100644 frontend/src/components/added-by/index.scss

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 => (
-  <List className='added-by-list'>
+  <ul className='addedByList'>
     {users.map((data, i) => {
       const fullName = data.user ? data.user.fullname : 'User unknown'
 
       return (
-        <List.Item key={i}>
-          {userPicture(data)}
-          <List.Content>
-            <List.Description>
-              <strong>{dateFormat(data.addedAt, 'dd mmm yyyy @ h:MM tt')}</strong> - {fullName}
-            </List.Description>
-          </List.Content>
-        </List.Item>
+        <li className='addedByList__item' key={i}>
+          <span className='addedByList__image'>{userPicture(data, 'small')}</span>
+          {dateFormat(data.addedAt, 'dd mmm yyyy @ h:MM tt')} - {fullName}
+        </li>
       )
     })}
-  </List>
+  </ul>
 )
 
-const userPicture = data => {
+const userPicture = (data, size = 'default') => {
   if (data && data.user && data.user.picture)
-    return <Image avatar className='added_by_avatar_image' src={data.user.picture} />
+    return (
+      <img
+        className={`userIcon userIcon--${size}Size`}
+        alt={data.user.fullname}
+        src={data.user.picture}
+      />
+    )
+
   return <Icon name='user' />
 }
 
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;
+}

From 46b028e8fb67de5617b742cd53d0d839e584914d Mon Sep 17 00:00:00 2001
From: dquilter <david@kyan.com>
Date: Mon, 16 May 2022 10:21:03 +0100
Subject: [PATCH 10/10] Clear Button

---
 frontend/src/components/remove-track/index.js    |  6 ++++--
 frontend/src/components/remove-track/styles.scss | 14 ++++++++++++++
 frontend/src/components/svg/ClearIcon.js         | 15 +++++++++++++++
 frontend/src/components/tracklist/index.js       |  2 +-
 frontend/src/components/tracklist/index.scss     |  5 +++++
 frontend/src/styles/_reset.scss                  |  2 +-
 6 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/remove-track/styles.scss
 create mode 100644 frontend/src/components/svg/ClearIcon.js

diff --git a/frontend/src/components/remove-track/index.js b/frontend/src/components/remove-track/index.js
index 0f6f95a1..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 { Confirm } from 'semantic-ui-react'
+import ClearIcon from '../svg/ClearIcon'
+import './styles.scss'
 
 const RemoveTrack = props => {
   const [open, setOpen] = React.useState(false)
@@ -13,8 +15,8 @@ const RemoveTrack = props => {
 
   return (
     <>
-      <button className='remove-track' onClick={show}>
-        Remove
+      <button className='clearButton' onClick={show}>
+        <ClearIcon />
       </button>
       <Confirm
         content={`Are you sure you want to remove: ${props.name}`}
diff --git a/frontend/src/components/remove-track/styles.scss b/frontend/src/components/remove-track/styles.scss
new file mode 100644
index 00000000..58c1df3e
--- /dev/null
+++ b/frontend/src/components/remove-track/styles.scss
@@ -0,0 +1,14 @@
+.clearButton {
+  border: none;
+  background: transparent;
+  padding: 0.5rem;
+
+  > 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 (
+    <svg width={width} height={height} viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+      <circle cx='10' cy='10' r='10' />
+      <path
+        d='M13.707 6.293 13 7l.707-.707Zm0 1.414L13 7l.707.707Zm-1.414-1.414L13 7l-.707-.707ZM10 8.586l-.707.707a1 1 0 0 0 1.414 0L10 8.586ZM7.707 6.293 7 7l.707-.707Zm-1.414 0L7 7l-.707-.707Zm0 1.414L7 7l-.707.707ZM8.586 10l.707.707a1 1 0 0 0 0-1.414L8.586 10Zm-2.293 2.293L7 13l-.707-.707Zm0 1.414L7 13l-.707.707Zm1.414 0L7 13l.707.707ZM10 11.414l.707-.707a1 1 0 0 0-1.414 0l.707.707Zm2.293 2.293L13 13l-.707.707Zm1.414 0L13 13l.707.707Zm0-1.414L13 13l.707-.707ZM11.414 10l-.707-.707a1 1 0 0 0 0 1.414l.707-.707ZM13 7l1.414 1.414a2 2 0 0 0 0-2.828L13 7Zm0 0 1.414-1.414a2 2 0 0 0-2.828 0L13 7Zm-2.293 2.293L13 7l-1.414-1.414-2.293 2.293 1.414 1.414ZM7 7l2.293 2.293 1.414-1.414-2.293-2.293L7 7Zm0 0 1.414-1.414a2 2 0 0 0-2.828 0L7 7Zm0 0L5.586 5.586a2 2 0 0 0 0 2.828L7 7Zm2.293 2.293L7 7 5.586 8.414l2.293 2.293 1.414-1.414ZM7 13l2.293-2.293-1.414-1.414-2.293 2.293L7 13Zm0 0-1.414-1.414a2 2 0 0 0 0 2.828L7 13Zm0 0-1.414 1.414a2 2 0 0 0 2.828 0L7 13Zm2.293-2.293L7 13l1.414 1.414 2.293-2.293-1.414-1.414ZM13 13l-2.293-2.293-1.414 1.414 2.293 2.293L13 13Zm0 0-1.414 1.414a2 2 0 0 0 2.828 0L13 13Zm0 0 1.414 1.414a2 2 0 0 0 0-2.828L13 13Zm-2.293-2.293L13 13l1.414-1.414-2.293-2.293-1.414 1.414ZM13 7l-2.293 2.293 1.414 1.414 2.293-2.293L13 7Z'
+        fill='#fff'
+      />
+    </svg>
+  )
+}
+
+export default ClearIcon
diff --git a/frontend/src/components/tracklist/index.js b/frontend/src/components/tracklist/index.js
index fd7159a0..eacd0135 100644
--- a/frontend/src/components/tracklist/index.js
+++ b/frontend/src/components/tracklist/index.js
@@ -78,7 +78,7 @@ const ListItems = props => {
         <div>
           <AddedBy users={addedBy} />
         </div>
-        <div>
+        <div className='trackCell--clear'>
           <ActionRemove
             uri={track.uri}
             name={track.name}
diff --git a/frontend/src/components/tracklist/index.scss b/frontend/src/components/tracklist/index.scss
index 79a8a240..0b806354 100644
--- a/frontend/src/components/tracklist/index.scss
+++ b/frontend/src/components/tracklist/index.scss
@@ -18,6 +18,11 @@
   text-overflow: ellipsis;
 }
 
+.trackCell--clear {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .trackRow:not(.trackRow--current) .trackCell__text {
   color: var(--grey);
 }
diff --git a/frontend/src/styles/_reset.scss b/frontend/src/styles/_reset.scss
index 64a1a0fd..b021d0f4 100644
--- a/frontend/src/styles/_reset.scss
+++ b/frontend/src/styles/_reset.scss
@@ -14,5 +14,5 @@ body {
   font-family: 'Biotif', sans-serif;
   color: var(--textDefault);
   font-size: 1.5rem;
-  font-weight: 500;
+  font-weight: 400;
 }