:refactor: - refactor: changed styling

Author: Julian Roeland

frontend/src/App.tsx

@@ -99,7 +99,7 @@ function App() {
         )}
       <ConfigContext.Provider
         value={{
-          logo: <Logo />,
+          logo: <Logo width="100%" />,
         }}
       >
         <NavigationContext.Provider

frontend/src/components/Logo/Logo.tsx

@@ -1,26 +1,25 @@
-import { Button, Card, H3, Hr, useDialog } from "@maykin-ui/admin-ui";
+import { Button, Card, useDialog } from "@maykin-ui/admin-ui";
 import { useCallback } from "react";
 
 export type LogoProps = {
-  width?: number;
+  width?: number | string;
   withDialog?: boolean;
 };
 
-function LogoImage({ width }: { width: number }) {
-  return <img src="/logo.svg" alt="Open Archiefbeheer Logo" width={width} />;
-}
-
+/**
+ * Implementation of the LogoImage with optional interactivity
+ */
 export function Logo({ width = 128, withDialog = false }: LogoProps) {
   const dialog = useDialog();
 
   const onClick = useCallback(() => {
     dialog(
-      "Versie",
+      "Over",
       <Card>
-        <LogoImage width={128} />
-        <H3>Versie</H3>
-        <Hr />
+        <LogoImage width={"100%"} />
       </Card>,
+      undefined,
+      { size: "s" },
     );
   }, [dialog]);
 
@@ -32,3 +31,10 @@ export function Logo({ width = 128, withDialog = false }: LogoProps) {
     <LogoImage width={width} />
   );
 }
+
+/**
+ * Purely the image of the logo, without any interactivity.
+ */
+function LogoImage({ width }: { width: number | string }) {
+  return <img src="/logo.svg" alt="Open Archiefbeheer Logo" width={width} />;
+}