Stylesheet Fix (#69)

* move bundle.css before custom styling

* roll back previous fix

* style like and proposal buttons with class

frontend/client/components/Follow/index.tsx

@@ -6,11 +6,13 @@ import { proposalActions } from 'modules/proposals';
 import { ProposalDetail } from 'modules/proposals/reducers';
 import { followProposal } from 'api/api';
 import AuthButton from 'components/AuthButton';
+import classnames from 'classnames';
 import './index.less';
 
 interface OwnProps {
   proposal: ProposalDetail;
   style?: React.CSSProperties;
+  className?: string;
 }
 
 interface StateProps {
@@ -31,11 +33,11 @@ type State = typeof STATE;
 class Follow extends React.Component<Props, State> {
   state: State = { ...STATE };
   render() {
-    const { style } = this.props;
+    const { style, className } = this.props;
     const { authedFollows, followersCount } = this.props.proposal;
     const { loading } = this.state;
     return (
-      <Input.Group style={style} className="Follow" compact>
+      <Input.Group style={style} className={classnames('Follow', className)} compact>
         <AuthButton onClick={this.handleFollow}>
           <Icon
             theme={authedFollows ? 'filled' : 'outlined'}

frontend/client/components/Like/index.tsx

@@ -8,6 +8,7 @@ import { Proposal } from 'types';
 import { Comment, RFP } from 'types';
 import { likeProposal, likeComment, likeRfp } from 'api/api';
 import AuthButton from 'components/AuthButton';
+import classnames from 'classnames';
 import './index.less';
 
 interface OwnProps {
@@ -16,6 +17,7 @@ interface OwnProps {
   comment?: Comment;
   rfp?: RFP;
   style?: React.CSSProperties;
+  className?: string;
 }
 
 interface StateProps {
@@ -40,7 +42,7 @@ class Like extends React.Component<Props, State> {
 
   render() {
     const { likesCount, authedLiked } = this.deriveInfo();
-    const { proposal, rfp, comment, style, proposal_card } = this.props;
+    const { proposal, rfp, comment, style, proposal_card, className } = this.props;
     const { loading } = this.state;
     const zoom = comment || proposal_card ? 0.8 : 1;
     const shouldShowLikeText = (!!proposal && !proposal_card) || !!rfp;
@@ -54,7 +56,11 @@ class Like extends React.Component<Props, State> {
     const handleIconButtonClick = proposal_card ? undefined : this.handleLike;
 
     return (
-      <Input.Group className="Like" compact style={{ zoom, pointerEvents, ...style }}>
+      <Input.Group
+        className={classnames('Like', className)}
+        compact
+        style={{ zoom, pointerEvents, ...style }}
+      >
         <IconButton onClick={handleIconButtonClick}>
           <Icon
             theme={authedLiked ? 'filled' : 'outlined'}

frontend/client/components/Proposal/index.less

@@ -4,7 +4,6 @@
 @single-col-width: 600px;
 @block-title-space: 3.75rem;
 
-
 .Proposal {
   max-width: @max-width;
   margin: 0 auto;
@@ -101,7 +100,11 @@
           height: 3rem;
 
           & .ant-input-group {
-            width: inherit
+            width: inherit;
+          }
+
+          &-item {
+            margin-left: 0.5rem;
           }
         }
       }

frontend/client/components/Proposal/index.tsx

@@ -206,8 +206,14 @@ export class ProposalDetail extends React.Component<Props, State> {
                       </Button>
                     </Dropdown>
                   )}
-                  <Like proposal={proposal} style={{ marginLeft: '0.5rem' }} />
-                  <Follow proposal={proposal} style={{ marginLeft: '0.5rem' }} />
+                  <Like
+                    proposal={proposal}
+                    className="Proposal-top-main-title-menu-item"
+                  />
+                  <Follow
+                    proposal={proposal}
+                    className="Proposal-top-main-title-menu-item"
+                  />
                 </div>
               )}
             </div>

frontend/server/components/HTML.tsx

@@ -22,6 +22,17 @@ const HTML: React.SFC<Props> = ({
   extractor,
 }) => {
   const head = Helmet.renderStatic();
+  const extractedStyleElements = extractor.getStyleElements();
+
+  // Move `bundle.css` to beginning of array so custom styles don't get overwritten
+  const bundleIndex = extractedStyleElements.findIndex(element => {
+    return typeof element.key === 'string' && /^.*\/bundle\.css$/.test(element.key);
+  });
+  if (bundleIndex !== -1) {
+    const [bundle] = extractedStyleElements.splice(bundleIndex, 1);
+    extractedStyleElements.unshift(bundle);
+  }
+
   return (
     <html lang="">
       <head>
@@ -53,7 +64,8 @@ const HTML: React.SFC<Props> = ({
         {css.map(href => {
           return <link key={href} type="text/css" rel="stylesheet" href={href} />;
         })}
-        {extractor.getStyleElements()}
+
+        {extractedStyleElements}
 
         <script
           dangerouslySetInnerHTML={{