Only rotate icon

ifndefdeadmau5 · Jan 5, 2019 · fcb1e62 · fcb1e62
1 parent ebb8cf2
commit fcb1e62
Showing 1 changed file with 24 additions and 30 deletions.
diff --git a/src/MainButton.js b/src/MainButton.js
@@ -3,36 +3,32 @@ import React, { Component } from 'react';
 import styled from 'styled-jss';
 import PropTypes from 'prop-types';
 
-const Wrapper = styled('a')(
-  ({ backgroundColor, size, iconColor }) => ({
-    color: iconColor,
-    zIndex: '1',
-    display: 'flex',
-    border: 'none',
-    borderRadius: '50%',
-    boxShadow: '0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)',
-    cursor: 'pointer',
-    outline: 'none',
-    padding: '0',
-    WebkitUserDrag: 'none',
-    fontWeight: 'bold',
-    justifyContent: 'center',
-    alignItems: 'center',
-    WebkitTransition: '-webkit-transform 300ms',
-    transition: 'transform 300ms',
-    width: size,
-    height: size,
-    backgroundColor,
-  }),
-  ({ isOpen }) => ({
-    WebkitTransform: `rotate(${isOpen ? 180 : 0}deg)`,
-    transform: `rotate(${isOpen ? 180 : 0}deg)`,
-  }),
-);
+const Wrapper = styled('a')(({ backgroundColor, size, iconColor }) => ({
+  color: iconColor,
+  zIndex: '1',
+  display: 'flex',
+  border: 'none',
+  borderRadius: '50%',
+  boxShadow: '0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)',
+  cursor: 'pointer',
+  outline: 'none',
+  padding: '0',
+  WebkitUserDrag: 'none',
+  fontWeight: 'bold',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: size,
+  height: size,
+  backgroundColor,
+}));
 
-const IconWrapper = styled('div')(({
+const IconWrapper = styled('div')(({ isOpen }) => ({
   display: 'flex',
   position: 'absolute',
+  WebkitTransition: '-webkit-transform 300ms',
+  transition: 'transform 300ms',
+  WebkitTransform: `rotate(${isOpen ? 180 : 0}deg)`,
+  transform: `rotate(${isOpen ? 180 : 0}deg)`,
 }));
 
 class MainButton extends Component {
@@ -53,9 +49,7 @@ class MainButton extends Component {
 
     return (
       <Wrapper {...this.props}>
-        <IconWrapper>
-          {isOpen ? iconActive : iconResting}
-        </IconWrapper>
+        <IconWrapper isOpen={isOpen}>{isOpen ? iconActive : iconResting}</IconWrapper>
       </Wrapper>
     );
   }