Better FA icon + missing explanations

Author: Vadorequest

src/components/pageLayouts/PreviewModeBanner.tsx

@@ -25,6 +25,9 @@ const ExplanationTooltipOverlay: React.FunctionComponent = (): JSX.Element => {
       <ExternalLink href={'https://nextjs.org/docs/advanced-features/preview-mode'}>Learn more</ExternalLink><br />
       <br />
       Disabling <b>preview mode</b> will make SSG pages go back to their normal behaviour.<br />
+      <br />
+      <i><b>Tip</b>: Make sure to hard refresh the page (<code>cmd+shift+r</code> on MacOs) after enabling it, to refresh the browser cache.</i><br />
+      <i><b>Tip</b>: We enabled <b>preview mode</b> on the <code>production</code> stage for showcase purpose</i><br />
     </span>
   );
 };
@@ -63,6 +66,10 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
             right: 20px;
           }
         }
+
+        [class*="fa-"] {
+          margin-bottom: 1px
+        }
       `}
     >
       {
@@ -74,7 +81,7 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
                 overlay={<ExplanationTooltipOverlay />}
                 placement={'bottom'}
               >
-                <FontAwesomeIcon icon={['fas', 'question']} size={'xs'} />
+                <FontAwesomeIcon icon={['fas', 'question-circle']} size={'xs'} />
               </Tooltip>
             </span>
             <span className={'right'}>
@@ -85,13 +92,7 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
                 onClick={stopPreviewMode}
                 onKeyPress={stopPreviewMode}
               >
-                Leave preview mode&nbsp;
-                <Tooltip
-                  overlay={<span>This is a tooltip</span>}
-                  placement={'bottom'}
-                >
-                  <FontAwesomeIcon icon={['fas', 'question']} size={'xs'} />
-                </Tooltip>
+                Leave preview mode
               </a>
             </span>
           </div>
@@ -103,7 +104,7 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
                 overlay={<ExplanationTooltipOverlay />}
                 placement={'bottom'}
               >
-                <FontAwesomeIcon icon={['fas', 'question']} />
+                <FontAwesomeIcon icon={['fas', 'question-circle']} size={'xs'} />
               </Tooltip>
             </span>
             <span className={'right'}>

src/pages/_app.tsx

@@ -2,7 +2,7 @@ import { config, library } from '@fortawesome/fontawesome-svg-core';
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { faTimesCircle } from '@fortawesome/free-regular-svg-icons';
-import { faArrowCircleLeft, faArrowCircleRight, faBook, faBookReader, faCoffee, faHome, faQuestion, faUserCog } from '@fortawesome/free-solid-svg-icons';
+import { faArrowCircleLeft, faArrowCircleRight, faBook, faBookReader, faCoffee, faHome, faQuestionCircle, faUserCog } from '@fortawesome/free-solid-svg-icons';
 import 'animate.css/animate.min.css'; // Loads animate.css CSS file. See https://github.com/daneden/animate.css
 import 'bootstrap/dist/css/bootstrap.min.css'; // Loads bootstrap CSS file. See https://stackoverflow.com/a/50002905/2391795
 import 'rc-tooltip/assets/bootstrap.css';
@@ -22,7 +22,7 @@ import '../utils/monitoring/sentry';
 config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
 library.add(
   faGithub,
-  faArrowCircleLeft, faArrowCircleRight, faBook, faBookReader, faCoffee, faHome, faQuestion, faUserCog,
+  faArrowCircleLeft, faArrowCircleRight, faBook, faBookReader, faCoffee, faHome, faQuestionCircle, faUserCog,
   faTimesCircle,
 );