graphs aren/'t opening up

Author: lu0713

app/components/Contact.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../stylesheets/Contact.css';
+import '../stylesheets/Contact.scss';
 
 const Contact: React.FC = () => {
   return (

app/modals/ServicesModal.tsx

@@ -40,9 +40,12 @@ const ServicesModal: React.SFC<ServicesModalProps> = ({ i, app }) => {
   };
 
   return (
-    <div className="services-container" onClick={() => fetchStuff()}>
+    <div className="servicesContainer" onClick={() => fetchStuff()}>
       {!servicesData.length ? (
-        <h2 id="loadingMessage">Loading...</h2>
+        <div className="loadingMessageModal">
+          <h2 id="loadingMessage">Loading...</h2>
+        </div>
+        
       ) : (
         <>
           <div className="services-header">

app/stylesheets/Contact.css app/stylesheets/Contact.scssapp/stylesheets/Contact.css renamed to app/stylesheets/Contact.scss

@@ -1,3 +1,5 @@
+@import './constants.scss';
+
 .contact {
   background-color: #f4f4f4;
   height: 100%;

app/stylesheets/ServicesList.css app/stylesheets/ServicesList.scssapp/stylesheets/ServicesList.css renamed to app/stylesheets/ServicesList.scss

@@ -1,3 +1,5 @@
+@import './constants.scss';
+
 /* .services-btn {
   font-family: 'Nunito', sans-serif;
   background-color: #24262F;

app/stylesheets/ServicesModal.scss

@@ -1,7 +1,9 @@
 @import './constants.scss';
 
-.services-container {
+.servicesContainer {
+  width: 100px;
   @include centerModal(375px);
+  
 
   // Header
   .services-header {
@@ -53,7 +55,10 @@
   }
 }
 
+.loadingMessage {
+  max-width: 80px;
+}
+
 #loadingMessage {
   font-size: 14px;
-  width: 100px;
 }

app/stylesheets/constants.scss

@@ -1,5 +1,5 @@
 $yellow: #fce356;
-$navy: #161b2d;
+$navy: #12172a;
 $background: #fff;
 $grey: #eeeeee;
 $icon: #999999;