[Chore]: Technical: fix attributes of styled components animation-con…

…trol (#1829) * fix attributes of styled components animation-control Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com> * fix attributes of styled components animation-control Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com> * add changes due to code review Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com>
keplergl · May 25, 2022 · e27cf13 · e27cf13
1 parent 442d1b2
commit e27cf13
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/components/common/animation-control/animation-control.tsx b/src/components/common/animation-control/animation-control.tsx
@@ -20,6 +20,7 @@
 
 import React, {useCallback, useMemo} from 'react';
 import styled from 'styled-components';
+import classnames from 'classnames';
 
 import Slider from 'components/common/slider/slider';
 import {BottomWidgetInner} from 'components/common/styled-components';
@@ -48,9 +49,9 @@ const AnimationWidgetInner = styled.div`
   }
 `;
 
-const StyledDomain = styled.div.attrs({
-  className: 'animation-control__time-domain'
-})`
+const StyledDomain = styled.div.attrs(props => ({
+  className: classnames('animation-control__time-domain', {[props.className]: props.className})
+}))`
   color: ${props => props.theme.titleTextColor};
   font-weight: 400;
   font-size: 10px;

diff --git a/src/components/common/animation-control/floating-time-display.tsx b/src/components/common/animation-control/floating-time-display.tsx
@@ -20,6 +20,7 @@
 
 import React, {useMemo} from 'react';
 import styled from 'styled-components';
+import classnames from 'classnames';
 import {Minus} from 'components/common/icons';
 import {DEFAULT_TIME_FORMAT} from 'constants/default-settings';
 import {CenterFlexbox} from 'components/common/styled-components';
@@ -41,9 +42,9 @@ const StyledTimeDisplayWrapper = styled.div.attrs({
   }
 `;
 
-const StyledTimeDisplay = styled.div.attrs({
-  className: 'floating-time-display__inner'
-})`
+const StyledTimeDisplay = styled.div.attrs(props => ({
+  className: classnames('floating-time-display__inner', {[props.className]: props.className})
+}))`
   background-color: ${props => props.theme.panelBackground};
   border-radius: ${props => props.theme.timeDisplayBorderRadius}px;
   color: ${props => props.theme.titleTextColor};