From ccc5f31271f14a6431539dce8fd5eb2551d70f4d Mon Sep 17 00:00:00 2001
From: Matthew Wilcoxson <github+anon@akademy.co.uk>
Date: Mon, 31 Mar 2025 18:09:01 +0100
Subject: [PATCH] On Footer, fix movement on hover when only links. Add ability
 to centre links. Align links with copyright.

Make alignment easier in Storyboard view by adding transparent color.
---
 .storybook/ThemeSwapper.tsx       |  2 +-
 changelog.md                      | 22 +++++++---
 src/components/Footer.stories.tsx | 73 ++++++++++++++++++-------------
 src/components/Footer.tsx         | 55 ++++++++++++++---------
 4 files changed, 95 insertions(+), 57 deletions(-)

diff --git a/.storybook/ThemeSwapper.tsx b/.storybook/ThemeSwapper.tsx
index 95d64b3..efd541c 100644
--- a/.storybook/ThemeSwapper.tsx
+++ b/.storybook/ThemeSwapper.tsx
@@ -29,7 +29,7 @@ const ThemeSwapper = ({ context, children }: ThemeSwapperProps) => {
   }, [context.globals.themeMode]);
 
   return (
-    <div style={{ backgroundColor: mode === "light" ? "#fafafa" : "#050505" }}>
+    <div style={{ backgroundColor: mode === "light" ? "#fafafaaa" : "#000a" }}>
       {children}
     </div>
   );
diff --git a/changelog.md b/changelog.md
index 99f8723..c1df986 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,7 +1,19 @@
-Changelog
-=========
+SciReactUI Changelog
+====================
 
-[0.0.3] - 2024-01-27
+[vNext] - date
+--------------------
+
+### Fixed
+- Stopped flicker between themes when starting an app in dark mode.
+- Footer links stopped from moving on hover when only showing links.
+- Footer links now correctly center horizontally.
+
+### Changed
+- Footer links now align with copyright when there is no logo.
+
+
+[v0.0.3] - 2024-01-27
 --------------------
 
 ### Fixed
@@ -11,14 +23,14 @@ Changelog
 - Return key now submits VisitInput (but that can be turned off).
 
 
-[0.0.2] - 2024-01-20
+[v0.0.2] - 2024-01-20
 --------------------
 
 ### Fixed
 - Not importing correctly in some external projects.
 
 
-[0.0.1] - 2024-12-19
+[v0.0.1] - 2024-12-19
 --------------------
 ### Added
 - Components added:
diff --git a/src/components/Footer.stories.tsx b/src/components/Footer.stories.tsx
index f7b817d..6b202ce 100644
--- a/src/components/Footer.stories.tsx
+++ b/src/components/Footer.stories.tsx
@@ -11,26 +11,28 @@ const meta: Meta<typeof Footer> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const footerLinks = [
+  <FooterLinks key="footer-links">
+    <FooterLink href="#TheMoon" key="the-moon">
+      The Moon
+    </FooterLink>
+    <FooterLink href="#Phobos" key="phobos">
+      Phobos
+    </FooterLink>
+    <FooterLink href="#Ganymede" key="ganymede">
+      Ganymede
+    </FooterLink>
+    <FooterLink href="#Titan" key="titan">
+      Titan
+    </FooterLink>
+  </FooterLinks>,
+];
+
 export const All: Story = {
   args: {
     logo: "theme",
     copyright: "Company",
-    children: [
-      <FooterLinks key="footer-links">
-        <FooterLink href="#TheMoon" key="the-moon">
-          The Moon
-        </FooterLink>
-        <FooterLink href="#Phobos" key="phobos">
-          Phobos
-        </FooterLink>
-        <FooterLink href="#Ganymede" key="ganymede">
-          Ganymede
-        </FooterLink>
-        <FooterLink href="#Titan" key="titan">
-          Titan
-        </FooterLink>
-      </FooterLinks>,
-    ],
+    children: footerLinks,
   },
 };
 
@@ -54,31 +56,40 @@ export const CopyrightAndLogo: Story = {
   },
 };
 
-export const WithOneLink: Story = {
+export const LinksAndCopyright: Story = {
   args: {
     copyright: "Company",
-    children: [
-      <FooterLinks key="footer-links">
-        <FooterLink href="#" key="first-footer-link">
-          Link one
-        </FooterLink>
-      </FooterLinks>,
-    ],
+    children: footerLinks,
   },
 };
 
-export const WithTwoLinks: Story = {
+export const LinksOnly: Story = {
+  args: {
+    children: footerLinks,
+  },
+};
+
+export const LinksOnlyCentred: Story = {
   args: {
-    copyright: "Company",
     children: [
-      <FooterLinks key="footer-links">
-        <FooterLink href="#" key="first-footer-link">
-          Link one
+      <FooterLinks
+        key="footer-links"
+        style={{ float: "unset", textAlign: "center" }}
+      >
+        <FooterLink href="#TheMoon" key="the-moon">
+          The Moon
         </FooterLink>
-        <FooterLink href="#" key="second-footer-link">
-          Link two
+        <FooterLink href="#Phobos" key="phobos">
+          Phobos
+        </FooterLink>
+        <FooterLink href="#Ganymede" key="ganymede">
+          Ganymede
+        </FooterLink>
+        <FooterLink href="#Titan" key="titan">
+          Titan
         </FooterLink>
       </FooterLinks>,
     ],
   },
 };
+LinksOnlyCentred.storyName = "Links Only, Centred";
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index f8fb7f2..cb3079a 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -7,7 +7,7 @@ import {
   ImageColorSchemeSwitchType,
 } from "./ImageColorSchemeSwitch";
 
-interface FooterLinksProps {
+interface FooterLinksProps extends React.HTMLProps<HTMLDivElement> {
   children: React.ReactElement<LinkProps> | React.ReactElement<LinkProps>[];
 }
 
@@ -18,7 +18,7 @@ interface FooterProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactElement | React.ReactElement[];
 }
 
-const FooterLinks = ({ children }: FooterLinksProps) => {
+const FooterLinks = ({ children, ...props }: FooterLinksProps) => {
   return (
     <div
       style={{
@@ -29,6 +29,7 @@ const FooterLinks = ({ children }: FooterLinksProps) => {
         display: "flex",
         flexWrap: "wrap",
       }}
+      {...props}
     >
       {children}
     </div>
@@ -48,7 +49,11 @@ const FooterLink = ({ children, ...props }: LinkProps) => {
         textDecoration: "none",
         color: theme.palette.primary.contrastText,
         marginLeft: "1.5rem",
+        marginBottom: "4px",
+        paddingBottom: "4px",
+        lineHeight: 1,
         cursor: "pointer",
+        borderBottom: "solid transparent 4px",
       }}
       {...props}
     >
@@ -80,35 +85,45 @@ const Footer = ({ logo, copyright, children, ...props }: FooterProps) => {
     >
       <Grid container>
         <Grid
-          size={{ xs: 6, md: 8 }}
+          size={logo || copyright ? { xs: 6, md: 8 } : { xs: 12, md: 12 }}
           style={{
             alignContent: "center",
           }}
         >
-          {children}
-        </Grid>
-        <Grid size={{ xs: 6, md: 4 }}>
           <div
             style={{
-              float: "right",
               paddingTop: "10px",
-              paddingRight: "15px",
-              textAlign: "right",
+              paddingLeft: "15px",
             }}
           >
-            {logo && <ImageColorSchemeSwitch image={logo} />}
-            {copyright ? (
-              <Typography
-                style={{
-                  margin: 0,
-                  color: theme.palette.primary.contrastText,
-                }}
-              >
-                {`Copyright © ${new Date().getFullYear()} ${copyright}`}
-              </Typography>
-            ) : null}
+            {children}
           </div>
         </Grid>
+
+        {(logo || copyright) && (
+          <Grid size={{ xs: 6, md: 4 }}>
+            <div
+              style={{
+                float: "right",
+                paddingTop: "10px",
+                paddingRight: "15px",
+                textAlign: "right",
+              }}
+            >
+              {logo && <ImageColorSchemeSwitch image={logo} />}
+              {copyright && (
+                <Typography
+                  style={{
+                    margin: "0 0 10px 0",
+                    color: theme.palette.primary.contrastText,
+                  }}
+                >
+                  {`Copyright © ${new Date().getFullYear()} ${copyright}`}
+                </Typography>
+              )}
+            </div>
+          </Grid>
+        )}
       </Grid>
     </footer>
   );