Restyle beta message

src/components/NavigationTabs/beta-message.scss

 @import "../../variables";
 
 .beta-message {
-  padding: 1rem;
+  @extend %row-nowrap;
+  flex: 1 0 auto;
+  align-items: center;
+  position: relative;
+  padding: .5rem 1rem;
   margin-bottom: 1rem;
   border: 1px solid rgba($salmon-red, .4);
   background-color: rgba($salmon-red, .1);
-  border-radius: 1rem;
+  border-radius: 2rem;
   font-size: .75rem;
   line-height: 1rem;
   text-align: center;
+  color: $salmon-red;
+
+  &:after {
+    content: '✕';
+    top: .5rem;
+    right: 1rem;
+    position: absolute;
+    color: $salmon-red;
+  }
 }

src/components/NavigationTabs/index.js

 import React, { Component } from 'react';
 import { withRouter } from 'react-router-dom';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { dismissBetaMessage } from '../../ducks/app';
 import {Tab, Tabs} from "../Tab";
 
 import './beta-message.scss';
@@ -11,6 +13,8 @@ class NavigationTabs extends Component {
       push: PropTypes.func.isRequired,
     }),
     className: PropTypes.string,
+    dismissBetaMessage: PropTypes.func.isRequired,
+    showBetaMessage: PropTypes.bool.isRequired,
   };
 
   constructor(props) {
@@ -18,6 +22,7 @@ class NavigationTabs extends Component {
     this.state = {
       selectedPath: this.props.location.pathname,
       className: '',
+      showWarning: true,
     };
   }
 
@@ -33,19 +38,33 @@ class NavigationTabs extends Component {
   }
 
   render() {
+    const { showBetaMessage, className, dismissBetaMessage } = this.props;
     return (
       <div>
-        <Tabs className={this.props.className}>
+        <Tabs className={className}>
           { this.renderTab('Swap', '/swap', /swap/) }
           { this.renderTab('Send', '/send', /send/) }
           { this.renderTab('Pool', '/add-liquidity', /add-liquidity|remove-liquidity|create-exchange/) }
         </Tabs>
-        <div className="beta-message">
-          💀 This project is in beta. Use at your own risk.
-        </div>
+        {
+          showBetaMessage && (
+            <div className="beta-message" onClick={dismissBetaMessage}>
+              💀 This project is in beta. Use at your own risk.
+            </div>
+          )
+        }
       </div>
     );
   }
 }
 
-export default withRouter(NavigationTabs);
+export default withRouter(
+  connect(
+    state => ({
+      showBetaMessage: state.app.showBetaMessage,
+    }),
+    dispatch => ({
+      dismissBetaMessage: () => dispatch(dismissBetaMessage()),
+    }),
+  )(NavigationTabs)
+);

src/ducks/app.js

+const DISMISS_BETA_MESSAGE = 'app/app/dismissBetaMessage';
+
+const initialState = {
+  showBetaMessage: true,
+};
+
+export const dismissBetaMessage = () => ({ type: DISMISS_BETA_MESSAGE });
+
+export default function appReducer(state = initialState, { type, payload }) {
+  switch (type) {
+    case DISMISS_BETA_MESSAGE:
+      return { ...state, showBetaMessage: false };
+    default:
+      return state;
+  }
+}

src/ducks/index.js

 import { combineReducers } from 'redux';
 import addresses from './addresses';
 import send from './send';
+import app from './app';
 import web3connect from './web3connect';
 
 export default combineReducers({
+  app,
   addresses,
   send,
   web3connect,