From 2527a6a2e0a9e679cb5a19abb56ad6a363cf980d Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 18 Apr 2021 13:42:44 +0200
Subject: settings page / balloon+tuitje without inline css done

---
 components/ui.tsx | 131 ++++++++++--------------------------------------------
 1 file changed, 24 insertions(+), 107 deletions(-)

(limited to 'components')

diff --git a/components/ui.tsx b/components/ui.tsx
index 89e8ffe..f939456 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -27,10 +27,9 @@ export function Vierkant(props: {
 export function Button(props: {
 	text?: string;
 	children?: ReactNode;
-	style?: CSSProperties;
 	href?: string;
 	className?: string;
-	onclick?: (() => void);
+	onclick?: () => void;
 	id?: string;
 }) {
 	return <a
@@ -52,33 +51,18 @@ export function IconLabelButton(props: {
 	text: string;
 	icon: ReactNode;
 	onclick?: () => void;
-	style?: CSSProperties;
 	href?: string;
+	className?: string;
 }) {
 	return <Button
 		onclick={props.onclick}
 		href={props.href}
-		style={{
-			display: 'inline-block',
-			verticalAlign: 'top',
-			padding: 8,
-			float: 'right',
-			marginLeft: 12,
-			...props.style,
-		}}
+		className={"iconlabel dispinbl valigntop floatr" + " " + props.className}
 	>
-		{props.icon}
-		<span
-			style={{
-				display: 'inline-block',
-				verticalAlign: 'top',
-				fontWeight: 500,
-				marginLeft: 8,
-				marginTop: 3,
-				marginBottom: 3,
-				marginRight: 3,
-			}}
-		>
+		<div className="dispinbl icon">
+			{props.icon}
+		</div>
+		<span className="dispinbl valigntop label">
 			{props.text}
 		</span>
 	</Button>;
@@ -186,110 +170,43 @@ export function CheckBox(props: {
 	</div>;
 }
 
-export class ColorPicker extends Component<{
-	style?: CSSProperties;
-}> {
-	state: {
-		color: string;
-		dark: boolean;
-	} = {
-		color: '#012345',
-		dark: true,
-	};
+export function ColorPicker() {
+	var [ dark, setDark ] = useState(false);
+	var [ color, setColor ] = useState("#012345");
 
-	render() {
-		return <Button
-			style={{
-				display: 'inline-block',
-				verticalAlign: 'top',
-				padding: 6,
-				float: 'right',
-				marginLeft: 12,
-				color: this.state.dark ? 'var(--text)' : 'var(--text-alt)',
-				borderColor: this.state.dark ? 'var(--text)' : 'var(--text-alt)',
-				borderWidth: 2,
-				borderStyle: 'solid',
-				backgroundColor: this.state.color,
-				...this.props.style,
-			}}
-		>
-			<div>
-				<EditOutlinedIcon />
-				<div
-					style={{
-						width: 150,
-						height: 24,
-						display: 'inline-block',
-						textAlign: 'center',
-						verticalAlign: 'top',
-						position: 'relative',
-					}}
-				>
-					<span
-						style={{
-							position: 'absolute',
-							top: '50%',
-							left: '50%',
-							transform: 'translate(-50%, -50%)',
-							fontWeight: 600,
-							fontFeatureSettings: '"tnum", "ss01"',
-						}}
-					>
-						{this.state.color}
-					</span>
-				</div>
+	return <Button className="colorpicker dispinbl valigntop pad-s floatr">
+		<div>
+			<EditOutlinedIcon />
+			<div className="labelwrapper valigntop dispinbl center posrel">
+				<span className="label posabs">
+					{color}
+				</span>
 			</div>
-		</Button>;
-	}
+		</div>
+	</Button>;
 }
 
-export function Tuitje(props: {
-	style?: CSSProperties;
-	rotation?: number;
-}) {
+export function Tuitje() {
 	return <svg
 		width='36'
 		height='12'
 		viewBox='0 0 36 12'
 		fill='none'
 		xmlns='http://www.w3.org/2000/svg'
-		style={{
-			...props.style,
-		}}
+		className="tuitje posabs"
 	>
 		<path
 			d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z'
-			fill={props.style?.background as string || 'var(--background)'}
+			fill='var(--background)'
 		/>
 	</svg>;
 }
 
 export function Bubble(props: {
 	children?: ReactNode;
-	style?: CSSProperties;
-	tuitjeStyle?: CSSProperties;
 }) {
-	return <Vierkant
-		style={{
-			position: 'absolute',
-			textAlign: 'center',
-			margin: 0,
-			overflow: 'visible',
-			left: '50%',
-			top: -24,
-			transform: 'translateY(-100%) translateX(-50%)',
-			boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-			...props.style,
-		}}
-	>
+	return <Vierkant className="bubble posabs center drop-2">
 		{props.children}
-		<Tuitje
-			style={{
-				position: 'absolute',
-				bottom: -12,
-				transform: 'translate(-50%, 0%) rotate(0deg)',
-				...props.tuitjeStyle,
-			}}
-		/>
+		<Tuitje />
 	</Vierkant>;
 }
-- 
cgit v1.2.3