Modularized container, move every scss files to its own component, moved all global scss into index.scss

tedpham3 · tedpham3 · commit aef35298313f · 2024-05-02T20:03:46.000-07:00
diff --git a/app/charts/RequestTypesChart.tsx b/app/charts/RequestTypesChart.tsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Plot from 'react-plotly.js';
 import { CommsContext } from '../context/CommsContext';
-import '../stylesheets/constants.scss';
+import '../stylesheets/index.scss';
 
 const RequestTypesChart: React.FC = React.memo(() => {
   const { commsData } = useContext(CommsContext);
diff --git a/app/components/About/styles.scss b/app/components/About/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .about {
   min-width: 421px;
diff --git a/app/components/ApplicationsCard/styles.scss b/app/components/ApplicationsCard/styles.scss
@@ -1,5 +1,5 @@
 
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .card {
   display: flex;
diff --git a/app/components/Contact/styles.scss b/app/components/Contact/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .contact {
   display: flex;
diff --git a/app/components/DashboardIcons/styles.scss b/app/components/DashboardIcons/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .dashboardIconWrapper {
   margin-right: 37px;
diff --git a/app/components/FirstLaunch/styles.scss b/app/components/FirstLaunch/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .btns {
   display: flex;
diff --git a/app/components/Header/styles.scss b/app/components/Header/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 .microservice-header {
   width: 100%;
   @include centerWithFlex(center);
diff --git a/app/components/Occupied/styles.scss b/app/components/Occupied/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 // MAIN DASHBOARD
 .dashboardArea {
diff --git a/app/components/Setting/styles.scss b/app/components/Setting/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss'; // Update the import path according to your project structure
+@import '../../stylesheets/index.scss'; 
 
 .settings {
   display: flex;
diff --git a/app/components/Splash/styles.scss b/app/components/Splash/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss'; // Update the import path according to your project structure
+@import '../../stylesheets/index.scss'; // Update the import path according to your project structure
 
 #splash {
   display: flex;
diff --git a/app/components/WindowBar/styles.scss b/app/components/WindowBar/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss'; 
+@import '../../stylesheets/index.scss'; 
 #titleBar {
   position: fixed;
   display: flex;
diff --git a/app/containers/AWSGraphsContainer/styles.scss b/app/containers/AWSGraphsContainer/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .AWS-container {
   margin-top: 40px;
diff --git a/app/containers/DashboardContainer/DashboardContainer.tsx b/app/containers/DashboardContainer/DashboardContainer.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { HashRouter as Router } from 'react-router-dom';
 import MainContainer from '../MainContainer/MainContainer';
-import SidebarContainer from '../SidebarContainer';
+import SidebarContainer from '../SidebarContainer/SidebarContainer';
 import HealthContextProvider from '../../context/HealthContext';
 import CommsContextProvider from '../../context/CommsContext';
 import ApplicationContextProvider from '../../context/ApplicationContext';
diff --git a/app/containers/GraphsContainer/styles.scss b/app/containers/GraphsContainer/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .traceContainer {
   display: flex;
diff --git a/app/containers/MainContainer/styles.scss b/app/containers/MainContainer/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .main-container {
   background-color: $grey;
diff --git a/app/containers/ModifyMetricsContainer/styles.scss b/app/containers/ModifyMetricsContainer/styles.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .metricsSelector {
     max-width: 90%;
diff --git a/app/containers/SidebarContainer/SidebarContainer.tsx b/app/containers/SidebarContainer/SidebarContainer.tsx
@@ -6,19 +6,18 @@ import InfoIcon from '@material-ui/icons/Info';
 import ContactSupportIcon from '@material-ui/icons/ContactSupport';
 import SettingsIcon from '@material-ui/icons/Settings';
 
-import '../stylesheets/SidebarContainer.scss';
-import { ApplicationContext } from '../context/ApplicationContext';
-import { AwsContext } from '../context/AwsContext';
-import { DashboardContext } from '../context/DashboardContext';
+import './styles.scss';
+import { ApplicationContext } from '../../context/ApplicationContext';
+import { AwsContext } from '../../context/AwsContext';
+import { DashboardContext } from '../../context/DashboardContext';
 
 const SidebarContainer = React.memo(() => {
-
   // Extract invervalID from ApplicationContext. Initival value: intervalID = null
-  const { intervalID,setExample } = useContext(ApplicationContext);
+  const { intervalID, setExample } = useContext(ApplicationContext);
   // Extract isLoading and setLoading state from AwsContext. Initial value: isLoading = true
   const { isLoading, setLoadingState } = useContext(AwsContext);
   // clear interval and set loading state to true when leaving graph containers
-  const { addApp } = useContext(DashboardContext)
+  const { addApp } = useContext(DashboardContext);
   /**
    * @function handleCLick - check if the 'intervalID' exists. If so, theres a timer running and the fuunction clears the timer using @function clearInterval - function.
    * Checks if variable 'isLoading' is false and if so the content is not loading and therefore, sets it to true using the setLoadingState function.
@@ -29,18 +28,17 @@ const SidebarContainer = React.memo(() => {
   };
 
   const handleExample = () => {
+    setExample(true);
 
-    setExample(true)
-    
     const fields = {
       typeOfService: 'Microservices',
       database: 'MongoDB',
-      URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5",
+      URI: 'mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5',
       name: 'Example',
-      description: 'Microservices'
-    }
-    addApp(fields)
-  }
+      description: 'Microservices',
+    };
+    addApp(fields);
+  };
 
   return (
     <div className="sidebar-container" id="mySidebar">
@@ -101,14 +99,10 @@ const SidebarContainer = React.memo(() => {
             &emsp;Contact
           </Link>
           <Link className="sidebar-link" to="/" id="dash" onClick={handleClick}>
-            <button 
-              className="example-button"
-              onClick={() => handleExample()}
-            >
-                EXAMPLE
+            <button className="example-button" onClick={() => handleExample()}>
+              EXAMPLE
             </button>
           </Link>
-
         </div>
       </div>
     </div>
diff --git a/app/containers/SidebarContainer/styles.scss b/app/containers/SidebarContainer/styles.scss
@@ -1,4 +1,4 @@
-@import './constants.scss';
+@import '../../stylesheets/index.scss';
 
 .sidebar-container {
   color: $background;
@@ -78,7 +78,7 @@
 #sprout2:active,
 #sprout3:active,
 #sprout4:active {
-  background-image: url('../assets/mountain.png');
+  background-image: url('../../assets/mountain.png');
   background-size: contain;
 }
 
diff --git a/app/modals/AddModal/AddModal.scss b/app/modals/AddModal/AddModal.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .add-container {
   @include centerModal(30%, 500px);
diff --git a/app/modals/AwsModal/AwsModal.scss b/app/modals/AwsModal/AwsModal.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .add-container {
   @include centerModal(30%, 500px);
diff --git a/app/modals/EnvModal/EnvModal.scss b/app/modals/EnvModal/EnvModal.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .add-container {
   @include centerModal(30%, 500px);
diff --git a/app/modals/ServicesModal/ServicesModal.scss b/app/modals/ServicesModal/ServicesModal.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .servicesContainer {
   width: 100px;
diff --git a/app/modals/UserModal/UserModal.scss b/app/modals/UserModal/UserModal.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/constants.scss';
+@import '../../stylesheets/index.scss';
 
 .add-container {
   @include centerModal(30%, 500px);
diff --git a/app/stylesheets/Home.scss b/app/stylesheets/Home.scss
diff --git a/app/stylesheets/constants.scss b/app/stylesheets/constants.scss
diff --git a/app/stylesheets/index.scss b/app/stylesheets/index.scss
diff --git a/app/stylesheets/scrollBar.scss b/app/stylesheets/scrollBar.scss

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '../../stylesheets/constants.scss';`
	`1`	`+@import '../../stylesheets/index.scss';`
`2`	`2`
`3`	`3`	`.about {`
`4`	`4`	`min-width: 421px;`