Allow user to select Kubeconfig from filesystem (#740)

* Allow user to select Kubeconfig from filesystem, fix #738

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/tabs/tabs.scss

@@ -4,6 +4,10 @@
   -webkit-user-select: none; /* safari */
   -moz-user-select: none; /* firefox */
 
+  &.withBorder {
+    border-bottom: 1px solid $borderFaintColor;
+  }
+
   &.wrap {
     flex-wrap: wrap;
   }
@@ -24,7 +28,7 @@
 }
 
 .Tab {
-  --color-active: inherit;
+  --color-active: #{$layoutTabsActiveColor};
   --line-color-active: #{$primary};
   --line-color-focus: currentColor;
 

src/renderer/components/tabs/tabs.tsx

@@ -7,6 +7,7 @@ const TabsContext = React.createContext<TabsContextValue>({});
 
 interface TabsContextValue<D = any> {
   autoFocus?: boolean;
+  withBorder?: boolean;
   value?: D;
   onChange?(value: D): void;
 }
@@ -29,16 +30,12 @@ export class Tabs extends React.PureComponent<TabsProps> {
   }
 
   render() {
-    const {
-      center, wrap, onChange, value, autoFocus,
-      scrollable = true,
-      ...elemProps
-    } = this.props;
-    let { className } = this.props;
-    className = cssNames("Tabs", className, {
-      "center": center,
-      "wrap": wrap,
-      "scrollable": scrollable,
+    const { center, wrap, onChange, value, autoFocus, scrollable = true, withBorder, ...elemProps } = this.props;
+    const className = cssNames("Tabs", this.props.className, {
+      center: center,
+      wrap: wrap,
+      scrollable: scrollable,
+      withBorder: withBorder,
     });
     return (
       <TabsContext.Provider value={{ autoFocus, value, onChange }}>