make bigger some sizes

2026-03-25 15:58:21 +05:00
parent 22e597b291
commit a7e31b380d
6 changed files with 86 additions and 17 deletions
--- a/src/components/CategoryDropdown/DropdownMenu.module.scss
+++ b/src/components/CategoryDropdown/DropdownMenu.module.scss
@@ -20,6 +20,7 @@
  color: #4b5563;
  background-color: transparent;
  font-weight: 600;
+  font-size: 16px;
  cursor: pointer;
  &:hover {
    background-color: #f3f4f6;
--- a/src/components/Icons/index.jsx
+++ b/src/components/Icons/index.jsx
@@ -199,6 +199,7 @@ export const OrderIcon = () => (
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 28.35 28.35"
    data-v-5c1608dd=""
+    
  >
    <path
      d="M24.4,16a2.37,2.37,0,0,0-.94-.59V14.22h0v-2.7h0V9a2.27,2.27,0,0,0-.29-1.11L21.72,5.33a2.27,2.27,0,0,0-2-1.15H11A2.27,2.27,0,0,0,9,5.33L7.52,7.91A2.38,2.38,0,0,0,7.23,9v2.5h0v2h0v.81H4.68a1.46,1.46,0,0,0-1.45,1.46v6.86a1.45,1.45,0,0,0,1.45,1.45H7.2a1.46,1.46,0,0,0,1.28-.78h1.68a2.69,2.69,0,0,1,.57.06l3.55.71a4.09,4.09,0,0,0,.85.09,4.24,4.24,0,0,0,.94-.11l4.64-1,3.65-3.5a2.43,2.43,0,0,0,0-3.49Zm-7.17-1.14-.06,0-3.89-.63a4.34,4.34,0,0,0-2.88.55l-1.75.8V11.52a1,1,0,0,1,1-1H21a1,1,0,0,1,1,1v2h0v1.87a2.45,2.45,0,0,0-.94.5L19,17.68c0-.11,0-.23,0-.36A2.64,2.64,0,0,0,17.23,14.89ZM20.49,6,21.93,8.6A.78.78,0,0,1,22,9v.29a2.51,2.51,0,0,0-1-.23h-5V5.59h3.7A.86.86,0,0,1,20.49,6ZM8.76,8.6,10.2,6A.86.86,0,0,1,11,5.59h3.69V9.08h-5a2.51,2.51,0,0,0-1,.23V9A.78.78,0,0,1,8.76,8.6Zm-1.53,14s0,0,0,0H4.68a0,0,0,0,1,0,0V15.78a0,0,0,0,1,0,0H7.2s0,0,0,0v6.86ZM23.39,18.5,20,21.73l-4.26,1a2.85,2.85,0,0,1-1.2,0L11,22a4.8,4.8,0,0,0-.85-.08H8.65V17.14L11,16.06l.08,0a2.87,2.87,0,0,1,2-.38l3.75.6a1.21,1.21,0,0,1,.76,1.08c0,.44,0,1.18-1.77,1.18H14.54a.7.7,0,0,0-.7.71.7.7,0,0,0,.7.7h4L22,17A1,1,0,0,1,23.4,17a1,1,0,0,1,.3.74A1,1,0,0,1,23.39,18.5Z"
--- a/src/components/LogIn/LoginModal.module.scss
+++ b/src/components/LogIn/LoginModal.module.scss
@@ -10,7 +10,7 @@
  align-items: center;
  border-radius: 0.5rem;
  height: 2.5rem;
-  font-size: 0.875rem;
+  font-size: 16px;
  color: #4b5563;
  background-color: transparent;
  box-shadow: none;
--- a/src/components/Navbar/Navbar.module.scss
+++ b/src/components/Navbar/Navbar.module.scss
@@ -19,7 +19,7 @@
  .btn{
    display: flex;
    width: max-content;
-    font-size: 14px;
+    font-size: 16px;
    border-radius: 4px;
    border: #000000;
    background-color: #000000;
@@ -48,7 +48,7 @@
    display: flex;
    width: 100%;
    padding: 10px 22px 0px;
-    height: 60px;
+    height: 80px;
    gap: 10px;
    margin: 0 auto;
    cursor: pointer;
@@ -106,8 +106,8 @@
      margin: 0;
      svg {
        fill: #4b5563;
-        width: 20px;
-        height: 20px;
+        width: 24px;
+        height: 24px;
      }
    }
    .searchWrapper {
@@ -154,7 +154,7 @@
    align-items: center;
    border-radius: 0.5rem;
    height: 2.5rem;
-    font-size: 0.875rem;
+    font-size: 16px;
    color: #4b5563;
    font-weight: 600;
    background-color: transparent;
@@ -162,6 +162,10 @@
    &:hover {
      background-color: #f3f4f6;
    }
+    svg {
+      width: 20px;
+      height: 20px;
+    }
  }

  .cartSection {
--- a/src/components/Navbar/NavbarDown.jsx
+++ b/src/components/Navbar/NavbarDown.jsx
@@ -214,7 +214,7 @@ const NavbarDown = () => {
                  count={ordersItemCount}
                  offset={[10, 0]}
                >
-                  <button className={styles.navButton}>
+                  <button className={styles.navButton} >
                    <OrderIcon />
                  </button>
                </Badge>
--- a/src/components/Navbar/index.jsx
+++ b/src/components/Navbar/index.jsx
@@ -4,34 +4,97 @@ import SignupForm from "../BeSeller/index";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { LogoWithText } from "../Icons";
-import Logo from "../../assets/logo2.png"
+import Logo from "../../assets/logo2.png";
+import { useTranslation } from "react-i18next";
+import tm from "../../assets/tm.png";
+import ru from "../../assets/ru.png";
+import en from "../../assets/en.png";
+
 const Navbar = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const navigate = useNavigate();
-  const showModal = () => {
-    setIsModalVisible(true);
+  const { i18n } = useTranslation();
+
+  const changeLanguage = (langCode) => {
+    i18n.changeLanguage(langCode);
+    localStorage.setItem("preferredLanguage", langCode);
+    window.location.reload();
  };

-  const handleCancel = () => {
-    setIsModalVisible(false);
-  };
+  const languages = [
+    { code: "tk", flag: tm, label: "TM" },
+    { code: "ru", flag: ru, label: "RU" },
+    { code: "en", flag: en, label: "EN" },
+  ];
+
+  const showModal = () => setIsModalVisible(true);
+  const handleCancel = () => setIsModalVisible(false);
+
  return (
    <>
      <header className={styles.navbar}>
        <div className={styles.navbarUp}>
          <div
-            style={{ maxWidth: "1366px", display: "flex", margin: "0 auto", alignItems: "center"}}
+            style={{
+              maxWidth: "1366px",
+              display: "flex",
+              margin: "0 auto",
+              alignItems: "center",
+            }}
          >
            <div className={styles.logo}>
              <div
                className={styles.logoContainer}
                onClick={() => navigate("/")}
              >
-                {/* <LogoWithText /> */}
-                <img style={{width: "200px"}} src={Logo} alt="" />
+                <img style={{ width: "300px" }} src={Logo} alt="" />
              </div>
            </div>
-            <div style={{ display: "flex", alignItems: "center", padding: "8px 14px 6px" }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                marginLeft: "auto",
+              }}
+            >
+              {languages.map((lang) => (
+                <button
+                  key={lang.code}
+                  onClick={() => changeLanguage(lang.code)}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    fontSize: "16px",
+                    gap: "4px",
+                    background:
+                      i18n.language === lang.code ? "#f0f0f0" : "transparent",
+                    border:
+                      i18n.language === lang.code
+                        ? "1px solid #d9d9d9"
+                        : "1px solid transparent",
+                    borderRadius: "4px",
+                    padding: "6px 10px",
+                    cursor: "pointer",
+                    fontWeight: i18n.language === lang.code ? "600" : "400",
+                  }}
+                >
+                  <img
+                    src={lang.flag}
+                    alt={lang.label}
+                    style={{ width: "20px" }}
+                  />
+                  {lang.label}
+                </button>
+              ))}
+            </div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                padding: "8px 14px 6px",
+              }}
+            >
              <button className={styles.btn} onClick={showModal}>
                Satyjy bol
              </button>