From 352eca9f2a797d6bc853f30a53b0c842b5ad66aa Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Tue, 20 Feb 2024 18:10:11 -0500
Subject: [PATCH] docs: simpler footer and better background color on small
 devices

---
 packages/documentation/.ladle/components.tsx | 37 +++++++-------------
 packages/documentation/.ladle/config.mjs     |  2 +-
 2 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/packages/documentation/.ladle/components.tsx b/packages/documentation/.ladle/components.tsx
index bdf4c8ee..316e49b6 100644
--- a/packages/documentation/.ladle/components.tsx
+++ b/packages/documentation/.ladle/components.tsx
@@ -1,12 +1,6 @@
 import "./styles.css";
 
-import {
-	ButtonIcon,
-	Flexgrid,
-	FlexgridItem,
-	Footer,
-	IconGitHub,
-} from "@versini/ui-components";
+import { ButtonIcon, Footer, IconGitHub } from "@versini/ui-components";
 
 import type { GlobalProvider } from "@ladle/react";
 import clsx from "clsx";
@@ -58,26 +52,21 @@ export const Provider: GlobalProvider = ({
 			<Footer
 				kind="light"
 				row1={
-					<Flexgrid alignHorizontal="center" alignVertical="center">
-						<FlexgridItem className="text-copy-lighter">
-							UI Components v{import.meta.env.BUILDVERSION} -
-						</FlexgridItem>
-						<FlexgridItem>
-							<ButtonIcon
-								noBorder
-								size="small"
-								kind="light"
-								label="link to UI Components GitHub repository"
-								onClick={handleOnClickGitHub}
-							>
-								<IconGitHub decorative />
-							</ButtonIcon>
-						</FlexgridItem>
-					</Flexgrid>
+					<ButtonIcon
+						noBorder
+						size="small"
+						kind="light"
+						spacing={{ b: 2 }}
+						label="link to UI Components GitHub repository"
+						onClick={handleOnClickGitHub}
+					>
+						<IconGitHub decorative />
+					</ButtonIcon>
 				}
 				row2={
 					<div className="text-copy-lighter">
-						&copy; {new Date().getFullYear()} {import.meta.env.OWNER}
+						UI Components v{import.meta.env.BUILDVERSION} - &copy;{" "}
+						{new Date().getFullYear()} {import.meta.env.OWNER}
 					</div>
 				}
 			/>
diff --git a/packages/documentation/.ladle/config.mjs b/packages/documentation/.ladle/config.mjs
index 6cf406a8..d8613a0f 100644
--- a/packages/documentation/.ladle/config.mjs
+++ b/packages/documentation/.ladle/config.mjs
@@ -12,7 +12,7 @@ export default {
 		"Form-components*",
 	],
 	appendToHead: `
-	<style>.ladle-background {background-color:rgb(100 116 139)}</style>
+	<style>html, body, .ladle-background {background-color:rgb(100 116 139)}</style>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">