change

Author: ifndefdeadmau5

docs/src/App.js

@@ -27,16 +27,14 @@ const styles = theme => ({
     width: '100%',
     height: '100vh',
   },
-  menu: {
-    margin: 'auto',
-  },
   paper: {
     width: '100%',
     maxWidth: 960,
     minHeight: 300,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
+    alignItems: 'center',
   },
   formControl: {
     margin: theme.spacing.unit,
@@ -83,7 +81,6 @@ class App extends Component {
         </FormControl>
         <Paper className={classes.paper} elevation={4}>
           <FloatingMenu
-            className={classes.menu}
             slideSpeed={500}
             direction={direction}
           >
@@ -99,14 +96,14 @@ class App extends Component {
               iconColor="black"
               order={1}
               backgroundColor="white"
-              size={56}
+              size={40}
             />
             <ChildButton
               iconButton={MdAdd}
               iconColor="black"
               order={2}
               backgroundColor="white"
-              size={56}
+              size={40}
             />
           </FloatingMenu>
         </Paper>

src/ChildButton.js

@@ -3,7 +3,9 @@ import styled from 'styled-jss';
 import PropTypes from 'prop-types';
 
 const Wrapper = styled('li')(
-  ({ isOpen, slideSpeed, backgroundColor, size, iconColor }) => ({
+  ({ isOpen, slideSpeed, backgroundColor, size, iconColor, margin }) => ({
+    margin,
+    backgroundColor,
     display: 'flex',
     border: 'none',
     borderRadius: '50%',
@@ -17,7 +19,6 @@ const Wrapper = styled('li')(
     alignItems: 'center',
     opacity: isOpen ? 1 : 0,
     transition: `all ${slideSpeed}ms`,
-    backgroundColor,
     width: size,
     height: size,
     '& > a > svg': {
@@ -53,19 +54,14 @@ class ChildButton extends Component {
     iconButton: PropTypes.func.isRequired,
     iconColor: PropTypes.string,
     isOpen: PropTypes.bool,
-    direction: PropTypes.string,
-    offset: PropTypes.number,
     size: PropTypes.number,
+    margin: PropTypes.number,
   };
 
   static defaultProps = {
-    direction: 'down',
     iconColor: 'black',
-    offset: 0,
-    size: {
-      main: 56,
-      child: 56,
-    },
+    size: '40',
+    margin: 0,
     isOpen: false,
   };
 

src/FloatingMenu.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import styledJss from 'styled-jss';
 
 const DIRECTIONS = {
@@ -18,6 +17,11 @@ const StyledUl = styledJss('ul')(
     margin: '0',
     padding: '0',
     flexDirection: DIRECTIONS[direction],
+    justifyContent: 'center',
+    alignItems: 'center',
+    '& > a + li, li + li': {
+      marginLeft: 8,
+    },
   }),
 );
 
@@ -31,7 +35,6 @@ class FloatingMenu extends Component {
 
   static defaultProps = {
     className: '',
-    background: 'palevioletred',
     slideSpeed: 500,
     direction: 'down',
   };

src/MainButton.js

@@ -4,7 +4,10 @@ import styled from 'styled-jss';
 import PropTypes from 'prop-types';
 
 const Wrapper = styled('a')(
-  ({ backgroundColor, size }) => ({
+  ({ backgroundColor, size, iconColor }) => ({
+    '& > a > svg': {
+      fill: iconColor,
+    },
     zIndex: '1',
     display: 'flex',
     border: 'none',