Revert "feat: migrate to tailwindcss from styled"

This reverts commit f93b8d1.
TradeTrust · Feb 21, 2022 · 8420946 · 8420946
1 parent 1b88775
commit 8420946
Show file tree

Hide file tree

Showing 16 changed files with 191 additions and 101 deletions.
diff --git a/src/AppContainer.tsx b/src/AppContainer.tsx
@@ -4,9 +4,15 @@ 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);
@@ -30,12 +36,9 @@ const AppContainer = (): React.ReactElement => {
         leftItems={leftNavItems}
         rightItems={rightNavItems}
       />
-      <main
-        className="bg-cerulean-50 flex-1 bg-cover"
-        style={{ backgroundImage: "url('/static/images/common/wave-lines.png')" }}
-      >
+      <Main className="bg-cerulean-50 flex-1">
         <Routes routes={routes} />
-      </main>
+      </Main>
       <Footer />
       <Overlay />
     </div>

diff --git a/src/components/EndorsementChain/EndorsementChainLayout/EndorsementChainLayout.tsx b/src/components/EndorsementChain/EndorsementChainLayout/EndorsementChainLayout.tsx
@@ -7,6 +7,28 @@ 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;
@@ -254,11 +276,11 @@ export const EndorsementChainLayout: FunctionComponent<EndorsementChainLayout> =
 
         {pending && !endorsementChain && !error && <EndorsementChainLoading />}
         {!pending && endorsementChain && !error && (
-          <div className="endorsement-chain">
+          <EndorsementChainDataStyle>
             {historyChain.map((item, key) => (
               <EndorsementChainData index={key} data={item} key={key} />
             ))}
-          </div>
+          </EndorsementChainDataStyle>
         )}
         {!pending && !endorsementChain && error && <EndorsementChainError error={error} />}
       </div>

diff --git a/src/components/EtaPageContent/EtaPageContent.tsx b/src/components/EtaPageContent/EtaPageContent.tsx
@@ -1,6 +1,7 @@
 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 (
@@ -69,12 +70,17 @@ 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">
-      <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 transform lg:-translate-y-1/2">
+      <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">
         <h2>The amended ETA supports and complements the government’s trade digitalization initiatives.</h2>
-      </div>
+      </AmendedEta>
     </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 className={"mb-4"} {...props} /> }}>
+            <ReactMarkdown components={{ p: ({ ...props }) => <p style={{ marginBottom: "1rem" }} {...props} /> }}>
               {guideline.body}
             </ReactMarkdown>
           </AccordionItem>

diff --git a/src/components/HomePageContent/HowItWorksSection/PersonaModal.tsx b/src/components/HomePageContent/HowItWorksSection/PersonaModal.tsx
@@ -4,6 +4,13 @@ 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();
@@ -30,10 +37,7 @@ 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">
-        <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')" }}
-        >
+        <ModalBackground className="relative flex flex-col text-white flex p-5 overflow-auto h-auto">
           <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>
@@ -93,7 +97,7 @@ export const PersonaModal: FunctionComponent<PersonaProps> = ({ personaIndex, de
           >
             <h3 className="font-normal text-2xl">Get in Touch Now</h3>
           </Link>
-        </div>
+        </ModalBackground>
       </OverlayContent>
     </section>
   );

diff --git a/src/components/HomePageContent/HowItWorksSection/index.tsx b/src/components/HomePageContent/HowItWorksSection/index.tsx
@@ -3,6 +3,12 @@ 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",
@@ -65,11 +71,11 @@ export const HowItWorksSection: FunctionComponent = () => {
         <DocumentTypeDetails documentTypeContent={selectedDocumentTypeContent} />
 
         <div className="flex flex-col h-96 justify-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">
+          <GetInTouchBackground className="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>
-          </div>
+          </GetInTouchBackground>
           <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,9 +1,14 @@
+import styled from "@emotion/styled";
 import React, { FunctionComponent } from "react";
 
-const backgroundStyling = {
-  backgroundSize: "1920px auto",
-  backgroundPosition: "center 160px",
-};
+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");
+  }
+`;
 
 interface MainBenefitsProps {
   details: MainBenefits;
@@ -75,7 +80,7 @@ const MainBenefitsElement: React.FunctionComponent<MainBenefitsProps> = ({ detai
 export const MainBenefitsSection: FunctionComponent = () => {
   return (
     <section id="main-benefits" className="bg-white text-gray-700 py-16">
-      <div className="bg-no-repeat lg:bg-single-wave" style={backgroundStyling}>
+      <Background>
         <div className="container">
           <div className="text-center">
             <h1 className="font-ubuntu text-cloud leading-none text-4xl lg:text-5xl">Main Benefits</h1>
@@ -89,7 +94,7 @@ export const MainBenefitsSection: FunctionComponent = () => {
             ))}
           </div>
         </div>
-      </div>
+      </Background>
     </section>
   );
 };
diff --git a/src/components/HomePageContent/WelcomeSection.tsx b/src/components/HomePageContent/WelcomeSection.tsx
@@ -1,6 +1,11 @@
 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);
@@ -9,10 +14,7 @@ const DescriptionSection: FunctionComponent = () => {
   };
   return (
     <section id="welcome" className="bg-cerulean-50 h-full text-gray-700 md:pt-16 mb-4">
-      <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')" }}
-      >
+      <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="container md:h-140">
           <div className="md:w-6/12">
             <div className="w-5/5 text-center md:py-8 md:text-left">
@@ -41,7 +43,7 @@ const DescriptionSection: FunctionComponent = () => {
             </div>
           </div>
         </div>
-      </div>
+      </Background>
     </section>
   );
 };

diff --git a/src/components/Layout/NetworkSelect/NetworkSelect.tsx b/src/components/Layout/NetworkSelect/NetworkSelect.tsx
@@ -4,9 +4,9 @@ import {
   DropdownProps,
   OverlayContext,
   showDocumentTransferMessage,
-  IconError,
 } from "@govtechsg/tradetrust-ui-components";
 import React, { FunctionComponent, useContext } from "react";
+import styled from "@emotion/styled";
 import { ChainId, ChainInfoObject } from "../../../constants/chain-info";
 import { useProviderContext } from "../../../common/contexts/provider";
 import { getChainInfo } from "../../../common/utils/chain-utils";
@@ -34,26 +34,73 @@ const WrappedDropdown = (props: DropdownProps) => {
   const { children, className, ...rest } = props;
   return (
     <div className={className}>
-      <Dropdown {...rest}>{children}</Dropdown>
+      <Dropdown className="rounded-md py-1 pl-4 p-2 border border-gray-300 bg-white" {...rest}>
+        {children}
+      </Dropdown>
     </div>
   );
 };
 
+const StyledDropdown = styled(WrappedDropdown)`
+  display: inline-block;
+  min-width: 12.5rem;
+  font-size: 0.87rem;
+
+  span.select-msg {
+    padding: 0.25rem 0.7rem;
+    color: darkgrey;
+    cursor: default;
+  }
+`;
+
 /**
  * Label for the items of the dropdown list
  */
 const DropdownItemLabel: FunctionComponent<DropdownItemLabelProps> = ({ className, active, network }) => {
   return (
-    <div className={className}>
-      <div className="flex items-center" data-testid={`network-select-dropdown-label-${network.chainId}`}>
-        <img className="mr-2 w-5 h-5 rounded-full" src={network.iconImage} alt={network.label} />
-        <span className="py-2 hover:text-cerulean transition-colors duration-200 ease-out w-full">{network.label}</span>
-        {active ? <span className="m-1 p-1 bg-emerald-500 rounded-lg justify-self-end" /> : null}
-      </div>
+    <div className={className} data-testid={`network-select-dropdown-label-${network.chainId}`}>
+      <img className="network-icon" src={network.iconImage} alt={network.label} />
+      <span className="label">{network.label}</span>
+      {active ? <span className="active" /> : null}
     </div>
   );
 };
 
+const StyledDropdownItemLabel = styled(DropdownItemLabel)`
+  display: flex;
+  align-items: center;
+
+  & img.network-icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 20px;
+    margin-right: 0.5rem;
+  }
+
+  & span.label {
+    width: 100%;
+  }
+
+  & span.active {
+    padding: 0.25rem;
+    background-color: #27ae60;
+    border-radius: 0.5rem;
+    justify-self: flex-end;
+  }
+`;
+
+/**
+ * Dropdown item label specially for unsupported networks
+ */
+const DropdownUnsupportedLabel = styled.div`
+  color: #bb2323;
+
+  &::before {
+    content: "❌";
+    margin-right: 0.5rem;
+  }
+`;
+
 /**
  * Item component for the dropdown list
  */
@@ -62,7 +109,7 @@ const NetworkSelectDropdownItem = (props: NetworkSelectDropdownItemProps) => {
   return (
     <div className={className}>
       <DropdownItem {...rest}>
-        <DropdownItemLabel network={network} active={active} />
+        <StyledDropdownItemLabel network={network} active={active} />
       </DropdownItem>
     </div>
   );
@@ -85,31 +132,22 @@ const NetworkSelectView: FunctionComponent<NetworkSelectViewProps> = ({ onChange
     );
   });
 
-  let selectedLabel: React.ReactNode = (
-    <div className="bg-white">
-      <IconError className="mr-2 w-5 h-5 rounded-full" />
-      Unsupported Network
-    </div>
-  );
+  let selectedLabel: React.ReactNode = <DropdownUnsupportedLabel>Unsupported Network</DropdownUnsupportedLabel>;
   try {
     if (currentChainId) {
-      selectedLabel = <DropdownItemLabel network={getChainInfo(currentChainId)} />;
+      selectedLabel = <StyledDropdownItemLabel network={getChainInfo(currentChainId)} />;
     }
   } catch (e: any) {
     console.log(e.message);
   }
 
   return (
-    <WrappedDropdown
-      dropdownButtonText={selectedLabel}
-      classNameShared="w-full font-medium text-cloud-500"
-      classNameMenu="text-sm font-bold lg:shadow-dropdown rounded-md w-max min-w-full z-30 lg:left-0 lg:absolute lg:-bottom-0 lg:transform lg:translate-y-full py-0"
-    >
+    <StyledDropdown dropdownButtonText={selectedLabel} classNameShared="w-full max-w-xs">
       <div>
-        <span className="p-3 pr-8 cursor-default">Select a Network</span>
+        <span className="select-msg">Select a Network</span>
         {itemsList}
       </div>
-    </WrappedDropdown>
+    </StyledDropdown>
   );
 };
 

diff --git a/src/components/UI/Banner/Banner.tsx b/src/components/UI/Banner/Banner.tsx
@@ -13,7 +13,10 @@ export const Banner: FunctionComponent<BannerProps> = ({ className, title, butto
   return (
     <div className={`${className ? className : ""}`}>
       <div className="container">
-        <div className="rounded-xl bg-cerulean bg-cover bg-wave-lines-light">
+        <div
+          className="rounded-xl bg-cerulean bg-cover"
+          style={{ backgroundImage: "url('/static/images/common/wave-lines-light.png')" }}
+        >
           <div className="flex flex-wrap items-center px-4 py-6 text-white">
             <div className="px-2 w-full lg:w-2/3 mb-2 lg:mb-0">
               <h3 data-testid="banner-title">{title}</h3>