refactor: migrate footer to tailwindcss

Author: kyrers

web/src/components/ExternalLink.tsx

@@ -1,79 +1,40 @@
 import React from "react";
-import styled, { css } from "styled-components";
-
-import { landscapeStyle } from "styles/landscapeStyle";
-import { hoverShortTransitionTiming } from "styles/commonStyles";
+import clsx from "clsx";
+import { Link } from "react-router-dom";
 
 import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg";
 
 import { socialmedia } from "consts/socialmedia";
 
 import LightButton from "components/LightButton";
-import { ExternalLink } from "components/ExternalLink";
-
-const Container = styled.div`
-  height: 114px;
-  width: 100%;
-  background-color: ${({ theme }) => (theme.name === "dark" ? theme.lightBlue : theme.primaryPurple)};
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 8px;
-  gap: 16px;
-
-  ${landscapeStyle(
-    () => css`
-      height: 64px;
-      flex-direction: row;
-      justify-content: space-between;
-      padding: 0 32px;
-    `
-  )}
-`;
-
-const StyledSecuredByKlerosLogo = styled(SecuredByKlerosLogo)`
-  ${hoverShortTransitionTiming}
-  min-height: 24px;
-
-  path {
-    fill: ${({ theme }) => theme.white}BF;
-  }
-
-  :hover path {
-    fill: ${({ theme }) => theme.white};
-  }
-`;
-
-const StyledSocialMedia = styled.div`
-  display: flex;
-
-  .button-svg {
-    margin-right: 0;
-  }
-`;
 
 const SecuredByKleros: React.FC = () => (
-  <ExternalLink to="https://kleros.io" target="_blank" rel="noreferrer">
-    <StyledSecuredByKlerosLogo />
-  </ExternalLink>
+  <Link to="https://kleros.io" target="_blank" rel="noopener noreferrer">
+    <SecuredByKlerosLogo className="min-h-6 transition duration-100 [&_path]:fill-white/75 hover:[&_path]:fill-white" />
+  </Link>
 );
 
 const SocialMedia = () => (
-  <StyledSocialMedia>
+  <div className="flex [&_.button-svg]:mr-0">
     {Object.values(socialmedia).map((site, i) => (
-      <ExternalLink key={site.url} to={site.url} target="_blank" rel="noreferrer">
+      <Link key={site.url} to={site.url} target="_blank" rel="noopener noreferrer">
         <LightButton Icon={site.icon} text="" />
-      </ExternalLink>
+      </Link>
     ))}
-  </StyledSocialMedia>
+  </div>
 );
 
 const Footer: React.FC = () => (
-  <Container>
+  <div
+    className={clsx(
+      "flex flex-col justify-center items-center gap-4 p-2 w-full h-[114px]",
+      "bg-klerosUIComponentsPrimaryPurple dark:bg-klerosUIComponentsLightBlue",
+      "lg:h-16 lg:flex-row lg:justify-between lg:px-8"
+    )}
+  >
     <SecuredByKleros />
     <SocialMedia />
-  </Container>
+  </div>
 );
 
 export default Footer;