Merge pull request #9 from MiguelMarcelino/clean/fix-minor-bugs

Clean/fix minor bugs
MiguelMarcelino · Oct 14, 2024 · 290820d · 290820d
2 parents 9ff0abc + cfe2bbd
commit 290820d
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 159 deletions.
diff --git a/src/assets/index.js b/src/assets/index.js
@@ -17,6 +17,7 @@ import rasenVase from "./product_imgs/rasen_vase.png";
 import origamiVase from "./product_imgs/origami_vase.png";
 import usaFlag from "./flags/usa_flag.png";
 import ptFlag from "./flags/pt_flag.png";
+import world from "./world.png"
 
 export {
   printer,
@@ -37,5 +38,6 @@ export {
   rasenVase,
   origamiVase,
   usaFlag,
-  ptFlag
+  ptFlag,
+  world
 };
diff --git a/src/assets/world.png b/src/assets/world.png
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,18 +1,18 @@
 import React, { useState } from "react";
 import { close, logo, menu } from "../assets";
 import { I18n } from "./i18n";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 const Navbar = () => {
   const [toggle, setToggle] = useState(false);
   const { t, _, ready } = useTranslation();
   if (!ready) return "loading translations...";
 
-  const navLinks = t('navLinks', { returnObjects: true });
-  const externalLinks = t('externalLinks', { returnObjects: true });
+  const navLinks = t("navLinks", { returnObjects: true });
+  const externalLinks = t("externalLinks", { returnObjects: true });
 
   return (
-    <nav className="w-full flex nav-style justify-between items-center navbar">
+    <nav className="w-full flex nav-style items-center justify-between navbar">
       <div className="flex">
         <img src={logo} alt="bananafrog" className="w-[40px] h-[40px] logo" />
         <a className="text-white font-poppins ml-5 mt-2 logo-text">
@@ -41,46 +41,50 @@ const Navbar = () => {
           </li>
         ))}
       </ul>
-      <div className="sm:hidden flex flex-1 justify-end items-center z-10">
-        <img
-          src={toggle ? close : menu}
-          alt="menu"
-          className="w-[28px] h-[28px] object-contain"
-          onClick={() => setToggle((previous) => !previous)}
-        />
-        <div
-          className={`${
-            toggle ? "flex" : "hidden"
-          } sidebar p-6 bg-black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] rounded-xl sidebar`}
-        >
-          <ul className="list-none flex flex-col justify-end items-center flex-1">
-            {navLinks.map((nav, i) => (
-              <li
-                key={nav.id}
-                className={`font-poppins font-normal cursor-pointer text-[16px] ${
-                  i === navLinks.length - 1 ? "mr-0" : "mb-4"
-                } text-white mr-10`}
-              >
-                <a href={`/#${nav.id}`}>{nav.title}</a>
-              </li>
-            ))}
-            <li className={`mt-2`}></li>
-            {externalLinks.map((nav, i) => (
-              <li
-                key={nav.id}
-                className={`font-poppins font-normal cursor-pointer text-[16px] ${
-                  i === navLinks.length - 1 ? "mr-0" : "mb-4"
-                } text-white mr-10`}
-              >
-                <a href={`/${nav.id}`}>{nav.title}</a>
-              </li>
-            ))}
-          </ul>
+
+      <div className="flex items-center justify-end z-10">
+        {/* Choose Language */}
+        <I18n></I18n>
+
+        {/* Menu */}
+        <div className="sm:hidden justify-end items-center z-10">
+          <img
+            src={toggle ? close : menu}
+            alt="menu"
+            className="w-[28px] h-[28px] object-contain"
+            onClick={() => setToggle((previous) => !previous)}
+          />
+          <div
+            className={`${
+              toggle ? "flex" : "hidden"
+            } sidebar p-6 bg-black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] rounded-xl sidebar`}
+          >
+            <ul className="list-none flex flex-col justify-end items-center flex-1">
+              {navLinks.map((nav, i) => (
+                <li
+                  key={nav.id}
+                  className={`font-poppins font-normal cursor-pointer text-[16px] ${
+                    i === navLinks.length - 1 ? "mr-0" : "mb-4"
+                  } text-white mr-10`}
+                >
+                  <a href={`/#${nav.id}`}>{nav.title}</a>
+                </li>
+              ))}
+              <li className={`mt-2`}></li>
+              {externalLinks.map((nav, i) => (
+                <li
+                  key={nav.id}
+                  className={`font-poppins font-normal cursor-pointer text-[16px] ${
+                    i === navLinks.length - 1 ? "mr-0" : "mb-4"
+                  } text-white mr-10`}
+                >
+                  <a href={`/${nav.id}`}>{nav.title}</a>
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
       </div>
-
-      {/* Choose Language */}
-      <I18n></I18n>
     </nav>
   );
 };

diff --git a/src/components/i18n/I18n.jsx b/src/components/i18n/I18n.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { ptFlag, usaFlag, world } from "../../assets";
 
 const I18n = () => {
   const { i18n } = useTranslation();
@@ -8,40 +9,20 @@ const I18n = () => {
     i18n.changeLanguage(language);
   }
 
-  const selectedLanguage = i18n.language;
   return (
-    <div className="flags-container">
-      <div className="switch">
-        <input
-          id="language-toggle"
-          className="check-toggle check-toggle-round-flat"
-          type="checkbox"
-          checked={selectedLanguage === "pt-PT"}
-          onChange={() =>
-            handleChangeLanguage(
-              selectedLanguage === "pt-PT" ? "en-US" : "pt-PT"
-            )
-          }
-        />
-        <label htmlFor="language-toggle"></label>
-        <span
-          className="on"
-          onClick={() => handleChangeLanguage("en-US")}
-          style={{
-            fontWeight: selectedLanguage === "en-US" ? "bold" : "normal",
-          }}
-        >
-          EN
-        </span>
-        <span
-          className="off"
-          onClick={() => handleChangeLanguage("pt-PT")}
-          style={{
-            fontWeight: selectedLanguage === "pt-PT" ? "bold" : "normal",
-          }}
-        >
-          PT
-        </span>
+    <div className="dropdown">
+      <button className="dropbtn">
+        <img src={world} alt="flag" className="world_icon" />
+      </button>
+      <div className="dropdown-content">
+        <a className="language_elem" onClick={() => handleChangeLanguage("en-US")}>
+          <img src={usaFlag} alt="English" className="flag-icon" />
+          <span className="language-text">EN</span>
+        </a>
+        <a className="language_elem" onClick={() => handleChangeLanguage("pt-PT")}>
+          <img src={ptFlag} alt="Portuguese" className="flag-icon" />
+          <span className="language-text">PT</span>
+        </a>
       </div>
     </div>
   );

diff --git a/src/i18n/locales/en-us.js b/src/i18n/locales/en-us.js
@@ -144,7 +144,7 @@ export default {
       {
         id: "product-1",
         content: "A simple vase made for your flowers.",
-        name: "Simple Flower Vase",
+        name: "Harmony Vase",
         sizes: "L, M, S",
         img: simpleVase,
       },

diff --git a/src/i18n/locales/pt-pt.js b/src/i18n/locales/pt-pt.js
@@ -37,15 +37,15 @@ export default {
       heading: "Equipamento de",
       subheading: "Alta Fiabilidade.",
       description:
-        "A nossa produção utiliza várias impressoras Anycubic Kobra 2 Max, impressoras 3D de excelência, reconhecidas pela sua precisão e fiabilidade. Com um grande volume de construção e funcionalidades avançadas, estas máquinas asseguram que conseguimos realizar impressões complexas e de alta qualidade, proporcionando resultados detalhados e duradouros a cada utilização.",
+        "A nossa produção utiliza várias impressoras Anycubic Kobra 2 Max, reconhecidas pela sua precisão e fiabilidade. Com um grande volume de construção e funcionalidades avançadas, estas impressoras asseguram que conseguimos realizar impressões de alta qualidade, proporcionando resultados detalhados.",
     },
     business: {
       heading: "Quem somos",
       subheading: "nós?",
       paragraph1:
-        "Somos uma pequena equipa portuguesa que acredita que a criatividade não tem limites. Nossa missão é simples: transformar as suas ideias mais ambiciosas em realidade através da magia da impressão 3D.",
+        "Somos uma equipa portuguesa dedicada que acredita que a criatividade não tem limites. A nossa missão é clara: transformar as suas ideias mais ambiciosas em realidade através da magia da impressão 3D.",
       paragraph2:
-        "Colaboramos ativamente consigo de forma a que a sua visão se possa tornar numa realidade. Criamos produtos de qualidade, usando apenas o melhor filamento de impressao.",
+        "Colaboramos ativamente consigo para que a sua visão ganhe forma. O nosso compromisso com a excelência assegura que cada detalhe é cuidadosamente considerado, resultando em soluções personalizadas que superam as suas expectativas.",
     },
     features: [
       {
@@ -144,7 +144,7 @@ export default {
       {
         id: "product-1",
         content: "Um vaso simples feito para as suas flores.",
-        name: "Vaso Simples",
+        name: "Vaso Harmonia",
         sizes: "L, M, S",
         img: simpleVase,
       },

diff --git a/src/styles/language_switcher.css b/src/styles/language_switcher.css
@@ -1,97 +1,50 @@
-.switch {
+
+.dropdown {
   position: relative;
-  display: inline-block;
-  margin: 0 5px;
-  margin-left: 20pt;
+  justify-content: flex-end;
 }
 
-.switch > span {
+.dropdown-content {
+  display: none;
   position: absolute;
-  top: 9px;
-  pointer-events: none;
-  font-weight: bold;
-  font-size: 12px;
-  text-transform: uppercase;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
-  width: 50%;
-  text-align: center;
-}
-
-input.check-toggle-round-flat:checked ~ .off {
-  color: #F36F25;
-}
-
-input.check-toggle-round-flat:checked ~ .on {
-  color: #fff;
-}
-
-.switch > span.on {
-  left: 0;
-  padding-left: 2px;
-  color: #F36F25;
+  min-width: 70pt;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
 }
 
-.switch > span.off {
-  right: 0;
-  padding-right: 4px;
-  color: #fff;
-}
+.dropdown-content a {
+  color: white;
+  padding: 12px 16px;
+  text-decoration: none;
+
+  display: flex;
 
-.check-toggle {
-  position: absolute;
-  margin-left: -9999px;
-  visibility: hidden;
 }
 
-.check-toggle + label {
-  display: block;
-  position: relative;
+.dropdown-content a:hover {
+  background-color: #484848;
   cursor: pointer;
-  outline: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-input.check-toggle-round-flat + label {
-  padding: 2px;
-  width: 97px;
-  height: 35px;
-  background-color: #F36F25;
-  -webkit-border-radius: 60px;
-  -moz-border-radius: 60px;
-  -ms-border-radius: 60px;
-  -o-border-radius: 60px;
-  border-radius: 60px;
 }
 
-input.check-toggle-round-flat + label:before, input.check-toggle-round-flat + label:after {
+.dropdown:hover .dropdown-content {
   display: block;
-  position: absolute;
-  content: "";
 }
 
-input.check-toggle-round-flat + label:after {
-  top: 4px;
-  left: 4px;
-  bottom: 4px;
-  width: 48px;
-  background-color: #fff;
-  -webkit-border-radius: 52px;
-  -moz-border-radius: 52px;
-  -ms-border-radius: 52px;
-  -o-border-radius: 52px;
-  border-radius: 52px;
-  -webkit-transition: margin 0.2s;
-  -moz-transition: margin 0.2s;
-  -o-transition: margin 0.2s;
-  transition: margin 0.2s;
+.dropbtn {
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
 }
 
-input.check-toggle-round-flat:checked + label {
+.world_icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
 }
 
-input.check-toggle-round-flat:checked + label:after {
-  margin-left: 44px;
-}
+.flag-icon {
+  width: 30px;
+  height: 20px;
+  margin-right: 8px;
+}