Add preferred theme colors to footer (#155)

* Add preferred theme colors to footer

* remove inline-block

* Add Footer to LoginPage

* update README, add new screenshot, update Footer

README.md

@@ -12,7 +12,8 @@
 
 ---
 
-![Screenshots](./screenshots.jpg)
+![Login form](./screenshots/auth.webp)
+![Screenshots](./screenshots/screenshots.jpg)
 
 This project is built using [react-admin](https://marmelab.com/react-admin/).
 
@@ -94,6 +95,7 @@ with a proper manifest.json generation on build)
 * [Support configuration via /.well-known/matrix/client](https://github.com/etkecc/synapse-admin/pull/126)
 * [Prevent accidental user overwrites](https://github.com/etkecc/synapse-admin/pull/139)
 * [Allow providing login form details via GET params](https://github.com/etkecc/synapse-admin/pull/140)
+* [Add preferred theme colors to login page and footer](https://github.com/etkecc/synapse-admin/pull/155)
 
 _the list will be updated as new changes are added_
 

src/App.tsx

@@ -23,7 +23,6 @@ import users from "./resources/users";
 import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import Footer from "./components/Footer";
 
 // TODO: Can we use lazy loading together with browser locale?
 const messages = {
@@ -82,7 +81,6 @@ const App = () => (
       <Resource name="room_state" />
       <Resource name="destination_rooms" />
     </Admin>
-    <Footer />
   </QueryClientProvider>
 );
 

src/components/AdminLayout.tsx

@@ -3,6 +3,7 @@ import { LoginMethod } from "../pages/LoginPage";
 import { useEffect, useState, Suspense } from "react";
 import { Icons, DefaultIcon } from "./icons";
 import { ClearConfig } from "./config";
+import Footer from "./Footer";
 
 const AdminUserMenu = () => {
   const [open, setOpen] = useState(false);
@@ -88,7 +89,8 @@ const AdminMenu = (props) => {
   );
 };
 
-export const AdminLayout = ({ children }) => (
+export const AdminLayout = ({ children }) => {
+  return <>
     <Layout appBar={AdminAppBar} menu={AdminMenu} sx={{
       ['& .RaLayout-appFrame']: {
         minHeight: '90vh',
@@ -101,4 +103,6 @@ export const AdminLayout = ({ children }) => (
       {children}
       <CheckForApplicationUpdate />
     </Layout>
-);
+    <Footer />
+  </>
+};

src/components/Footer.tsx

@@ -1,8 +1,11 @@
 import { Avatar, Box, Link, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
+import { useTheme } from "@mui/material/styles";
 
 const Footer = () => {
   const [version, setVersion] = useState<string | null>(null);
+  const theme = useTheme();
+
   useEffect(() => {
     const version = document.getElementById("js-version")?.textContent;
     if (version) {
@@ -10,6 +13,8 @@ const Footer = () => {
     }
   }, []);
 
+  console.log(theme);
+
   return (<Box
     component="footer"
     sx={{
@@ -17,23 +22,28 @@ const Footer = () => {
       zIndex: 100,
       bottom: 0,
       width: '100%',
-      bgcolor: "#eee",
+      bgcolor: theme.palette.background.default,
+      color: theme.palette.text.primary,
       borderTop: '1px solid',
-      borderColor: '#ddd',
+      borderColor: theme.palette.divider,
+      fontSize: '0.89rem',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'start',
       p: 1,
+      gap: '10px'
     }}>
-    <Typography variant="body2" component="div">
       <Avatar src="./images/logo.webp" sx={{ width: "1rem", height: "1rem", display: "inline-block", verticalAlign: "sub" }} />
-      <Link sx={{ color: "#888", textDecoration: 'none' }} href="https://github.com/etkecc/synapse-admin" target="_blank">
+      <Link href="https://github.com/etkecc/synapse-admin" target="_blank">
-        Synapse Admin
+        Synapse Admin {version}
-      </Link> <Link href={`https://github.com/etkecc/synapse-admin/releases/tag/`+version} target="_blank">
+      </Link>
-        <span style={{ fontWeight: 'bold', color: "#000" }}>{version}</span>
+        by
-      </Link> <Link sx={{ color: "#888", textDecoration: 'none' }} href="https://etke.cc/?utm_source=synapse-admin&utm_medium=footer&utm_campaign=synapse-admin" target="_blank">
+      <Link href="https://etke.cc/?utm_source=synapse-admin&utm_medium=footer&utm_campaign=synapse-admin" target="_blank">
-        by etke.cc
+        etke.cc
-      </Link> <Link sx={{ color: "#888", textDecoration: 'none' }} href="https://github.com/awesome-technologies/synapse-admin" target="_blank">
+      </Link>
       (originally developed by Awesome Technologies Innovationslabor GmbH).
-      </Link> <Link sx={{ fontWeight: 'bold', color: "#000", textDecoration: 'none' }} href="https://matrix.to/#/#synapse-admin:etke.cc" target="_blank">#synapse-admin:etke.cc</Link>
+      <Link sx={{ fontWeight: 'bold' }} href="https://matrix.to/#/#synapse-admin:etke.cc" target="_blank">#synapse-admin:etke.cc</Link>
-    </Typography>
   </Box>
   );
 };

src/pages/LoginPage.tsx

@@ -26,6 +26,7 @@ import {
   splitMxid,
 } from "../synapse/synapse";
 import storage from "../storage";
+import Footer from "../components/Footer";
 
 export type LoginMethod = "credentials" | "accessToken";
 
@@ -321,6 +322,7 @@ const LoginPage = () => {
         </Card>
       </LoginFormBox>
       <Notification />
+      <Footer />
     </Form>
   );
 };