diff --git a/frontend/app/components/Session_/Autoplay/Autoplay.js b/frontend/app/components/Session_/Autoplay/Autoplay.js
index f3f4c1ca9..7c111b2ba 100644
--- a/frontend/app/components/Session_/Autoplay/Autoplay.js
+++ b/frontend/app/components/Session_/Autoplay/Autoplay.js
@@ -7,6 +7,7 @@ import { connectPlayer } from 'Player/store';
import { Controls as PlayerControls } from 'Player';
import { Tooltip } from 'react-tippy';
import cn from 'classnames';
+import { disabled } from '../Player/Controls/controlButton.css';
function Autoplay(props) {
const { previousId, nextId, autoplay } = props
@@ -34,12 +35,13 @@ function Autoplay(props) {
title="Play Previous Session"
disabled={!previousId}
className={cn(
- "p-1 bg-active-blue group rounded-full color-teal-light font-medium",
- previousId && 'cursor-pointer'
+ "p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium",
+ previousId && 'cursor-pointer',
+ !disabled && 'hover:bg-bg-blue'
)}
>
-
+
@@ -51,12 +53,13 @@ function Autoplay(props) {
title="Play Next Session"
disabled={!nextId}
className={cn(
- "p-1 bg-active-blue group ml-1 rounded-full color-teal-light font-medium",
- nextId && 'cursor-pointer'
+ "p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium",
+ nextId && 'cursor-pointer',
+ !disabled && 'hover:bg-bg-blue'
)}
>
-
+
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js
index 0c0eb28e2..f59a2b887 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.js
+++ b/frontend/app/components/Session_/Player/Controls/Controls.js
@@ -492,7 +492,7 @@ export default class Controls extends React.Component {
{this.controlIcon("arrows-angle-extend", 18, this.props.fullscreenOn, false, "rounded hover:bg-gray-light-shade color-gray-medium")}
diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js
index d1036084e..c6562f49e 100644
--- a/frontend/app/components/Session_/Player/Controls/Timeline.js
+++ b/frontend/app/components/Session_/Player/Controls/Timeline.js
@@ -146,8 +146,8 @@ export default class Timeline extends React.PureComponent {
return (
}
>
-
+
))
@@ -222,7 +222,7 @@ export default class Timeline extends React.PureComponent {
}
>
-
+
))}
@@ -244,7 +244,7 @@ export default class Timeline extends React.PureComponent {
}
>
-
+
}
@@ -267,7 +267,7 @@ export default class Timeline extends React.PureComponent {
}
>
-
+
))
@@ -295,7 +295,7 @@ export default class Timeline extends React.PureComponent {
}
>
-
+
))
diff --git a/frontend/app/components/Session_/Player/Controls/timeline.module.css b/frontend/app/components/Session_/Player/Controls/timeline.module.css
index 1180b6849..2493d4388 100644
--- a/frontend/app/components/Session_/Player/Controls/timeline.module.css
+++ b/frontend/app/components/Session_/Player/Controls/timeline.module.css
@@ -114,8 +114,7 @@
left: 0;
right: 0;
height: 10px;
- border-top: 1px solid $gray-light;
- border-bottom: 1px solid $gray-light;
+ border: 1px solid $gray-light;
display: flex;
align-items: center;
}
diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js
index d8db7a819..4b5006338 100644
--- a/frontend/app/components/Session_/Player/Player.js
+++ b/frontend/app/components/Session_/Player/Player.js
@@ -91,7 +91,7 @@ export default class Player extends React.PureComponent {
const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw'
return (
{fullscreen &&
}
diff --git a/frontend/app/components/Session_/PlayerBlock.js b/frontend/app/components/Session_/PlayerBlock.js
index 0dc636856..9d405650e 100644
--- a/frontend/app/components/Session_/PlayerBlock.js
+++ b/frontend/app/components/Session_/PlayerBlock.js
@@ -30,11 +30,11 @@ export default class PlayerBlock extends React.PureComponent {
return (