move SettingsPageButton to IconPageButton in ui.tsx

2 files changed, 30 insertions, 29 deletions

diff --git a/components/ui.tsx b/components/ui.tsx
index 2523745..11b9ddd 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -59,6 +59,29 @@ export function Button(props: {
 	</a>;
 }
 
+export function IconLabelButton(props: {
+	text: string;
+	icon: ReactNode;
+	onclick?: () => void;
+}) {
+	return <Button onclick={props.onclick} style={{
+		display: "inline-block",
+		verticalAlign: "top",
+		padding: 8,
+		float: "right",
+		marginLeft: 12
+	}}>
+		{props.icon}
+		<span style={{
+			display: "inline-block",
+			verticalAlign: "top",
+			fontWeight: 500,
+			marginLeft: 8,
+			marginTop: 3, marginBottom: 3, marginRight: 3
+		}}>{props.text}</span>
+	</Button>
+}
+
 export function Input(props: {
 	label?: string;
 	style?: CSSProperties;
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 51f7c3f..5569eb4 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -1,8 +1,8 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties } from 'react';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
-import { Vierkant, Button } from '../components/ui';
+import { Vierkant, IconLabelButton } from '../components/ui';
 import { AccountAvatar } from '../components/account';
 import { CurrentGameSettings } from '../components/gameSettings';
 
@@ -15,28 +15,6 @@ var SettingsSubsectionStyle: CSSProperties = {
 	minHeight: 40
 };
 
-function SettingsPageButton(props: {
-	text: string;
-	icon: ReactNode;
-	onclick?: () => void;
-}) {
-	return <Button onclick={props.onclick} style={{
-		display: "inline-block",
-		verticalAlign: "top",
-		padding: 8,
-		float: "right",
-		marginLeft: 12
-	}}>
-		{props.icon}
-		<span style={{
-			display: "inline-block",
-			verticalAlign: "top",
-			marginLeft: 8,
-			marginTop: 3, marginBottom: 3
-		}}>{props.text}</span>
-	</Button>
-}
-
 export default function SettingsPage() {
 	return (
 		<div>
@@ -47,25 +25,25 @@ export default function SettingsPage() {
 					<h2>Account</h2>
 					<div style={SettingsSubsectionStyle}>
 						<AccountAvatar size={100} dummy/>
-						<SettingsPageButton text="Profielfoto veranderen" icon={<EditOutlinedIcon/>}/>
+						<IconLabelButton text="Profielfoto veranderen" icon={<EditOutlinedIcon/>}/>
 					</div>
 					<div style={SettingsSubsectionStyle}>
-						<SettingsPageButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
+						<IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
 						<div style={{ display: "block" }}>
 							<b>Gebruikersnaam</b>
 							<p>Hier staat hij dan</p>
 						</div>
 					</div>
 					<div style={SettingsSubsectionStyle}>
-						<SettingsPageButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
-						<SettingsPageButton text="Onthullen" icon={<VisibilityOutlinedIcon/>}/>
+						<IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
+						<IconLabelButton text="Onthullen" icon={<VisibilityOutlinedIcon/>}/>
 						<div style={{ display: "block" }}>
 							<b>Email</b>
 							<p>******@example.com</p>
 						</div>
 					</div>
 					<div style={SettingsSubsectionStyle}>
-						<SettingsPageButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
+						<IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
 						<div style={{ display: "block" }}>
 							<b>Wachtwoord</b>
 						</div>