Preferences page redesign (#2446)

* Removing header part

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

* Restyling PageLayout

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

* Restyling .round-black Input

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

* Adding Tab navigation to Preferences

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

* Styling Application tab

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

* Add esc button

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

* Add media queries

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

* Introducting Switcher component

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

* Styling Proxy tab

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

* Moving start-up switcher to Other tab

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

* Styling Kubernetes tab

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

* Styling Extensions tab

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

* Styling inputs and selects

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

* Styling helm chart section

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

* Create a telemetry tab with extensions

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

* Adding lens Select theme

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

* Remove Other tab

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

* Fix mainBackground color

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

* Simplifying Tabs boilerplate

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

* Replacing button font

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

* Fixing one-column settings layout

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

* Fixing integration tests

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

* Fixin tests harder

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

* Showing bottom bar in workspaces

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev authored and GitHub committed 2021-04-06 15:45:23 +03:00
1 parent 33c405bdcf
commit 84cc0cdf55
23 files changed
+572 -237

No files matched your search

+54 -4
View File
@@ -6,7 +6,7 @@ html {
--select-menu-bgc: #{$menuBackgroundColor};
--select-menu-border-color: #{$halfGray};
--select-option-selected-color: #{$selectOptionHoveredColor};
--select-option-selected-color: #{$inputOptionHoverColor};
--select-option-focused-bgc: #{$colorInfo};
--select-option-focused-color: #{$textColorAccent};
@@ -14,6 +14,8 @@ html {
position: relative;
min-width: 220px;
* {
color: inherit;
}
@@ -33,7 +35,7 @@ html {
cursor: pointer;
&--is-focused {
box-shadow: 0 0 0 2px $primary;
box-shadow: 0 0 0 1px $primary;
}
}
@@ -73,8 +75,7 @@ html {
min-width: 100%;
&-list {
padding-right: 1px;
padding-left: 1px;
padding: 6px;
width: max-content;
min-width: 100%;
}
@@ -183,5 +184,54 @@ html {
}
}
}
&.theme-lens {
:hover {
&.Select__control {
box-shadow: 0 0 0 1px var(--inputControlHoverBorder);
}
}
:focus-within {
&.Select__control {
box-shadow: 0 0 0 1px $colorInfo;
}
}
&.Select__menu {
box-shadow: inset 0 0 0 1px var(--inputControlBorder);
}
.Select {
&__control {
box-shadow: 0 0 0 1px var(--inputControlBorder);
background: var(--inputControlBackground);
}
&__menu {
&-list {
padding: 6px;
}
}
&__option {
border-radius: 4px;
&:active {
background: var(--inputControlBackground);
}
&--is-selected {
background: var(--inputControlBackground);
color: var(--textColorAccent);
}
&--is-focused {
color: var(--textColorPrimary);
background: var(--inputControlBackground);
}
}
}
}
}
}
+1 -1
View File
@@ -24,7 +24,7 @@ export interface SelectOption<T = any> {
export interface SelectProps<T = any> extends ReactSelectProps<T>, CreatableProps<T> {
value?: T;
themeName?: "dark" | "light" | "outlined";
themeName?: "dark" | "light" | "outlined" | "lens";
menuClass?: string;
isCreatable?: boolean;
autoConvertOptions?: boolean; // to internal format (i.e. {value: T, label: string}[]), not working with groups