Add CommonHaus logo to footer

Author: holly-cummins

src/components/footer.js

@@ -1,97 +1,98 @@
 import * as React from "react"
 import { StaticImage } from "gatsby-plugin-image"
 import styled from "styled-components"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { useMediaQuery } from "react-responsive"
 import { device } from "./util/styles/breakpoints"
 
 const FooterBar = styled.footer`
-  background-color: var(--navbar-background-color);
-  color: var(--main-background-color);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  font-size: var(--font-size-16);
-  padding: calc(0.9 * var(--a-vsmall-space)) var(--site-margins);
-  font-weight: var(--font-weight-normal);
-  gap: calc(1.5 * var(--a-modest-space));
+    background-color: var(--navbar-background-color);
+    color: var(--footer-text-color);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    line-height: 1.5rem;
+    font-size: var(--font-size-16);
+    padding: 1rem var(--site-margins);
+    font-weight: var(--font-weight-bold);
+    gap: 2rem;
 
-  // noinspection CssUnknownProperty
-  @media ${device.sm} {
-    flex-direction: column-reverse;
-  }
-`
-
-const Spacer = styled.div`
-  width: 6rem;
+    // noinspection CssUnknownProperty
+    @media ${device.sm} {
+        flex-direction: column-reverse;
+    }
 `
 
 const Logo = styled(props => <a {...props} />)`
-  background-color: var(--navbar-background-color);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: var(--font-weight-bold);
+    background-color: var(--navbar-background-color);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
 `
+
 const SponsorInfo = styled.div`
-  background-color: var(--navbar-background-color);
-  color: var(--navbar-text-color);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-size: var(--font-size-12);
-  font-weight: var(--font-weight-bold);
-  gap: calc(.8 * var(--a-small-space));
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    text-wrap: nowrap;
+    font-size: var(--font-size-12);
+    gap: calc(.8 * var(--a-small-space));
 
-  // noinspection CssUnknownProperty
-  @media ${device.sm} {
-    flex-direction: column;
-    margin-top: 10px;
+    // noinspection CssUnknownProperty
+    @media ${device.sm} {
+        flex-direction: column;
+        margin-top: 10px;
 
-  }
+    }
 `
 
 const LegalText = styled(props => <a {...props} />)`
-  margin: 8px;
-  color: var(--navbar-text-color);
-  text-decoration: underline;
-
+    color: var(--footer-text-color);
+    text-decoration: underline;
 `
 
 const LicenseInfo = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: var(--font-size-12);
-`
+    font-size: 0.75rem;
+
+    a {
+        color: var(--footer-text-color);
+    }
 
-const PaddedIcon = styled(props => <FontAwesomeIcon {...props} />)`
-  margin-left: 1px;
-  margin-right: 1px;
-  color: var(--navbar-text-color);
+    @media screen and (max-width: 1024px) {
+        justify-self: left;
+        padding: 1rem 0;
+    }
 `
 
 const Footer = () => {
-  const isMobile = useMediaQuery({ query: device.sm })
 
   return (
     <FooterBar className="navigation">
-      {isMobile || <Spacer />}
+      <Logo href="https://www.commonhaus.org/" style={{ maxWidth: "350px" }}>
+        <StaticImage
+          className="logo"
+          placeholder="none"
+          backgroundColor="black"
+          layout="constrained"
+          formats={["auto", "webp", "avif"]}
+          src="../images/CF_logo_horizontal_single_reverse.svg"
+          alt="CommonHaus logo"
+          minWidth="350px"
+          maxWidth="100%"
+        />
+      </Logo>
+
       <LicenseInfo>
-        <PaddedIcon icon={["fab", "creative-commons"]} />
-        <PaddedIcon icon={["fab", "creative-commons-by"]} />
-        <LegalText href="https://creativecommons.org/licenses/by/3.0/">
-          CC by 3.0
-        </LegalText>
-        <span>|</span>
-        <LegalText href="https://www.redhat.com/en/about/privacy-policy">Privacy Policy</LegalText>
+        Copyright © Quarkus. All rights reserved. For details on our trademarks, please visit our <LegalText
+        href="https://www.commonhaus.org/policies/trademark-policy/">Trademark Policy</LegalText> and <LegalText
+        href="https://www.commonhaus.org/trademarks/">Trademark List</LegalText>. Trademarks of third parties are owned
+        by their respective holders and their mention here does not suggest any endorsement or association.
       </LicenseInfo>
+
       <SponsorInfo>
         Sponsored by
-        <Logo href="https://www.redhat.com/">
+        <Logo href="https://www.redhat.com/" style={{ width: "6rem" }}>
           <StaticImage
             className="logo"
             placeholder="none"
@@ -100,7 +101,6 @@ const Footer = () => {
             formats={["auto", "webp", "avif"]}
             src="../images/redhat_reversed.svg"
             alt="Red Hat logo"
-            height={26}
           />
         </Logo>
       </SponsorInfo>

src/components/footer.test.js

@@ -13,7 +13,4 @@ describe("footer", () => {
     expect(screen.getByText(supportedText)).toBeTruthy()
   })
 
-  it("renders a creative commons attribution", () => {
-    expect(screen.getByText("CC by 3.0")).toBeTruthy()
-  })
 })