Add flag-icons package and update LanguageSelector component for improved language flag display

Author: kalayciburak

client/package.json

@@ -18,6 +18,7 @@
     "@tailwindcss/postcss": "^4.1.14",
     "autoprefixer": "^10.4.21",
     "axios": "^1.12.2",
+    "flag-icons": "^7.5.0",
     "i18next": "^25.6.0",
     "postcss": "^8.5.6",
     "react": "^19.1.1",

client/src/components/LanguageSelector.jsx

@@ -4,8 +4,8 @@ const LanguageSelector = () => {
   const { i18n } = useTranslation();
 
   const languages = [
-    { code: "tr", name: "TR", flag: "🇹🇷" },
-    { code: "en", name: "EN", flag: "🇺🇸" },
+    { code: "tr", name: "TR", flag: "fi fi-tr" },
+    { code: "en", name: "EN", flag: "fi fi-us" },
   ];
 
   const currentLanguage =
@@ -23,7 +23,7 @@ const LanguageSelector = () => {
       className="language-toggle"
       data-lang={i18n.language}
     >
-      <span className="flag-icon">{currentLanguage.flag}</span>
+      <span className={`flag-icon ${currentLanguage.flag}`}></span>
       <span className="lang-text">{currentLanguage.name}</span>
     </button>
   );

client/src/index.css

@@ -20,7 +20,7 @@ body {
   gap: 6px;
   transition: all 0.3s ease;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-  margin-left: 10px;
+  margin-left: 20px;
   transform: translateZ(0);
   will-change: transform, background-color, border-color, box-shadow;
   touch-action: manipulation;
@@ -36,6 +36,9 @@ body {
   transition: all 0.3s ease;
   z-index: 2;
   position: relative;
+  width: 20px;
+  height: 15px;
+  display: inline-block;
 }
 
 .lang-text {

client/src/main.jsx

@@ -1,5 +1,6 @@
 import { createRoot } from "react-dom/client";
 import "./index.css";
+import "flag-icons/css/flag-icons.min.css";
 import "./i18n";
 import App from "./App.jsx";