Tweak tab styling, change tab titles

HSLdevcom · Sep 2, 2024 · 9b7ba35 · 9b7ba35
1 parent 2e76e36
commit 9b7ba35
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/renderer/components/HelmetProject/HelmetProject.css b/src/renderer/components/HelmetProject/HelmetProject.css
@@ -23,7 +23,7 @@
 
 .tab-list-item {
     width: 12rem;
-    height: 100%;
+    height: 60%;
     display: flex;
     align-content: center;
     justify-content: center;
@@ -32,15 +32,25 @@
     background-color: white;
     opacity: 0.65;
     margin-left: 5px;
+    cursor: default;
 }
 
 .tab-item-name {
     padding-top: 2rem;
 }
 
+.tab-item-name:hover { 
+    border-bottom: 2px solid #333333b5;
+}
+
 .selected-tab {
     background-color: white;
-    height: 100%;
+    height: 60%;
     color: #333333;
     opacity: 1;
+    outline: none;
+}
+
+.selected-tab:hover {
+    border-bottom: 2px solid #3333337e;
 }
diff --git a/src/renderer/components/HelmetProject/HelmetProject.jsx b/src/renderer/components/HelmetProject/HelmetProject.jsx
@@ -387,7 +387,7 @@ const HelmetProject = ({
         <Tabs className="tab-container">
           <TabList className="tab-list">
             <Tab selectedClassName="selected-tab" className="tab-list-item tab-item-name"> 
-              Scenarios
+              Skenaariot
             </Tab>
             <Tab selectedClassName="selected-tab" className="tab-list-item tab-item-name">
               CBA