Update Track Row

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' />
 }
 

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;
+}

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);
 }

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 (
     <>
-      <Comment.Action className='remove-track' onClick={show}>
-        Remove
-      </Comment.Action>
+      <button className='clearButton' onClick={show}>
+        <ClearIcon />
+      </button>
       <Confirm
         content={`Are you sure you want to remove: ${props.name}`}
         cancelButton='No thanks'

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;
+  }
+}

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