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 hotbar selector tooltip

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-05-03 08:42:51 +03:00
parent 061f4f8a07
commit 09de57de28
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/renderer/components/hotbar/hotbar-selector.tsx
View File

@ -2,7 +2,7 @@ import "./hotbar-selector.scss";
import React from "react"; import React from "react";
import { Icon } from "../icon"; import { Icon } from "../icon";
import { Badge } from "../badge"; import { Badge } from "../badge";
import { Tooltip } from "@material-ui/core"; import { makeStyles, Tooltip } from "@material-ui/core";
import { Hotbar, HotbarStore } from "../../../common/hotbar-store"; import { Hotbar, HotbarStore } from "../../../common/hotbar-store";
import { CommandOverlay } from "../command-palette"; import { CommandOverlay } from "../command-palette";
import { HotbarSwitchCommand } from "./hotbar-switch-command"; import { HotbarSwitchCommand } from "./hotbar-switch-command";
@ -11,15 +11,27 @@ interface Props {
hotbar: Hotbar; hotbar: Hotbar;
} }
const useStyles = makeStyles(() => ({
arrow: {
color: "#222",
},
tooltip: {
fontSize: 12,
backgroundColor: "#222",
},
}));
export function HotbarSelector({ hotbar }: Props) { export function HotbarSelector({ hotbar }: Props) {
const store = HotbarStore.getInstance(); const store = HotbarStore.getInstance();
const activeIndexDisplay = store.activeHotbarIndex + 1; const activeIndexDisplay = store.activeHotbarIndex + 1;
const classes = useStyles();
return ( return (
<div className="HotbarSelector flex align-center"> <div className="HotbarSelector flex align-center">
<Icon material="play_arrow" className="previous box" onClick={() => store.switchToPrevious()} /> <Icon material="play_arrow" className="previous box" onClick={() => store.switchToPrevious()} />
<div className="box grow flex align-center"> <div className="box grow flex align-center">
<Tooltip arrow title={hotbar.name}> <Tooltip arrow title={hotbar.name} classes={classes}>
<Badge <Badge
id="hotbarIndex" id="hotbarIndex"
small small