feat: add emoji font for windows flags

compsci-adl · Oct 3, 2024 · 59dd62e · 59dd62e
1 parent 8a0ef58
commit 59dd62e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -71,7 +71,7 @@ export const Header = () => {
 						>
 							<div>
 								<PopoverTrigger>
-									<Button {...HEADER_BUTTON_PROPS}>
+									<Button {...HEADER_BUTTON_PROPS} className="font-noto-emoji">
 										{currentLanguage.flag}
 									</Button>
 								</PopoverTrigger>
@@ -85,7 +85,8 @@ export const Header = () => {
 									variant="light"
 									onClick={() => i18n.changeLanguage(language.code)}
 								>
-									{language.name} {language.flag}
+									<span>{language.name} </span>
+									<span className="font-noto-emoji">{language.flag}</span>
 								</Button>
 							))}
 						</PopoverContent>

diff --git a/src/index.css b/src/index.css
@@ -1,7 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-* {
+body {
 	font-family: 'Outfit Variable', sans-serif;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -18,6 +18,9 @@ export default {
 			colors: {
 				'apple-gray': { 300: '#DFDFDF', 500: '#AFAFAF' },
 			},
+			fontFamily: {
+				'noto-emoji': ['"Noto Color Emoji"', 'sans-serif'],
+			},
 		},
 	},
 	darkMode: 'class',