Made the language look pretty

sqrl-planner · Jun 17, 2022 · b8d87c2 · b8d87c2
1 parent ad5bcd2
commit b8d87c2
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 8 deletions.
diff --git a/components/preferences/PreferencesApplication.tsx b/components/preferences/PreferencesApplication.tsx
@@ -23,8 +23,7 @@ import {
 } from "@chakra-ui/react"
 import { useTranslation } from "next-i18next"
 import React, { Fragment, MouseEvent, useEffect, useRef } from "react"
-import { BiVideoPlus } from "react-icons/bi"
-import { BsGlobe } from "react-icons/bs"
+import { IoLanguage } from "react-icons/io5"
 import { FaSchool, FaSun, FaTemperatureHigh } from "react-icons/fa"
 import styled from "styled-components"
 import { usePreferences } from "../../src/PreferencesContext"
@@ -189,7 +188,7 @@ const PreferencesApplication = () => {
         <FormControl>
           <FormLabel mb={4}>
             <IconWrapper>
-              <Icon as={BsGlobe} />
+              <Icon as={IoLanguage} />
             </IconWrapper>
             {t("language")}
           </FormLabel>

diff --git a/components/preferences/_PreferencesLanguage.tsx b/components/preferences/_PreferencesLanguage.tsx
@@ -35,6 +35,18 @@ const PreferencesLanguage = () => {
     <Grid gridTemplateColumns="repeat(3, auto)" {...group} gap={4}>
       {options.map((value) => {
         const radio = getRadioProps({ value, enterKeyHint: "enter" })
+        let lang = ''
+        switch(value) {
+          case 'en':
+            lang = "English"
+            break
+          case 'fr':
+            lang = "Français"
+            break
+          case 'zh':
+            lang = "简体中文"
+            break
+        }
         if (value === router.locale) {
           return (
             <Box
@@ -53,15 +65,15 @@ const PreferencesLanguage = () => {
               px={3}
               py={2}
             >
-              {value}
+              {lang}
             </Box>
           )
         } else {
           return (
             <Link href='/' locale={value}> 
               <button>
                 <RadioTextCard key={ value }>
-                    { t(value) }
+                    { lang }
                 </RadioTextCard>
               </button>
             </Link>

diff --git a/public/locales/en/preferences.json b/public/locales/en/preferences.json
@@ -25,5 +25,6 @@
 	"scale": "Scale",
 	"compact": "Compact",
 	"normal": "Normal",
-	"tall": "Tall"
+	"tall": "Tall",
+	"language": "Language"
 }
diff --git a/public/locales/fr/preferences.json b/public/locales/fr/preferences.json
@@ -25,5 +25,6 @@
 	"scale": "Taille",
 	"compact": "Compacte",
 	"normal": "Normale",
-	"tall": "Grande"
+	"tall": "Grande",
+	"language": "Langue"
 }
diff --git a/public/locales/zh/preferences.json b/public/locales/zh/preferences.json
@@ -25,5 +25,6 @@
 	"scale": "大小",
 	"compact": "小",
 	"normal": "正常",
-	"tall": "大"
+	"tall": "大",
+	"language": "语言"
 }