refactoring for dark and light themes

package.json

@@ -23,6 +23,7 @@
     "@visx/shape": "^3.12.0",
     "@visx/tooltip": "^3.12.0",
     "@visx/visx": "^3.12.0",
+    "@visx/xychart": "^3.12.0",
     "@visx/zoom": "^3.12.0",
     "axios": "^0.27.2",
     "bootstrap": "^5.1.3",

reactapp/App.scss

@@ -1,21 +1,62 @@
-/* import bootstrap to set changes */
+/* Define color variables */
+$primary: #2c3e50;
+$secondary: #8f5325;
+$success: #3e8d63;
+$info: #7854e4;
+$warning: #b8c924;
+$danger: #d62518;
+$light: #f8f9fa;
+$dark: #343a40;
+
+/* Custom accent color */
+$accent: #da6d25;
+
+/* Map colors for Bootstrap */
+$theme-colors: (
+  primary: $primary,
+  secondary: $secondary,
+  success: $success,
+  info: $info,
+  warning: $warning,
+  danger: $danger,
+  light: $light,
+  dark: $dark,
+  accent: $accent,
+);
+
+/* Import Bootstrap SCSS */
 @import "../node_modules/bootstrap/scss/bootstrap";
 
+/* Define CSS variables for theming */
 :root {
-    --ts-header-height: 56px;
-    /* Enabling light mode and dark mode*/
-    color-scheme: light dark;
+  --ts-header-height: 56px;
+  color-scheme: light dark;
 
-    /* Assigning light/dark color tokens into variable*/
-    --primary: light-dark(#2c3e50, #bbcddf); 
+  /* Light theme variables */
+  --background-color: #{$light};
+  --text-color: #000000;
+  --primary-color: #{$primary};
+  /* Additional variables */
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Dark theme variables */
+    --background-color: #{$primary};
+    --text-color: #ffffff;
+    --primary-color: #{$light};
+    /* Additional variables */
+  }
+}
+
+/* Apply the variables */
 html, body, #root {
-    height: 100%;
-    $primary: var (--primary)
+  height: 100%;
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 body {
-    /* offset for fixed header */
-    padding-top: var(--ts-header-height);
-}
+  /* Offset for fixed header */
+  padding-top: var(--ts-header-height);
+}

reactapp/components/StyledContainers.js

@@ -0,0 +1,112 @@
+// containers.js
+import styled from 'styled-components';
+import useTheme from 'hooks/useTheme'; // Adjust the import path as needed
+
+// HydroFabricContainer
+const StyledHydroFabricContainer = styled.div`
+  flex: ${(props) => (props.fullScreen ? '1 1 0%' : '1 1 40%')};
+  order: 2;
+  width: 100%;
+  display: ${(props) => (props.fullScreen ? 'none' : 'flex')};
+  padding: 10px;
+  flex-direction: row;
+  background-color: ${(props) =>
+    props.theme === 'dark' ? '#2c3e50' : '#ffffff'};
+  color: ${(props) => (props.theme === 'dark' ? '#ffffff' : '#000000')};
+`;
+
+export const HydroFabricContainer = (props) => {
+  const theme = useTheme();
+  return <StyledHydroFabricContainer {...props} theme={theme} />;
+};
+
+// HydroFabricPlotContainer
+const StyledHydroFabricPlotContainer = styled.div`
+  width: 500px;
+  height: 250px;
+  order: 1;
+  flex: 1 1 80%;
+  background-color: ${(props) =>
+    props.theme === 'dark' ? '#2c3e50' : '#f9f9f9'};
+`;
+
+export const HydroFabricPlotContainer = (props) => {
+  const theme = useTheme();
+  return <StyledHydroFabricPlotContainer {...props} theme={theme} />;
+};
+
+// SelectContainer
+const StyledSelectContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  order: 1;
+  width: 100%;
+  padding: 5px;
+  flex: 1 1 20%;
+  background-color: ${(props) =>
+    props.theme === 'dark' ? '#2c3e50' : '#ffffff'};
+  color: ${(props) => (props.theme === 'dark' ? '#ffffff' : '#000000')};
+`;
+
+export const SelectContainer = (props) => {
+  const theme = useTheme();
+  return <StyledSelectContainer {...props} theme={theme} />;
+};
+
+// MapContainer
+const StyledMapContainer = styled.div`
+  flex: ${(props) => (props.fullScreen ? '1 1 100%' : '1 1 60%')};
+  order: 1;
+  width: 100%;
+  overflow-y: hidden;
+  height: ${(props) => (props.fullScreen ? '100%' : '60%')};
+  background-color: ${(props) =>
+    props.theme === 'dark' ? '#1f1f1f' : '#f9f9f9'};
+`;
+
+export const MapContainer = (props) => {
+  const theme = useTheme();
+  return <StyledMapContainer {...props} theme={theme} />;
+};
+
+// TeehrMetricsWrapper
+const StyledTeehrMetricsWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  background-color: ${(props) =>
+    props.theme === 'dark' ? '#2c3e50' : '#f8f8f8'};
+  border-bottom: 1px solid
+    ${(props) => (props.theme === 'dark' ? '#444444' : '#ddd')};
+  display: flex;
+  flex-direction: column;
+  order: 1;
+  flex: 1 1 20%;
+  color: ${(props) => (props.theme === 'dark' ? '#ffffff' : '#000000')};
+`;
+
+export const TeehrMetricsWrapper = (props) => {
+  const theme = useTheme();
+  return <StyledTeehrMetricsWrapper {...props} theme={theme} />;
+};
+
+
+
+const StyledTimeSeriesContainer = styled.div`
+    position: absolute;
+    display: ${props => props.singleRowOn ? 'none' : 'block'};
+    top: 60px;
+    left: 0.5rem;
+    padding: 10px;
+    background-color: ${(props) =>
+      props.theme === 'dark' ? '#2c3e50' : '#f8f8f8'};
+    ${(props) => (props.theme === 'dark' ? '#444444' : '#ddd')};
+    width: 300px;
+    border-radius: 0.5rem;  
+    color: ${(props) => (props.theme === 'dark' ? '#ffffff' : '#000000')};
+`;
+
+export const TimeSeriesContainer = (props) => {
+  const theme = useTheme();
+  return <StyledTimeSeriesContainer {...props} theme={theme} />;
+};