Merge pull request #25 from openghg/22-add-styling-to-sidebar

22 add styling to sidebar
openghg · Aug 15, 2023 · 0c72ace · 0c72ace
2 parents d543de2 + 9dd8358
commit 0c72ace
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 6 deletions.
diff --git a/src/Dashboard.module.css b/src/Dashboard.module.css
@@ -7,7 +7,7 @@ body {
   font-family: "Open Sans", Roboto, Noto Sans, Ubuntu, Droid Sans, "Helvetica Neue", sans-serif;
   font-weight: 300;
   box-sizing: border-box;
-  background-color: #fff;
+  background-color: #ffffff;
 }
 
 /* Start with mobile friendly first */
@@ -38,7 +38,7 @@ body {
   align-items: center;
   justify-content: flex-end;
   padding: 0 16px;
-  background-color: #648ca6;
+  background-color: #47677b;
   z-index: 5;
   color: white;
 }
@@ -62,7 +62,8 @@ body {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
   z-index: 1001;
   /* Needs to sit above the hamburger menu icon */
-  background: #2d5d7b;
+  background: linear-gradient(#2d5d7b, #4da9e2);
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Add a background shadow to the container */
 }
 
 .sidebar a:hover {

diff --git a/src/components/ControlPanel/ControlPanel.js b/src/components/ControlPanel/ControlPanel.js
@@ -37,7 +37,7 @@ class ControlPanel extends React.Component {
           </TextButton>
         </div>
         <div className={styles.header}>
-          <div className={styles.headerText}>DECC network dashboard</div>
+          <div className={styles.headerText}>DECC Network Dashboard</div>
           <div className={styles.headerTag}>by OpenGHG</div>
         </div>
         <div className={styles.content}>{this.props.children}</div>

diff --git a/src/components/ControlPanel/ControlPanel.module.css b/src/components/ControlPanel/ControlPanel.module.css
@@ -59,9 +59,9 @@
 
 .footer {
   grid-area: "footer";
-  padding: 2vh 0vh 0vh 2vh;
   color: white;
   font-size: 0.8em;
+  padding-left: 3vw;
 }
 
 .footer img {

diff --git a/src/components/LeafletMap/LeafletMap.module.css b/src/components/LeafletMap/LeafletMap.module.css
@@ -6,6 +6,8 @@
   color: slategray;
   width: 100%;
   height: 40vh;
+
+
 }
 
 .marker {

diff --git a/src/components/MultiSiteLineChart/MultiSiteLineChart.js b/src/components/MultiSiteLineChart/MultiSiteLineChart.js
@@ -98,12 +98,16 @@ class MultiSiteLineChart extends React.Component {
         linecolor: "black",
         autotick: true,
         ticks: "outside",
+
       },
       yaxis: {
         automargin: true,
         title: {
           text: this.props.yLabel,
-          standoff: 1,
+          standoff: 10,
+          font: {
+            size:16,
+          }
         },
         range: this.props.yRange ? this.props.yRange : null,
         showgrid: false,

diff --git a/src/components/MultiSiteLineChart/MultiSiteLineChart.module.css b/src/components/MultiSiteLineChart/MultiSiteLineChart.module.css
@@ -1,6 +1,14 @@
 .container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color:white;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); 
+  overflow: hidden;
   width: 100%;
   height: 100%;
+  padding-left: 0.5vw;
 }
 
 .x-axis {