From d336768c15fa5a1cbe5a4a051e749d00aa31be60 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Thu, 7 Jan 2021 17:06:37 +0100
Subject: zoekbalk + navbar icoon grootte

---
 src/components/navbar.tsx |  2 +-
 src/components/ui.tsx     | 20 +++++++++++++++-----
 src/global.css            | 11 ++++++++++-
 src/pages/game.tsx        |  3 ++-
 4 files changed, 28 insertions(+), 8 deletions(-)

(limited to 'src')

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() {
-- 
cgit v1.2.3