From 25132e54ee16b4ccc450c760845964ace286b0e5 Mon Sep 17 00:00:00 2001 From: Daniel Cho Date: Thu, 25 Nov 2021 14:57:37 -0500 Subject: [PATCH 1/2] C2LC-550: Clean up play control buttons' style --- src/App.scss | 2 +- src/PlayButton.js | 3 +- src/PlayButton.scss | 62 ++------ src/RefreshButton.js | 4 +- src/RefreshButton.scss | 25 ---- src/StopButton.js | 4 +- src/StopButton.scss | 41 ------ src/Themes.scss | 316 ++++++++++++----------------------------- src/index.scss | 36 +++++ src/svg/Pause.svg | 5 +- src/svg/Play.svg | 6 +- src/svg/Refresh.svg | 4 +- src/svg/Stop.svg | 2 +- 13 files changed, 146 insertions(+), 364 deletions(-) delete mode 100644 src/StopButton.scss diff --git a/src/App.scss b/src/App.scss index 6cb47aa5..d65d2799 100644 --- a/src/App.scss +++ b/src/App.scss @@ -209,7 +209,7 @@ body { .App__playButton-container { display: flex; - gap: 0.5rem; + gap: 1rem; } .App__playControlButton { diff --git a/src/PlayButton.js b/src/PlayButton.js index 01c8a8f6..50c450c7 100644 --- a/src/PlayButton.js +++ b/src/PlayButton.js @@ -21,6 +21,7 @@ class PlayButton extends React.Component { render() { const classes = classNames( this.props.className, + 'PlayControlButton', 'PlayButton', this.props.interpreterIsRunning && 'PlayButton--pause', !this.props.interpreterIsRunning && 'PlayButton--play' @@ -32,7 +33,7 @@ class PlayButton extends React.Component { this.props.intl.formatMessage({id:'PlayButton.pause'}) : this.props.intl.formatMessage({id:'PlayButton.play'})} className={classes} - disabledClassName='PlayButton--disabled' + disabledClassName='PlayButton--disabled PlayControlButton--disabled' disabled={this.props.disabled} onClick={this.props.onClick} > diff --git a/src/PlayButton.scss b/src/PlayButton.scss index 8f1afcde..ac2931a2 100644 --- a/src/PlayButton.scss +++ b/src/PlayButton.scss @@ -1,67 +1,21 @@ @import 'variables'; button.btn.PlayButton { + width: 3.5rem; + height: 3.5rem; margin-top: 0.5rem; margin-bottom: 0.5rem; - margin-right: 0.5rem; - border: none; + margin-right: 0; border-radius: 50%; - background-color: transparent; + border: 0; padding: 0; - padding-top: 0.05rem; - svg circle { + svg .playControls { fill: #1E1E1E; } - - svg path.triangle { - fill: #1E1E1E; - } -} - -button.btn.PlayButton:focus { - box-shadow: 0 0 0 $c2lc-focus-indicator-width #FFFFFF; -} - -button.btn.PlayButton:hover { - svg path.inner-circle { - fill: #F1AE5B; - } } button.btn.PlayButton svg { - height: 3.5rem; - width: 3.5rem; - - circle { - fill: #1E1E1E; - } -} - -button.btn.PlayButton--play.PlayButton--disabled { - background-color: inherit; - cursor: default; - - svg { - path.triangle { - fill: #67717E; - } - - circle { - fill: #9DA4AF; - } - - path.inner-circle { - fill: #B9BEC6; - } - } -} - -button.btn.PlayButton--play.PlayButton--disabled svg { - fill: $c2lc-disabled-foreground-color; -} - -button.btn.PlayButton--play.PlayButton--disabled:active:focus { - background-color: $c2lc-primary-button-color; - box-shadow: 0 0 0 $c2lc-focus-indicator-width $c2lc-focus-indicator-color; -} + height: 1.4rem; + width: 1.4rem; +} \ No newline at end of file diff --git a/src/RefreshButton.js b/src/RefreshButton.js index 9cd14f89..61723529 100644 --- a/src/RefreshButton.js +++ b/src/RefreshButton.js @@ -18,8 +18,8 @@ class RefreshButton extends React.Component { return ( diff --git a/src/RefreshButton.scss b/src/RefreshButton.scss index 7fd0499a..2ea7682e 100644 --- a/src/RefreshButton.scss +++ b/src/RefreshButton.scss @@ -5,32 +5,7 @@ } .RefreshButton { - background-color: inherit; margin: auto 0; - - svg { - path { - fill: #1E1E1E; - } - path.inner-circle { - fill: #F97953; - } - } - - &:focus { - box-shadow: 0 0 0 $c2lc-focus-indicator-width #FFFFFF; - } - - &:hover:not(.RefreshButton--disabled) { - background-color: inherit; - svg path.inner-circle { - fill: #F1AE5B; - } - } - - &:hover:not(:focus) { - box-shadow: none; - } } .RefreshButton.RefreshButton--disabled, diff --git a/src/StopButton.js b/src/StopButton.js index 40a9e160..a63696b7 100644 --- a/src/StopButton.js +++ b/src/StopButton.js @@ -6,7 +6,6 @@ import { injectIntl } from 'react-intl'; import type { IntlShape } from 'react-intl'; import IconButton from './IconButton'; import { ReactComponent as StopIcon } from './svg/Stop.svg'; -import './StopButton.scss'; type StopButtonProps = { intl: IntlShape, @@ -19,13 +18,14 @@ class StopButton extends React.Component { render() { const classes = classNames( this.props.className, + 'PlayControlButton', 'StopButton' ); return ( diff --git a/src/StopButton.scss b/src/StopButton.scss deleted file mode 100644 index f3880847..00000000 --- a/src/StopButton.scss +++ /dev/null @@ -1,41 +0,0 @@ -@import 'variables'; - -.StopButton { - height: 2rem; - width: 2rem; - font-size: 1.2rem; - - box-shadow: 0 0 0 0.2rem #1E1E1E; - - &:focus { - box-shadow: - 0 0 0 0.2rem #1E1E1E, - 0 0 0 0.4rem #67717E, - 0 0 0 0.6rem #FFFFFF; - outline: none; - } -} - -.StopButton:not(:hover):not(.StopButton--disabled) { - background-color: #F97953; -} - -.StopButton--disabled { - box-shadow: 0 0 0 0.2rem #9DA4AF; - - &:focus { - box-shadow: - 0 0 0 0.2rem #9DA4AF, - 0 0 0 0.4rem #67717E, - 0 0 0 0.6rem #FFFFFF; - } - - svg rect { - fill: #67717E; - } -} - -.StopButton-svg { - width: 1rem; - height: 1rem; -} diff --git a/src/Themes.scss b/src/Themes.scss index b7e96449..c5a6ce49 100644 --- a/src/Themes.scss +++ b/src/Themes.scss @@ -286,12 +286,6 @@ body.light-theme { background-color: #D5D8DD; } - .RefreshButton { - &:focus { - box-shadow: 0 0 0 $c2lc-focus-indicator-width #1E1E1E; - } - } - .RefreshButton--disabled svg { .refresh-icon { fill: #505862; @@ -309,40 +303,37 @@ body.light-theme { } } - button.btn.PlayButton:focus { - box-shadow: 0 0 0 $c2lc-focus-indicator-width $c2lc-focus-indicator-color; - } - - button.btn.PlayButton--disabled { - svg { - circle { - fill: #67717E; - } - path.triangle { - fill: #505862; - } + button.PlayControlButton:not(.PlayControlButton--disabled), + button.PlayControlButton:not(.PlayControlButton--disabled):not(:disabled):not(.disabled):active, + .IconButton.PlayControlButton:not(.PlayControlButton--disabled) { + background-color: #F97953; + box-shadow: inset 0 0 0 0.3rem #1E1E1E; + &:hover { + background-color: #F1AE5B; + box-shadow: inset 0 0 0 0.3rem #1E1E1E; + } + &:focus { + box-shadow: + 0 0 0 0.2rem #D5D8DD, + 0 0 0 0.4rem #1E1E1E, + inset 0 0 0 0.3rem #1E1E1E; } } - .StopButton:focus { - box-shadow: - 0 0 0 0.2rem #1E1E1E, - 0 0 0 0.4rem #D5D8DD, - 0 0 0 0.6rem #1E1E1E; - } - - .StopButton--disabled { - box-shadow: 0 0 0 0.2rem #67717E; - - svg rect { + button.btn.PlayControlButton--disabled.PlayButton, + button.btn.PlayControlButton--disabled.PlayButton:not(:disabled):not(.disabled):active, + .IconButton.PlayControlButton--disabled { + background-color: #B9BEC6; + box-shadow: inset 0 0 0 0.3rem #67717E; + svg .playControls { fill: #505862; } &:focus { box-shadow: - 0 0 0 0.2rem #67717E, - 0 0 0 0.4rem #D5D8DD, - 0 0 0 0.6rem #1E1E1E; + 0 0 0 0.2rem #D5D8DD, + 0 0 0 0.4rem #1E1E1E, + inset 0 0 0 0.3rem #67717E, } } @@ -1231,51 +1222,45 @@ body.gray-theme { } } - button.btn.PlayButton:not(.PlayButton--disabled), .StopButton, .RefreshButton:not(.RefreshButton--disabled) { - box-shadow: none; - - svg { - path.inner-circle { - fill: #FFFFFF; - } - circle { - fill: #67717E; - } - path.triangle { - fill: #1E1E1E; - } + button.PlayControlButton:not(.PlayControlButton--disabled), + button.PlayControlButton:not(.PlayControlButton--disabled):not(:disabled):not(.disabled):active, + .IconButton.PlayControlButton:not(.PlayControlButton--disabled) { + background-color: #FFFFFF; + box-shadow: inset 0 0 0 0.3rem #67717E; + svg .playControls { + fill: #1E1E1E; + } + &:hover { + background-color: #9DA4AF; + box-shadow: inset 0 0 0 0.3rem #67717E; } - &:focus { - box-shadow: 0 0 0 $c2lc-focus-indicator-width #505862; - border: none; + box-shadow: + 0 0 0 0.2rem #D5D8DD, + 0 0 0 0.4rem #505862, + inset 0 0 0 0.3rem #67717E; } + } - &:hover { - svg { - path.inner-circle { - fill: #9DA4AF; - } - circle { - fill: #67717E; - } - path.triangle { - fill: #1E1E1E; - } - } + button.btn.PlayControlButton--disabled.PlayButton, + button.btn.PlayControlButton--disabled.PlayButton:not(:disabled):not(.disabled):active, + .IconButton.PlayControlButton--disabled { + background-color: #D5D8DD; + box-shadow: inset 0 0 0 0.3rem #9DA4AF; + svg .playControls { + fill: #67717E; + } + + &:focus { + box-shadow: + 0 0 0 0.2rem #D5D8DD, + 0 0 0 0.4rem #505862, + inset 0 0 0 0.3rem #9DA4AF, } } button.btn.PlayButton--disabled, .StopButton--disabled, .RefreshButton--disabled { - background-color: #D5D8DD; - svg { - path.inner-circle { - fill: #D5D8DD; - } - circle { - fill: #9DA4AF; - } path.triangle, path.refresh-icon { fill: #67717E; } @@ -1283,45 +1268,6 @@ body.gray-theme { fill: #D5D8DD; } } - - &:focus { - box-shadow: 0 0 0 $c2lc-focus-indicator-width #505862; - } - } - - .StopButton:not(.StopButton--disabled) { - box-shadow: 0 0 0 0.2rem #67717E; - - svg rect { - fill: #1E1E1E; - } - - &:hover { - background-color: #9DA4AF; - } - - &:focus { - box-shadow: - 0 0 0 0.2rem #67717E, - 0 0 0 0.4rem #D5D8DD, - 0 0 0 0.6rem #67717E; - } - } - - .StopButton:not(:hover):not(.StopButton--disabled) { - background-color: #FFFFFF; - } - - .StopButton--disabled { - background-color: #D5D8DD; - box-shadow: 0 0 0 0.2rem #9DA4AF; - - &:focus { - box-shadow: - 0 0 0 0.2rem #9DA4AF, - 0 0 0 0.3rem #D5D8DD, - 0 0 0 0.5rem #505862; - } } .ProgramSpeedController__container svg path { @@ -2143,103 +2089,68 @@ body.contrast-theme { color: #FFFFFF; } - - .RefreshButton { - svg { - path:not(.refresh-icon) { - fill: white; - } - circle { - fill:black; - } + button.PlayControlButton:not(.PlayControlButton--disabled), + button.PlayControlButton:not(.PlayControlButton--disabled):not(:disabled):not(.disabled):active, + .IconButton.PlayControlButton:not(.PlayControlButton--disabled) { + background-color: #FFFFFF; + box-shadow: inset 0 0 0 0.3rem #1E1E1E; + svg .playControls { + fill: #1E1E1E; } - - &:hover:not(.RefreshButton--disabled) { - &:not(:focus) { - box-shadow: 0 0 0 2px white; - } - - svg { - .refresh-icon { - fill: white; - } - path.inner-circle { - fill: #1E1E1E; - } - circle { - fill: black; - } + &:hover { + background-color: #1E1E1E; + box-shadow: inset 0 0 0 0.3rem #1E1E1E; + svg .playControls { + fill: #FFFFFF; } } - &:focus { - box-shadow: 0 0 0 $c2lc-focus-indicator-width #1E1E1E; + box-shadow: + 0 0 0 0.2rem #FFFFFF, + 0 0 0 0.4rem #1E1E1E, + inset 0 0 0 0.3rem #1E1E1E; } } - button.btn.PlayButton:not(.PlayButton--disabled) { - &:hover { - svg { - path.inner-circle { - fill: #1E1E1E; - } - path.triangle { - fill: #FFFFFF; - } - } - } - &:focus { - box-shadow: 0 0 0 $c2lc-focus-indicator-width #1E1E1E; + button.btn.PlayControlButton--disabled.PlayButton, + button.btn.PlayControlButton--disabled.PlayButton:not(:disabled):not(.disabled):active, + .IconButton.PlayControlButton--disabled { + background-color: #FFFFFF; + box-shadow: inset 0 0 0 0.3rem #8E8E8E; + svg .playControls { + fill: #8E8E8E; } - svg { - path.inner-circle { - fill: white; - } + &:focus { + box-shadow: + 0 0 0 0.2rem #FFFFFF, + 0 0 0 0.4rem #1E1E1E, + inset 0 0 0 0.3rem #8E8E8E, } } - button.btn.PlayButton, .StopButton { + + .RefreshButton { svg { - fill: #FFFFFF; - circle, path.triangle { - fill: #1E1E1E; + path:not(.refresh-icon) { + fill: #FFFFFF; } } - } - button.btn.PlayButton--pause:not(.PlayButton--disabled) { - &:hover { + &:hover:not(.RefreshButton--disabled) { svg { - circle { + .refresh-icon { fill: #FFFFFF; } - path.inner-circle { - fill: #1E1E1E; - } } } - &:focus { - box-shadow: 0 0 0 $c2lc-focus-indicator-width #1E1E1E; - } } - button.btn.PlayButton--play.PlayButton--disabled, .StopButton--disabled, .RefreshButton--disabled { + .IconButton.RefreshButton--disabled { svg { - path.inner-circle { - fill: #FFFFFF; - } - circle, path.triangle, rect, path.refresh-icon { + path.refresh-icon { fill: #8E8E8E; } - } - &:focus { - box-shadow: 0 0 0 $c2lc-focus-indicator-width #1E1E1E; - } - } - - .RefreshButton--disabled { - svg { rect.refresh-icon { stroke: #8E8E8E; fill: #FFFFFF; @@ -2253,55 +2164,6 @@ body.contrast-theme { } } - .StopButton { - box-shadow: 0 0 0 0.2rem #1E1E1E; - - svg rect { - fill: #FFFFFF; - } - - &:hover:not(.StopButton--disabled) { - box-shadow: - 0 0 0 0.2rem #1E1E1E, - 0 0 0 0.4rem white; - - svg rect { - fill: #ffffff - } - background-color: #1E1E1E; - } - - &:focus { - box-shadow: - 0 0 0 0.2rem #1E1E1E, - 0 0 0 0.4rem #FFFFFF, - 0 0 0 0.6rem #1E1E1E; - } - } - - .StopButton:not(:hover):not(.StopButton--disabled) { - background-color: #FFFFFF; - svg rect { - fill: #1E1E1E; - } - } - - .StopButton--disabled { - background-color: #FFFFFF; - box-shadow: 0 0 0 0.2rem #8E8E8E; - - &:focus { - box-shadow: - 0 0 0 0.2rem #8E8E8E, - 0 0 0 0.4rem #FFFFFF, - 0 0 0 0.6rem #1E1E1E; - } - - svg rect { - fill: #8E8E8E; - } - } - .ProgramSpeedController__slider { &::-webkit-slider-runnable-track { background-color: black; diff --git a/src/index.scss b/src/index.scss index 2bd65503..e6fa8c64 100644 --- a/src/index.scss +++ b/src/index.scss @@ -142,3 +142,39 @@ button.btn.btn-command-block--right90:hover, button.btn.btn-command-block--right180:hover { background-color: $c2lc-right-command-hover-color; } + + +// need to make play button rule complex to override React bootstrap button +button.PlayControlButton:not(.PlayControlButton--disabled), +button.PlayControlButton:not(.PlayControlButton--disabled):not(:disabled):not(.disabled):active, +.IconButton.PlayControlButton:not(.PlayControlButton--disabled) { + background-color: #F97953; + box-shadow: inset 0 0 0 0.3rem #1E1E1E; + &:hover { + background-color: #F1AE5B; + box-shadow: inset 0 0 0 0.3rem #1E1E1E; + } + &:focus { + box-shadow: + 0 0 0 0.2rem #67717E, + 0 0 0 0.4rem #FFFFFF, + inset 0 0 0 0.3rem #1E1E1E; + } +} + +button.btn.PlayControlButton--disabled.PlayButton, +button.btn.PlayControlButton--disabled.PlayButton:not(:disabled):not(.disabled):active, +.IconButton.PlayControlButton--disabled { + background-color: #B9BEC6; + box-shadow: inset 0 0 0 0.3rem #9DA4AF; + svg .playControls { + fill: #67717E; + } + + &:focus { + box-shadow: + 0 0 0 0.2rem #67717E, + 0 0 0 0.4rem #FFFFFF, + inset 0 0 0 0.3rem #9DA4AF, + } +} \ No newline at end of file diff --git a/src/svg/Pause.svg b/src/svg/Pause.svg index 2d74ac8b..c08bb058 100644 --- a/src/svg/Pause.svg +++ b/src/svg/Pause.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/src/svg/Play.svg b/src/svg/Play.svg index 0bf50611..ae6f7407 100644 --- a/src/svg/Play.svg +++ b/src/svg/Play.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/src/svg/Refresh.svg b/src/svg/Refresh.svg index cbf78f83..d3554315 100644 --- a/src/svg/Refresh.svg +++ b/src/svg/Refresh.svg @@ -1,6 +1,4 @@ - - - + diff --git a/src/svg/Stop.svg b/src/svg/Stop.svg index b3b3b31e..11ed3420 100644 --- a/src/svg/Stop.svg +++ b/src/svg/Stop.svg @@ -1,3 +1,3 @@ - + From 7b21ebcfae8f150e3a9993b94b3681847e81eb81 Mon Sep 17 00:00:00 2001 From: Daniel Cho Date: Fri, 26 Nov 2021 09:44:38 -0500 Subject: [PATCH 2/2] C2LC-550: Clean up and update Play button SVG --- src/RefreshButton.scss | 9 --------- src/Themes.scss | 23 ----------------------- src/svg/Play.svg | 6 +++--- 3 files changed, 3 insertions(+), 35 deletions(-) diff --git a/src/RefreshButton.scss b/src/RefreshButton.scss index 2ea7682e..1a040024 100644 --- a/src/RefreshButton.scss +++ b/src/RefreshButton.scss @@ -20,15 +20,6 @@ stroke: #9DA4AF; } - circle { - stroke: none; - fill: #9DA4AF; - } - - path.inner-circle { - fill: #B9BEC6; - } - rect.refresh-icon { stroke: #9DA4AF; fill: #B9BEC6; diff --git a/src/Themes.scss b/src/Themes.scss index 9a668f36..0514cfb6 100644 --- a/src/Themes.scss +++ b/src/Themes.scss @@ -291,11 +291,6 @@ body.light-theme { fill: #505862; stroke: #9DA4AF; } - - circle { - stroke: none; - fill: #67717E; - } rect.refresh-icon { stroke: #505862; @@ -1208,18 +1203,6 @@ body.gray-theme { background-color: #D5D8DD; } - .RefreshButton svg path:not(.refresh-icon) { - fill: white; - } - - .RefreshButton--disabled, - .RefreshButton--disabled:hover, - .RefreshButton--disabled:focus { - svg path:not(.refresh-icon) { - fill: #D5D8DD; - } - } - button.PlayControlButton:not(.PlayControlButton--disabled), button.PlayControlButton:not(.PlayControlButton--disabled):not(:disabled):not(.disabled):active, .IconButton.PlayControlButton:not(.PlayControlButton--disabled) { @@ -2127,12 +2110,6 @@ body.contrast-theme { .RefreshButton { - svg { - path:not(.refresh-icon) { - fill: #FFFFFF; - } - } - &:hover:not(.RefreshButton--disabled) { svg { .refresh-icon { diff --git a/src/svg/Play.svg b/src/svg/Play.svg index ae6f7407..38e462df 100644 --- a/src/svg/Play.svg +++ b/src/svg/Play.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file