refactor: layout migration to tailwind

Author: kyrers

web/src/layout/index.tsx

@@ -1,5 +1,4 @@
 import React, { useRef } from "react";
-import styled from "styled-components";
 import "overlayscrollbars/styles/overlayscrollbars.css";
 import { Outlet } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
@@ -8,43 +7,25 @@ import { OverlayScrollContext } from "context/OverlayScrollContext";
 import Header from "./Header";
 import Footer from "./Footer";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  width: 100%;
-`;
-
-const StyledOverlayScrollbarsComponent = styled(OverlayScrollbarsComponent)`
-  height: 100vh;
-  width: 100vw;
-`;
-
-const StyledToastContainer = styled(ToastContainer)`
-  padding: 16px;
-  padding-top: 70px;
-`;
-
-const OutletContainer = styled.div`
-  flex: 1;
-  background-color: ${({ theme }) => theme.lightBackground};
-`;
-
 const Layout: React.FC = () => {
   const containerRef = useRef(null);
 
   return (
     <OverlayScrollContext.Provider value={containerRef}>
-      <StyledOverlayScrollbarsComponent ref={containerRef} options={{ showNativeOverlaidScrollbars: true }}>
-        <Container>
+      <OverlayScrollbarsComponent
+        className="h-screen w-screen"
+        ref={containerRef}
+        options={{ showNativeOverlaidScrollbars: true }}
+      >
+        <div className="flex flex-col min-h-full w-full">
           <Header />
-          <StyledToastContainer />
-          <OutletContainer>
+          <ToastContainer className="p-4 pt-[70px]" />
+          <div className="flex-1 bg-klerosUIComponentsLightBackground">
             <Outlet />
-          </OutletContainer>
+          </div>
           <Footer />
-        </Container>
-      </StyledOverlayScrollbarsComponent>
+        </div>
+      </OverlayScrollbarsComponent>
     </OverlayScrollContext.Provider>
   );
 };