Merge pull request #333 from aversini/docs-simpler-footer-and-better-…

…background-color-on-small-devices docs: simpler footer and better background color on small devices
versini-org · Feb 20, 2024 · 426499c · 426499c
2 parents 6a2d683 + 352eca9
commit 426499c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 25 deletions.
diff --git 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
@@ -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">