refactor: migrate MobileHeader and related components to tailwind

Author: kyrers

web/src/layout/Header/MobileHeader.tsx

@@ -1,39 +1,14 @@
 import React, { useContext, useMemo, useRef } from "react";
-import styled, { css } from "styled-components";
 
 import { useClickAway, useToggle } from "react-use";
 
 import HamburgerIcon from "svgs/header/hamburger.svg";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-
 import LightButton from "components/LightButton";
 
 import Logo from "./Logo";
 import NavBar from "./navbar";
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 64px;
-
-  ${landscapeStyle(
-    () => css`
-      display: none;
-    `
-  )}
-`;
-
-const StyledLightButton = styled(LightButton)`
-  padding: 0 !important;
-
-  .button-svg {
-    margin-right: 0px;
-  }
-`;
-
 const OpenContext = React.createContext({
   isOpen: false,
   toggleIsOpen: () => {
@@ -51,13 +26,13 @@ const MobileHeader = () => {
   useClickAway(containerRef, () => toggleIsOpen(false));
   const memoizedContext = useMemo(() => ({ isOpen, toggleIsOpen }), [isOpen, toggleIsOpen]);
   return (
-    <Container ref={containerRef}>
+    <div ref={containerRef} className="flex items-center justify-between w-full h-16 landscape-900:hidden">
       <OpenContext.Provider value={memoizedContext}>
         <Logo />
         <NavBar />
-        <StyledLightButton text="" Icon={HamburgerIcon} onClick={toggleIsOpen} />
+        <LightButton className="p-0 [&_.button-svg]:mr-0" text="" Icon={HamburgerIcon} onClick={toggleIsOpen} />
       </OpenContext.Provider>
-    </Container>
+    </div>
   );
 };
 export default MobileHeader;

web/src/layout/Header/navbar/index.tsx

@@ -16,41 +16,6 @@ import Help from "./Menu/Help";
 import Settings from "./Menu/Settings";
 import { DisconnectWalletButton } from "./Menu/Settings/General";
 
-const Container = styled.div<{ isOpen: boolean }>`
-  position: absolute;
-  top: 64px;
-  left: 0;
-  right: 0;
-  max-height: calc(100vh - 64px);
-  overflow-y: auto;
-  z-index: 1;
-  background-color: ${({ theme }) => theme.whiteBackground};
-  box-shadow: 0px 2px 3px ${({ theme }) => theme.defaultShadow};
-  transform-origin: top;
-  transform: scaleY(${({ isOpen }) => (isOpen ? "1" : "0")});
-  visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")};
-  transition-property: transform, visibility;
-  transition-duration: ${({ theme }) => theme.transitionSpeed};
-  transition-timing-function: ease;
-  padding: 24px;
-
-  hr {
-    margin: 24px 0;
-  }
-`;
-
-const WalletContainer = styled.div`
-  display: flex;
-  gap: 16px;
-  justify-content: space-between;
-  flex-wrap: wrap;
-`;
-
-const DisconnectWalletButtonContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
 export interface ISettings {
   toggleIsSettingsOpen: () => void;
 }
@@ -73,7 +38,14 @@ const NavBar: React.FC = () => {
 
   return (
     <>
-      <Container {...{ isOpen }}>
+      <div
+        className={
+          "absolute top-16 left-0 right-0 max-h-[calc(100vh-64px)] overflow-y-auto z-1 bg-klerosUIComponentsWhiteBackground shadow-default p-6 [&_hr]:my-6 " +
+          `origin-top transform-${isOpen ? "scaleY(1)" : "scaleY(0)"} visibility-${
+            isOpen ? "visible" : "hidden"
+          } transition-[transform,visibility] duration-[klerosUIComponentsTransitionSpeed] ease-in-out`
+        }
+      >
         <LightButton
           text="Kleros Solutions"
           onClick={() => {
@@ -84,18 +56,18 @@ const NavBar: React.FC = () => {
         <hr />
         <Explore isMobileNavbar={true} />
         <hr />
-        <WalletContainer>
+        <div className="flex gap-4 justify-between flex-wrap">
           <ConnectWallet />
           {isConnected && (
-            <DisconnectWalletButtonContainer>
+            <div className="flex items-center">
               <DisconnectWalletButton />
-            </DisconnectWalletButtonContainer>
+            </div>
           )}
-        </WalletContainer>
+        </div>
         <hr />
         <Menu {...{ toggleIsHelpOpen, toggleIsSettingsOpen }} />
         <br />
-      </Container>
+      </div>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
         <OverlayPortal>
           <Overlay>