Add OSS pledge logo & tweak related footer styling

Author: pimterry

src/components/elements/icon/custom/index.ts

@@ -12,6 +12,7 @@ import JavaLogo from './java-logo.svg';
 import LinuxLogo from './linux-logo.svg';
 import Logo from './logo';
 import NodeLogo from './node-logo.svg';
+import OpenSourcePledge from './open-source-pledge.svg';
 import ProductHuntLogo from './product-hunt-logo.svg';
 import PythonLogo from './python-logo.svg';
 import RubyLogo from './ruby-logo.svg';
@@ -35,6 +36,7 @@ export {
   LinuxLogo,
   Logo,
   NodeLogo,
+  OpenSourcePledge,
   ProductHuntLogo,
   PythonLogo,
   RubyLogo,

src/components/elements/icon/custom/open-source-pledge.svg

@@ -63,6 +63,7 @@ import {
   AppleLogo,
   LinuxLogo,
   NodeLogo,
+  OpenSourcePledge,
   DenoLogo,
   BunLogo,
   FirefoxLogo,

src/components/elements/icon/index.ts

@@ -43,12 +43,7 @@ export const StyledColumn = styled.div`
     @media (min-width: ${screens.xl}) {
       flex-direction: column;
       min-width: 398px;
-      gap: 76px;
-    }
-
-    & *:first-child > svg {
-      width: 170px;
-      height: 26px;
+      gap: 57px;
     }
   }
 
@@ -193,7 +188,7 @@ export const StyledIconsWrapper = styled.div`
   flex-direction: row;
   justify-content: space-between;
   align-items: end;
-  gap: 76px;
+  gap: 57px;
 
   @media (min-width: ${screens.md}) {
     flex-direction: column;

src/components/layout/footer/footer.styles.ts

@@ -1,3 +1,4 @@
+import { OpenSourcePledge } from '@/components/elements/icon/custom';
 import { FooterColumnBlock } from './components/footer-column-block';
 import { FooterCopy } from './components/footer-copy';
 import {
@@ -38,7 +39,7 @@ export const Footer = ({ withoutNewsletter }: FooterProps) => {
       <StyledContainer>
         <StyledColumn>
           <Link href="/" aria-label="HTTP Toolkit homepage">
-            <HalfColoredLogo />
+            <HalfColoredLogo width="170px" />
           </Link>
           <StyledIconsWrapper>
             <Stack>
@@ -54,6 +55,11 @@ export const Footer = ({ withoutNewsletter }: FooterProps) => {
                 </Link>
               </Stack>
             </Stack>
+            <Stack $direction="row">
+              <Link href="https://opensourcepledge.com/">
+                <OpenSourcePledge fill="#f00" width="120px" alt="Open Source Pledge member" />
+              </Link>
+            </Stack>
             <ThemeToggle id="themetogglefooter" />
           </StyledIconsWrapper>
         </StyledColumn>