diff --git a/src/renderer/components/+preferences/application.tsx b/src/renderer/components/+preferences/application.tsx
index 40859cd5e0..25a80d1da5 100644
--- a/src/renderer/components/+preferences/application.tsx
+++ b/src/renderer/components/+preferences/application.tsx
@@ -27,7 +27,7 @@ import { ThemeStore } from "../../theme.store";
import { UserStore } from "../../../common/user-store";
import { Input } from "../input";
import { isWindows } from "../../../common/vars";
-import { FormSwitch, Switcher } from "../switch";
+import { FormSwitch, Switch, Switcher } from "../switch";
import moment from "moment-timezone";
import { CONSTANTS, defaultExtensionRegistryUrl, ExtensionRegistryLocation } from "../../../common/user-store/preferences-helpers";
import { action } from "mobx";
@@ -135,7 +135,8 @@ export const Application = observer(() => {
- Automatically start Lens on login
+ {/* {
/>
}
label="Automatically start Lens on login"
- />
+ /> */}
diff --git a/src/renderer/components/switch/index.ts b/src/renderer/components/switch/index.ts
index 60d44f3324..6987ce5b38 100644
--- a/src/renderer/components/switch/index.ts
+++ b/src/renderer/components/switch/index.ts
@@ -21,3 +21,4 @@
export * from "./switcher";
export * from "./form-switcher";
+export * from "./switch";
diff --git a/src/renderer/components/switch/switch.module.scss b/src/renderer/components/switch/switch.module.scss
new file mode 100644
index 0000000000..d4e54a205b
--- /dev/null
+++ b/src/renderer/components/switch/switch.module.scss
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/* Based on switch component from https://github.com/argyleink/gui-challenges */
+
+.Switch {
+ --thumb: hsl(0 0% 5%);
+ --thumb-highlight: hsl(0 0% 100% / 25%);
+ --track-inactive: hsl(80 0% 35%);
+ --track-active: hsl(85 75% 60%);
+
+ --thumb-size: 2rem;
+ --thumb: hsl(0 0% 100%);
+ --thumb-highlight: hsl(0 0% 0% / 25%);
+
+ --track-size: calc(var(--thumb-size) * 2);
+ --track-padding: 2px;
+ --track-inactive: hsl(80 0% 80%);
+ --track-active: rgb(85, 70%, 40%);
+
+ display: flex;
+ align-items: center;
+ gap: 2ch;
+ justify-content: space-between;
+ cursor: pointer;
+ user-select: none;
+
+ & > input {
+ --thumb-position: 0%;
+ --thumb-transition-duration: .25s;
+
+ padding: var(--track-padding);
+ background: var(--track-color-inactive);
+ inline-size: var(--track-size);
+ block-size: var(--thumb-size);
+ border-radius: var(--track-size);
+
+ appearance: none;
+ pointer-events: none;
+ touch-action: pan-y;
+ border: none;
+ outline-offset: 5px;
+ box-sizing: content-box;
+
+ flex-shrink: 0;
+ display: grid;
+ align-items: center;
+ grid: [track] 1fr / [track] 1fr;
+
+ transition: background-color .25s ease;
+
+ &::before {
+ --highlight-size: 0;
+
+ content: "";
+ cursor: pointer;
+ pointer-events: auto;
+ grid-area: track;
+ inline-size: var(--thumb-size);
+ block-size: var(--thumb-size);
+ background: var(--thumb-color);
+ box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
+ border-radius: 50%;
+ transform: translateX(var(--thumb-position));
+ transition:
+ transform var(--thumb-transition-duration) ease,
+ box-shadow .25s ease;
+ }
+
+ &:not(:disabled):hover::before {
+ --highlight-size: .5rem;
+ }
+
+ &:checked {
+ background: var(--track-color-active);
+ --thumb-position: 100%;
+ }
+
+ &:disabled {
+ cursor: not-allowed;
+ --thumb-color: transparent;
+
+ &::before {
+ cursor: not-allowed;
+ box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 50%);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/renderer/components/switch/switch.tsx b/src/renderer/components/switch/switch.tsx
new file mode 100644
index 0000000000..313058e728
--- /dev/null
+++ b/src/renderer/components/switch/switch.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import styles from "./switch.module.scss";
+
+import React, { DetailedHTMLProps, InputHTMLAttributes } from "react";
+
+interface Props extends DetailedHTMLProps, HTMLInputElement> {
+}
+
+export function Switch(props: Props) {
+ const id = `switch-${Date.now()}`;
+
+ return (
+
+ );
+}