From b0e71f9257a4a74bf70feeca6c2a2e9c809779af Mon Sep 17 00:00:00 2001
From: Madeorsk <madeorsk@protonmail.com>
Date: Sun, 14 Jul 2024 18:22:13 +0200
Subject: [PATCH] Normalize buttons position for cards and modals, and fix
 cards first and last elements position.

---
 demo/DemoApp.tsx                   |  7 +++++--
 demo/DemoModal.tsx                 |  5 ++++-
 src/Components/Buttons/Buttons.tsx | 16 ++++++++++++++++
 src/styles/components/_button.less | 27 +++++++++++++++++++++++++++
 src/styles/components/_card.less   | 15 ---------------
 5 files changed, 52 insertions(+), 18 deletions(-)
 create mode 100644 src/Components/Buttons/Buttons.tsx

diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx
index bc1c6d1..5482323 100644
--- a/demo/DemoApp.tsx
+++ b/demo/DemoApp.tsx
@@ -32,6 +32,7 @@ import {DemoCurtain} from "./DemoCurtain";
 import {DemoModal} from "./DemoModal";
 import {useCallableModal} from "../src/Components/Modals/Modals";
 import {ModalType} from "../src/Components/Modals/ModalsTypes";
+import {Buttons} from "../src/Components/Buttons/Buttons";
 
 export function DemoApp()
 {
@@ -245,8 +246,10 @@ export function DemoApp()
 					egestas, leo lorem malesuada felis, eu imperdiet orci magna ultrices est.
 				</p>
 
-				<button type={"button"}>Button position ?</button>
-				<button type={"button"}>Button position ?</button>
+				<Buttons>
+					<button type={"button"}>Button position ?</button>
+					<button type={"button"}>Button position ?</button>
+				</Buttons>
 			</Card>
 
 			<Card>
diff --git a/demo/DemoModal.tsx b/demo/DemoModal.tsx
index 5df1b62..9a7f4d0 100644
--- a/demo/DemoModal.tsx
+++ b/demo/DemoModal.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import {Modal, useModal} from "../src/Components/Modals/Modals";
 import {ModalType} from "../src/Components/Modals/ModalsTypes";
+import {Buttons} from "../src/Components/Buttons/Buttons";
 
 export function DemoModal({type}: { type: ModalType; })
 {
@@ -10,7 +11,9 @@ export function DemoModal({type}: { type: ModalType; })
 		<Modal type={type} title={"Modal title"}>
 			Modal test content
 
-			<button onClick={close}>OK</button>
+			<Buttons>
+				<button onClick={close}>OK</button>
+			</Buttons>
 		</Modal>
 	);
 }
diff --git a/src/Components/Buttons/Buttons.tsx b/src/Components/Buttons/Buttons.tsx
new file mode 100644
index 0000000..0a7ca23
--- /dev/null
+++ b/src/Components/Buttons/Buttons.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import {classes} from "../../Utils";
+
+export function Buttons({placement, children}: React.PropsWithChildren<{
+	placement?: "right"|"left"|"center";
+}>)
+{
+	// Default placement: right.
+	placement = placement ?? "right";
+
+	return (
+		<div className={classes("buttons", placement)}>
+			{children}
+		</div>
+	);
+}
diff --git a/src/styles/components/_button.less b/src/styles/components/_button.less
index 35ff306..b3f3bed 100644
--- a/src/styles/components/_button.less
+++ b/src/styles/components/_button.less
@@ -168,3 +168,30 @@ a.button, button, input[type="submit"], input[type="reset"]
 		margin-right: 0.05em;
 	}
 }
+
+div.buttons
+{
+	display: flex;
+	flex-direction: row;
+	gap: 0.5em;
+
+	margin: 0.25em auto;
+
+	&.right
+	{
+		justify-content: flex-end;
+	}
+	&.left
+	{
+		justify-content: flex-start;
+	}
+	&.center
+	{
+		justify-content: center;
+	}
+
+	button, .button
+	{
+		margin: 0;
+	}
+}
diff --git a/src/styles/components/_card.less b/src/styles/components/_card.less
index d349abb..14804a3 100644
--- a/src/styles/components/_card.less
+++ b/src/styles/components/_card.less
@@ -15,21 +15,6 @@
 		margin: 0.33em 0 0.5em 0;
 	}
 
-	button
-	{
-		display: block;
-		margin-left: auto;
-	}
-
-	> :first-child
-	{
-		margin-top: 0;
-	}
-	> :last-child
-	{
-		margin-bottom: 0;
-	}
-
 	&.floating
 	{
 		width: 20em;