From 2e76e3645e680d2a1d1881f3e54b0220e2a79c2c Mon Sep 17 00:00:00 2001
From: e-halinen <54105602+e-halinen@users.noreply.github.com>
Date: Tue, 6 Aug 2024 09:40:03 +0300
Subject: [PATCH] Tweak styling, add padding to settings button

---
 src/renderer/components/App.css                     |  3 +++
 .../CostBenefitAnalysis/CostBenefitAnalysis.css     |  1 +
 .../components/HelmetProject/HelmetProject.css      | 13 +++++++++----
 .../components/HelmetProject/HelmetProject.jsx      |  8 ++++----
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/App.css b/src/renderer/components/App.css
index 596d7b0c..89233c87 100644
--- a/src/renderer/components/App.css
+++ b/src/renderer/components/App.css
@@ -83,6 +83,9 @@ hr {
     background-color: #ffffff;
     background-image: url('Settings.png');
     background-repeat: no-repeat;
+    background-position: center;
+    padding: 0.5rem;
+    border-radius: 1rem;
 }
 
 .App__header {
diff --git a/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css b/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
index 050ed788..2b003809 100644
--- a/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
+++ b/src/renderer/components/HelmetProject/CostBenefitAnalysis/CostBenefitAnalysis.css
@@ -5,6 +5,7 @@
     box-sizing: border-box;
     padding: 20px;
     margin-bottom: 20px;
+    margin-top: 3rem;
 }
 
 .CBA__heading {
diff --git a/src/renderer/components/HelmetProject/HelmetProject.css b/src/renderer/components/HelmetProject/HelmetProject.css
index 4c9fd86d..f070c6b4 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.css
+++ b/src/renderer/components/HelmetProject/HelmetProject.css
@@ -15,6 +15,7 @@
     display: flex;
     justify-content: flex-start;
     list-style: none;
+    list-style-position: inside;
     width: 100%;
     height: 5rem;
     background-color: #F4F4F5;
@@ -22,20 +23,24 @@
 
 .tab-list-item {
     width: 12rem;
-    height: 2rem;
+    height: 100%;
     display: flex;
     align-content: center;
     justify-content: center;
-    color: lightgray;
+    color: #333333;
+    border-radius: 1rem 1rem 0 0;
+    background-color: white;
+    opacity: 0.65;
+    margin-left: 5px;
 }
 
 .tab-item-name {
-    margin-top: 2rem;
+    padding-top: 2rem;
 }
 
 .selected-tab {
     background-color: white;
     height: 100%;
     color: #333333;
-    border-radius: 1rem 1rem 0 0;
+    opacity: 1;
 }
\ No newline at end of file
diff --git a/src/renderer/components/HelmetProject/HelmetProject.jsx b/src/renderer/components/HelmetProject/HelmetProject.jsx
index 6d5d43f1..12ce9f14 100644
--- a/src/renderer/components/HelmetProject/HelmetProject.jsx
+++ b/src/renderer/components/HelmetProject/HelmetProject.jsx
@@ -386,11 +386,11 @@ const HelmetProject = ({
       <div className="Project__runtime">
         <Tabs className="tab-container">
           <TabList className="tab-list">
-            <Tab selectedClassName="selected-tab" className="tab-list-item">
-              <h4 className="tab-item-name">Scenarios</h4>
+            <Tab selectedClassName="selected-tab" className="tab-list-item tab-item-name"> 
+              Scenarios
             </Tab>
-            <Tab selectedClassName="selected-tab" className="tab-list-item">
-              <h4 className="tab-item-name">CBA</h4>
+            <Tab selectedClassName="selected-tab" className="tab-list-item tab-item-name">
+              CBA
             </Tab>
           </TabList>