♻️ Refactor/OC-681/verbeteringen-footer-template

pwa/src/styling/design-tokens/component-overrides.css

@@ -1,4 +1,4 @@
-:root {
+.web-app-theme {
   --web-app-link-icon-gap: 0.3em;
 
   --conduction-secondary-top-nav-item-padding: var(--web-app-secondary-top-nav-item-padding);

pwa/src/styling/design-tokens/skeleton-design-tokens.css

@@ -1,4 +1,4 @@
-:root {
+.skeleton-theme {
   /* Sizes */
   --skeleton-size-4xs: 1px;
   --skeleton-size-3xs: 2px;

pwa/src/styling/themeProvider/ThemeProvider.tsx

@@ -7,6 +7,7 @@ import FormField, { FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/for
 import { Heading2 } from "@gemeente-denhaag/components-react";
 import { SelectSingle } from "@conduction/components";
 import { Document } from "@utrecht/component-library-react/dist/css-module";
+import clsx from "clsx";
 
 export const ThemeProvider = ({ children }: React.PropsWithChildren<{}>): JSX.Element => {
   const [theme, setTheme] = React.useState<string>("rotterdam");
@@ -27,7 +28,7 @@ export const ThemeProvider = ({ children }: React.PropsWithChildren<{}>): JSX.El
   const themeData = themes.find(({ value }) => value === theme);
 
   return (
-    <Document className={themeData?.className}>
+    <Document className={clsx("skeleton-theme", "web-app-theme", themeData?.className)}>
       {children}
 
       <div className={styles.container}>

pwa/src/templates/templateParts/footer/FooterTemplate.module.css

@@ -66,7 +66,7 @@
   background-repeat: no-repeat;
   padding: var(--web-app-footer-organization-logo-padding);
   width: var(--web-app-footer-organization-logo-width);
-  background-image: var(--web-app-footer-organization-logo-src);
+  background-image: var(--web-app-footer-organization-logo-wit-src);
   background-color: var(--web-app-footer-organization-logo-background-color);
   background-origin: content-box;
 }

pwa/src/templates/templateParts/footer/FooterTemplate.tsx

@@ -7,7 +7,6 @@ import { Icon } from "@utrecht/component-library-react/dist/css-module";
 import { useTranslation } from "react-i18next";
 import { ArrowRightIcon, ExternalLinkIcon } from "@gemeente-denhaag/icons";
 import clsx from "clsx";
-import { GitHubLogo } from "../../../assets/svgs/GitHub";
 import { baseFilters, FiltersContext } from "../../../context/filters";
 import { HavenLogo } from "../../../assets/svgs/Haven";
 import { CommongroundLogo } from "../../../assets/svgs/Commonground";
@@ -136,7 +135,7 @@ export const FooterTemplate: React.FC<FooterTemplateProps> = ({ layoutClassName
             <li>
               <Link target="_new" href="https://github.com/OpenCatalogi">
                 <Icon className="utrecht-icon--conduction-start">
-                  <GitHubLogo />
+                  <ArrowRightIcon />
                 </Icon>
                 Github
               </Link>
@@ -207,7 +206,10 @@ export const FooterTemplate: React.FC<FooterTemplateProps> = ({ layoutClassName
 
           <div className={styles.logosContainer}>
             <div className={styles.organizationLogo}></div>
-            <img onClick={() => window.open("https://www.conduction.nl/")} src={LogoConduction} />
+
+            <Link target="_new" to="https://www.conduction.nl/">
+              <img src={LogoConduction} alt="logo van conduction" />
+            </Link>
           </div>
         </div>
       </Container>