orders: clean code

src/pages/orders/orders.module.css

@@ -54,14 +54,30 @@
   border-radius: 30px !important;
 }
 
-.rateIcon{
+.rateIcon {
   position: relative;
   top: 2px;
-  margin:0 5px;
+  margin: 0 5px;
 }
 
-.reorderIcon{
+.reorderIcon {
   position: relative;
   top: 2px;
-  margin:0 5px;
-}
+  margin: 0 5px;
+}
+
+.row {
+  width: 100%;
+  padding: 16px 16px 0;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: var(--secondary-background);
+}
+
+.button {
+  width: 100%;
+  height: 48px;
+  margin-bottom: 16px;
+  box-shadow: none;
+}

src/pages/orders/page.tsx

@@ -2,38 +2,21 @@ import { Button, Row } from "antd";
 import ProHeader from "components/ProHeader/ProHeader";
 import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
-import { useAppSelector } from "redux/hooks";
-import { ProBlack2 } from "ThemeConstants";
+import styles from "./orders.module.css";
 import OrdersList from "./OrdersList";
 
 export default function OrdersPage() {
   const { t } = useTranslation();
   const { id } = useParams();
-  const { themeName } = useAppSelector((state) => state.theme);
 
   return (
     <>
       <ProHeader>{t("orders.title")}</ProHeader>
       <OrdersList />
-      <Row
-        style={{
-          width: "100%",
-          padding: "16px 16px 0",
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          boxShadow: "0px -1px 3px rgba(0, 0, 0, 0.1)",
-          backgroundColor: themeName === "light" ? "white" : ProBlack2,
-
-        }}
-      >
+      <Row className={styles.row}>
         <Link to={`/${id}/menu`} style={{ width: "100%" }}>
-          <Button
-            type="primary"
-            shape="round"
-            style={{ width: "100%", height: 48, marginBottom: 16 }}
-          >
-            {t('orders.browseMenu')}
+          <Button type="primary" shape="round" className={styles.button}>
+            {t("orders.browseMenu")}
           </Button>
         </Link>
       </Row>