Add dock-tabs.module.scss

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/dock-tab.module.scss

@@ -6,10 +6,7 @@
 .DockTab {
   padding: var(--padding);
   height: 32px;
-  margin-top: 3px;
-  margin-bottom: 3px;
   margin-right: 4px;
-  border-radius: 3px;
   position: relative;
   background: no-repeat left 50% linear-gradient(0deg, #43424d, #43424d);
   background-size: 1px 3ch;
@@ -25,6 +22,7 @@
   &:global(.active) {
     background-color: hsl(245deg 8% 28%);
     background-image: none;
+    border-bottom: 2px solid var(--primary);
 
     .close {
       opacity: 1;

src/renderer/components/dock/dock-tab.tsx

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import styles from "./dock-tab.module.css";
+import styles from "./dock-tab.module.scss";
 
 import React from "react";
 import { observer } from "mobx-react";

src/renderer/components/dock/dock-tabs.module.scss

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.dockTabs {
+  display: flex;
+}

src/renderer/components/dock/dock-tabs.tsx

@@ -3,6 +3,8 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
+import styles from "./dock-tabs.module.scss";
+
 import React, { Fragment } from "react";
 import { Icon } from "../icon";
 import { Tabs } from "../tabs/tabs";
@@ -39,7 +41,7 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
   };
 
   return (
-    <div className={"tabs-wrapper flex gaps align-center"}>
+    <div className={styles.dockTabs}>
       <div>
         <Tabs
           className="DockTabs"