feat(app): Add Motivational Quote Easter Egg (#16932)

Added a feature where a motivational quote is randomly selected from a
static list and displayed whenever the user closes all the panes on the
page. Also added a quotes.js file with an array of quote objects and a
function that returns a random quote object when called.

Edit: Forgot to add double quotes to the quote blocks after moving from
test strings to random quote objects from the quotes.js file. Added
them here as HTML encoded left and right double quotes.

Made changes @Bouncey requested.

Made further changes @Bouncey requested. Also added a componentDidUpdate
method to both ensure the quote is only changed when panes open and close,
and also to make sure the new quote is not the same as the one that
was last displayed.

Removed the fCC logo as it was redundant and clashed with the night mode.
Simplified the layout so the quote block is in the middle of the page and
changed the width so that it's more readable. Also added styling to change
the quote text color in night mode.

BREAKING CHANGE: None

Closes #16382

common/app/Panes/Panes.jsx

@@ -11,6 +11,7 @@ import {
 } from './redux';
 import Pane from './Pane.jsx';
 import Divider from './Divider.jsx';
+import { fetchRandomQuote } from './quotes';
 
 const mapStateToProps = createSelector(
   panesSelector,
@@ -44,56 +45,72 @@ const propTypes = {
   render: PropTypes.func.isRequired
 };
 
+let quoteObj = fetchRandomQuote();
+
 export class Panes extends PureComponent {
   componentDidMount() {
     this.props.panesMounted();
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.panes.length === 0 && this.props.panes.length === 1) {
+      const currentQuote = quoteObj.quote;
+      let newQuoteObj = fetchRandomQuote();
+      while (currentQuote === newQuoteObj.quote) {
+        newQuoteObj = fetchRandomQuote();
+      }
+      quoteObj = newQuoteObj;
+    }
+  }
+
   renderPanes() {
     const {
       render,
       panes
     } = this.props;
-    return panes.map(({ name, left, right, dividerLeft }) => {
-      const divider = dividerLeft ?
-        (
-          <Divider
-            key={ name + 'divider' }
-            left={ dividerLeft }
-            name={ name }
-          />
-        ) :
-        null;
+    if (panes.length > 0) {
+      return panes.map(({ name, left, right, dividerLeft }) => {
+        const divider = dividerLeft ?
+          (
+            <Divider
+              key={ name + 'divider' }
+              left={ dividerLeft }
+              name={ name }
+            />
+          ) :
+          null;
 
-      return [
-        <Pane
-          key={ name }
-          left={ left }
-          right={ right }
-          >
-          { render(name) }
-        </Pane>,
-        divider
-      ];
-    }).reduce((panes, pane) => panes.concat(pane), [])
-      .filter(Boolean);
+        return [
+          <Pane
+            key={ name }
+            left={ left }
+            right={ right }
+            >
+            { render(name) }
+          </Pane>,
+          divider
+        ];
+      }).reduce((panes, pane) => panes.concat(pane), [])
+        .filter(Boolean);
+    } else {
+      return this.renderQuote();
+    }
+  }
+
+  renderQuote() {
+    return (
+      <div className='outer-flex-container'>
+        <div className='quote-container'>
+          <h2 className='quote-style'>&ldquo;{quoteObj.quote}&rdquo;</h2>
+          <h2 className='author-style'><i>&mdash;{quoteObj.author}</i></h2>
+        </div>
+      </div>
+    );
   }
 
   render() {
-    const outerStyle = {
-      height: '100%',
-      position: 'relative',
-      width: '100%'
-    };
-    const innerStyle = {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0
-    };
     return (
-      <div style={outerStyle}>
-        <div style={innerStyle}>
+      <div className='outer-style'>
+        <div className='inner-style'>
           { this.renderPanes() }
         </div>
       </div>

common/app/Panes/panes.less

@@ -0,0 +1,42 @@
+.outer-style {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.inner-style {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.outer-flex-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 40%;
+  margin: auto;
+}
+
+.quote-container {
+  color: #006400;
+  margin: auto;
+}
+
+.quote-style {
+  margin: auto;
+  line-height: 150%;
+}
+
+.author-style {
+  text-align: center;
+  margin: 10px 0 0 0;
+}
+
+.night {
+  .quote-container {
+    color: @night-text-color;
+  }
+}

common/app/Panes/quotes.js

@@ -0,0 +1,71 @@
+const quotes = [
+  {
+    quote: 'Never, never, never, never, never, never give up.',
+    author: 'Winston Churchill'
+  },
+  {
+    quote: 'The pessimist sees difficulty in every opportunity. ' +
+      'The optimist sees opportunity in every difficulty.',
+    author: 'Winston Churchill'
+  },
+  {
+    quote: 'Twenty years from you you will be more disappointed by the ' +
+      'things that you didn\'t do than by the ones you did do. So throw ' +
+      'off the bowlines. Sail away from the safe harbor. Catch the trade ' +
+      'winds in your sails.',
+    author: 'Mark Twain'
+  },
+  {
+    quote: 'The secret of getting ahead is getting started.',
+    author: 'Mark Twain'
+  },
+  {
+    quote: 'Change your life today. Don’t gamble on the future, act now, ' +
+      'without delay.',
+    author: 'Simone de Beauvoir'
+  },
+  {
+    quote: 'A person who never made a mistake never tried anything new.',
+    author: 'Albert Einstein'
+  },
+  {
+    quote: 'Life is like riding a bicycle. To keep your balance, you must ' +
+      'keep moving.',
+    author: 'Albert Einstein'
+  },
+  {
+    quote: 'Nothing will work unless you do.',
+    author: 'Maya Angelou'
+  },
+  {
+    quote: 'The most difficult thing is the decision to act, the rest is ' +
+      'merely tenacity.',
+    author: 'Amelia Earhart'
+  },
+  {
+    quote: 'When you reach for the stars, you may not quite get them, but ' +
+      'you won\'t come up with a handful of mud, either.',
+    author: 'Leo Burnett'
+  },
+  {
+    quote: 'The only person you are destined to become is the person you ' +
+      'decide to be.',
+    author: 'Ralph Waldo Emerson'
+  },
+  {
+    quote: 'You must do the things you think you cannot do.',
+    author: 'Eleanor Roosevelt'
+  },
+  {
+    quote: 'You are never too old to set another goal or to dream a new dream.',
+    author: 'C.S. Lewis'
+  },
+  {
+    quote: 'Believe you can and you\'re halfway there.',
+    author: 'Theodore Roosevelt'
+  }
+];
+
+export function fetchRandomQuote() {
+  return quotes[Math.floor(Math.random() * quotes.length)];
+}

common/app/index.less

@@ -3,3 +3,4 @@
 &{ @import "./Nav/nav.less"; }
 &{ @import "./Flash/flash.less"; }
 &{ @import "./routes/index.less"; }
+&{ @import "./Panes/panes.less"; }