Improve controls rendering

INRIA · Jun 20, 2019 · b6b899b · b6b899b
1 parent c60899b
commit b6b899b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/src/components/buttons/VolumeControl.tsx b/src/components/buttons/VolumeControl.tsx
@@ -4,8 +4,7 @@ import VolumeSlider from '../volume-slider';
 import MuteButton from './mute';
 
 const StyledDiv = styled.div`
-  display: inline-block;
-  height: 100%;
+  display: flex;
 `;
 
 function VolumeControl() {

diff --git a/src/components/rating/RatingSlider.tsx b/src/components/rating/RatingSlider.tsx
@@ -35,16 +35,15 @@ interface IState {
 interface IRatingSlider extends IProps, IMapDispatch, WithTranslation {}
 
 const Slider = styled.div`
-  border: 2px solid transparent;
+  display: flex;
 
   &:not([aria-disabled='true']):not([disabled]):not([aria-hidden='true']) {
     cursor: pointer;
   }
 
   &:focus:not([data-focus-visible-added]),
   &[data-focus-visible-added] {
-    border-color: ${(props) => props.theme.actionBg};
-    outline: none;
+    outline: solid 2px ${(props) => props.theme.actionBg};
   }
 
   svg {
@@ -54,7 +53,7 @@ const Slider = styled.div`
 `;
 
 class RatingSlider extends Component<IRatingSlider, IState> {
-  state = {
+  readonly state = {
     expectedRating: 0,
     isHovering: false
   };