Improve styling with flexbox (#8)

* Improve styling

README.md

@@ -77,20 +77,20 @@ One of the props (onAccept) is a function, this function will be called after th
 | Prop          |               Type               | Default value | Description                                                                                           |
 |---------------|:--------------------------------:|---------------|-------------------------------------------------------------------------------------------------------|
 | location      | String, either "top" or "bottom" | bottom        | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. |
-| children      |     String or React component    |               | Content to appear inside the bar                                                                      |
+| children      | String or React component        |               | Content to appear inside the bar                                                                      |
-| disableStyles |              boolean             | false         | If enabled the component will have no default style. (you can still supply style through props)       |
+| disableStyles | boolean                          | false         | If enabled the component will have no default style. (you can still supply style through props)       |
-| buttonText    |              String or React component              | I understand  | Text to appear on the button                                                                          |
+| buttonText    | String or React component        | I understand  | Text to appear on the button                                                                          |
-| cookieName    |              string              | CookieConsent | Name of the cookie used to track whether the user has agreed.                                         |
+| cookieName    | string                           | CookieConsent | Name of the cookie used to track whether the user has agreed.                                         |
-| onAccept      |             function             | () => {}      | Function to be called after the accept button has been clicked.                                       |
+| onAccept      | function                         | () => {}      | Function to be called after the accept button has been clicked.                                       |
-| style         |              Object              |  ![barstyle](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/barStyle.png?raw=true)             | React styling object for the bar.                                                                     |
+| style         | Object                           | [look at source][style] | React styling object for the bar.                                                           |
-| buttonStyle   |              Object              |   ![buttonStyle](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/buttonStyle.png?raw=true)              | React styling object for the button.                                                                  |
+| buttonStyle   | Object                           | [look at source][buttonStyle] | React styling object for the button.                                                  |
-
+| contentStyle  | Object                           | {}            | React styling object for the content.                                                                 |
-
 
 ## Styling it
 
-You can provide styling for both the bar and the button.
+You can provide styling for the bar, for the button and the content. Note that the bar has a `display: flex` property as default and is parent to its children content and button. 
-You can do this using the `style` and `buttonStyle` prop, both of these will append / replace the default style of the component.
+
+You can style each component with using the `style`, `buttonStyle` and `contentStyle` prop. These will append / replace the default styles of the components.
 
 You can use `disableStyles={true}` to disable any built-in styling.
 
@@ -146,3 +146,6 @@ import CookieConsent, { Cookies } from "react-cookie-consent";
 >
 </CookieConsent>
 ```
+
+[style]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L17-L28
+[buttonStyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L29-L38

src/index.js

@@ -15,33 +15,35 @@ class CookieConsent extends Component {
     this.state = {
       visible: true,
       style: {
-        position: "fixed",
+        alignItems: "baseline",
-        width: "100%",
-        padding: "15px",
         background: "#353535",
         color: "white",
+        display: "flex",
+        justifyContent: "space-between",
         left: "0",
-        zIndex: "999",
+        padding: "15px",
-        lineHeight: "30px",
+        position: "fixed",
-        textAlign: "left"
+        width: "100%",
+        zIndex: "999"
       },
       buttonStyle: {
-        position: "absolute",
-        right: "50px",
-        border: "0",
         background: "#ffd42d",
-        boxShadow: "none",
+        border: "0",
         borderRadius: "0px",
-        padding: "5px",
+        boxShadow: "none",
-        color: "black"
+        color: "black",
-      }
+        flex: "0 0 auto",
+        marginLeft: "15px",
+        padding: "5px 10px"
+      },
+      contentStyle: {}
     };
   }
 
-  componentWillMount(){
+  componentWillMount() {
     const { cookieName } = this.props;
 
-    if (Cookies.get(cookieName) != undefined ) {
+    if (Cookies.get(cookieName) != undefined) {
       this.setState({ visible: false });
     }
   }
@@ -57,7 +59,6 @@ class CookieConsent extends Component {
   }
 
   render() {
-
     // If the bar shouldn't be visible don't render anything.
     if (!this.state.visible) {
       return null;
@@ -67,18 +68,21 @@ class CookieConsent extends Component {
       location,
       style,
       buttonStyle,
+      contentStyle,
       disableStyles,
       onAccept,
       buttonText
     } = this.props;
 
-    let myStyle = {},
+    let myStyle = {};
-      myButtonStyle = {};
+    let myButtonStyle = {};
+    let myContentStyle = {};
 
     if (disableStyles) {
       // if styles are disabled use the provided styles (or non)
       myStyle = Object.assign({}, style);
       myButtonStyle = Object.assign({}, buttonStyle);
+      myContentStyle = Object.assign({}, contentStyle);
     } else {
       // if styles aren't disabled merge them with the styles that are provided (or use default styles)
       myStyle = Object.assign({}, { ...this.state.style, ...style });
@@ -86,6 +90,10 @@ class CookieConsent extends Component {
         {},
         { ...this.state.buttonStyle, ...buttonStyle }
       );
+      myContentStyle = Object.assign(
+        {},
+        { ...this.state.contentStyle, ...contentStyle }
+      );
     }
 
     // syntactic sugar to enable user to easily select top / bottom
@@ -101,7 +109,7 @@ class CookieConsent extends Component {
 
     return (
       <div className="cookieConsent" style={myStyle}>
-        {this.props.children}
+        <div style={myContentStyle}>{this.props.children}</div>
         <button
           style={myButtonStyle}
           onClick={() => {
@@ -120,10 +128,15 @@ CookieConsent.propTypes = {
   location: PropTypes.oneOf(["top", "bottom"]),
   style: PropTypes.object,
   buttonStyle: PropTypes.object,
+  contentStyle: PropTypes.object,
   children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
   disableStyles: PropTypes.bool,
   onAccept: PropTypes.func,
-  buttonText: PropTypes.oneOfType([PropTypes.string,PropTypes.func,PropTypes.element]),
+  buttonText: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.element
+  ]),
   cookieName: PropTypes.string
 };
 CookieConsent.defaultProps = {
@@ -135,4 +148,4 @@ CookieConsent.defaultProps = {
 };
 
 export default CookieConsent;
-export {Cookies};
+export { Cookies };