search page without inline css

7 files changed, 50 insertions, 73 deletions

diff --git a/components/ui.tsx b/components/ui.tsx
index e2d19ad..60b80f4 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -12,14 +12,11 @@ export function Vierkant(props: {
 	children?: ReactNode;
 	className?: string;
 	id?: string;
-	fullwidth?: boolean;
 	onclick?: () => void;
 }) {
 	return <a
 		href={props.href}
-		className={['bg-800', 'round-l', 'pad-l', 'vierkant', props.className, props.fullwidth && 'fullwidth'].join(
-			' ',
-		)}
+		className={['bg-800', 'round-l', 'vierkant', props.className].join(' ')}
 		id={props.id}
 		onClick={props.onclick}
 	>
@@ -98,6 +95,7 @@ export function Input(props: {
 	dark?: boolean;
 	autocomplete?: string;
 	autofocus?: boolean;
+	className?: string;
 }) {
 	return <input
 		id={props.id}
@@ -107,20 +105,9 @@ export function Input(props: {
 		placeholder={props.label}
 		spellCheck={false}
 		defaultValue={props.value ? String(props.value) : ''}
-		className={props.dark ? 'dark' : 'light'}
+		className={"input" + " " + (props.dark ? 'dark' : 'light') + " " + props.className}
 		autoComplete={props.autocomplete}
 		autoFocus={props.autofocus}
-		style={{
-			padding: 12,
-			border: 0,
-			width: 'calc(100% - 24px)',
-			fontSize: 14,
-			backgroundColor: 'var(--page-background)',
-			color: 'var(--text-alt)',
-			borderRadius: 8,
-			fontFamily: 'Inter',
-			...props.style,
-		}}
 	/>;
 }
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 290e687..3f66711 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -12,6 +12,7 @@ import '../styles/ui.css';
 import '../styles/utility.css';
 
 import '../styles/index.css';
+import '../styles/search.css';
 
 export default function VierOpEenRijWebsite({ Component, pageProps }) {
 	return <div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 3d9da21..b5f4b50 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -107,17 +107,17 @@ export default function HomePage() {
 						<Icon path={mdiRobotExcited} className='icon' />
 						<span className='text'>Tegen computer</span>
 					</Vierkant>}
-				<Vierkant className='loginOrRegisterBox'>
+				<Vierkant className='loginOrRegisterBox pad-l'>
 					{loggedIn
 						? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
 						: <LoginOrRegisterBox />}
 				</Vierkant>
 			</div>
 			{loggedIn
-				&& <Vierkant fullwidth>
+				&& <Vierkant className="fullwidth pad-l">
 					<RecentGames games={gameInfo?.games} />
 				</Vierkant>}
-			<Vierkant fullwidth>
+			<Vierkant className="fullwidth pad-l">
 				<h2>Nieuws ofzo</h2>
 				<p style={{ margin: '6px 0' }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
 			</Vierkant>
diff --git a/pages/search.tsx b/pages/search.tsx
index 2b8668a..90f1f67 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -24,32 +24,21 @@ function search(callback: (results: Array<userInfo>) => void) {
 }
 
 function SearchResults(props: { userList: Array<userInfo>; }) {
-	return <div>
+	return <div className="results">
 		{props.userList?.map(user => <SearchResult user={user} key={user.id} />)}
 	</div>;
 }
 
 function SearchResult(props: { user: userInfo; }) {
 	return <Vierkant
-		style={{
-			padding: 12,
-		}}
-		fullwidth
+		className="result pad-m fullwidth"
 		href={'/user?id=' + props.user.id}
 	>
-		<div style={{ position: 'relative' }}>
+		<div className="inner posrel">
 			<AccountAvatar size={48} id={props.user.id} />
-			<div
-				style={{
-					position: 'absolute',
-					top: 0,
-					right: 0,
-					bottom: 0,
-					left: 48 + 12,
-				}}
-			>
-				<b>{props.user.username}</b>
-				<p>{props.user.status}</p>
+			<div className="userInfo posabs v0 r0">
+				<b className="username">{props.user.username}</b>
+				<p className="status">{props.user.status}</p>
 			</div>
 		</div>
 	</Vierkant>;
@@ -58,40 +47,22 @@ function SearchResult(props: { user: userInfo; }) {
 function SearchBar(props: {
 	searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
 }) {
-	return <Vierkant
-		fullwidth
-		style={{
-			padding: 8,
-			marginBottom: 24,
-		}}
-	>
+	return <Vierkant className="pad-m fullwidth searchBar">
 		<form onSubmit={props.searchFunction}>
 			<Input
 				id='searchBar'
 				label='Zoeken voor gebruikers...'
 				autocomplete='off'
-				dark
 				autofocus
-				style={{
-					backgroundColor: 'var(--background)',
-					color: 'var(--text)',
-					padding: 14,
-					fontSize: 16,
-					width: 'calc(100% - 48px - 14px * 2)',
-				}}
+				className="pad-m"
 			/>
 			<Button
-				style={{
-					padding: 12,
-					float: 'right',
-					display: 'inline-block',
-					borderRadius: 4,
-				}}
+				className="pad-m dispinbl valigntop"
 				onclick={props.searchFunction}
 			>
 				<SearchOutlinedIcon />
 			</Button>
-			<input type='submit' style={{ display: 'none' }} />
+			<input type='submit' className="dispnone" />
 		</form>
 	</Vierkant>;
 }
@@ -112,12 +83,7 @@ export default function HomePage() {
 			<SearchBar searchFunction={getSearchResults} />
 			<SearchResults userList={results} />
 			{searched && results.length == 0 && <h1
-				style={{
-					opacity: .6,
-					color: 'var(--text)',
-					textAlign: 'center',
-					margin: '24px 32px',
-				}}
+				className="noresults center subtile"
 			>
 				Geen zoekresultaten gevonden
 			</h1>}
diff --git a/styles/global.css b/styles/global.css
index 3c28cfc..b6ed028 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -116,14 +116,20 @@ h1, h2, h3, p, b, i, span, td, th {
 table { table-layout: fixed; }
 
 /* table styles */
-td, th {
-	padding: 4px;
-	font-size: 15px;
+td, th { padding: 4px; }
+
+input {
+	color: var(--foreground);
+	background-color: transparent;
+	font-family: inherit;
+	border: 0;
+	font-size: 1rem; /* why? */
 }
 
 input::placeholder {
 	font-style: italic;
-	opacity: .8;
+	opacity: 1;
+	color: var(--gray-600);
 }
 
 /* remove chrome's ugly :focus outline */
@@ -135,10 +141,6 @@ input::placeholder {
 /* material-ui default state */
 svg.MuiSvgIcon-root { transition: none !important; }
 
-input::placeholder { opacity: .75; }
-input.dark::placeholder { color: var(--text); }
-input.light::placeholder { color: var(--text-alt); }
-
 /* editable field status */
 *[contenteditable] { border-color: var(--background-alt); }
 *[contenteditable="true"]:focus { border-color: var(--disk-a); }
diff --git a/styles/search.css b/styles/search.css
new file mode 100644
index 0000000..06a3918
--- /dev/null
+++ b/styles/search.css
@@ -0,0 +1,12 @@
+.searchBar input {
+	width: calc(100% - 2 * var(--spacing-medium) - 48px);
+	margin: 2px 0;
+}
+
+.results .result .inner .userInfo {
+	left: calc(48px + var(--spacing-medium));
+}
+
+h1.noresults {
+	margin: 24px 32px;
+}
diff --git a/styles/utility.css b/styles/utility.css
index 4331d3a..783b168 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -28,8 +28,17 @@
 
 .a0 { top: 0; bottom: 0; left: 0; right: 0; }
 
+.dispnone { display: none; }
+.dispinbl { display: inline-block; }
+.dispbl { display: block; }
+
+.valigntop { vertical-align: top; }
+.valignsup { vertical-align: super; }
+
+.center { text-align: center; }
+
 .subtile {
-	color: var(--gray-300);
+	color: var(--gray-600);
 	font-style: italic;
 }