From 30492cc1432828358d64f0605681df96225abdbe Mon Sep 17 00:00:00 2001
From: hermansemykozov <semikozovgerman@gmail.com>
Date: Mon, 17 Feb 2020 03:39:10 +0200
Subject: [PATCH 1/5] CHANGE: remove antd as dependency and use pure html/css
 for styling

---
 package.json                                  |   1 -
 src/components/app/header/header.module.css   |  26 +-
 src/components/app/header/index.js            |  84 +++---
 .../app/header/lang-switcher/index.js         |  26 ++
 .../lang-switcher/lang-switcher.module.css    |  36 +++
 src/components/app/hero/hero.module.css       |  23 +-
 src/components/app/hero/index.js              |  11 +-
 src/components/app/index.js                   |  10 +-
 .../basket/basket-item/basket-item.module.css |  57 +++-
 .../basket-item/icons/squared-minus.svg       |   1 +
 .../basket/basket-item/icons/squared-plus.svg |   1 +
 src/components/basket/basket-item/index.js    |  43 +--
 .../basket/basket-row/basket-row.module.css   |   3 -
 src/components/basket/basket-row/index.js     |  21 +-
 src/components/basket/basket.module.css       |  15 +-
 src/components/basket/index.js                |  17 +-
 src/components/button/button.module.css       |  64 +++++
 src/components/button/index.js                |  47 ++++
 src/components/card/card.module.css           |  13 +
 src/components/card/index.js                  |  12 +
 src/components/container/container.module.css |   6 +
 src/components/container/index.js             |   7 +
 src/components/content/index.js               |   9 +-
 src/components/loader/index.js                |   8 +-
 src/components/loader/loader.module.css       |  51 ++++
 src/components/menu/index.js                  |  32 +--
 src/components/menu/menu.module.css           |  29 ++
 .../pages/checkout/checkout.module.css        |  28 ++
 src/components/pages/checkout/index.js        |  76 +++---
 src/components/pages/error/index.js           |  14 +-
 src/components/pages/not-found/index.js       |  20 +-
 src/components/pages/restaurants/index.js     |   1 -
 src/components/pages/thank-you/index.js       |  22 +-
 src/components/product/icons/minus.svg        |   1 +
 src/components/product/icons/plus.svg         |   1 +
 src/components/product/product.component.js   |  40 ++-
 src/components/product/product.module.css     |  92 ++++---
 src/components/rate/icons/star-empty.svg      |   3 +
 src/components/rate/icons/star.svg            |   3 +
 src/components/rate/index.js                  |  26 +-
 src/components/rate/rate.module.css           |  18 +-
 src/components/rate/star-icon.js              |  16 ++
 src/components/restaurant/index.js            | 106 ++++++--
 .../restaurant/restaurant.module.css          |   4 +
 src/components/restaurants-index/index.js     |  86 +++---
 .../restaurants-index/restaurant-item.js      |  51 ++--
 .../restaurant-item.module.css                |  14 +-
 src/components/reviews/review-form/index.js   |  58 ++--
 .../review-form/review-form.module.css        |  51 +++-
 src/components/reviews/review/index.js        |  26 +-
 .../reviews/review/review.module.css          |  39 ++-
 src/components/tabs/index.js                  |  45 ++++
 src/components/tabs/tabs.module.css           |   0
 src/hooks/use-tabs.js                         |  14 +
 src/index.css                                 | 253 +++++++++++-------
 55 files changed, 1174 insertions(+), 587 deletions(-)
 create mode 100644 src/components/app/header/lang-switcher/index.js
 create mode 100644 src/components/app/header/lang-switcher/lang-switcher.module.css
 create mode 100644 src/components/basket/basket-item/icons/squared-minus.svg
 create mode 100644 src/components/basket/basket-item/icons/squared-plus.svg
 delete mode 100644 src/components/basket/basket-row/basket-row.module.css
 create mode 100644 src/components/button/button.module.css
 create mode 100644 src/components/button/index.js
 create mode 100644 src/components/card/card.module.css
 create mode 100644 src/components/card/index.js
 create mode 100644 src/components/container/container.module.css
 create mode 100644 src/components/container/index.js
 create mode 100644 src/components/menu/menu.module.css
 create mode 100644 src/components/product/icons/minus.svg
 create mode 100644 src/components/product/icons/plus.svg
 create mode 100644 src/components/rate/icons/star-empty.svg
 create mode 100644 src/components/rate/icons/star.svg
 create mode 100644 src/components/rate/star-icon.js
 create mode 100644 src/components/tabs/index.js
 create mode 100644 src/components/tabs/tabs.module.css
 create mode 100644 src/hooks/use-tabs.js

diff --git a/package.json b/package.json
index 03ba780..0280ab5 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/app/header/header.module.css b/src/components/app/header/header.module.css
index 6df55d4..26ad699 100644
--- a/src/components/app/header/header.module.css
+++ b/src/components/app/header/header.module.css
@@ -1,22 +1,34 @@
 .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,
@@ -24,12 +36,12 @@
   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 {
diff --git a/src/components/app/header/index.js b/src/components/app/header/index.js
index 09ee2f6..cbd8804 100644
--- a/src/components/app/header/index.js
+++ b/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="/restaurants" className={styles.logo}>
+              <Logo />
+            </Link>
+          </div>
+          <LangSwitcher
+            lang={language}
+            onChange={e => {
+              setLanguage(e.target.value);
+            }}
+          />
+        </div>
+      </Container>
     </header>
   );
 }
diff --git a/src/components/app/header/lang-switcher/index.js b/src/components/app/header/lang-switcher/index.js
new file mode 100644
index 0000000..64fcc28
--- /dev/null
+++ b/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>
+);
diff --git a/src/components/app/header/lang-switcher/lang-switcher.module.css b/src/components/app/header/lang-switcher/lang-switcher.module.css
new file mode 100644
index 0000000..cf25a93
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/app/hero/hero.module.css b/src/components/app/hero/hero.module.css
index 02f1e5d..ae0c600 100644
--- a/src/components/app/hero/hero.module.css
+++ b/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;
   }
 }
diff --git a/src/components/app/hero/index.js b/src/components/app/hero/index.js
index 9e9b576..ba4647d 100644
--- a/src/components/app/hero/index.js
+++ b/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>
   );
diff --git a/src/components/app/index.js b/src/components/app/index.js
index 92838cf..2af57db 100644
--- a/src/components/app/index.js
+++ b/src/components/app/index.js
@@ -1,9 +1,9 @@
-import { Layout, Typography } from "antd";
+import { Layout } 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";
@@ -26,11 +26,7 @@ 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 />} />
diff --git a/src/components/basket/basket-item/basket-item.module.css b/src/components/basket/basket-item/basket-item.module.css
index 8e5d1a9..4b09808 100644
--- a/src/components/basket/basket-item/basket-item.module.css
+++ b/src/components/basket/basket-item/basket-item.module.css
@@ -1,19 +1,37 @@
 .basketItem {
   margin-bottom: 5px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.basketItem > * {
+  flex: 1 0 50%;
+}
+
+.basketItem > *:last-child {
+  text-align: right;
+}
+
+.basketItem p {
+  margin-bottom: 0;
 }
 
 .counter {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
 }
 
 .count {
-  color: #1d1d1d !important;
+  color: var(--black);
 }
 
-.price {
+.basketItem .price {
   width: 40px;
   text-align: right;
   display: inline-block;
+  margin-top: -1px;
 }
 
 .count:not(:last-child) {
@@ -22,16 +40,31 @@
 
 .button {
   display: inline-block;
-  border-color: #8e8e8e !important;
-  background-color: #8e8e8e !important;
-  padding: 1px 3px !important;
+  padding: 0;
   margin: 3px;
-  color: #fff !important;
+  cursor: pointer;
+}
+
+.button > img {
+  vertical-align: bottom;
+}
+
+.name,
+.name span {
+  color: var(--black);
+  line-height: 1.2;
+  font-size: 14px;
+}
+
+.name > a {
+  display: inline-block;
+  text-decoration: none;
+  color: var(--black);
 }
 
-.button:hover,
-.button:focus {
-  border-color: #8e8e8e !important;
-  background-color: #8e8e8e !important;
-  color: rgba(255, 255, 255, 0.5) !important;
+.info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
 }
diff --git a/src/components/basket/basket-item/icons/squared-minus.svg b/src/components/basket/basket-item/icons/squared-minus.svg
new file mode 100644
index 0000000..6aac3af
--- /dev/null
+++ b/src/components/basket/basket-item/icons/squared-minus.svg
@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m16 2h-12c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm-1 9h-10v-2h10z" fill="#8e8e8e"/></svg>
\ No newline at end of file
diff --git a/src/components/basket/basket-item/icons/squared-plus.svg b/src/components/basket/basket-item/icons/squared-plus.svg
new file mode 100644
index 0000000..390eb09
--- /dev/null
+++ b/src/components/basket/basket-item/icons/squared-plus.svg
@@ -0,0 +1 @@
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m16 2h-12c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-12c0-1.1-.9-2-2-2zm-1 9h-4v4h-2v-4h-4v-2h4v-4h2v4h4z" fill="#8e8e8e"/></svg>
\ No newline at end of file
diff --git a/src/components/basket/basket-item/index.js b/src/components/basket/basket-item/index.js
index e4c49f2..b0c3d13 100644
--- a/src/components/basket/basket-item/index.js
+++ b/src/components/basket/basket-item/index.js
@@ -1,42 +1,47 @@
 import React from "react";
 import cx from "classnames";
-import { Button, Col, Row, Typography } from "antd";
 import { increment, decrement } from "../../../redux/ac";
+import { Button } from "../../button";
 import styles from "./basket-item.module.css";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 
+import MinusIcon from "./icons/squared-minus.svg";
+import PlusIcon from "./icons/squared-plus.svg";
+
 function BasketItem({ product, amount, restaurant, increment, decrement }) {
   return (
-    <Row type="flex" align="middle" className={styles.basketItem}>
-      <Col span={12} align="left">
+    <div className={styles.basketItem}>
+      <div className={styles.name}>
         <Link to={`/restaurants/${restaurant.id}/menu`}>
-          <Typography.Text>{product.name}</Typography.Text>
+          <span>{product.name}</span>
         </Link>
-      </Col>
-      <Col span={12} align="right">
+      </div>
+      <div className={styles.info}>
         <div className={styles.counter}>
           <Button
-            type="link"
-            size="small"
+            type="unstyled"
+            size="sm"
             className={styles.button}
-            icon="minus"
             onClick={() => decrement(product.id)}
-          />
-          <Typography.Text className={styles.count}>{amount}</Typography.Text>
+          >
+            <img src={MinusIcon} alt="" />
+          </Button>
+          <span className={styles.count}>{amount}</span>
           <Button
-            type="link"
-            size="small"
+            type="unstyled"
+            size="sm"
             className={styles.button}
-            icon="plus"
             onClick={() => increment(product.id)}
-          />
+          >
+            <img src={PlusIcon} alt="" />
+          </Button>
         </div>
-        <Typography.Text className={cx(styles.count, styles.price)}>
+        <p className={cx(styles.count, styles.price)}>
           ${product.price * amount}
-        </Typography.Text>
-      </Col>
-    </Row>
+        </p>
+      </div>
+    </div>
   );
 }
 
diff --git a/src/components/basket/basket-row/basket-row.module.css b/src/components/basket/basket-row/basket-row.module.css
deleted file mode 100644
index 51ef4d6..0000000
--- a/src/components/basket/basket-row/basket-row.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.basketRow {
-  margin-bottom: 5px;
-}
diff --git a/src/components/basket/basket-row/index.js b/src/components/basket/basket-row/index.js
index 597891e..e6a62a2 100644
--- a/src/components/basket/basket-row/index.js
+++ b/src/components/basket/basket-row/index.js
@@ -1,18 +1,17 @@
-import { Col, Row, Typography } from "antd";
 import React from "react";
-
-import styles from "./basket-row.module.css";
+import cx from "classnames";
+import styles from "../basket-item/basket-item.module.css";
 
 function BasketRow({ align = "top", leftContent, rightContent, bold = false }) {
   return (
-    <Row type="flex" align={align} className={styles.basketRow}>
-      <Col span={12} align="left">
-        <Typography.Text strong={bold && bold}>{leftContent}</Typography.Text>
-      </Col>
-      <Col span={12} align="right">
-        <Typography.Text strong={bold && bold}>{rightContent}</Typography.Text>
-      </Col>
-    </Row>
+    <div className={styles.basketItem}>
+      <div className={styles.name}>
+        <p className={cx("sm", { bold: bold })}>{leftContent}</p>
+      </div>
+      <div className={styles.info}>
+        <p className={cx("sm", { bold: bold })}>{rightContent}</p>
+      </div>
+    </div>
   );
 }
 
diff --git a/src/components/basket/basket.module.css b/src/components/basket/basket.module.css
index 1dc3c06..7c5f99d 100644
--- a/src/components/basket/basket.module.css
+++ b/src/components/basket/basket.module.css
@@ -1,16 +1,21 @@
 .basket {
   padding: 13px 16px 20px;
-  background-color: #fff0db;
+  background-color: var(--pink);
+}
+
+.basket a {
+  text-decoration: none;
 }
 
 .hr {
-  margin: 14px 0 !important;
+  margin: 14px 0;
 }
 
 .title {
   text-align: center;
-  margin-bottom: 20px !important;
-  font-size: 18px !important;
+  margin: 20px 0 16px;
+  font-size: 18px;
+  font-weight: 600;
 }
 
 .lastRow {
@@ -20,8 +25,6 @@
 .button {
   margin-top: 22px;
   font-size: 18px;
-  background-color: #e4661e !important;
-  border-color: #e4661e !important;
 }
 
 @media all and (max-width: 767px) {
diff --git a/src/components/basket/index.js b/src/components/basket/index.js
index 4485137..30fd59a 100644
--- a/src/components/basket/index.js
+++ b/src/components/basket/index.js
@@ -1,4 +1,3 @@
-import Button from "antd/es/button";
 import cx from "classnames";
 import React, { useContext } from "react";
 import { Link } from "react-router-dom";
@@ -7,6 +6,7 @@ import { TransitionGroup, CSSTransition } from "react-transition-group";
 import styles from "./basket.module.css";
 import BasketRow from "./basket-row";
 import BasketItem from "./basket-item";
+import { Button } from "../button";
 import { connect } from "react-redux";
 import {
   orderedProductsSelector,
@@ -14,7 +14,6 @@ import {
 } from "../../redux/selectors";
 import "./basket.css";
 import i18n from "../../contexts/i18n-context";
-import { Typography } from "antd";
 
 function Basket({
   title = "Basket",
@@ -27,22 +26,14 @@ function Basket({
   if (!total) {
     return (
       <div className={cx(styles.basket, className)}>
-        <Typography.Title
-          level={4}
-          className={styles.title}
-          style={{ paddingTop: 26 }}
-        >
-          {t("select_meal")}
-        </Typography.Title>
+        <h4 className={styles.title}>{t("select_meal")}</h4>
       </div>
     );
   }
 
   return (
     <div className={cx(styles.basket, className)}>
-      <Typography.Title level={4} className={styles.title}>
-        {t("basket")}
-      </Typography.Title>
+      <h4 className={styles.title}>{t("basket")}</h4>
       <TransitionGroup>
         {orderProducts.map(({ product, amount, restaurant }) => (
           <CSSTransition timeout={500} classNames="basket-item-animation">
@@ -62,7 +53,7 @@ function Basket({
       <BasketRow leftContent={t("total")} rightContent={`${total} $`} bold />
       {!hideButton && (
         <Link to="/checkout">
-          <Button type="primary" size="large" block className={styles.button}>
+          <Button type="primary" block className={styles.button}>
             {t("order_btn")}
           </Button>
         </Link>
diff --git a/src/components/button/button.module.css b/src/components/button/button.module.css
new file mode 100644
index 0000000..e3d3009
--- /dev/null
+++ b/src/components/button/button.module.css
@@ -0,0 +1,64 @@
+.button {
+  text-decoration: none;
+  overflow: hidden;
+  border-radius: 4px;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 28px;
+  display: inline-block;
+  outline: none;
+  box-shadow: none;
+  transition: 0.2s all;
+  cursor: pointer;
+  padding: 11px 20px;
+  height: 50px;
+  text-transform: uppercase;
+}
+
+.button:focus,
+.button:hover,
+.button:active,
+.button.active {
+  opacity: 0.8;
+}
+
+.button.primary {
+  background-color: var(--orange);
+  border: 1px solid var(--orange);
+  color: var(--white);
+}
+
+.button.outline {
+  background-color: transparent;
+  color: var(--orange);
+  border: 1px solid var(--orange);
+}
+
+.button.outline:focus,
+.button.outline:hover,
+.button.outline:active,
+.button.outline.active {
+  opacity: 1;
+  background-color: var(--orange);
+  color: var(--orange);
+}
+
+.unstyled {
+  box-shadow: none;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  display: inline-block;
+}
+
+.button.sm {
+  font-size: 16px;
+  line-height: 24px;
+  height: 34px;
+  padding: 5px 20px;
+}
+
+.button.block {
+  display: block;
+  width: 100%;
+}
diff --git a/src/components/button/index.js b/src/components/button/index.js
new file mode 100644
index 0000000..decee5b
--- /dev/null
+++ b/src/components/button/index.js
@@ -0,0 +1,47 @@
+import React from "react";
+import cx from "classnames";
+
+import styles from "./button.module.css";
+
+export const Button = ({
+  type = "primary",
+  buttonType = "button",
+  size,
+  block,
+  className,
+  handleClick,
+  children
+}) =>
+  type === "unstyled" ? (
+    <button
+      type={buttonType}
+      className={cx(
+        {
+          [styles.unstyled]: type === "unstyled",
+          [styles.sm]: size === "sm",
+          [styles.block]: block
+        },
+        className
+      )}
+      onClick={handleClick}
+    >
+      {children}
+    </button>
+  ) : (
+    <button
+      type={buttonType}
+      className={cx(
+        styles.button,
+        {
+          [styles.primary]: type === "primary",
+          [styles.outline]: type === "outline",
+          [styles.sm]: size === "sm",
+          [styles.block]: block
+        },
+        className
+      )}
+      onClick={handleClick}
+    >
+      {children}
+    </button>
+  );
diff --git a/src/components/card/card.module.css b/src/components/card/card.module.css
new file mode 100644
index 0000000..43b9aa6
--- /dev/null
+++ b/src/components/card/card.module.css
@@ -0,0 +1,13 @@
+.card {
+  padding: 0;
+  border: 1px solid var(--grey);
+  background-color: var(--white);
+  color: var(--black);
+  text-decoration: none;
+  outline: none;
+  transition: 0.2s all;
+}
+
+.card.hoverable:hover {
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
diff --git a/src/components/card/index.js b/src/components/card/index.js
new file mode 100644
index 0000000..f8aed2f
--- /dev/null
+++ b/src/components/card/index.js
@@ -0,0 +1,12 @@
+import React from "react";
+import cx from "classnames";
+
+import styles from "./card.module.css";
+
+export const Card = ({ className, hoverable, children }) => (
+  <div
+    className={cx(styles.card, className, { [styles.hoverable]: hoverable })}
+  >
+    {children}
+  </div>
+);
diff --git a/src/components/container/container.module.css b/src/components/container/container.module.css
new file mode 100644
index 0000000..6169f3d
--- /dev/null
+++ b/src/components/container/container.module.css
@@ -0,0 +1,6 @@
+.container {
+  margin: 0 auto;
+  padding: 0 12px;
+  max-width: 884px;
+  width: 100%;
+}
diff --git a/src/components/container/index.js b/src/components/container/index.js
new file mode 100644
index 0000000..e26f3bf
--- /dev/null
+++ b/src/components/container/index.js
@@ -0,0 +1,7 @@
+import React from "react";
+import cx from "classnames";
+import styles from "./container.module.css";
+
+export const Container = ({ children, className }) => (
+  <div className={cx(styles.container, className)}>{children}</div>
+);
diff --git a/src/components/content/index.js b/src/components/content/index.js
index a71fb69..ec42022 100644
--- a/src/components/content/index.js
+++ b/src/components/content/index.js
@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { Row, Col } from "antd";
 import Restaurant from "../restaurant";
 import { connect } from "react-redux";
 import { restaurantSelector, restaurantsLoading } from "../../redux/selectors";
@@ -13,13 +12,7 @@ function Content({ restaurant, fetchRestaurants, loading }) {
   console.log("---", 123);
 
   if (loading || !restaurant) return <Loader />;
-  return (
-    <Row type="flex" justify="center">
-      <Col span={24}>
-        <Restaurant restaurant={restaurant} />
-      </Col>
-    </Row>
-  );
+  return <Restaurant restaurant={restaurant} />;
 }
 
 export default connect(
diff --git a/src/components/loader/index.js b/src/components/loader/index.js
index f2cd7c9..9933bae 100644
--- a/src/components/loader/index.js
+++ b/src/components/loader/index.js
@@ -1,9 +1,13 @@
 import React from "react";
-import { Spin } from "antd";
 import styles from "./loader.module.css";
 
 function Loader() {
-  return <Spin className={styles.loader} />;
+  return (
+    <div className={styles.spinner}>
+      <div className={styles["double-bounce1"]} />
+      <div className={styles["double-bounce2"]} />
+    </div>
+  );
 }
 
 Loader.propTypes = {};
diff --git a/src/components/loader/loader.module.css b/src/components/loader/loader.module.css
index 6091f1b..1193a53 100644
--- a/src/components/loader/loader.module.css
+++ b/src/components/loader/loader.module.css
@@ -4,3 +4,54 @@
   width: 100px;
   display: block;
 }
+
+/* spinner */
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  margin: 100px auto;
+}
+
+.double-bounce1,
+.double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--green);
+  opacity: 0.9;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-bounce 2s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
+}
+
+.double-bounce2 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes sk-bounce {
+  0%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
index 45a00d8..1a76191 100644
--- a/src/components/menu/index.js
+++ b/src/components/menu/index.js
@@ -1,7 +1,6 @@
 import React from "react";
 import Product from "../product";
 import * as PropTypes from "prop-types";
-import { Col, Row, Typography } from "antd";
 import Basket from "../basket";
 import { connect } from "react-redux";
 import {
@@ -11,6 +10,8 @@ import {
 import Loader from "../loader";
 import { fetchProducts } from "../../redux/ac";
 
+import styles from "./menu.module.css";
+
 class Menu extends React.Component {
   state = {
     error: null
@@ -34,28 +35,21 @@ class Menu extends React.Component {
   }
 
   render() {
-    if (this.state.error)
-      return (
-        <Typography.Title level={2}>
-          {this.state.error.message}
-        </Typography.Title>
-      );
+    if (this.state.error) return <h2>{this.state.error.message}</h2>;
 
     if (this.props.loading) return <Loader />;
 
     return (
-      <>
-        <Row type="flex" justify="center" gutter={{ xs: 8, sm: 16, md: 24 }}>
-          <Col xs={24} md={15} lg={12}>
-            {this.props.restaurant.menu.map(id => (
-              <Product id={id} key={id} />
-            ))}
-          </Col>
-          <Col xs={0} md={7} lg={6}>
-            <Basket />
-          </Col>
-        </Row>
-      </>
+      <div className={styles.menuWrapper}>
+        <div>
+          {this.props.restaurant.menu.map(id => (
+            <Product id={id} key={id} />
+          ))}
+        </div>
+        <div>
+          <Basket />
+        </div>
+      </div>
     );
   }
 }
diff --git a/src/components/menu/menu.module.css b/src/components/menu/menu.module.css
new file mode 100644
index 0000000..d0338a8
--- /dev/null
+++ b/src/components/menu/menu.module.css
@@ -0,0 +1,29 @@
+.menuWrapper {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 60px;
+}
+
+.menuWrapper > * {
+  padding: 12px 0;
+}
+
+@media all and (min-width: 768px) {
+  .menuWrapper {
+    flex-direction: row;
+    justify-content: space-between;
+    padding-bottom: 0;
+  }
+
+  .menuWrapper > *:first-child {
+    flex: 1 0 calc(100% - 300px - 2 * 24px);
+  }
+
+  .menuWrapper > *:last-child {
+    flex: 1 0 calc(300px - 24px);
+  }
+
+  .menuWrapper > * {
+    padding: 0 12px;
+  }
+}
diff --git a/src/components/pages/checkout/checkout.module.css b/src/components/pages/checkout/checkout.module.css
index 0b6b3fc..50ec6c1 100644
--- a/src/components/pages/checkout/checkout.module.css
+++ b/src/components/pages/checkout/checkout.module.css
@@ -3,12 +3,40 @@
   overflow-x: hidden;
 }
 
+.container {
+  padding: 0;
+}
+
+.checkoutInnerContent {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.checkoutInnerContent > * {
+  flex: 1 0 100%;
+}
+
 @media all and (min-width: 768px) {
   .checkoutContent {
     margin-top: 40px;
     min-height: calc(100vh - 100px);
     padding: 16px;
   }
+
+  .checkoutInnerContent {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .checkoutInnerContent > * {
+    flex: 1 0 calc(50% - 24px);
+    padding: 0 15px;
+  }
+
+  .container {
+    max-width: 760px;
+    padding: initial;
+  }
 }
 
 @media all and (min-width: 1200px) {
diff --git a/src/components/pages/checkout/index.js b/src/components/pages/checkout/index.js
index b0b6204..d9dcc1b 100644
--- a/src/components/pages/checkout/index.js
+++ b/src/components/pages/checkout/index.js
@@ -1,51 +1,43 @@
 import React from "react";
-import { Button, Col, Form, Input, Row, Layout } from "antd";
 import Basket from "../../basket";
+import { Button } from "../../button";
+import { Container } from "../../container";
 import styles from "./checkout.module.css";
 
 function CheckoutPage({ history }) {
   return (
-    <Layout class={styles.checkoutContent}>
-      <Row
-        gutter={{ xs: 16, sm: 16, lg: 32, xl: 32 }}
-        type="flex"
-        justify="center"
-        className="flex-grow-up"
-      >
-        <Col
-          xs={{ span: 24, order: 2 }}
-          md={{ span: 12, order: 1 }}
-          xl={{ span: 6 }}
-        >
-          <Form>
-            <Form.Item label="Name">
-              <Input size="large" />
-            </Form.Item>
-            <Form.Item label="Phone number">
-              <Input size="large" />
-            </Form.Item>
-            <Form.Item label="Address">
-              <Input.TextArea size="large" />
-            </Form.Item>
-            <Button
-              onClick={() => history.push("/thank-you")}
-              block
-              type="primary"
-              size="large"
-            >
-              Order
-            </Button>
-          </Form>
-        </Col>
-        <Col
-          xs={{ span: 24, order: 1 }}
-          md={{ span: 12, order: 2 }}
-          xl={{ span: 6 }}
-        >
-          <Basket hideButton className="text-center" />
-        </Col>
-      </Row>
-    </Layout>
+    <div className={styles.checkoutContent}>
+      <Container className={styles.container}>
+        <div className={styles.checkoutInnerContent}>
+          <div>
+            <form className="form">
+              <div className="form-group">
+                <label>Name</label>
+                <input type="text" />
+              </div>
+              <div className="form-group">
+                <label>Phone number</label>
+                <input type="tel" />
+              </div>
+              <div className="form-group">
+                <label>Address</label>
+                <textarea />
+              </div>
+              <Button
+                onClick={() => history.push("/thank-you")}
+                block
+                type="primary"
+              >
+                Order
+              </Button>
+            </form>
+          </div>
+          <div>
+            <Basket hideButton />
+          </div>
+        </div>
+      </Container>
+    </div>
   );
 }
 
diff --git a/src/components/pages/error/index.js b/src/components/pages/error/index.js
index d118ed2..50903dd 100644
--- a/src/components/pages/error/index.js
+++ b/src/components/pages/error/index.js
@@ -1,4 +1,4 @@
-import { Col, Row, Layout, Typography } from "antd";
+import { Container } from "../../container";
 import React, { useContext } from "react";
 import i18n from "../../../contexts/i18n-context";
 
@@ -6,13 +6,11 @@ function ErrorPage() {
   const { t } = useContext(i18n);
 
   return (
-    <Layout className="full-height-layout">
-      <Row type="flex" justify="center" align="middle" className="flex-grow-up">
-        <Col span={16}>
-          <Typography.Title level={1}>{t("error_page")}</Typography.Title>
-        </Col>
-      </Row>
-    </Layout>
+    <div className="full-height-layout">
+      <Container>
+        <h1>{t("error_page")}</h1>
+      </Container>
+    </div>
   );
 }
 
diff --git a/src/components/pages/not-found/index.js b/src/components/pages/not-found/index.js
index 86937d3..85d1b3e 100644
--- a/src/components/pages/not-found/index.js
+++ b/src/components/pages/not-found/index.js
@@ -1,4 +1,4 @@
-import { Col, Row, Layout, Typography } from "antd";
+import { Container } from "../../container";
 import React, { useContext } from "react";
 import i18n from "../../../contexts/i18n-context";
 import styles from "./not-found.module.css";
@@ -7,16 +7,14 @@ function NotFoundPage() {
   const { t } = useContext(i18n);
 
   return (
-    <Layout className="full-height-layout">
-      <Row type="flex" justify="center" align="middle" className="flex-grow-up">
-        <Col span={16}>
-          <Typography.Title level={1} className={styles.title}>
-            {t("not_found_page")}
-            <span className={styles.errorCode}>404</span>
-          </Typography.Title>
-        </Col>
-      </Row>
-    </Layout>
+    <div className="full-height-layout">
+      <Container>
+        <h1 className={styles.title}>
+          {t("not_found_page")}
+          <span className={styles.errorCode}>404</span>
+        </h1>
+      </Container>
+    </div>
   );
 }
 
diff --git a/src/components/pages/restaurants/index.js b/src/components/pages/restaurants/index.js
index 5416fc0..bb725b2 100644
--- a/src/components/pages/restaurants/index.js
+++ b/src/components/pages/restaurants/index.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { Route } from "react-router-dom";
 import Content from "../../content";
-import RestaurantsIndex from "../../restaurants-index";
 
 function RestaurantsPage() {
   console.log("---", 123);
diff --git a/src/components/pages/thank-you/index.js b/src/components/pages/thank-you/index.js
index cfba265..bd4551a 100644
--- a/src/components/pages/thank-you/index.js
+++ b/src/components/pages/thank-you/index.js
@@ -1,20 +1,18 @@
 import React from "react";
-import { Typography, Row, Col, Layout } from "antd";
+import { Container } from "../../container";
 import styles from "./thank-you.module.css";
 
 function ThankYouPage() {
   return (
-    <Layout className="full-height-layout">
-      <Row type="flex" justify="center" align="middle" className="flex-grow-up">
-        <Col span={16}>
-          <Typography.Title level="1" strong className={styles.title}>
-            Thanks!
-            <br />
-            Your order is being prepared
-          </Typography.Title>
-        </Col>
-      </Row>
-    </Layout>
+    <div className="full-height-layout">
+      <Container>
+        <h1 className={styles.title}>
+          Thanks!
+          <br />
+          Your order is being prepared
+        </h1>
+      </Container>
+    </div>
   );
 }
 
diff --git a/src/components/product/icons/minus.svg b/src/components/product/icons/minus.svg
new file mode 100644
index 0000000..d038dac
--- /dev/null
+++ b/src/components/product/icons/minus.svg
@@ -0,0 +1 @@
+<svg fill="none" height="4" viewBox="0 0 10 4" width="10" xmlns="http://www.w3.org/2000/svg"><path d="m.764347 3.59v-3.39h8.670003v3.39z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/components/product/icons/plus.svg b/src/components/product/icons/plus.svg
new file mode 100644
index 0000000..36b641f
--- /dev/null
+++ b/src/components/product/icons/plus.svg
@@ -0,0 +1 @@
+<svg fill="none" height="17" viewBox="0 0 18 17" width="18" xmlns="http://www.w3.org/2000/svg"><path d="m.92445 10.2v-3.21h6.12v-6.390001h3.90005v6.390001h6.12v3.21h-6.12v6.48h-3.90005v-6.48z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/components/product/product.component.js b/src/components/product/product.component.js
index 75f0be3..4690687 100644
--- a/src/components/product/product.component.js
+++ b/src/components/product/product.component.js
@@ -1,7 +1,9 @@
-import { Button, Card, Col, Row, Typography } from "antd";
 import PropTypes from "prop-types";
 import React from "react";
 import styles from "./product.module.css";
+import { Card } from "../card";
+import MinusIcon from "./icons/minus.svg";
+import PlusIcon from "./icons/plus.svg";
 
 export default function Product({
   product,
@@ -13,39 +15,35 @@ export default function Product({
 
   return (
     <Card className={styles.productDetailedOrderCard}>
-      <Row type="flex" justify="space-between" align="middle">
-        <Col xs={16} md={16} lg={20} align="left">
-          <Typography.Title level={4} className={styles.title}>
-            {product.name}
-          </Typography.Title>
-          <Typography.Paragraph className={styles.description}>
-            {product.ingredients.join(", ")}
-          </Typography.Paragraph>
+      <div className={styles.content}>
+        <div>
+          <h4 className={styles.title}>{product.name}</h4>
+          <p className={styles.description}>{product.ingredients.join(", ")}</p>
           <div className={styles.price}>{product.price} $</div>
-        </Col>
-        <Col xs={8} md={8} lg={4} align="right">
+        </div>
+        <div>
           <div className={styles.counter}>
             <div className={styles.count} data-id="product-amount">
               {amount}
             </div>
-            <Button.Group>
-              <Button
+            <div className={styles.buttonGroup}>
+              <button
                 className={styles.button}
                 onClick={() => handleDecrement(product.id)}
               >
-                &minus;
-              </Button>
-              <Button
+                <img src={MinusIcon} alt="icon" />
+              </button>
+              <button
                 className={styles.button}
                 onClick={() => handleIncrement(product.id)}
                 data-id="product-increment-btn"
               >
-                &#43;
-              </Button>
-            </Button.Group>
+                <img src={PlusIcon} alt="icon" />
+              </button>
+            </div>
           </div>
-        </Col>
-      </Row>
+        </div>
+      </div>
     </Card>
   );
 }
diff --git a/src/components/product/product.module.css b/src/components/product/product.module.css
index 4f5730a..56e3609 100644
--- a/src/components/product/product.module.css
+++ b/src/components/product/product.module.css
@@ -1,68 +1,103 @@
+.content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.content > *:first-child {
+  flex: 1 0 70%;
+}
+
+.content > *:last-child {
+  flex: 1 0 30%;
+  display: flex;
+  justify-content: flex-end;
+}
+
 .title {
-  font-size: 18px !important;
-  line-height: 28px !important;
-  margin-bottom: 0 !important;
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 600;
+  margin-bottom: 0;
 }
 
 .description {
-  font-size: 16px !important;
-  line-height: 24px !important;
-  margin: 0 !important;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
 }
 
 .price {
-  margin-top: 8px !important;
-  font-size: 18px !important;
-  line-height: 28px !important;
+  margin-top: 8px;
+  font-size: 18px;
+  line-height: 28px;
   font-weight: 600;
-  color: #de9124;
+  color: var(--yellow);
 }
 
 .counter {
-  padding: 5px;
+  padding: 5px 0;
   text-align: center;
   display: inline-block;
 }
 
 .count {
-  color: #898989 !important;
+  color: #898989;
+  font-weight: 600;
   margin-bottom: 5px;
   font-size: 18px;
   line-height: 28px;
 }
 
 .button {
-  color: #fff !important;
-  border-radius: 2px !important;
-  width: 36px !important;
-  height: 36px !important;
-  padding: 0 !important;
-  font-weight: 700 !important;
-  font-size: 24px !important;
-  vertical-align: top;
+  color: var(--white);
+  background-color: var(--yellow);
+  border-color: var(--yellow);
+  border-radius: 2px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-weight: 700;
+  font-size: 24px;
+  outline: none;
+  box-shadow: none;
+  cursor: pointer;
 }
 
 .button:first-child {
-  font-size: 20px !important;
+  font-size: 20px;
 }
 
 .button:hover,
 .button:focus,
 .button:active {
-  border-color: #f0ad4e;
-  color: #fff !important;
+  border-color: var(--yellow-light);
+  background-color: var(--yellow-light);
 }
 
 .button + button {
-  margin-left: 1px !important;
+  margin-left: 1px;
 }
 
 .button svg {
-  width: 1.6em !important;
-  height: 1.6em !important;
+  width: 1.6em;
+  height: 1.6em;
+}
+
+.buttonGroup {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: auto;
 }
 
 .productDetailedOrderCard {
+  padding: 20px 26px;
   margin-bottom: 12px;
 }
 
@@ -72,13 +107,10 @@
 
 @media all and (max-width: 767px) {
   .productDetailedOrderCard {
+    padding: 12px 16px;
     margin-bottom: 16px;
   }
 
-  .productDetailedOrderCard > * {
-    padding: 16px;
-  }
-
   .description {
     font-size: 14px;
     line-height: 20px;
diff --git a/src/components/rate/icons/star-empty.svg b/src/components/rate/icons/star-empty.svg
new file mode 100644
index 0000000..af68a34
--- /dev/null
+++ b/src/components/rate/icons/star-empty.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2688 15.6278L10 15.4564L9.73123 15.6278L4.55253 18.9291L5.93414 12.7009L5.99669 12.4189L5.78371 12.2239L1.17388 8.00202L7.22761 7.46098L7.532 7.43377L7.64661 7.15048L10 1.33323L12.3534 7.15048L12.468 7.43377L12.7724 7.46098L18.8261 8.00202L14.2163 12.2239L14.0033 12.4189L14.0659 12.7009L15.4475 18.9291L10.2688 15.6278Z" stroke="#8E8E8E"/>
+</svg>
diff --git a/src/components/rate/icons/star.svg b/src/components/rate/icons/star.svg
new file mode 100644
index 0000000..f316390
--- /dev/null
+++ b/src/components/rate/icons/star.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 12.8395L3.04225 16L4.35681 10.0741L0 6.08395L5.74648 5.57037L8 0L10.2535 5.57037L16 6.08395L11.6432 10.0741L12.9577 16L8 12.8395Z" fill="#F0AD4E"/>
+</svg>
diff --git a/src/components/rate/index.js b/src/components/rate/index.js
index 3b42ffa..8b588e0 100644
--- a/src/components/rate/index.js
+++ b/src/components/rate/index.js
@@ -1,23 +1,27 @@
-import { Rate as AntRate } from "antd";
 import cx from "classnames";
 import React from "react";
 import PropTypes from "prop-types";
 
 import styles from "./rate.module.css";
 
-const Rate = ({ amount, value, onChange, sm = false, disabled = false }) => (
-  <>
-    <AntRate
-      disabled={disabled}
+import { StarIcon } from "./star-icon";
+
+const Rate = ({ amount, value, onChange, disabled = false }) => (
+  <div className={styles.wrapper}>
+    <span
       onChange={onChange}
-      value={value}
-      className={cx(styles.customRate, {
-        [styles.customRateSm]: sm,
+      className={cx({
         [styles.disabled]: disabled
       })}
-    />
-    {amount && <span className="ant-rate-text">({amount})</span>}
-  </>
+    >
+      <StarIcon />
+      <StarIcon />
+      <StarIcon />
+      <StarIcon />
+      <StarIcon />
+    </span>
+    {amount && <span className={styles.amount}>({amount})</span>}
+  </div>
 );
 
 Rate.propTypes = {
diff --git a/src/components/rate/rate.module.css b/src/components/rate/rate.module.css
index 7221222..b65a441 100644
--- a/src/components/rate/rate.module.css
+++ b/src/components/rate/rate.module.css
@@ -1,19 +1,13 @@
-.customRate li {
-  margin-right: 0 !important;
+.wrapper * {
+  vertical-align: top;
+  display: inline-block;
+  line-height: 18px;
 }
 
-.customRateSm,
-.customRateSm li {
-  font-size: 16px !important;
+.amount {
+  margin-left: 4px;
 }
 
 .disabled {
   pointer-events: none;
 }
-
-@media all and (max-width: 767px) {
-  .customRate,
-  .customRate li {
-    font-size: 16px !important;
-  }
-}
diff --git a/src/components/rate/star-icon.js b/src/components/rate/star-icon.js
new file mode 100644
index 0000000..fe36610
--- /dev/null
+++ b/src/components/rate/star-icon.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+export const StarIcon = ({ checked }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 12.8395L3.04225 16L4.35681 10.0741L0 6.08395L5.74648 5.57037L8 0L10.2535 5.57037L16 6.08395L11.6432 10.0741L12.9577 16L8 12.8395Z"
+      fill={checked ? "var(--yellow)" : "var(--grey)"}
+    />
+  </svg>
+);
diff --git a/src/components/restaurant/index.js b/src/components/restaurant/index.js
index 9da1527..2b34128 100644
--- a/src/components/restaurant/index.js
+++ b/src/components/restaurant/index.js
@@ -1,16 +1,76 @@
 import React, { useContext } from "react";
+import cx from "classnames";
 import Reviews from "../reviews";
 import Menu from "../menu";
 import PropTypes from "prop-types";
 import Hero from "../app/hero";
 import styles from "./restaurant.module.css";
-import { Tabs } from "antd";
+import { Container } from "../container";
+import { useTabs } from "../../hooks/use-tabs";
 import { Route, Redirect, Switch, Link } from "react-router-dom";
 import i18n from "../../contexts/i18n-context";
 import RateComponent from "../../components/rate";
 
 function Restaurant({ restaurant }) {
   const { t } = useContext(i18n);
+  const [activeTab, setActiveTab] = useTabs("tabs", "menu");
+
+  const createTabs = () => (
+    <>
+      <button
+        key="menu-tab"
+        role="tab"
+        aria-selected={activeTab === "menu"}
+        id="menu"
+        aria-controls="menu-content-panel"
+        onClick={() => setActiveTab("menu", "tabs")}
+        className={activeTab === "menu" ? "tab tab-selected" : "tab"}
+      >
+        {t("menu")}
+      </button>
+      <button
+        key="reviews-tab"
+        role="tab"
+        aria-selected={activeTab === "reviews"}
+        id="reviews"
+        aria-controls="reviews-content-panel"
+        onClick={() => setActiveTab("reviews", "tabs")}
+        className={activeTab === "reviews" ? "tab tab-selected" : "tab"}
+      >
+        {t("reviews")}
+      </button>
+    </>
+  );
+
+  const createTabPanels = () => (
+    <>
+      <div
+        key="menu-panel"
+        id="menu-panel"
+        role="tabpanel"
+        aria-labelledby="menu-tab"
+        className={cx("tab-panel", {
+          show: activeTab === "menu",
+          hide: activeTab !== "menu"
+        })}
+      >
+        <Menu restaurant={restaurant} />
+      </div>
+      <div
+        key="reviews-panel"
+        id="reviews-panel"
+        role="tabpanel"
+        aria-labelledby="reviews-tab"
+        className={cx("tab-panel", {
+          show: activeTab === "reviews",
+          hide: activeTab !== "reviews"
+        })}
+      >
+        <Reviews restaurant={restaurant} />
+      </div>
+    </>
+  );
+
   return (
     <>
       <Hero
@@ -19,7 +79,6 @@ function Restaurant({ restaurant }) {
         description={restaurant.cuisines.join(", ")}
       >
         <RateComponent
-          sm
           disabled
           amount={restaurant.reviews.length}
           value={restaurant.averageRating}
@@ -35,28 +94,27 @@ function Restaurant({ restaurant }) {
             history
           }) => (
             <>
-              <Tabs
-                activeKey={tab}
-                onTabClick={tab => history.push(`/restaurants/${id}/${tab}`)}
-                tabPosition="top"
-                animated={false}
-                className={styles.contentTabs}
-              >
-                <Tabs.TabPane
-                  tab={t("menu")}
-                  key="menu"
-                  className={styles.tabPane}
-                >
-                  <Menu restaurant={restaurant} />
-                </Tabs.TabPane>
-                <Tabs.TabPane
-                  tab={t("reviews")}
-                  key="reviews"
-                  className={styles.tabPane}
-                >
-                  <Reviews restaurant={restaurant} />
-                </Tabs.TabPane>
-              </Tabs>
+              <div className="content-tabs">
+                <div className="tabs-header">
+                  <Container>
+                    <div
+                      role="tablist"
+                      aria-orientation="horizontal"
+                      className="tabs-nav"
+                      onClick={e =>
+                        history.push(`/restaurants/${id}/${e.target.id}`)
+                      }
+                    >
+                      {createTabs()}
+                    </div>
+                  </Container>
+                </div>
+                <div className="tabs-content">
+                  <Container className={styles.container}>
+                    {createTabPanels()}
+                  </Container>
+                </div>
+              </div>
               <div className={styles.fixedMobileBasketPanel}>
                 <span>Basket € 8.95</span>
                 <Link to="/checkout" className={styles.checkoutBtn}>
diff --git a/src/components/restaurant/restaurant.module.css b/src/components/restaurant/restaurant.module.css
index 558bea2..5f663b3 100644
--- a/src/components/restaurant/restaurant.module.css
+++ b/src/components/restaurant/restaurant.module.css
@@ -1,3 +1,7 @@
+.container {
+  max-width: 908px;
+}
+
 .contentTabs {
   height: auto;
   text-align: center;
diff --git a/src/components/restaurants-index/index.js b/src/components/restaurants-index/index.js
index 477f00d..ce9477d 100644
--- a/src/components/restaurants-index/index.js
+++ b/src/components/restaurants-index/index.js
@@ -1,9 +1,9 @@
 import React, { useContext, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import styles from "./restaurants-index.module.css";
-import { Col, Row, Tabs, Typography } from "antd";
 import { connect } from "react-redux";
 import RestaurantItem from "./restaurant-item";
+import { Container } from "../container";
 import i18n from "../../contexts/i18n-context";
 import Loader from "../loader";
 import { fetchRestaurants } from "../../redux/ac";
@@ -26,45 +26,63 @@ function RestaurantsIndex({ restaurants, fetchRestaurants, loading }) {
     ...new Set(restaurants.flatMap(restaurant => restaurant.cuisines))
   ];
 
+  const createTabs = () =>
+    cuisines.map(cuisine => (
+      <button
+        key={`${cuisine}-tab`}
+        role="tab"
+        aria-selected={cuisine === activeTab}
+        id={`${cuisine}-panel`}
+        aria-controls={`${cuisine}-content-panel`}
+        onClick={() => setActiveTab(cuisine, "tabs")}
+        className={cuisine === activeTab ? "tab tab-selected" : "tab"}
+      >
+        {t(cuisine)}
+      </button>
+    ));
+
+  const createTabPanels = () =>
+    cuisines.map(cuisine => (
+      <div
+        key={`${cuisine}-panel`}
+        id={`${cuisine}-content-panel`}
+        role="tabpanel"
+        aria-labelledby={`${cuisine}-tab`}
+        className={`tab-panel ${cuisine === activeTab ? "show" : "hide"}`}
+      >
+        {restaurants
+          .filter(
+            restaurant =>
+              cuisine === "all" || restaurant.cuisines.includes(cuisine)
+          )
+          .map(restaurant => (
+            <RestaurantItem restaurant={restaurant} key={restaurant.id} />
+          ))}
+      </div>
+    ));
+
   return (
     <>
       <div className={styles.header}>
         <div className={styles.headerCaption}>
-          <Typography.Title level={2} className={styles.title}>
-            {t("order_food")}
-          </Typography.Title>
-          <Typography.Title level={3} className={styles.subtitle}>
-            {t("from_restaurants")}
-          </Typography.Title>
+          <h2 className={styles.title}>{t("order_food")}</h2>
+          <h3 className={styles.subtitle}>{t("from_restaurants")}</h3>
         </div>
       </div>
-      <Tabs
-        activeKey={activeTab}
-        onTabClick={setActiveTab}
-        tabPosition="top"
-        animated={false}
-        className={styles.contentTabs}
-      >
-        {cuisines.map(cuisine => (
-          <Tabs.TabPane tab={cuisine} key={cuisine} className={styles.tabPane}>
-            <Row type="flex" justify="center">
-              <Col span={24}>
-                {restaurants
-                  .filter(
-                    restaurant =>
-                      cuisine === "all" || restaurant.cuisines.includes(cuisine)
-                  )
-                  .map(restaurant => (
-                    <RestaurantItem
-                      restaurant={restaurant}
-                      key={restaurant.id}
-                    />
-                  ))}
-              </Col>
-            </Row>
-          </Tabs.TabPane>
-        ))}
-      </Tabs>
+      <div className="content-tabs">
+        <div className="tabs-header">
+          <Container>
+            <div
+              role="tablist"
+              aria-orientation="horizontal"
+              className="tabs-nav"
+            >
+              {createTabs()}
+            </div>
+          </Container>
+        </div>
+        <div className="tabs-content">{createTabPanels()}</div>
+      </div>
     </>
   );
 }
diff --git a/src/components/restaurants-index/restaurant-item.js b/src/components/restaurants-index/restaurant-item.js
index f281307..1f7cd7c 100644
--- a/src/components/restaurants-index/restaurant-item.js
+++ b/src/components/restaurants-index/restaurant-item.js
@@ -1,37 +1,34 @@
 import React from "react";
-import { Card, Col, Row } from "antd";
 import { Link } from "react-router-dom";
+import { Container } from "../container";
+import { Card } from "../card";
 import RateComponent from "../rate";
 import styles from "./restaurant-item.module.css";
 
 function RestaurantItem({ restaurant }) {
   return (
-    <Row type="flex" justify="center" gutter={{ xs: 8, sm: 16, md: 24 }}>
-      <Col xs={24} md={16} lg={12}>
-        <Link to={`/restaurants/${restaurant.id}`}>
-          <Card className={styles.productCard} hoverable>
-            <Row type="flex" align="top">
-              <Col span={24} align="left">
-                <div className={styles.imgWrap}>
-                  <img src={restaurant.logo} alt={restaurant.name} />
-                </div>
-                <div className={styles.contentWrap}>
-                  <h4 className={styles.title}>{restaurant.name}</h4>
-                  <p className={styles.description}>
-                    {restaurant.cuisines.join(", ")}
-                  </p>
-                  <RateComponent
-                    amount={restaurant.reviews.length}
-                    value={restaurant.averageRating}
-                    disabled
-                  />
-                </div>
-              </Col>
-            </Row>
-          </Card>
-        </Link>
-      </Col>
-    </Row>
+    <Container className={styles.container}>
+      <Link to={`/restaurants/${restaurant.id}`}>
+        <Card className={styles.productCard} hoverable>
+          <div>
+            <div className={styles.imgWrap}>
+              <img src={restaurant.logo} alt={restaurant.name} />
+            </div>
+            <div className={styles.contentWrap}>
+              <h4 className={styles.title}>{restaurant.name}</h4>
+              <p className={styles.description}>
+                {restaurant.cuisines.join(", ")}
+              </p>
+              <RateComponent
+                amount={restaurant.reviews.length}
+                value={restaurant.averageRating}
+                disabled
+              />
+            </div>
+          </div>
+        </Card>
+      </Link>
+    </Container>
   );
 }
 
diff --git a/src/components/restaurants-index/restaurant-item.module.css b/src/components/restaurants-index/restaurant-item.module.css
index a78b43c..98ea56b 100644
--- a/src/components/restaurants-index/restaurant-item.module.css
+++ b/src/components/restaurants-index/restaurant-item.module.css
@@ -1,3 +1,7 @@
+.container {
+  max-width: 780px;
+}
+
 .imgWrap {
   width: 102px;
   margin-right: 16px;
@@ -24,7 +28,7 @@
 .description {
   font-size: 16px;
   line-height: 24px;
-  margin: 0 0 5px;
+  margin: 0 0 12px;
 }
 
 .price {
@@ -36,16 +40,16 @@
 }
 
 .productCard {
-  margin-top: 12px !important;
+  margin-top: 12px;
 }
 
 .productCard > * {
-  padding: 20px !important;
+  padding: 20px;
 }
 
 @media all and (max-width: 767px) {
   .productCard > * {
-    padding: 12px !important;
+    padding: 12px;
   }
 
   .imgWrap {
@@ -61,6 +65,6 @@
   .description {
     font-size: 14px;
     line-height: 20px;
-    margin: 0;
+    margin: 0 0 3px;
   }
 }
diff --git a/src/components/reviews/review-form/index.js b/src/components/reviews/review-form/index.js
index f84a93e..5bb1819 100644
--- a/src/components/reviews/review-form/index.js
+++ b/src/components/reviews/review-form/index.js
@@ -1,10 +1,11 @@
-import { Button, Card, Col, Form, Input, Row, Typography } from "antd";
 import React, { useContext, useState } from "react";
 import PropTypes from "prop-types";
 import i18n from "../../../contexts/i18n-context";
 import useInput from "../../../hooks/use-input";
+import cx from "classnames";
 
 import Rate from "../../rate";
+import { Card } from "../../card";
 import styles from "./review-form.module.css";
 import { connect } from "react-redux";
 import { addReview } from "../../../redux/ac";
@@ -21,43 +22,34 @@ const AddReview = ({ onSubmit }) => {
 
   return (
     <Card className={styles.reviewForm}>
-      <Row type="flex" align="middle">
-        <Col xs={24} md={18} align="left">
-          <Typography.Title className={styles.addReviewTitle} level={4}>
-            {t("leave_your_review")}
-          </Typography.Title>
-          <Form
-            onSubmit={handleSubmit}
-            data-id="review-form"
-            className={styles.reviewForm}
-          >
-            <Form.Item className={styles.reviewFormItem}>
-              <Input.TextArea
-                rows={3}
-                value={text}
-                onChange={setText}
-                size="large"
-                className={{
-                  [styles.invalid]: !isValidText
-                }}
-                autosize={{ minRows: 3, maxRows: 6 }}
-                data-id="review-form-text"
-              />
-            </Form.Item>
-            <div className={styles.rateWrap}>
-              {t("rating")}:{" "}
+      <div>
+        <h4 className={styles.addReviewTitle}>{t("leave_your_review")}</h4>
+        <form onSubmit={handleSubmit} data-id="review-form">
+          <div className={styles.reviewFormItem}>
+            <textarea
+              value={text}
+              onChange={setText}
+              className={cx(styles.message, {
+                [styles.invalid]: !isValidText
+              })}
+              data-id="review-form-text"
+            />
+          </div>
+          <div className={styles.rateWrap}>
+            <span>{t("rating")}: </span>
+            <span>
               <Rate
                 value={rate}
                 onChange={setRate}
                 data-id="review-form-rate"
               />
-            </div>
-            <Button htmlType="submit" className={styles.submitButton}>
-              {t("publish_review")}
-            </Button>
-          </Form>
-        </Col>
-      </Row>
+            </span>
+          </div>
+          <button type="submit" className={styles.submitButton}>
+            {t("publish_review")}
+          </button>
+        </form>
+      </div>
     </Card>
   );
 };
diff --git a/src/components/reviews/review-form/review-form.module.css b/src/components/reviews/review-form/review-form.module.css
index 9b0c676..3f36af8 100644
--- a/src/components/reviews/review-form/review-form.module.css
+++ b/src/components/reviews/review-form/review-form.module.css
@@ -1,50 +1,75 @@
 .reviewForm {
   position: relative;
   margin-bottom: 0;
+  padding: 20px 26px;
 }
 
 .reviewFormItem {
-  margin-bottom: 5px !important;
+  margin-bottom: 5px;
 }
 
 .rateWrap {
   font-size: 16px;
   line-height: 24px;
   color: #000;
+  white-space: nowrap;
+}
+
+.rateWrap > span {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+}
+
+.rateWrap > span:first-child {
+  margin-right: 8px;
 }
 
 .addReviewTitle {
-  font-size: 18px !important;
-  line-height: 28px !important;
-  margin-bottom: 16px !important;
+  font-size: 18px;
+  line-height: 28px;
+  margin-bottom: 16px;
+  font-weight: 600;
+}
+
+.message {
+  max-width: 70%;
+  width: 100%;
 }
 
 .submitButton {
   height: 40px;
-  border: 1px solid #f0ad4e !important;
+  border: 1px solid var(--yellow);
   border-radius: 4px;
   font-size: 14px;
   line-height: 28px;
+  font-weight: 700;
   text-align: center;
-  color: #f0ad4e !important;
+  color: var(--yellow);
   text-transform: uppercase;
-  background-color: transparent !important;
+  background-color: transparent;
+  padding-left: 20px;
+  padding-right: 20px;
   margin-top: 25px;
 }
 
 .invalid:focus {
-  border-color: red !important;
+  border-color: #f00;
 }
 
 @media all and (max-width: 767px) {
+  .message {
+    max-width: none;
+  }
+
   .reviewForm {
-    margin-bottom: 10px !important;
-    padding: 0 !important;
+    margin-bottom: 60px;
+    padding: 12px 16px;
   }
 
   .addReviewTitle {
-    font-size: 16px !important;
-    line-height: 28px !important;
-    margin-bottom: 10px !important;
+    font-size: 16px;
+    line-height: 28px;
+    margin-bottom: 10px;
   }
 }
diff --git a/src/components/reviews/review/index.js b/src/components/reviews/review/index.js
index 493c009..d03a002 100644
--- a/src/components/reviews/review/index.js
+++ b/src/components/reviews/review/index.js
@@ -1,8 +1,8 @@
-import { Card, Col, Row, Typography } from "antd";
 import React from "react";
 import PropTypes from "prop-types";
 
 import Rate from "../../rate";
+import { Card } from "../../card";
 import styles from "./review.module.css";
 import animationStyles from "./review-animation.module.css";
 import { connect } from "react-redux";
@@ -12,23 +12,19 @@ import { CSSTransition } from "react-transition-group";
 const Review = ({ review: { user = "Anonymous", text, rating } }) => (
   <Card className={styles.review}>
     <CSSTransition timeout={500} classNames={animationStyles} in appear>
-      <Row type="flex" align="middle">
-        <Col xs={24} md={18} align="left">
-          <Typography.Title
-            className={styles.name}
-            level={4}
-            data-id="review-user"
-          >
+      <div className={styles.reviewInner}>
+        <div>
+          <h4 className={styles.name} data-id="review-user">
             {user}
-          </Typography.Title>
-          <Typography.Text className={styles.comment} data-id="review-text">
+          </h4>
+          <p className={styles.comment} data-id="review-text">
             {text}
-          </Typography.Text>
-        </Col>
-        <Col xs={8} md={6} align="right" className={styles.rateColumn}>
+          </p>
+        </div>
+        <div className={styles.rateColumn}>
           <Rate disabled value={rating} />
-        </Col>
-      </Row>
+        </div>
+      </div>
     </CSSTransition>
   </Card>
 );
diff --git a/src/components/reviews/review/review.module.css b/src/components/reviews/review/review.module.css
index 40dad88..e623411 100644
--- a/src/components/reviews/review/review.module.css
+++ b/src/components/reviews/review/review.module.css
@@ -7,29 +7,42 @@
   margin-bottom: 0;
 }
 
+.reviewInner {
+  padding: 20px 26px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.reviewInner > *:last-child {
+  min-width: 80px;
+}
+
 .addReviewTitle,
 .name {
-  font-size: 18px !important;
-  line-height: 28px !important;
+  font-size: 18px;
+  line-height: 28px;
+  font-weight: 600;
 }
 
 .addReviewTitle {
-  margin-bottom: 16px !important;
+  margin-bottom: 16px;
 }
 
 .name {
-  margin-bottom: 5px !important;
+  margin-bottom: 5px;
 }
 
 .comment {
   margin: 0;
-  font-size: 16px !important;
-  line-height: 24px !important;
+  font-size: 16px;
+  line-height: 24px;
 }
 
 @media all and (max-width: 767px) {
-  .review > * {
-    padding: 16px !important;
+  .reviewInner {
+    padding: 12px 16px;
   }
 
   .rateColumn {
@@ -40,13 +53,13 @@
 
   .addReviewTitle,
   .name {
-    font-size: 16px !important;
-    line-height: 24px !important;
-    margin-bottom: 10px !important;
+    font-size: 16px;
+    line-height: 24px;
+    margin-bottom: 10px;
   }
 
   .comment {
-    font-size: 14px !important;
-    line-height: 20px !important;
+    font-size: 14px;
+    line-height: 20px;
   }
 }
diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js
new file mode 100644
index 0000000..7e7790c
--- /dev/null
+++ b/src/components/tabs/index.js
@@ -0,0 +1,45 @@
+import React from "react";
+import { useTabs } from "../../hooks/use-tabs";
+
+import styles from "./tabs.module.css";
+
+export const Tabs = ({ tabs }) => {
+  const [activeTab, setActiveTab] = useTabs("tabs", 1);
+
+  const createTabs = () =>
+    tabs.map(tab => (
+      <button
+        key={`${tab.id}-tab`}
+        role="tab"
+        aria-selected={tab.id === activeTab}
+        id={`${tab.id}-panel`}
+        aria-controls={`${tab.id}-content-panel`}
+        onClick={() => setActiveTab(tab.id, "tabs")}
+        className={tab.id === activeTab ? "tab tab--selected" : "tab"}
+      >
+        {tab.title}
+      </button>
+    ));
+
+  const createTabPanels = () =>
+    tabs.map(tab => (
+      <div
+        key={`${tab.id}-panel`}
+        id={`${tab.id}-content-panel`}
+        role="tabpanel"
+        aria-labelledby={`${tab.id}-tab`}
+        className={`tab__panel ${tab.id === activeTab ? "show" : "hide"}`}
+      >
+        <p style={{ margin: 0 }}>{tab.content}</p>
+      </div>
+    ));
+
+  return (
+    <article>
+      <div role="tablist" aria-orientation="horizontal">
+        {createTabs()}
+      </div>
+      {createTabPanels()}
+    </article>
+  );
+};
diff --git a/src/components/tabs/tabs.module.css b/src/components/tabs/tabs.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/hooks/use-tabs.js b/src/hooks/use-tabs.js
new file mode 100644
index 0000000..eadee42
--- /dev/null
+++ b/src/hooks/use-tabs.js
@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export const useTabs = (type, selectedItem) => {
+  const [activeItem, setActiveItem] = useState(selectedItem);
+
+  const changeActiveItem = id => {
+    const isTabs = type === "tabs";
+    const isAlreadyActive = activeItem === id;
+    const idSelected = isAlreadyActive && !isTabs ? 0 : id;
+    setActiveItem(idSelected);
+  };
+
+  return [activeItem, changeActiveItem];
+};
diff --git a/src/index.css b/src/index.css
index d607287..01bd24c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,17 @@
 @import "/node_modules/normalize.css/normalize.css";
-@import "~antd/dist/antd.css";
+
+:root {
+  --black: #1d1d1d;
+  --white: #ffffff;
+  --orange: #e4661e;
+  --orange-light: #f0894e;
+  --pink: #fff0db;
+  --yellow: #f0ad4e;
+  --yellow-light: #ffd25d;
+  --grey: #e5e5e5;
+  --green: #49ab39;
+  --input-border: #c4c4c4;
+}
 
 body {
   margin: 0;
@@ -29,168 +41,201 @@ hr {
   height: 1px;
 }
 
-.text-center {
-  text-align: center;
+p {
+  font-size: 16px;
+  line-height: 1.5;
+  margin: 0;
 }
 
-.full-height-layout {
-  min-height: calc(100vh - 60px) !important;
+p.sm {
+  font-size: 14px;
+  line-height: 1.4;
 }
 
-h1.ant-typography,
-.ant-typography h1 {
-  font-weight: 700 !important;
-  text-align: center;
-  font-size: 52px !important;
+p.bold {
+  font-weight: 700;
 }
 
-.ant-typography strong {
-  font-weight: 700 !important;
+fieldset {
+  padding: 0;
+  border: 0;
 }
 
-.flex-grow-up {
-  flex-grow: 1;
+.text-center {
+  text-align: center;
 }
 
-.ant-form-item-label {
-  line-height: 1 !important;
-  vertical-align: top !important;
-  margin-bottom: 8px;
+.full-height-layout {
+  min-height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
-.ant-form-item-label > label {
-  font-size: 16px !important;
-  color: #999 !important;
+h1 {
+  font-weight: 700;
+  text-align: center;
+  font-size: 52px;
+  margin: 0;
 }
 
-.ant-form-item-control {
-  line-height: initial !important;
+h2 {
+  margin: 0;
 }
 
-.ant-input-lg {
-  height: 38px !important;
-  padding: 5px 11px !important;
+h4 {
+  font-size: 18px;
+  line-height: 1.6;
+  font-weight: 600;
+  margin: 0;
 }
 
-.ant-tabs-nav-wrap {
-  background-color: #e5e5e5 !important;
+input[type="text"],
+input[type="tel"],
+input[type="email"],
+textarea {
+  border: 1px solid var(--input-border);
+  border-radius: 4px;
+  padding: 9px 16px;
+  font-size: 16px;
+  line-height: 1.2;
+  outline: none;
+  box-shadow: none;
+  transition: 0.2s all;
 }
 
-.ant-tabs-nav .ant-tabs-tab {
-  margin-right: 0 !important;
-  padding: 12px 0 !important;
-  color: #1d1d1d !important;
-  margin: 0 8px !important;
-  font-size: 16px !important;
-  line-height: 24px !important;
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="email"]:focus,
+textarea:focus {
+  border-color: var(--grey);
 }
 
-.ant-tabs-ink-bar {
-  background-color: #1d1d1d !important;
+input[type="text"],
+input[type="tel"],
+input[type="email"] {
+  height: 38px;
 }
 
-.ant-tabs-bar {
-  margin: 0 !important;
+textarea {
+  height: 84px;
 }
 
-.ant-layout {
-  background-color: #fff !important;
+.form-group label {
+  display: block;
+  font-size: 16px;
+  line-height: 1.3;
+  font-weight: 400;
+  margin-bottom: 6px;
+  color: #999;
 }
 
-.ant-card {
-  border-radius: 0 !important;
+.form-group input,
+.form-group textarea {
+  width: 100%;
 }
 
-.ant-card-body {
-  padding: 20px 26px !important;
+.form-group {
+  margin-bottom: 24px;
 }
 
-.ant-btn {
-  font-weight: 700 !important;
-  color: #fff !important;
-  background-color: #f0ad4e !important;
-  border-color: #f0ad4e !important;
+.flex-grow-up {
+  flex-grow: 1;
 }
 
-.ant-btn-primary {
-  background-color: #f0894e !important;
-  border-color: #f0894e !important;
-  color: #fff !important;
+.content-wrap {
+  padding: 0;
 }
 
-.ant-btn-primary:hover,
-.ant-btn-primary:active,
-.ant-btn-primary:focus {
-  opacity: 0.8;
-}
+@media all and (max-width: 767px) {
+  .form {
+    padding: 16px 24px;
+  }
 
-.ant-btn-lg {
-  height: 48px !important;
+  .form-group {
+    margin-bottom: 16px;
+  }
 }
 
-.content-wrap {
-  padding: 0;
+@media all and (min-width: 768px) {
+  .content-wrap {
+    padding: 60px 0;
+  }
 }
 
-.ant-rate {
-  color: #f0ad4e !important;
-}
+/* tabs */
 
-.ant-modal-content,
-.ant-modal-body {
-  height: 100%;
+.show {
+  display: block;
 }
-
-.ant-modal-body {
-  padding: 0 !important;
+.hide {
+  display: none;
 }
 
-.ant-radio-group-small .ant-radio-button-wrapper {
-  height: auto !important;
+.tabs {
+  /**/
 }
 
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
-  color: #ffd25d !important;
+.tab {
+  display: inline-flex;
+  margin: 0 0 0 24px;
+  padding: 12px 0;
+  font-size: 16px;
+  line-height: 1.5;
+  font-weight: 400;
+  outline: none;
+  box-shadow: none;
+  transition: 0.3s all;
+  vertical-align: top;
+  cursor: pointer;
+  position: relative;
+  opacity: 0.8;
+  text-transform: none;
 }
 
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled),
-.ant-radio-button-wrapper {
-  background: none !important;
-  box-shadow: none !important;
-  outline: none !important;
+.tab:first-child {
+  margin: 0;
 }
 
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
-  opacity: 1 !important;
+.tab.tabSelected {
+  opacity: 1;
 }
 
-.ant-radio-button-wrapper {
-  color: #fff !important;
-  border: none !important;
-  line-height: 1 !important;
-  padding: 0 9px !important;
+.tab-selected:after {
+  content: "";
+  position: absolute;
+  top: calc(100% - 3px);
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: var(--black);
 }
 
-@media all and (max-width: 767px) {
-  .ant-card-body {
-    padding: 12px 16px !important;
-  }
+.tab-panel {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
 
-  .ant-form {
-    padding: 20px 26px !important;
-  }
+.tabs-header {
+  padding: 0 24px;
+  background-color: var(--grey);
+}
 
-  .ant-form-item {
-    margin-bottom: 16px !important;
-  }
+.tabs-nav {
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  text-align: center;
 }
 
-@media all and (min-width: 768px) {
-  .content-wrap {
-    padding: 60px 0;
-  }
+.tabs-content {
+  padding: 30px 0;
+}
 
-  .ant-form-item {
-    margin-bottom: 24px !important;
+@media all and (max-width: 767px) {
+  .tabs-content {
+    padding: 18px 0;
   }
 }

From 92721c34996723128cf618890b7e440e61e2fe26 Mon Sep 17 00:00:00 2001
From: hermansemykozov <semikozovgerman@gmail.com>
Date: Mon, 17 Feb 2020 11:49:05 +0200
Subject: [PATCH 2/5] CHANGE: fix path to css file

---
 src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 01bd24c..ea6213f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-@import "/node_modules/normalize.css/normalize.css";
+@import "~normalize.css/normalize.css";
 
 :root {
   --black: #1d1d1d;

From c063b263b3c74bdb33e973e087a3acbe64ddaa9a Mon Sep 17 00:00:00 2001
From: hermansemykozov <semikozovgerman@gmail.com>
Date: Tue, 18 Feb 2020 19:29:48 +0200
Subject: [PATCH 3/5] FIX: tabs

---
 src/components/tabs/index.js        | 45 -----------------------------
 src/components/tabs/tabs.module.css |  0
 src/index.css                       |  2 ++
 3 files changed, 2 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/tabs/index.js
 delete mode 100644 src/components/tabs/tabs.module.css

diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js
deleted file mode 100644
index 7e7790c..0000000
--- a/src/components/tabs/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import { useTabs } from "../../hooks/use-tabs";
-
-import styles from "./tabs.module.css";
-
-export const Tabs = ({ tabs }) => {
-  const [activeTab, setActiveTab] = useTabs("tabs", 1);
-
-  const createTabs = () =>
-    tabs.map(tab => (
-      <button
-        key={`${tab.id}-tab`}
-        role="tab"
-        aria-selected={tab.id === activeTab}
-        id={`${tab.id}-panel`}
-        aria-controls={`${tab.id}-content-panel`}
-        onClick={() => setActiveTab(tab.id, "tabs")}
-        className={tab.id === activeTab ? "tab tab--selected" : "tab"}
-      >
-        {tab.title}
-      </button>
-    ));
-
-  const createTabPanels = () =>
-    tabs.map(tab => (
-      <div
-        key={`${tab.id}-panel`}
-        id={`${tab.id}-content-panel`}
-        role="tabpanel"
-        aria-labelledby={`${tab.id}-tab`}
-        className={`tab__panel ${tab.id === activeTab ? "show" : "hide"}`}
-      >
-        <p style={{ margin: 0 }}>{tab.content}</p>
-      </div>
-    ));
-
-  return (
-    <article>
-      <div role="tablist" aria-orientation="horizontal">
-        {createTabs()}
-      </div>
-      {createTabPanels()}
-    </article>
-  );
-};
diff --git a/src/components/tabs/tabs.module.css b/src/components/tabs/tabs.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/index.css b/src/index.css
index ea6213f..1d6b6cd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -186,6 +186,8 @@ textarea {
   font-weight: 400;
   outline: none;
   box-shadow: none;
+  border: none;
+  background-color: transparent;
   transition: 0.3s all;
   vertical-align: top;
   cursor: pointer;

From 60b413e3ca0929d2aa3d46c5620520ba4f8e8d22 Mon Sep 17 00:00:00 2001
From: hermansemykozov <semikozovgerman@gmail.com>
Date: Tue, 18 Feb 2020 20:12:43 +0200
Subject: [PATCH 4/5] CHANGE: add non-pushed changes + small css fixes

---
 src/components/app/index.js                   |  5 +--
 src/components/loader/index.js                |  6 +--
 src/components/loader/loader.module.css       | 30 ++-----------
 src/components/pages/checkout/index.js        |  6 +--
 src/components/pages/error/index.js           |  2 +-
 src/components/pages/not-found/index.js       |  2 +-
 src/components/pages/thank-you/index.js       |  2 +-
 .../pages/thank-you/thank-you.module.css      |  2 +-
 src/components/product/product.module.css     |  2 +-
 src/components/restaurant/index.js            | 16 +++----
 .../restaurant/restaurant.module.css          |  4 ++
 src/components/restaurants-index/index.js     | 16 +++----
 src/components/reviews/index.js               | 16 +++----
 .../review-form/review-form.module.css        |  7 +++
 src/index.css                                 | 44 +++++++++++--------
 15 files changed, 75 insertions(+), 85 deletions(-)

diff --git a/src/components/app/index.js b/src/components/app/index.js
index 2af57db..11fc9a7 100644
--- a/src/components/app/index.js
+++ b/src/components/app/index.js
@@ -1,4 +1,3 @@
-import { Layout } from "antd";
 import React, { useContext, useState } from "react";
 
 import Header from "./header";
@@ -17,7 +16,7 @@ function App() {
 
   return (
     <UserProvider value={{ name, setName }}>
-      <Layout>
+      <>
         <Header />
         <main role="main">
           <Switch>
@@ -32,7 +31,7 @@ function App() {
             <Route path="/" render={() => <RestaurantsIndex />} />
           </Switch>
         </main>
-      </Layout>
+      </>
     </UserProvider>
   );
 }
diff --git a/src/components/loader/index.js b/src/components/loader/index.js
index 9933bae..dd8ea9f 100644
--- a/src/components/loader/index.js
+++ b/src/components/loader/index.js
@@ -3,9 +3,9 @@ import styles from "./loader.module.css";
 
 function Loader() {
   return (
-    <div className={styles.spinner}>
-      <div className={styles["double-bounce1"]} />
-      <div className={styles["double-bounce2"]} />
+    <div className={styles.loader}>
+      <div className={styles.bounce1} />
+      <div className={styles.bounce2} />
     </div>
   );
 }
diff --git a/src/components/loader/loader.module.css b/src/components/loader/loader.module.css
index 1193a53..67ea85c 100644
--- a/src/components/loader/loader.module.css
+++ b/src/components/loader/loader.module.css
@@ -1,21 +1,12 @@
 .loader {
-  padding: 40px;
-  margin: 0 auto;
-  width: 100px;
-  display: block;
-}
-
-/* spinner */
-
-.spinner {
   width: 40px;
   height: 40px;
   position: relative;
   margin: 100px auto;
 }
 
-.double-bounce1,
-.double-bounce2 {
+.bounce1,
+.bounce2 {
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -24,34 +15,19 @@
   position: absolute;
   top: 0;
   left: 0;
-
-  -webkit-animation: sk-bounce 2s infinite ease-in-out;
   animation: sk-bounce 2s infinite ease-in-out;
 }
 
-.double-bounce2 {
-  -webkit-animation-delay: -1s;
+.bounce2 {
   animation-delay: -1s;
 }
 
-@-webkit-keyframes sk-bounce {
-  0%,
-  100% {
-    -webkit-transform: scale(0);
-  }
-  50% {
-    -webkit-transform: scale(1);
-  }
-}
-
 @keyframes sk-bounce {
   0%,
   100% {
     transform: scale(0);
-    -webkit-transform: scale(0);
   }
   50% {
     transform: scale(1);
-    -webkit-transform: scale(1);
   }
 }
diff --git a/src/components/pages/checkout/index.js b/src/components/pages/checkout/index.js
index d9dcc1b..8faa64d 100644
--- a/src/components/pages/checkout/index.js
+++ b/src/components/pages/checkout/index.js
@@ -11,15 +11,15 @@ function CheckoutPage({ history }) {
         <div className={styles.checkoutInnerContent}>
           <div>
             <form className="form">
-              <div className="form-group">
+              <div className="formGroup">
                 <label>Name</label>
                 <input type="text" />
               </div>
-              <div className="form-group">
+              <div className="formGroup">
                 <label>Phone number</label>
                 <input type="tel" />
               </div>
-              <div className="form-group">
+              <div className="formGroup">
                 <label>Address</label>
                 <textarea />
               </div>
diff --git a/src/components/pages/error/index.js b/src/components/pages/error/index.js
index 50903dd..d4b8446 100644
--- a/src/components/pages/error/index.js
+++ b/src/components/pages/error/index.js
@@ -6,7 +6,7 @@ function ErrorPage() {
   const { t } = useContext(i18n);
 
   return (
-    <div className="full-height-layout">
+    <div className="fullHeightLayout">
       <Container>
         <h1>{t("error_page")}</h1>
       </Container>
diff --git a/src/components/pages/not-found/index.js b/src/components/pages/not-found/index.js
index 85d1b3e..5061d93 100644
--- a/src/components/pages/not-found/index.js
+++ b/src/components/pages/not-found/index.js
@@ -7,7 +7,7 @@ function NotFoundPage() {
   const { t } = useContext(i18n);
 
   return (
-    <div className="full-height-layout">
+    <div className="fullHeightLayout">
       <Container>
         <h1 className={styles.title}>
           {t("not_found_page")}
diff --git a/src/components/pages/thank-you/index.js b/src/components/pages/thank-you/index.js
index bd4551a..229cf7c 100644
--- a/src/components/pages/thank-you/index.js
+++ b/src/components/pages/thank-you/index.js
@@ -4,7 +4,7 @@ import styles from "./thank-you.module.css";
 
 function ThankYouPage() {
   return (
-    <div className="full-height-layout">
+    <div className="fullHeightLayout">
       <Container>
         <h1 className={styles.title}>
           Thanks!
diff --git a/src/components/pages/thank-you/thank-you.module.css b/src/components/pages/thank-you/thank-you.module.css
index e488291..3f74ecf 100644
--- a/src/components/pages/thank-you/thank-you.module.css
+++ b/src/components/pages/thank-you/thank-you.module.css
@@ -1,3 +1,3 @@
 .title {
-  color: #49ab39 !important;
+  color: var(--green) !important;
 }
diff --git a/src/components/product/product.module.css b/src/components/product/product.module.css
index 56e3609..f9cd1a2 100644
--- a/src/components/product/product.module.css
+++ b/src/components/product/product.module.css
@@ -52,7 +52,7 @@
 .button {
   color: var(--white);
   background-color: var(--yellow);
-  border-color: var(--yellow);
+  border: 1px solid var(--yellow);
   border-radius: 2px;
   width: 36px;
   height: 36px;
diff --git a/src/components/restaurant/index.js b/src/components/restaurant/index.js
index 2b34128..bfca10a 100644
--- a/src/components/restaurant/index.js
+++ b/src/components/restaurant/index.js
@@ -24,7 +24,7 @@ function Restaurant({ restaurant }) {
         id="menu"
         aria-controls="menu-content-panel"
         onClick={() => setActiveTab("menu", "tabs")}
-        className={activeTab === "menu" ? "tab tab-selected" : "tab"}
+        className={activeTab === "menu" ? "tab tabSelected" : "tab"}
       >
         {t("menu")}
       </button>
@@ -35,7 +35,7 @@ function Restaurant({ restaurant }) {
         id="reviews"
         aria-controls="reviews-content-panel"
         onClick={() => setActiveTab("reviews", "tabs")}
-        className={activeTab === "reviews" ? "tab tab-selected" : "tab"}
+        className={activeTab === "reviews" ? "tab tabSelected" : "tab"}
       >
         {t("reviews")}
       </button>
@@ -49,7 +49,7 @@ function Restaurant({ restaurant }) {
         id="menu-panel"
         role="tabpanel"
         aria-labelledby="menu-tab"
-        className={cx("tab-panel", {
+        className={cx("tabPanel", {
           show: activeTab === "menu",
           hide: activeTab !== "menu"
         })}
@@ -61,7 +61,7 @@ function Restaurant({ restaurant }) {
         id="reviews-panel"
         role="tabpanel"
         aria-labelledby="reviews-tab"
-        className={cx("tab-panel", {
+        className={cx("tabPanel", {
           show: activeTab === "reviews",
           hide: activeTab !== "reviews"
         })}
@@ -94,13 +94,13 @@ function Restaurant({ restaurant }) {
             history
           }) => (
             <>
-              <div className="content-tabs">
-                <div className="tabs-header">
+              <div className="contentTabs">
+                <div className="tabsHeader">
                   <Container>
                     <div
                       role="tablist"
                       aria-orientation="horizontal"
-                      className="tabs-nav"
+                      className={cx("tabsNav", styles.tabsNav)}
                       onClick={e =>
                         history.push(`/restaurants/${id}/${e.target.id}`)
                       }
@@ -109,7 +109,7 @@ function Restaurant({ restaurant }) {
                     </div>
                   </Container>
                 </div>
-                <div className="tabs-content">
+                <div className="tabsContent">
                   <Container className={styles.container}>
                     {createTabPanels()}
                   </Container>
diff --git a/src/components/restaurant/restaurant.module.css b/src/components/restaurant/restaurant.module.css
index 5f663b3..d3bb3c5 100644
--- a/src/components/restaurant/restaurant.module.css
+++ b/src/components/restaurant/restaurant.module.css
@@ -60,6 +60,10 @@
     padding: 16px 16px 60px;
   }
 
+  .tabsNav {
+    justify-content: center;
+  }
+
   .fixedMobileBasketPanel {
     display: flex;
   }
diff --git a/src/components/restaurants-index/index.js b/src/components/restaurants-index/index.js
index ce9477d..57b956f 100644
--- a/src/components/restaurants-index/index.js
+++ b/src/components/restaurants-index/index.js
@@ -33,9 +33,9 @@ function RestaurantsIndex({ restaurants, fetchRestaurants, loading }) {
         role="tab"
         aria-selected={cuisine === activeTab}
         id={`${cuisine}-panel`}
-        aria-controls={`${cuisine}-content-panel`}
+        aria-controls={`${cuisine}-contentPanel`}
         onClick={() => setActiveTab(cuisine, "tabs")}
-        className={cuisine === activeTab ? "tab tab-selected" : "tab"}
+        className={cuisine === activeTab ? "tab tabSelected" : "tab"}
       >
         {t(cuisine)}
       </button>
@@ -48,7 +48,7 @@ function RestaurantsIndex({ restaurants, fetchRestaurants, loading }) {
         id={`${cuisine}-content-panel`}
         role="tabpanel"
         aria-labelledby={`${cuisine}-tab`}
-        className={`tab-panel ${cuisine === activeTab ? "show" : "hide"}`}
+        className={`tabPanel ${cuisine === activeTab ? "show" : "hide"}`}
       >
         {restaurants
           .filter(
@@ -69,19 +69,19 @@ function RestaurantsIndex({ restaurants, fetchRestaurants, loading }) {
           <h3 className={styles.subtitle}>{t("from_restaurants")}</h3>
         </div>
       </div>
-      <div className="content-tabs">
-        <div className="tabs-header">
+      <div className="contentTabs">
+        <div className="tabsHeader">
           <Container>
             <div
               role="tablist"
               aria-orientation="horizontal"
-              className="tabs-nav"
+              className="tabsNav"
             >
-              {createTabs()}
+              <span>cuisines:</span> {createTabs()}
             </div>
           </Container>
         </div>
-        <div className="tabs-content">{createTabPanels()}</div>
+        <div className="tabsContent">{createTabPanels()}</div>
       </div>
     </>
   );
diff --git a/src/components/reviews/index.js b/src/components/reviews/index.js
index b7f9b3f..e945482 100644
--- a/src/components/reviews/index.js
+++ b/src/components/reviews/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Col, Row } from "antd";
+import { Container } from "../container";
 import Review from "./review";
 import ReviewForm from "./review-form";
 import { connect } from "react-redux";
@@ -18,14 +18,12 @@ function Reviews({ restaurant, loading, loaded, fetchReviews }) {
   if (!loaded || loading) return <Loader />;
 
   return (
-    <Row type="flex" justify="center" gutter={{ xs: 8, sm: 16, md: 24 }}>
-      <Col xs={24} md={20} lg={18}>
-        {restaurant.reviews.map(id => (
-          <Review id={id} key={id} data-id="review-list-item" />
-        ))}
-        <ReviewForm restaurantId={restaurant.id} />
-      </Col>
-    </Row>
+    <Container>
+      {restaurant.reviews.map(id => (
+        <Review id={id} key={id} data-id="review-list-item" />
+      ))}
+      <ReviewForm restaurantId={restaurant.id} />
+    </Container>
   );
 }
 
diff --git a/src/components/reviews/review-form/review-form.module.css b/src/components/reviews/review-form/review-form.module.css
index 3f36af8..ed9e67e 100644
--- a/src/components/reviews/review-form/review-form.module.css
+++ b/src/components/reviews/review-form/review-form.module.css
@@ -51,6 +51,13 @@
   padding-left: 20px;
   padding-right: 20px;
   margin-top: 25px;
+  transition: 0.2s all;
+  cursor: pointer;
+}
+
+.submitButton:hover {
+  border-color: var(--yellow-light);
+  opacity: 0.8;
 }
 
 .invalid:focus {
diff --git a/src/index.css b/src/index.css
index 1d6b6cd..b14b3a4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -61,11 +61,7 @@ fieldset {
   border: 0;
 }
 
-.text-center {
-  text-align: center;
-}
-
-.full-height-layout {
+.fullHeightLayout {
   min-height: calc(100vh - 60px);
   display: flex;
   flex-direction: column;
@@ -91,6 +87,8 @@ h4 {
   margin: 0;
 }
 
+/* forms */
+
 input[type="text"],
 input[type="tel"],
 input[type="email"],
@@ -122,7 +120,7 @@ textarea {
   height: 84px;
 }
 
-.form-group label {
+.formGroup label {
   display: block;
   font-size: 16px;
   line-height: 1.3;
@@ -131,20 +129,20 @@ textarea {
   color: #999;
 }
 
-.form-group input,
-.form-group textarea {
+.formGroup input,
+.formGroup textarea {
   width: 100%;
 }
 
-.form-group {
+.formGroup {
   margin-bottom: 24px;
 }
 
-.flex-grow-up {
+.flexGrowUp {
   flex-grow: 1;
 }
 
-.content-wrap {
+.contentWrap {
   padding: 0;
 }
 
@@ -153,13 +151,13 @@ textarea {
     padding: 16px 24px;
   }
 
-  .form-group {
+  .formGroup {
     margin-bottom: 16px;
   }
 }
 
 @media all and (min-width: 768px) {
-  .content-wrap {
+  .contentWrap {
     padding: 60px 0;
   }
 }
@@ -204,7 +202,7 @@ textarea {
   opacity: 1;
 }
 
-.tab-selected:after {
+.tabSelected:after {
   content: "";
   position: absolute;
   top: calc(100% - 3px);
@@ -214,30 +212,38 @@ textarea {
   background-color: var(--black);
 }
 
-.tab-panel {
+.tabPanel {
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-.tabs-header {
+.tabsHeader {
   padding: 0 24px;
   background-color: var(--grey);
 }
 
-.tabs-nav {
+.tabsNav {
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
   text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
-.tabs-content {
+.tabsContent {
   padding: 30px 0;
 }
 
 @media all and (max-width: 767px) {
-  .tabs-content {
+  .tabsContent {
     padding: 18px 0;
   }
+
+  .tabsNav {
+    justify-content: flex-start;
+  }
 }

From ce2ee46c202747d9aba39d90dd66dfc2a55c9791 Mon Sep 17 00:00:00 2001
From: Roman Iakobchuk <kaboom.ua@gmail.com>
Date: Sun, 1 Mar 2020 14:38:26 +0200
Subject: [PATCH 5/5] fix functionality

---
 src/components/app/header/index.js        |  2 +-
 src/components/basket/index.js            |  7 +++++--
 src/components/button/index.js            |  6 +++---
 src/components/content/index.js           |  1 -
 src/components/pages/checkout/index.js    | 13 ++++++++-----
 src/components/pages/restaurants/index.js |  1 -
 src/components/pages/thank-you/index.js   |  8 +++++---
 src/components/rate/index.js              | 21 +++++++++------------
 src/components/rate/star-icon.js          |  4 +++-
 src/components/restaurants-index/index.js |  8 +++-----
 src/contexts/i18n-dictionaries.json       | 20 ++++++++++++++++++--
 11 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/src/components/app/header/index.js b/src/components/app/header/index.js
index cbd8804..098fce3 100644
--- a/src/components/app/header/index.js
+++ b/src/components/app/header/index.js
@@ -47,7 +47,7 @@ function Header() {
             )}
           </div>
           <div className={styles.logoWrap}>
-            <Link to="/restaurants" className={styles.logo}>
+            <Link to="/" className={styles.logo}>
               <Logo />
             </Link>
           </div>
diff --git a/src/components/basket/index.js b/src/components/basket/index.js
index 30fd59a..98c0ab5 100644
--- a/src/components/basket/index.js
+++ b/src/components/basket/index.js
@@ -36,12 +36,15 @@ function Basket({
       <h4 className={styles.title}>{t("basket")}</h4>
       <TransitionGroup>
         {orderProducts.map(({ product, amount, restaurant }) => (
-          <CSSTransition timeout={500} classNames="basket-item-animation">
+          <CSSTransition
+            timeout={500}
+            classNames="basket-item-animation"
+            key={product.id}
+          >
             <BasketItem
               product={product}
               amount={amount}
               restaurant={restaurant}
-              key={product.id}
             />
           </CSSTransition>
         ))}
diff --git a/src/components/button/index.js b/src/components/button/index.js
index decee5b..6c45e14 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -9,7 +9,7 @@ export const Button = ({
   size,
   block,
   className,
-  handleClick,
+  onClick,
   children
 }) =>
   type === "unstyled" ? (
@@ -23,7 +23,7 @@ export const Button = ({
         },
         className
       )}
-      onClick={handleClick}
+      onClick={onClick}
     >
       {children}
     </button>
@@ -40,7 +40,7 @@ export const Button = ({
         },
         className
       )}
-      onClick={handleClick}
+      onClick={onClick}
     >
       {children}
     </button>
diff --git a/src/components/content/index.js b/src/components/content/index.js
index ec42022..65c1d49 100644
--- a/src/components/content/index.js
+++ b/src/components/content/index.js
@@ -9,7 +9,6 @@ function Content({ restaurant, fetchRestaurants, loading }) {
   useEffect(() => {
     fetchRestaurants();
   }, [fetchRestaurants]);
-  console.log("---", 123);
 
   if (loading || !restaurant) return <Loader />;
   return <Restaurant restaurant={restaurant} />;
diff --git a/src/components/pages/checkout/index.js b/src/components/pages/checkout/index.js
index 8faa64d..d9851a0 100644
--- a/src/components/pages/checkout/index.js
+++ b/src/components/pages/checkout/index.js
@@ -1,10 +1,13 @@
-import React from "react";
+import React, { useContext } from "react";
 import Basket from "../../basket";
 import { Button } from "../../button";
 import { Container } from "../../container";
 import styles from "./checkout.module.css";
+import i18n from "../../../contexts/i18n-context";
 
 function CheckoutPage({ history }) {
+  const { t } = useContext(i18n);
+
   return (
     <div className={styles.checkoutContent}>
       <Container className={styles.container}>
@@ -12,15 +15,15 @@ function CheckoutPage({ history }) {
           <div>
             <form className="form">
               <div className="formGroup">
-                <label>Name</label>
+                <label>{t("order_name")}</label>
                 <input type="text" />
               </div>
               <div className="formGroup">
-                <label>Phone number</label>
+                <label>{t("order_phone")}</label>
                 <input type="tel" />
               </div>
               <div className="formGroup">
-                <label>Address</label>
+                <label>{t("order_address")}</label>
                 <textarea />
               </div>
               <Button
@@ -28,7 +31,7 @@ function CheckoutPage({ history }) {
                 block
                 type="primary"
               >
-                Order
+                {t("order_final")}
               </Button>
             </form>
           </div>
diff --git a/src/components/pages/restaurants/index.js b/src/components/pages/restaurants/index.js
index bb725b2..091baa9 100644
--- a/src/components/pages/restaurants/index.js
+++ b/src/components/pages/restaurants/index.js
@@ -3,7 +3,6 @@ import { Route } from "react-router-dom";
 import Content from "../../content";
 
 function RestaurantsPage() {
-  console.log("---", 123);
   return <Route path={`$/restaurants/:id`} component={Content} />;
 }
 
diff --git a/src/components/pages/thank-you/index.js b/src/components/pages/thank-you/index.js
index 229cf7c..462a995 100644
--- a/src/components/pages/thank-you/index.js
+++ b/src/components/pages/thank-you/index.js
@@ -1,15 +1,17 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Container } from "../../container";
 import styles from "./thank-you.module.css";
+import i18n from "../../../contexts/i18n-context";
 
 function ThankYouPage() {
+  const { t } = useContext(i18n);
   return (
     <div className="fullHeightLayout">
       <Container>
         <h1 className={styles.title}>
-          Thanks!
+          {t("thank_you")}
           <br />
-          Your order is being prepared
+          {t("thank_you_placed")}
         </h1>
       </Container>
     </div>
diff --git a/src/components/rate/index.js b/src/components/rate/index.js
index 8b588e0..679d48a 100644
--- a/src/components/rate/index.js
+++ b/src/components/rate/index.js
@@ -1,4 +1,3 @@
-import cx from "classnames";
 import React from "react";
 import PropTypes from "prop-types";
 
@@ -8,17 +7,15 @@ import { StarIcon } from "./star-icon";
 
 const Rate = ({ amount, value, onChange, disabled = false }) => (
   <div className={styles.wrapper}>
-    <span
-      onChange={onChange}
-      className={cx({
-        [styles.disabled]: disabled
-      })}
-    >
-      <StarIcon />
-      <StarIcon />
-      <StarIcon />
-      <StarIcon />
-      <StarIcon />
+    <span onChange={onChange}>
+      {[...Array(5)].map((_, i) => (
+        <StarIcon
+          key={i}
+          checked={i <= value - 1}
+          onClick={() => onChange(i + 1)}
+          disabled={disabled}
+        />
+      ))}
     </span>
     {amount && <span className={styles.amount}>({amount})</span>}
   </div>
diff --git a/src/components/rate/star-icon.js b/src/components/rate/star-icon.js
index fe36610..dff971b 100644
--- a/src/components/rate/star-icon.js
+++ b/src/components/rate/star-icon.js
@@ -1,7 +1,9 @@
 import React from "react";
 
-export const StarIcon = ({ checked }) => (
+export const StarIcon = ({ checked, onClick, disabled }) => (
   <svg
+    style={{ cursor: disabled ? "default" : "pointer" }}
+    onClick={onClick}
     width="16"
     height="16"
     viewBox="0 0 16 16"
diff --git a/src/components/restaurants-index/index.js b/src/components/restaurants-index/index.js
index 57b956f..b4e2f1f 100644
--- a/src/components/restaurants-index/index.js
+++ b/src/components/restaurants-index/index.js
@@ -29,10 +29,9 @@ function RestaurantsIndex({ restaurants, fetchRestaurants, loading }) {
   const createTabs = () =>
     cuisines.map(cuisine => (
       <button
-        key={`${cuisine}-tab`}
+        key={cuisine}
         role="tab"
         aria-selected={cuisine === activeTab}
-        id={`${cuisine}-panel`}
         aria-controls={`${cuisine}-contentPanel`}
         onClick={() => setActiveTab(cuisine, "tabs")}
         className={cuisine === activeTab ? "tab tabSelected" : "tab"}
@@ -44,8 +43,7 @@ function RestaurantsIndex({ restaurants, fetchRestaurants, loading }) {
   const createTabPanels = () =>
     cuisines.map(cuisine => (
       <div
-        key={`${cuisine}-panel`}
-        id={`${cuisine}-content-panel`}
+        key={cuisine}
         role="tabpanel"
         aria-labelledby={`${cuisine}-tab`}
         className={`tabPanel ${cuisine === activeTab ? "show" : "hide"}`}
@@ -77,7 +75,7 @@ function RestaurantsIndex({ restaurants, fetchRestaurants, loading }) {
               aria-orientation="horizontal"
               className="tabsNav"
             >
-              <span>cuisines:</span> {createTabs()}
+              <span>{t("cuisines")}:</span> {createTabs()}
             </div>
           </Container>
         </div>
diff --git a/src/contexts/i18n-dictionaries.json b/src/contexts/i18n-dictionaries.json
index 6c38031..aba36f8 100644
--- a/src/contexts/i18n-dictionaries.json
+++ b/src/contexts/i18n-dictionaries.json
@@ -20,7 +20,15 @@
     "sub_total": "Sub-total:",
     "delivery_costs": "Delivery costs:",
     "free": "FREE",
-    "total": "total:"
+    "total": "total:",
+    "order_name": "Name",
+    "order_phone": "Phone Number",
+    "order_address": "Address",
+    "order_final": "Order",
+    "thank_you": "Thank You!",
+    "thank_you_placed": "Your order is being prepared",
+    "cuisines": "Cuisines",
+    "all": "all"
   },
   "ru": {
     "select_restaurant": "Пожалуйста, выберите ресторан",
@@ -43,6 +51,14 @@
     "sub_total": "Предварительно:",
     "delivery_costs": "Доставка:",
     "free": "БЕСПЛАТНО",
-    "total": "Всего:"
+    "total": "Всего:",
+    "order_name": "Имя",
+    "order_phone": "Номер телефона",
+    "order_address": "Адрес",
+    "order_final": "Заказать",
+    "thank_you": "Спасибо!",
+    "thank_you_placed": "Ваш заказ уже готовится",
+    "cuisines": "Кухни",
+    "all": "все"
   }
 }