soortvan zoekbalk

4 files changed, 44 insertions, 5 deletions

diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx
index bd28221..13bb1cc 100644
--- a/src/components/gameSettings.tsx
+++ b/src/components/gameSettings.tsx
@@ -12,7 +12,7 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
 		height: 80
 	}}>
 		<p style={{
-			opacity: .6,
+			opacity: .75,
 			fontStyle: "italic",
 			userSelect: "none",
 			position: "absolute",
@@ -40,7 +40,8 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
 				width: 85,
 				verticalAlign: "middle",
 				textAlign: "center",
-				transform: "translateY(-50%)"
+				transform: "translateY(-50%)",
+				userSelect: "none"
 			}}>Spelregels aanpassen</span>
 		</Button>
 	</div>;
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index d869151..2a7e950 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -53,3 +53,35 @@ export function Button(props: ButtonProps) {
 	</div>;
 }
 
+interface SearchBarProps {
+	label?: string;
+}
+
+export function SearchBar(props: SearchBarProps) {
+	return <div style={{
+		marginTop: 24,
+		borderRadius: 8,
+		overflow: "hidden",
+		width: "100%"
+	}}>
+		<input type="text" placeholder={props.label} spellCheck={false} style={{
+			padding: 12,
+			border: 0,
+			width: "calc(100% - 24px - 40px)",
+			fontSize: 14,
+			backgroundColor: "var(--page-background)",
+			color: "var(--text-alt)",
+			borderBottomLeftRadius: 8,
+			borderTopLeftRadius: 8
+		}}/>
+		<div style={{
+			width: 40,
+			height: 40,
+			backgroundColor: "var(--disk-a)",
+			display: "inline-block",
+			verticalAlign: "top",
+			position: "relative"
+		}}></div>
+	</div>
+}
+
diff --git a/src/global.css b/src/global.css
index 5787cee..bf7c090 100644
--- a/src/global.css
+++ b/src/global.css
@@ -49,3 +49,8 @@ td, th {
 	font-size: 15px;
 }
 
+input::placeholder {
+	font-style: italic;
+	opacity: .8;
+}
+
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index b17c12a..1725d09 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -5,13 +5,13 @@ import { CenteredPage } from '../components/page';
 import { VoerBord } from '../components/voerBord';
 import { DialogBox } from '../components/dialogBox';
 import { CurrentGameSettings } from '../components/gameSettings';
-import { Button } from '../components/ui';
+import { Button, SearchBar } from '../components/ui';
 
 import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded';
 import LinkRoundedIcon from '@material-ui/icons/LinkRounded';
 
 var InviteButtonStyle: CSSProperties = {
-	backgroundColor: "var(--text)",
+	backgroundColor: "var(--page-background)",
 	height: 160,
 	padding: 12
 }
@@ -30,7 +30,7 @@ var InviteButtonLabelStyle: CSSProperties = {
 	left: "50%",
 	transform: "translateX(-50%)",
 	textAlign: "center",
-	color: "var(--background)",
+	color: "var(--text-alt)",
 	width: 136,
 	fontSize: 20
 }
@@ -64,6 +64,7 @@ export default function GamePage() {
 							<h2 style={InviteButtonLabelStyle}>Uitnodigen via link</h2>
 						</Button>
 					</div>
+					<SearchBar label="Zoeken in vriendenlijst"/>
 				</DialogBox>
 			</CenteredPage>
 		</div>