hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Styling sidebar tabs

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-11-22 11:03:55 +03:00
parent 0c4cb415aa
commit 4c1067b1e8
2 changed files with 51 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/components/+preferences/preferences.tsx
View File

@ -19,6 +19,7 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/ */
import "./preferences.scss"; import "./preferences.scss";
import tabStyles from "../layout/settings-layout.module.css";
import { makeObservable, observable } from "mobx"; import { makeObservable, observable } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
@ -52,6 +53,7 @@ import { LensProxy } from "./proxy";
import { Telemetry } from "./telemetry"; import { Telemetry } from "./telemetry";
import { Extensions } from "./extensions"; import { Extensions } from "./extensions";
import { sentryDsn } from "../../../common/vars"; import { sentryDsn } from "../../../common/vars";
import { cssNames } from "../../utils";
@observer @observer
export class Preferences extends React.Component { export class Preferences extends React.Component {
@ -69,8 +71,8 @@ export class Preferences extends React.Component {
const isActive = (route: RouteProps) => !!matchPath(currentLocation, { path: route.path, exact: route.exact }); const isActive = (route: RouteProps) => !!matchPath(currentLocation, { path: route.path, exact: route.exact });
return ( return (
<Tabs className="flex column" scrollable={false} onChange={(url) => navigateWithoutHistoryChange({ pathname: url })}> <Tabs className={cssNames(tabStyles.Tabs, "flex column")} scrollable={false} onChange={(url) => navigateWithoutHistoryChange({ pathname: url })}>
<div className="header">Preferences</div> <div className={tabStyles.header}>Preferences</div>
<Tab value={appURL()} label="Application" data-testid="application-tab" active={isActive(appRoute)}/> <Tab value={appURL()} label="Application" data-testid="application-tab" active={isActive(appRoute)}/>
<Tab value={proxyURL()} label="Proxy" data-testid="proxy-tab" active={isActive(proxyRoute)}/> <Tab value={proxyURL()} label="Proxy" data-testid="proxy-tab" active={isActive(proxyRoute)}/>
<Tab value={kubernetesURL()} label="Kubernetes" data-testid="kubernetes-tab" active={isActive(kubernetesRoute)}/> <Tab value={kubernetesURL()} label="Kubernetes" data-testid="kubernetes-tab" active={isActive(kubernetesRoute)}/>

47
src/renderer/components/layout/settings-layout.module.css
View File

@ -144,4 +144,51 @@
font-size: 14px; font-size: 14px;
color: var(--textColorDimmed); color: var(--textColorDimmed);
pointer-events: none; pointer-events: none;
}
.Tabs {
.header {
padding: 6px 10px;
font-size: 13px;
font-weight: 800;
line-height: 16px;
text-transform: uppercase;
color: var(--textColorPrimary);
&:first-child {
padding-top: 0;
}
}
:global(.Tab) {
padding: 6px 10px;
margin-bottom: 2px;
border-radius: 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 15px;
line-height: 20px;
cursor: pointer;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&::after {
content: none;
}
&:hover {
background-color: var(--navSelectedBackground);
color: var(--navHoverColor);
}
&:global(.active) {
background-color: var(--navSelectedBackground);
}
> :global(.label) {
width: 100%;
font-weight: 500;
}
}
} }