Move almost all the styles to Tailwind

src/App.tsx

@@ -3,8 +3,6 @@ import { createBrowserHistory } from 'history';
 import { ToastContainer } from 'react-toastify';
 import { AppRoutes } from './components/AppRoutes';
 import { Header } from './components/Header';
-import { PageWrapper } from './components/PageWrapper';
-import { GlobalStyle } from './components/GlobalStyle';
 import { ServiceWorker } from './components/ServiceWorker';
 import { useOneSignal } from './hooks/useOneSignal';
 import { Footer } from './components/Footer';
@@ -16,14 +14,13 @@ export const App = () => {
 
   return (
     <Router history={history}>
-      <GlobalStyle />
       <ServiceWorker />
 
       <Header />
 
-      <PageWrapper>
+      <div className="w-100 max-w-7xl mx-auto px-2 flex flex-col flex-grow pt-18 sm:pt-12">
         <AppRoutes />
-      </PageWrapper>
+      </div>
 
       <Footer />
 

src/components/BottomMounteredNavBar.tsx

@@ -1,5 +1,7 @@
-import { Container } from './HamburgerMenu.styles';
-
 export const BottomMounteredNavBar = () => {
-  return <Container>BottomMounteredNavBar</Container>;
+  return (
+    <div className="fixed bottom-0 left-0 right-0 bg-black text-white p-2 shadow-md z-10 h-20">
+      BottomMounteredNavBar
+    </div>
+  );
 };

src/components/DCAInfo.tsx

@@ -1,5 +1,3 @@
-import { Text } from './DCAInfo.styles';
-
 interface Props {
   targetPrice: number;
   avgPrice: number;
@@ -11,17 +9,17 @@ export const DCAInfo = ({ targetPrice, avgPrice, shouldDCA }: Props) => {
 
   return (
     <div data-testid="dca-info">
-      <Text>Target price = {targetPrice.toFixed(4)}</Text>
-      <Text>Spot price = {avgPrice.toFixed(4)}</Text>
-      <Text>
+      <p className="mb-1">Target price = {targetPrice.toFixed(4)}</p>
+      <p className="mb-1">Spot price = {avgPrice.toFixed(4)}</p>
+      <p className="mb-1">
         {dip > 0 ? 'Rise' : 'Dip'} from target price ={' '}
         {Math.abs(dip).toFixed(2)}%
-      </Text>
-      <Text>
+      </p>
+      <p className="mb-1">
         <strong>
           Buy the dip? {shouldDCA ? 'Yes, DCA now.' : 'No, try again later.'}
         </strong>
-      </Text>
+      </p>
     </div>
   );
 };

src/components/Footer.tsx

@@ -1,17 +1,16 @@
 import { useFeature } from '../hooks/useFeature';
 import { FeatureEnum } from '../types/features';
 import { BottomMounteredNavBar } from './BottomMounteredNavBar';
-import { MobileOnlyWrapper } from './Footer.styles';
 
 export const Footer = () => {
   const bottomMountedNav = useFeature(FeatureEnum.BOTTOM_MOUNTED_NAV_ON_MOBILE);
 
   return (
     <div>
       {bottomMountedNav && (
-        <MobileOnlyWrapper>
+        <div className="md:hidden">
           <BottomMounteredNavBar />
-        </MobileOnlyWrapper>
+        </div>
       )}
     </div>
   );

src/components/HamburgerMenu.styles.tsx

@@ -1,30 +1,5 @@
 import styled from 'styled-components';
 
-export const Container = styled.div`
-  position: relative;
-`;
-
-export const HamburgerMenuMobile = styled.button<{ menuVisible: boolean }>`
-  display: none;
-  justify-content: space-between;
-  flex-direction: column;
-  height: 24px;
-  width: 24px;
-
-  /* disable all inherent styles */
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-
-  @media (max-width: 640px) {
-    display: flex;
-  }
-`;
-
 export const Bar = styled.div<{ menuVisible?: boolean }>`
   height: 4px;
   background-color: white;
@@ -89,9 +64,3 @@ export const MenuContainer = styled.div<{
     color: white;
   }
 `;
-
-export const MenuItem = styled.div`
-  width: 100%;
-  padding: 20px;
-  border-bottom: 1px solid #ccc;
-`;

src/components/HamburgerMenu.tsx

@@ -3,10 +3,7 @@ import { Link } from 'react-router-dom';
 import { useClickAway, useMedia } from 'react-use';
 import {
   BottomBar,
-  Container,
-  HamburgerMenuMobile,
   MenuContainer,
-  MenuItem,
   MiddleBar,
   TopBar,
 } from './HamburgerMenu.styles';
@@ -32,23 +29,28 @@ export const HamburgerMenu = ({ headerHeight, links }: Props) => {
   }, [isMobile, menuVisible]);
 
   return (
-    <Container ref={ref}>
-      <HamburgerMenuMobile
+    <div className="relative" ref={ref}>
+      <button
         onClick={() => setMenuVisible((visible) => !visible)}
-        menuVisible={menuVisible}
+        className="flex flex-col justify-between h-6 w-6 bg-transparent border-none outline-none cursor-pointer"
       >
         <TopBar menuVisible={menuVisible} />
         <MiddleBar menuVisible={menuVisible} />
         <BottomBar menuVisible={menuVisible} />
-      </HamburgerMenuMobile>
+      </button>
 
       <MenuContainer menuVisible={menuVisible} offsetTop={headerHeight}>
         {links.map(({ to, label }, idx) => (
           <Link key={idx} to={to}>
-            <MenuItem onClick={() => setMenuVisible(false)}>{label}</MenuItem>
+            <div
+              className="w-full p-4 border-b-2 border-solid border-gray-300 hover:bg-gray-700 hover:text-white"
+              onClick={() => setMenuVisible(false)}
+            >
+              {label}
+            </div>
           </Link>
         ))}
       </MenuContainer>
-    </Container>
+    </div>
   );
 };

src/components/Header.tsx

@@ -3,13 +3,6 @@ import { useMeasure } from 'react-use';
 import { config } from '../config';
 import { routes } from '../config/routes';
 import { HamburgerMenu } from './HamburgerMenu';
-import {
-  DesktopLinks,
-  InternalWrapper,
-  MobileContainer,
-  Version,
-  Wrapper,
-} from './Header.styles';
 import { PageTitle } from './PageTitle';
 
 const links = [
@@ -23,23 +16,37 @@ export const Header = () => {
   const [ref, { height }] = useMeasure<HTMLDivElement>();
 
   return (
-    <Wrapper data-testid="header">
-      <InternalWrapper ref={ref}>
-        <DesktopLinks>
+    <div
+      data-testid="header"
+      className="px-2 bg-black text-white mb-2 fixed h-14 top-0 left-0 right-0 z-10 shadow-sm pt-4 pb-4 sm:h-10 sm:pt-2 sm:pb-2"
+    >
+      <div
+        ref={ref}
+        className="max-w-7xl mx-auto px-2 flex justify-between align-middle"
+      >
+        <div className="hidden sm:block">
           {links.map(({ to, label }, idx) => (
-            <NavLink key={idx} to={to} activeStyle={{ fontWeight: 'bold' }}>
+            <NavLink
+              className="mr-4 text-white hover:text-gray-300"
+              key={idx}
+              to={to}
+              activeStyle={{ fontWeight: 'bold' }}
+            >
               {label}
             </NavLink>
           ))}
-        </DesktopLinks>
+        </div>
 
-        <MobileContainer data-testid="mobile-container">
+        <div
+          data-testid="mobile-container"
+          className="flex align-middle sm:hidden"
+        >
           <HamburgerMenu links={links} headerHeight={height} />
           <PageTitle />
-        </MobileContainer>
+        </div>
 
-        <Version>build {config.BUILD_NUMBER}</Version>
-      </InternalWrapper>
-    </Wrapper>
+        <span className="inline-block">build {config.BUILD_NUMBER}</span>
+      </div>
+    </div>
   );
 };

src/components/PageTitle.tsx

@@ -1,6 +1,5 @@
 import { useLocation } from 'react-router-dom';
 import { routes } from '../config/routes';
-import { Span } from './PageTitle.styles';
 
 const pageTitles = {
   [routes.BEST_BUY]: 'Best Buy',
@@ -12,5 +11,9 @@ const pageTitles = {
 export const PageTitle = () => {
   const location = useLocation();
 
-  return <Span>{pageTitles[location.pathname]}</Span>;
+  return (
+    <span className="text-white inline-block ml-5 font-bold">
+      {pageTitles[location.pathname]}
+    </span>
+  );
 };