CHANGE: remove antd as dependency and use pure html/css for styling

package.json

@@ -4,7 +4,6 @@
   "private": true,
   "proxy": "http://localhost:3001/",
   "dependencies": {
-    "antd": "^3.23.1",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.5.2",
     "history": "^4.10.1",

src/components/app/header/header.module.css

@@ -1,35 +1,47 @@
 .header {
   height: 60px;
-  background: #1d1d1d;
-  padding: 14px;
+  background: var(--black);
+  padding: 16px;
   text-align: center;
 }
 
+.headerNav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
 .goBackBtn {
   padding: 0;
   border: none;
   font-size: 24px;
-  color: #fff;
-  font-weight: 400 !important;
+  color: var(--white);
+  font-weight: 400;
   cursor: pointer;
+  display: flex !important;
+  flex-direction: row;
+  align-items: center;
 }
 
 .goBackBtn > span {
   color: #fff;
   text-transform: none;
+  margin-left: 4px;
 }
 
 .goBackBtn:hover,
 .goBackBtn:hover > span {
   opacity: 8;
 }
 
-.langSwitcher .langSwitcherBtn:not(.ant-radio-button-wrapper-disabled)::before {
-  background-color: #d9d9d9 !important;
+.goBackBtn > svg {
+  margin-bottom: -3px;
 }
 
 .goBackBtnText {
-  display: none !important;
+  display: none;
 }
 
 .logo {

src/components/app/header/index.js

@@ -4,10 +4,25 @@ import { useHistory, useLocation } from "react-router-dom";
 import Logo from "./logo";
 import styles from "./header.module.css";
 import { Link } from "react-router-dom";
-import { Button, Icon, Col, Row, Radio } from "antd";
+import { Button } from "../../button";
+import { Container } from "../../container";
+import { LangSwitcher } from "./lang-switcher";
 
 import i18n from "../../../contexts/i18n-context";
 
+const ArrowIcon = () => (
+  <svg
+    viewBox="64 64 896 896"
+    className=""
+    width="1em"
+    height="1em"
+    fill="#fff"
+    aria-hidden="true"
+  >
+    <path d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z" />
+  </svg>
+);
+
 function Header() {
   const { t, language, setLanguage } = useContext(i18n);
   const history = useHistory();
@@ -16,47 +31,34 @@ function Header() {
 
   return (
     <header className={styles.header}>
-      <Row type="flex" justify="center">
-        <Col xs={24} md={20} lg={18}>
-          <Row type="flex" justify="space-between" align="middle">
-            <Col>
-              {showBackBtn && (
-                <Button
-                  type="link"
-                  ghost
-                  className={styles.goBackBtn}
-                  onClick={() => history.push("/")}
-                >
-                  <Icon type="arrow-left" />
-                  <span className={styles.goBackBtnText}>{t("go_back")}</span>
-                </Button>
-              )}
-            </Col>
-            <Col className={styles.logoWrap}>
-              <Link to="/restaurants" className={styles.logo}>
-                <Logo />
-              </Link>
-            </Col>
-            <Col>
-              <Radio.Group
-                className={styles.langSwitcher}
-                size="small"
-                value={language}
-                onChange={e => {
-                  setLanguage(e.target.value);
-                }}
+      <Container>
+        <div className={styles.headerNav}>
+          <div>
+            {showBackBtn && (
+              <Button
+                type="unstyled"
+                size="sm"
+                className={styles.goBackBtn}
+                onClick={() => history.push("/")}
               >
-                <Radio.Button value="en" className={styles.langSwitcherBtn}>
-                  EN
-                </Radio.Button>
-                <Radio.Button value="ru" className={styles.langSwitcherBtn}>
-                  RU
-                </Radio.Button>
-              </Radio.Group>
-            </Col>
-          </Row>
-        </Col>
-      </Row>
+                <ArrowIcon />
+                <span className={styles.goBackBtnText}>{t("go_back")}</span>
+              </Button>
+            )}
+          </div>
+          <div className={styles.logoWrap}>
+            <Link to="/" className={styles.logo}>
+              <Logo />
+            </Link>
+          </div>
+          <LangSwitcher
+            lang={language}
+            onChange={e => {
+              setLanguage(e.target.value);
+            }}
+          />
+        </div>
+      </Container>
     </header>
   );
 }

src/components/app/header/lang-switcher/index.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+import styles from "./lang-switcher.module.css";
+
+export const LangSwitcher = ({ lang, onChange }) => (
+  <fieldset className={styles.langSwitcher}>
+    <label className={styles.langSwitcherBtn}>
+      <input
+        type="radio"
+        value="en"
+        checked={lang === "en"}
+        onChange={onChange}
+      />
+      <span>EN</span>
+    </label>
+    <label className={styles.langSwitcherBtn}>
+      <input
+        type="radio"
+        value="ru"
+        checked={lang === "ru"}
+        onChange={onChange}
+      />
+      <span>RU</span>
+    </label>
+  </fieldset>
+);

src/components/app/header/lang-switcher/lang-switcher.module.css

@@ -0,0 +1,36 @@
+.langSwitcher {
+  position: relative;
+}
+
+.langSwitcherBtn {
+  color: var(--white);
+  position: relative;
+  cursor: pointer;
+}
+
+.langSwitcherBtn:first-child {
+  margin-right: 1px;
+}
+
+.langSwitcherBtn:first-child:after {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  background-color: var(--grey);
+}
+
+.langSwitcherBtn > input {
+  display: none;
+}
+
+.langSwitcherBtn > input:checked ~ span {
+  color: var(--yellow);
+}
+
+.langSwitcherBtn > span {
+  display: inline-block;
+  padding: 3px 6px;
+}

src/components/app/hero/hero.module.css

@@ -30,24 +30,19 @@
   justify-content: center;
   flex-direction: column;
   z-index: 2;
+  color: var(--white);
 }
 
 .heading {
-  color: #fff !important;
-  margin: 0 !important;
-  font-weight: 700 !important;
-  font-size: 36px !important;
+  margin: 0;
+  font-size: 36px;
+  font-weight: 900;
 }
 
 .description {
-  color: #fff;
-  font-size: 16px !important;
-  line-height: 24px !important;
-  margin: 0 0 8px !important;
-}
-
-.colorWhite {
-  color: #fff;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0 0 14px;
 }
 
 @media all and (max-width: 992px) {
@@ -64,7 +59,7 @@
   }
 
   .heading {
-    font-size: 26px !important;
-    line-height: 31px !important;
+    font-size: 26px;
+    line-height: 31px;
   }
 }

src/components/app/hero/index.js

@@ -1,20 +1,15 @@
 import React from "react";
 
 import styles from "./hero.module.css";
-import { Typography } from "antd";
 
 function Hero({ img, heading, description, children }) {
   return (
     <div className={styles.hero}>
       {img && <img src={img} className={styles.heroImg} alt="hero-banner" />}
       <div className={styles.heroCaption}>
-        <Typography.Title level={2} className={styles.heading}>
-          {heading}
-        </Typography.Title>
-        <Typography.Text className={styles.description}>
-          {description}
-        </Typography.Text>
-        <div className={styles.colorWhite}>{children}</div>
+        <h2 className={styles.heading}>{heading}</h2>
+        <p className={styles.description}>{description}</p>
+        <div>{children}</div>
       </div>
     </div>
   );

src/components/app/index.js

@@ -1,9 +1,8 @@
-import { Layout, Typography } from "antd";
 import React, { useContext, useState } from "react";
 
 import Header from "./header";
 import CheckoutPage from "../pages/checkout";
-import { Redirect, Route, Switch } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
 import { Provider as UserProvider } from "../../contexts/user-context";
 import i18n from "../../contexts/i18n-context";
 import ThankYouPage from "../pages/thank-you";
@@ -17,7 +16,7 @@ function App() {
 
   return (
     <UserProvider value={{ name, setName }}>
-      <Layout>
+      <>
         <Header />
         <main role="main">
           <Switch>
@@ -26,17 +25,13 @@ function App() {
             <Route path="/error" component={ErrorPage} />
             <Route
               path="/sign-in"
-              render={() => (
-                <Typography.Title level={1}>
-                  {t("sign_in_page")}
-                </Typography.Title>
-              )}
+              render={() => <h1>{t("sign_in_page")}</h1>}
             />
             <Route path="/thank-you" component={ThankYouPage} />
             <Route path="/" render={() => <RestaurantsIndex />} />
           </Switch>
         </main>
-      </Layout>
+      </>
     </UserProvider>
   );
 }