Merge pull request #51 from matthewmincher/develop

Move notifications to a component

src/components/global/notificationmessage.module.scss

@@ -0,0 +1,23 @@
+.notification > div {
+  color: #dddddd;
+  padding: 10px;
+  text-align: center;
+  position: relative;
+  font-family: Georgia, serif;
+  font-size: 90%;
+  margin-bottom: 20px;
+}
+
+
+.notification.light > div {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.notification.dark > div {
+  background-image: url(../../images/layout/header_gradient_faded.jpg);
+  background-attachment: scroll;
+  background-repeat: repeat;
+  background-size: auto;
+  background-position: center top;
+  border: 2px solid rgba(183, 186, 143, 0.2);
+}

src/components/global/notificationmessage.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { FC } from 'react';
+import * as Style from './notificationmessage.module.scss';
+
+type NotificationMessageProps = {
+  theme: 'light' | 'dark';
+  message: string;
+  classList?: string[];
+};
+
+const NotificationMessage: FC<NotificationMessageProps> = ({
+  message,
+  classList,
+  theme,
+}) => {
+  return (
+    <div className={`constrainedContent ${Style.notification} ${Style[theme]}`}>
+      <div className={classList?.join(' ')}>{message}</div>
+    </div>
+  );
+};
+
+export default NotificationMessage;

src/css/global.scss

@@ -84,35 +84,3 @@ body {
   margin: 0 auto 1em auto;
   text-align: center;
 }
-
-.closure-light > div {
-  color: #dddddd;
-  padding: 10px;
-  text-align: center;
-  position: relative;
-  font-family: Georgia, serif;
-  font-size: 90%;
-  background-color: rgba(0, 0, 0, 0.2);
-  margin-bottom: 20px;
-}
-
-.closure > div {
-  color: #dddddd;
-  padding: 10px;
-  text-align: center;
-  position: relative;
-  font-family: Georgia, serif;
-  font-size: 90%;
-  background-image: /*url(../../images/layout/header_gradient_strip.png), */
-          url(../images/layout/header_gradient_faded.jpg);
-  background-attachment: /*scroll, */
-          scroll;
-  background-repeat: /*repeat-x, */
-          repeat;
-  background-size: /*auto, */
-          auto;
-  background-position: /*center bottom, */
-          center top;
-  border: 2px solid rgba(183, 186, 143, 0.2);
-  margin-bottom: 20px;
-}

src/pages/index.tsx

@@ -6,6 +6,7 @@ import * as Styles from './index.module.scss';
 import JustGivingBar from '../components/global/justgivingbar';
 import { FC } from 'react';
 import { graphql, PageProps } from 'gatsby';
+import NotificationMessage from '../components/global/notificationmessage';
 
 type Props = PageProps<
   {
@@ -27,11 +28,12 @@ const IndexPage: FC<Props> = ({ data, location }) => {
   return (
     <Layout pageTitle="" contentBackgroundColor="black" isPrimaryPage={true}>
       {data.allContentfulClosureNotice.nodes.map((node) => (
-        <div key={node.label} className="constrainedContent closure">
-          <div className={node.cssClasses.join(' ')}>
-            {node.message.message}
-          </div>
-        </div>
+        <NotificationMessage
+          key={node.label}
+          theme="dark"
+          message={node.message.message}
+          classList={node.cssClasses}
+        />
       ))}
 
       <div className={Styles.heroContainer}>

src/pages/visit.tsx

@@ -8,6 +8,7 @@ import { TailSpin } from 'react-loader-spinner';
 import { faLink } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
+import NotificationMessage from '../components/global/notificationmessage';
 
 type Props = PageProps<{
   allContentfulClosureNotice: {
@@ -29,11 +30,12 @@ const VisitPage: FC<Props> = ({ data }) => {
           <h1>Visit Us</h1>
 
           {data.allContentfulClosureNotice.nodes.map((node) => (
-            <div key={node.label} className="constrainedContent closure-light">
-              <div className={node.cssClasses.join(' ')}>
-                {node.message.message}
-              </div>
-            </div>
+            <NotificationMessage
+              key={node.label}
+              theme="light"
+              message={node.message.message}
+              classList={node.cssClasses}
+            />
           ))}
 
           <div className={Styles.interactiveMapContainer}>