ui improvements for share and side bar

package.json

@@ -119,7 +119,7 @@
     "prop-types": "^15.6.0",
     "proxy-middleware": "0.14.0",
     "qs": "6.2.1",
-    "quran-components": "^0.0.80",
+    "quran-components": "^0.1.1",
     "raven": "1.1.1",
     "raw-loader": "0.5.1",
     "react": "15.4.1",

src/components/Share/index.js

@@ -1,47 +1,42 @@
 import React from 'react';
 import { ShareButtons, generateShareIcon } from 'react-share';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import * as customPropTypes from 'customPropTypes';
-
-import FbDefault from '../../../static/images/FB-grn.png';
-import TwitterDefault from '../../../static/images/Twitter-grn.png';
+import PropTypes from 'prop-types';
 
 const { FacebookShareButton, TwitterShareButton } = ShareButtons;
 const FacebookIcon = generateShareIcon('facebook');
 const TwitterIcon = generateShareIcon('twitter');
 
+const inlineStyle = css`
+  display: inline-flex;
+`;
+
 const Container = styled.div`
   position: relative;
   top: 7px;
   display: inline-block;
 
-  .iconContainer {
-    display: inline-block;
-
-    &:last-child {
-      padding-left: 5px;
-    }
-
+  ${prop => prop.inline && inlineStyle} .social-icon {
     &:hover {
       cursor: pointer;
+      opacity: 0.8;
     }
   }
 `;
 
 const FacebookButton = styled(FacebookShareButton)`
-  background-image: url(${FbDefault});
   background-repeat: no-repeat;
   background-size: 12px;
   padding-top: 1px;
 `;
 
 const TwitterButton = styled(TwitterShareButton)`
-  background-image: url(${TwitterDefault});
   background-repeat: no-repeat;
   background-size: 21px;
 `;
 
-const Share = ({ chapter, verse }) => {
+const Share = ({ chapter, verse, inline }) => {
   // Fallback to Surah Id
   let path;
 
@@ -61,7 +56,7 @@ const Share = ({ chapter, verse }) => {
   const iconProps = verse ? { iconBgStyle: { fill: '#d1d0d0' } } : {};
 
   return (
-    <Container>
+    <Container inline={inline}>
       <FacebookButton
         url={shareUrl}
         title={title}
@@ -79,7 +74,8 @@ const Share = ({ chapter, verse }) => {
 
 Share.propTypes = {
   chapter: customPropTypes.surahType.isRequired,
-  verse: customPropTypes.verseType
+  verse: customPropTypes.verseType,
+  inline: PropTypes.bool
 };
 
 export default Share;

src/components/TopOptions/index.js

@@ -18,11 +18,7 @@ const TopOptions = ({ title, chapter }) =>
         </Title>}
     </div>
     <div className="col-md-8 text-right">
-      <ul className="list-inline">
-        <li>
-          <Share chapter={chapter} />
-        </li>
-      </ul>
+      <Share chapter={chapter} inline />
     </div>
   </div>;
 

src/server.js

@@ -30,11 +30,18 @@ import getLocalMessages from './helpers/setLocal';
 
 const pretty = new PrettyError();
 const server = express();
+
 Raven.config(config.sentryServer, {
   captureUnhandledRejections: true,
   autoBreadcrumbs: true
 }).install();
 
+/* allows us to handle unhandled promises, that might cause node to crash */
+process.on('unhandledRejection', (err) => {
+  console.log(err);
+  debug('Server:unhandledRejection', err);
+});
+
 expressConfig(server);
 
 server.use(Raven.requestHandler());