Slim progress bar for mobile; production buildout

src/js/components/PlaybackControls.js

@@ -19,14 +19,11 @@ import { formatSimpleObject } from '../util/format';
 
 const PlaybackControls = () => {
   const [expanded, setExpanded] = useState();
-  const [transitionTrack, setTransitionTrack] = useState();
-  const [transitionDirection, setTransitionDirection] = useState();
-  const [touchMeta, setTouchMeta] = useState({});
 
-  const history = useHistory();
   const dispatch = useDispatch();
   const touch_enabled = useSelector((state) => state.ui.touch_enabled);
   const sidebar_open = useSelector((state) => state.ui.sidebar_open);
+  const slim_mode = useSelector((state) => state.ui.slim_mode);
   const volume = useSelector((state) => state.mopidy.volume);
   const mute = useSelector((state) => state.mopidy.mute);
   const time_position = useSelector((state) => state.mopidy.time_position);
@@ -147,7 +144,7 @@ const PlaybackControls = () => {
         <div className="time time--current">
           {time_position ? <Dater type="length" data={time_position} /> : '-'}
         </div>
-        <ProgressSlider />
+        <ProgressSlider size={slim_mode && 'small'} />
         <div className="time time--total">
           {currentTrack ? <Dater type="length" data={currentTrack.duration} /> : '-'}
         </div>

src/js/components/Sidebar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import Link from './Link';
 import Icon from './Icon';
 import Dropzones from './Fields/Dropzones';
@@ -65,8 +65,11 @@ const StatusIcon = () => {
 }
 
 const Sidebar = () => {
+  const dispatch = useDispatch();
   const spotify_available = useSelector((state) => state.spotify.access_token);
 
+  const close = () => dispatch(toggleSidebar(false));
+
   return (
     <aside className="sidebar">
       <div className="sidebar__liner">
@@ -146,7 +149,7 @@ const Sidebar = () => {
 
       <Dropzones />
 
-      <div className="close" onClick={() => dispatch(toggleSidebar(false))}>
+      <div className="close" onClick={close}>
         <Icon name="close" />
       </div>
 

src/scss/components/_playback-controls.scss

@@ -369,7 +369,7 @@
 
       &.progress {
         position: absolute;
-        top: -6px;
+        top: -3px;
         left: 0;
         right: 0;
 

src/scss/components/_sidebar.scss

@@ -147,14 +147,15 @@
   }
 
   .close {
+    @include click_feedback();
     display: none;
     position: absolute;
     bottom: 4px;
     right: 4px;
-    padding: 10px 8px;
+    padding: 10px;
     display: inline-block;
-    opacity: 0.5;
     z-index: 99;
+    font-size: 1.2rem;
 
     @include theme('light') {
       color: colour('darkest_grey');

src/scss/components/_slider.scss

@@ -34,12 +34,20 @@
 		}
 
 		&:focus + .slider__track {
-			.slider__track__progress:after {
-				width: 12px;
-				height: 12px;
-				top: -4px;
-				right: -6px;
-				background: lighten(colour('turquoise'), 10%);
+			.slider__track__progress {
+				&:after {
+					width: 12px;
+					height: 12px;
+					top: -4px;
+					right: -6px;
+					background: lighten(colour('turquoise'), 10%);
+				}
+				&--small:after {
+					width: 6px;
+					height: 6px;
+					top: -2px;
+					right: -3px;
+				}
 			}
 		}
 	}
@@ -113,6 +121,15 @@
 					right: -6px;
 					background: lighten(colour('turquoise'), 10%);
 				}
+
+				&--small {
+					&:after {
+						width: 10px;
+						height: 10px;
+						top: -4px;
+						right: -3px;
+					}
+				}
 			}
 		}
 	}