Tweak styling, add padding to settings button

HSLdevcom · Aug 6, 2024 · 2e76e36 · 2e76e36
1 parent 2c985e5
commit 2e76e36
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git 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
@@ -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
@@ -15,27 +15,32 @@
     display: flex;
     justify-content: flex-start;
     list-style: none;
+    list-style-position: inside;
     width: 100%;
     height: 5rem;
     background-color: #F4F4F5;
 }
 
 .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;
 }
diff --git 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>