feat: Tailwind CSS Migration from @emotion/styled (#542, #525)

* feat: networkselect ui for verify * Revert "Revert "feat: migrate to tailwindcss from styled"" This reverts commit 8420946. * fix/tailwind v3 class migrations * fix/rollback verify network selector
TradeTrust · Feb 23, 2022 · be3ce0d · be3ce0d
1 parent 183ff6c
commit be3ce0d
Show file tree

Hide file tree

Showing 20 changed files with 109 additions and 199 deletions.
diff --git a/src/AppContainer.tsx b/src/AppContainer.tsx
@@ -4,15 +4,9 @@ import { useLocation } from "react-router-dom";
 import { Footer } from "./components/Layout/Footer";
 import { NavigationBar, leftNavItems, rightNavItems } from "./components/Layout/NavigationBar";
 import { Routes, routes } from "./routes";
-import styled from "@emotion/styled";
 import { useProviderContext } from "./common/contexts/provider";
 import { getChainInfo } from "./common/utils/chain-utils";
 
-const Main = styled.main`
-  background-image: url("/static/images/common/wave-lines.png");
-  background-size: cover;
-`;
-
 const AppContainer = (): React.ReactElement => {
   const location = useLocation();
   const [toggleNavBar, setToggleNavBar] = useState(false);
@@ -36,9 +30,12 @@ const AppContainer = (): React.ReactElement => {
         leftItems={leftNavItems}
         rightItems={rightNavItems}
       />
-      <Main className="bg-cerulean-50 flex-1">
+      <main
+        className="bg-cerulean-50 flex-1 bg-cover"
+        style={{ backgroundImage: "url('/static/images/common/wave-lines.png')" }}
+      >
         <Routes routes={routes} />
-      </Main>
+      </main>
       <Footer />
       <Overlay />
     </div>

diff --git a/src/common/utils/getDropzoneBoxUi.ts b/src/common/utils/getDropzoneBoxUi.ts
@@ -1,7 +1,7 @@
 enum DropzoneBoxUiState {
   DRAG_REJECT = "border-red-400 bg-red-100",
-  DRAG_ACTIVE = "border-green-400 bg-green-50",
-  DRAG_ACCEPT = "border-green-400 bg-green-50",
+  DRAG_ACTIVE = "border-emerald-400 bg-emerald-50",
+  DRAG_ACCEPT = "border-emerald-400 bg-emerald-50",
   VERIFICATION_PENDING = "border-cloud-100 bg-white",
   VERIFICATION_ERROR = "border-red-400 bg-red-100",
   ACTION_ERROR = "border-red-400 bg-red-100",

diff --git a/src/components/EndorsementChain/EndorsementChainLayout/EndorsementChainLayout.tsx b/src/components/EndorsementChain/EndorsementChainLayout/EndorsementChainLayout.tsx
@@ -7,28 +7,6 @@ import { EndorsementChain, TitleEscrowEvent } from "../../../types";
 import { TooltipIcon } from "../../UI/SvgIcon";
 import { EndorsementChainError } from "./EndorsementChainError";
 import { EndorsementChainLoading } from "./EndorsementChainLoading";
-import styled from "@emotion/styled";
-
-const EndorsementChainDataStyle = styled.div`
-  & > *:first-of-type {
-    .dot-path {
-      bottom: 0;
-      height: 50%;
-    }
-  }
-
-  & > *:last-of-type {
-    // for desktop screen
-    .dot-path {
-      height: 50%;
-    }
-
-    // for mobile screen
-    .path {
-      height: 0;
-    }
-  }
-`;
 
 interface EndorsementChainLayout {
   endorsementChain?: EndorsementChain;
@@ -191,7 +169,7 @@ const DetailsEntity: React.FunctionComponent<DetailsEntityProps> = ({ title, add
   return (
     <div className="w-full lg:w-1/3" data-testid={`row-event-${title}`}>
       <div className="flex flex-nowrap pr-8">
-        <div className="relative flex-shrink-0 lg:hidden" style={{ width: "40px" }}>
+        <div className="relative shrink-0 lg:hidden" style={{ width: "40px" }}>
           <div className="absolute left-0 right-0 mx-auto h-full">
             <div className="absolute top-0 left-1/2 h-full border-l border-dashed border-cerulean path" />
           </div>
@@ -222,10 +200,10 @@ const EndorsementChainData: React.FunctionComponent<any> = ({ index, data }) =>
     <div className="flex flex-wrap items-center" data-testid={`row-event-${index}`}>
       <div className="w-full lg:w-1/3">
         <div className="flex flex-nowrap">
-          <div className="relative flex-shrink-0 lg:order-2" style={{ width: "40px" }}>
+          <div className="relative shrink-0 lg:order-2" style={{ width: "40px" }}>
             <div className="absolute left-0 right-0 mx-auto h-full">
               <div className="absolute left-1/2 h-full border-l border-dashed border-cerulean dot-path" />
-              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full bg-cerulean h-3 w-3" />
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-cerulean h-3 w-3" />
             </div>
           </div>
           <div className="lg:ml-auto lg:order-1">
@@ -276,11 +254,11 @@ export const EndorsementChainLayout: FunctionComponent<EndorsementChainLayout> =
 
         {pending && !endorsementChain && !error && <EndorsementChainLoading />}
         {!pending && endorsementChain && !error && (
-          <EndorsementChainDataStyle>
+          <div className="endorsement-chain">
             {historyChain.map((item, key) => (
               <EndorsementChainData index={key} data={item} key={key} />
             ))}
-          </EndorsementChainDataStyle>
+          </div>
         )}
         {!pending && !endorsementChain && error && <EndorsementChainError error={error} />}
       </div>

diff --git a/src/components/EtaPageContent/EtaPageContent.tsx b/src/components/EtaPageContent/EtaPageContent.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent } from "react";
 import { Link } from "react-router-dom";
 import { Button } from "@govtechsg/tradetrust-ui-components";
-import styled from "@emotion/styled";
 
 const SectionMap = () => {
   return (
@@ -70,17 +69,12 @@ const SectionMap = () => {
   );
 };
 
-const AmendedEta = styled.div`
-  background-image: url("/static/images/common/wave-lines-light.png");
-  background-size: cover;
-`;
-
 const SectionAmendedEta = () => {
   return (
     <section className="bg-white relative z-10">
-      <AmendedEta className="bg-cerulean rounded-lg text-white p-8 text-center lg:absolute left-0 right-0 max-w-4xl mx-auto transform lg:-translate-y-1/2">
+      <div className="bg-wave-lines-light bg-cover bg-cerulean rounded-lg text-white p-8 text-center lg:absolute left-0 right-0 max-w-4xl mx-auto lg:-translate-y-1/2">
         <h2>The amended ETA supports and complements the government’s trade digitalization initiatives.</h2>
-      </AmendedEta>
+      </div>
     </section>
   );
 };

diff --git a/src/components/Guidelines/GuidelinesContent.tsx b/src/components/Guidelines/GuidelinesContent.tsx
@@ -34,7 +34,7 @@ export const GuidelinesContent: FunctionComponent = () => {
             accordionIndex={index}
             setOpenIndex={setOpenIndex}
           >
-            <ReactMarkdown components={{ p: ({ ...props }) => <p style={{ marginBottom: "1rem" }} {...props} /> }}>
+            <ReactMarkdown components={{ p: ({ ...props }) => <p className={"mb-4"} {...props} /> }}>
               {guideline.body}
             </ReactMarkdown>
           </AccordionItem>

diff --git a/src/components/HomePageContent/HowItWorksSection/PersonaModal.tsx b/src/components/HomePageContent/HowItWorksSection/PersonaModal.tsx
@@ -4,13 +4,6 @@ import { useOverlayContext, OverlayContent } from "@govtechsg/tradetrust-ui-comp
 import { PersonaProps } from "../../../types";
 import { Steps } from "./Steps";
 import { ContentType } from "../../../types";
-import styled from "@emotion/styled";
-
-const ModalBackground = styled.div`
-  background-image: url("/static/images/common/wave-lines-light-2.png");
-  background-size: cover;
-  margin: 0 -1.25rem;
-`;
 
 export const PersonaModal: FunctionComponent<PersonaProps> = ({ personaIndex, details }) => {
   const { setOverlayVisible, showOverlay } = useOverlayContext();
@@ -37,7 +30,10 @@ export const PersonaModal: FunctionComponent<PersonaProps> = ({ personaIndex, de
   return (
     <section id="persona-modal">
       <OverlayContent title="" className="max-h-9/10 text-white bg-cerulean rounded-xl">
-        <ModalBackground className="relative flex flex-col text-white flex p-5 overflow-auto h-auto">
+        <div
+          className="mx-5 my-0 bg-cover relative flex flex-col text-white p-5 overflow-auto h-auto"
+          style={{ backgroundImage: "url('/static/images/common/wave-lines-light-2.png')" }}
+        >
           <div className="flex flex-col justify-center">
             <div className="relative flex justify-center w-full">
               <h3 className="font-normal text-center">{details.learnMore.title}</h3>
@@ -97,7 +93,7 @@ export const PersonaModal: FunctionComponent<PersonaProps> = ({ personaIndex, de
           >
             <h3 className="font-normal text-2xl">Get in Touch Now</h3>
           </Link>
-        </ModalBackground>
+        </div>
       </OverlayContent>
     </section>
   );

diff --git a/src/components/HomePageContent/HowItWorksSection/index.tsx b/src/components/HomePageContent/HowItWorksSection/index.tsx
@@ -3,12 +3,6 @@ import { Link } from "react-router-dom";
 import { DocumentContent } from "./DocumentContent";
 import { DocumentTypeContent } from "../../../types";
 import { DocumentTypeDetails } from "./DocumentTypeDetails";
-import styled from "@emotion/styled";
-
-const GetInTouchBackground = styled.div`
-  background-image: url("/static/images/common/wave-lines-light.png");
-  background-size: cover;
-`;
 
 enum DocumentType {
   VERIFIABLE_DOCUMENT = "Verifiable Documents",
@@ -71,11 +65,11 @@ export const HowItWorksSection: FunctionComponent = () => {
         <DocumentTypeDetails documentTypeContent={selectedDocumentTypeContent} />
 
         <div className="flex flex-col h-96 justify-center">
-          <GetInTouchBackground className="flex w-full h-64 mx-auto bg-cerulean rounded-xl text-white text-center justify-center items-center">
+          <div className="bg-wave-lines-light bg-cover flex w-full h-64 mx-auto bg-cerulean rounded-xl text-white text-center justify-center items-center">
             <h3 className="font-ubuntu text-4.5xl lg:mx-72">
               Ready to learn how TradeTrust can benefit your business?
             </h3>
-          </GetInTouchBackground>
+          </div>
           <Link
             to="/contact"
             className="px-4 py-2 mx-auto -mt-4 rounded-xl text-white bg-tangerine hover:bg-tangerine-600 hover:text-gray-200"

diff --git a/src/components/HomePageContent/MainBenefitsSection.tsx b/src/components/HomePageContent/MainBenefitsSection.tsx
@@ -1,14 +1,9 @@
-import styled from "@emotion/styled";
 import React, { FunctionComponent } from "react";
 
-const Background = styled.div`
-  background-repeat: no-repeat;
-  background-size: 1920px auto; // assuming screens will not be wider than 1920px, otherwise this bg pattern needs to be repeatable-x
-  background-position: center 160px;
-  @media screen and (min-width: 1024px) {
-    background-image: url("/static/images/home/mainBenefits/single-wave.png");
-  }
-`;
+const backgroundStyling = {
+  backgroundSize: "1920px auto",
+  backgroundPosition: "center 160px",
+};
 
 interface MainBenefitsProps {
   details: MainBenefits;
@@ -80,7 +75,7 @@ const MainBenefitsElement: React.FunctionComponent<MainBenefitsProps> = ({ detai
 export const MainBenefitsSection: FunctionComponent = () => {
   return (
     <section id="main-benefits" className="bg-white text-gray-700 py-16">
-      <Background>
+      <div className="bg-no-repeat lg:bg-single-wave" style={backgroundStyling}>
         <div className="container">
           <div className="text-center">
             <h1 className="font-ubuntu text-cloud leading-none text-4xl lg:text-5xl">Main Benefits</h1>
@@ -94,7 +89,7 @@ export const MainBenefitsSection: FunctionComponent = () => {
             ))}
           </div>
         </div>
-      </Background>
+      </div>
     </section>
   );
 };
diff --git a/src/components/HomePageContent/WelcomeSection.tsx b/src/components/HomePageContent/WelcomeSection.tsx
@@ -1,11 +1,6 @@
 import React, { FunctionComponent, useContext } from "react";
 import { Link } from "react-router-dom";
 import { OverlayContext, Youtube } from "@govtechsg/tradetrust-ui-components";
-import styled from "@emotion/styled";
-
-const Background = styled.div`
-  background-image: url("/static/images/home/welcome/map.png");
-`;
 
 const DescriptionSection: FunctionComponent = () => {
   const { showOverlay } = useContext(OverlayContext);
@@ -14,7 +9,10 @@ const DescriptionSection: FunctionComponent = () => {
   };
   return (
     <section id="welcome" className="bg-cerulean-50 h-full text-gray-700 md:pt-16 mb-4">
-      <Background className="relative bg-135% bg-right-bottom bg-no-repeat py-16 md:bg-auto md:h-full md:bg-right-top">
+      <div
+        className="relative bg-135% bg-right-bottom bg-no-repeat py-16 md:bg-auto md:h-full md:bg-right-top"
+        style={{ backgroundImage: "url('/static/images/home/welcome/map.png')" }}
+      >
         <div className="container md:h-140">
           <div className="md:w-6/12">
             <div className="w-5/5 text-center md:py-8 md:text-left">
@@ -43,7 +41,7 @@ const DescriptionSection: FunctionComponent = () => {
             </div>
           </div>
         </div>
-      </Background>
+      </div>
     </section>
   );
 };