Display Speech Ballon on Users Who Clicked Show or Clear

config/webpack.config.dev.js

@@ -192,19 +192,9 @@ module.exports = {
             options: {
               ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
               plugins: () => [
-                require('postcss-custom-properties'),
-                require('postcss-calc'),
                 require('postcss-nested'),
                 require('postcss-flexbugs-fixes'),
-                autoprefixer({
-                  browsers: [
-                    '>1%',
-                    'last 4 versions',
-                    'Firefox ESR',
-                    'not ie < 9', // React doesn't support IE8 anyway
-                  ],
-                  flexbox: 'no-2009',
-                }),
+                autoprefixer({ flexbox: 'no-2009' }),
               ],
             },
           },

config/webpack.config.prod.js

@@ -197,19 +197,9 @@ module.exports = {
                   options: {
                     ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                     plugins: () => [
-                      require('postcss-custom-properties'),
-                      require('postcss-calc'),
                       require('postcss-nested'),
                       require('postcss-flexbugs-fixes'),
-                      autoprefixer({
-                        browsers: [
-                          '>1%',
-                          'last 4 versions',
-                          'Firefox ESR',
-                          'not ie < 9', // React doesn't support IE8 anyway
-                        ],
-                        flexbox: 'no-2009',
-                      }),
+                      autoprefixer({ flexbox: 'no-2009' }),
                     ],
                   },
                 },

package.json

@@ -18,11 +18,11 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-router-dom": "^4.2.2",
-    "react-transition-group": "^2.2.1",
+    "react-transition-group": "^2.3.1",
     "socket.io-client": "^2.0.4"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.6",
+    "autoprefixer": "^8.3.0",
     "babel-core": "6.26.0",
     "babel-eslint": "7.2.3",
     "babel-jest": "21.2.0",
@@ -48,11 +48,9 @@
     "html-webpack-plugin": "2.30.1",
     "jest": "21.2.1",
     "object-assign": "4.1.1",
-    "postcss-calc": "^6.0.1",
-    "postcss-custom-properties": "^6.2.0",
-    "postcss-flexbugs-fixes": "3.2.0",
-    "postcss-loader": "2.0.8",
-    "postcss-nested": "^2.1.2",
+    "postcss-flexbugs-fixes": "^3.3.0",
+    "postcss-loader": "~2.1.4",
+    "postcss-nested": "^3.0.0",
     "promise": "8.0.1",
     "react-dev-utils": "^4.1.0",
     "react-test-renderer": "^16.0.0",
@@ -98,6 +96,14 @@
       "react-app"
     ]
   },
+  "browserslist": [
+    ">1%",
+    "last 4 versions",
+    "Firefox ESR",
+    "not ie <= 11",
+    "not ie_mob <= 11",
+    "not op_mini all"
+  ],
   "eslintConfig": {
     "extends": "react-app"
   }

src/components/Actions/Actions.css

@@ -1,10 +1,8 @@
-:root {
+.Actions {
   --actions-font-size: 1.5em;
   --actions-button-size: 2em;
   --actions-button-border-radius: calc(var(--actions-button-size) / 5);
-}
 
-.Actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;

src/components/Actions/Actions.js

@@ -1,43 +1,38 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { validScores } from 'lib/constants';
 import classNames from 'classnames';
 import './Actions.css';
 
-class Actions extends Component {
-  checkSelectedValue(value, selectedValue) {
-    if (typeof value === 'string') {
-      return value === selectedValue;
-    }
-
-    return value === parseInt(selectedValue, 10);
-  }
-
-  render() {
-    const { show, myScore, onVote, onShow, onClear } = this.props;
-    const listItems = validScores.map((item) => {
-      const buttonClass = classNames({ 'selected': this.checkSelectedValue(item, myScore) });
-      return (
-        <li key={item}>
-          <button onClick={onVote} className={buttonClass} value={item}>{item}</button>
-        </li>
-      );
-    });
+const checkSelectedValue = (value, selectedValue) => (
+  typeof value === 'string'
+    ? value === selectedValue
+    : value === parseInt(selectedValue, 10)
+);
 
+const Actions = ({ show, myScore, onVote, onShow, onClear }) => {
+  const listItems = validScores.map((item) => {
+    const buttonClass = classNames({ 'selected': checkSelectedValue(item, myScore) });
     return (
-      <div className="Actions">
-        <ul className="scores">
-          {listItems}
-        </ul>
-        <ul className="operations">
-          {show ? (
-            <li><button onClick={onClear} className="danger">Clear</button></li>
-          ) : (
-            <li><button onClick={onShow}>Show</button></li>
-          )}
-        </ul>
-      </div>
+      <li key={item}>
+        <button onClick={onVote} className={buttonClass} value={item}>{item}</button>
+      </li>
     );
-  }
-}
+  });
+
+  return (
+    <div className="Actions">
+      <ul className="scores">
+        {listItems}
+      </ul>
+      <ul className="operations">
+        {show ? (
+          <li><button onClick={onClear} className="danger">Clear</button></li>
+        ) : (
+          <li><button onClick={onShow}>Show</button></li>
+        )}
+      </ul>
+    </div>
+  );
+};
 
 export default Actions;

src/components/Card/Card.css

@@ -1,8 +1,3 @@
-:root {
-  --card-height: 150px;
-  --card-height-phone: 100px;
-}
-
 .Card {
   position: relative;
   width: calc(var(--card-height) / 1.5);

src/components/Card/Card.js

@@ -1,29 +1,24 @@
-import React, { Component } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import './Card.css';
 
-class Card extends Component {
-  showVoteValue() {
-    const { score, voted, show } = this.props;
+const Card = ({ highlight, voted, show, suit, score }) => {
+  const cardClass = classNames('Card', { highlight, voted, show });
 
-    if (!show) { return ''; }
-
-    if (!voted) { return '😴'; }
-
-    return score;
-  }
-
-  render() {
-    const { highlight, voted, show, suit } = this.props;
-    const cardClass = classNames('Card', { highlight, voted, show });
-
-    return (
-      <div className={cardClass}>
-        <div className="front face">{this.showVoteValue()}</div>
-        <div className="back face">{suit}</div>
+  return (
+    <div className={cardClass}>
+      <div className="front face">
+        {
+          !show
+          ? ''
+          : !voted
+            ? '😴'
+            : score
+        }
       </div>
-    );
-  }
-}
+      <div className="back face">{suit}</div>
+    </div>
+  );
+};
 
 export default Card;

src/components/Join/Join.css

@@ -1,10 +1,8 @@
-:root {
+.Join {
   --join-font-size: 1.5em;
   --join-button-size: 2em;
   --join-button-border-radius: calc(var(--join-button-size) / 5);
-}
 
-.Join {
   padding: 1rem 0;
   text-align: center;
   font-size: var(--join-font-size);

src/components/Notification/Notification.css

@@ -1,9 +1,7 @@
-:root {
+.Notification {
   --notification-alert-color: white;
   --notification-alert-bg-color: crimson;
-}
 
-.Notification {
   position: absolute;
   top: -4rem;
   right: 1rem;

src/components/Notification/Notification.js

@@ -1,20 +1,17 @@
-import React, { Component } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import './Notification.css';
 
-class Notification extends Component {
-  render() {
-    const { active, reconnCountdown, onReconn } = this.props;
-    const notificationClass = classNames('Notification', { active });
+const Notification = ({ active, reconnCountdown, onReconn }) => {
+  const notificationClass = classNames('Notification', { active });
 
-    return (
-      <div className={notificationClass}>
-        <span>Your seems offline, </span>
-        <span className="countdown">we will try reconnecting in {reconnCountdown}s... </span>
-        <a href="#reconnect" onClick={onReconn}>Reconnect Now</a>
-      </div>
-    );
-  }
-}
+  return (
+    <div className={notificationClass}>
+      <span>Your seems offline, </span>
+      <span className="countdown">we will try reconnecting in {reconnCountdown}s... </span>
+      <a href="#reconnect" onClick={onReconn}>Reconnect Now</a>
+    </div>
+  );
+};
 
 export default Notification;

src/components/SpeechBallon/SpeechBallon.css

@@ -0,0 +1,61 @@
+.SpeechBallon {
+  --text-color: white;
+  --bg-color: rgb(0, 124, 252);
+
+  &.green {
+    --bg-color: yellowgreen;
+  }
+
+  &.red {
+    --bg-color: crimson;
+  }
+
+  position: absolute;
+  top: -1em;
+  left: 67%;
+  margin: 0;
+  padding: 1em;
+  border-radius: 1.5em;
+  background-color: var(--bg-color);
+  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3);
+  color: var(--text-color);
+  white-space: nowrap;
+
+  &::before {
+    --triangle-size: 1em;
+
+    content: ' ';
+    position: absolute;
+    bottom: calc(var(--triangle-size) * -0.6);
+    left: 0;
+    width: 0;
+    height: 0;
+    border-width: var(--triangle-size);
+    border-left-width: calc(var(--triangle-size) * 1.5);
+    border-style: solid;
+    border-color: transparent;
+    border-left-color: var(--bg-color);
+    transform: rotate(20deg);
+  }
+
+  &.popin-enter {
+    transform: scale(0.01);
+    transform-origin: bottom left;
+  }
+
+  &.popin-enter.popin-enter-active {
+    transform: scale(1);
+    transition: transform 300ms cubic-bezier(.45,.45,.42,1.36);
+  }
+
+  &.popin-exit {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &.popin-exit.popin-exit-active {
+    opacity: 0;
+    transform: scale(1.2);
+    transition: all 300ms ease-in;
+  }
+}

src/components/SpeechBallon/SpeechBallon.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+import './SpeechBallon.css';
+
+const SpeechBallon = ({ children, color }) => {
+  const speechBallonClass = classNames('SpeechBallon', color);
+
+  return (
+    <blockquote className={speechBallonClass}>
+      {children}
+    </blockquote>
+  );
+};
+
+export default SpeechBallon;

src/components/SpeechBallon/SpeechBallon.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import SpeechBallon from './SpeechBallon';
+
+describe('<SpeechBallon />', () => {
+  describe('Structures', () => {
+    it('should render without crashing', () => {
+      shallow(<SpeechBallon />);
+    });
+
+    it('should render a blockquote with correct class names', () => {
+      const wrapper = shallow(<SpeechBallon color="green" />);
+      expect(wrapper.find('.SpeechBallon').hasClass('green')).toEqual(true);
+    });
+  });
+});

src/components/Summary/Summary.css

@@ -1,9 +1,7 @@
-:root {
+.Summary {
   --summary-item-font-size: 1.5em;
   --summary-item-height: 3em;
-}
 
-.Summary {
   transition: opacity 0.5s ease;
   font-size: var(--summary-item-font-size);
   opacity: 0;