diff options
| -rw-r--r-- | src/components/navbar.tsx | 2 | ||||
| -rw-r--r-- | src/components/ui.tsx | 20 | ||||
| -rw-r--r-- | src/global.css | 11 | ||||
| -rw-r--r-- | src/pages/game.tsx | 3 |
4 files changed, 28 insertions, 8 deletions
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index 2d38509..1ad6fe4 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -30,7 +30,7 @@ export function NavBar() { left: 0, overflow: "hidden", - whiteSpace: "nowrap", + whiteSpace: "nowrap" }}> <div style={NavBarItemStyle}><LogoDark/></div> <a href="/" style={NavBarItemStyle}><Home/></a> diff --git a/src/components/ui.tsx b/src/components/ui.tsx index 2a7e950..27d98cd 100644 --- a/src/components/ui.tsx +++ b/src/components/ui.tsx @@ -1,5 +1,7 @@ import { CSSProperties, ReactNode } from "react"; +import SearchIcon from '@material-ui/icons/Search'; + interface VierkantProps { href?: string; width?: string; @@ -67,21 +69,29 @@ export function SearchBar(props: SearchBarProps) { <input type="text" placeholder={props.label} spellCheck={false} style={{ padding: 12, border: 0, - width: "calc(100% - 24px - 40px)", + width: "calc(100% - 24px - 41px)", fontSize: 14, backgroundColor: "var(--page-background)", color: "var(--text-alt)", borderBottomLeftRadius: 8, - borderTopLeftRadius: 8 + borderTopLeftRadius: 8, + fontFamily: "Inter" }}/> <div style={{ - width: 40, - height: 40, + width: 41, + height: 41, backgroundColor: "var(--disk-a)", display: "inline-block", verticalAlign: "top", position: "relative" - }}></div> + }}> + <SearchIcon style={{ + fontSize: 24, + position: "absolute", + top: "50%", left: "50%", + transform: "translate(-50%, -50%)" + }}/> + </div> </div> } diff --git a/src/global.css b/src/global.css index bf7c090..f132027 100644 --- a/src/global.css +++ b/src/global.css @@ -25,7 +25,10 @@ body { } /* font size */ -html { font-size: 14px; } +html { + font-size: 14px; + font-family: "Inter"; +} /* link color fix */ a { color: var(--text); } @@ -54,3 +57,9 @@ input::placeholder { opacity: .8; } +/* remove chrome's ugly :focus outline */ +:focus { outline: none; } + +/* icon size fix */ +.navbar svg { font-size: 24px; } + diff --git a/src/pages/game.tsx b/src/pages/game.tsx index 1725d09..f3feb89 100644 --- a/src/pages/game.tsx +++ b/src/pages/game.tsx @@ -32,7 +32,8 @@ var InviteButtonLabelStyle: CSSProperties = { textAlign: "center", color: "var(--text-alt)", width: 136, - fontSize: 20 + fontSize: 20, + userSelect: "none" } export default function GamePage() { |