Add language selector to onboarding + progress bar tweak (#156)

* Add language selector to onboarding

* Revert unchanged files

Author: dgca

renderer/components/LanguageSelector/LanguageSelector.tsx

@@ -9,6 +9,7 @@ import {
   useDisclosure,
   Flex,
   Box,
+  FlexProps,
 } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 import { FaChevronDown } from "react-icons/fa";
@@ -92,7 +93,11 @@ const localeSchema = z.object({
   language: z.enum(["en-US", "es-MX", "zh-CN", "ru-RU", "uk-UA"]),
 });
 
-export function LanguageSelector() {
+type Props = {
+  buttonContainerProps?: FlexProps;
+};
+
+export function LanguageSelector({ buttonContainerProps }: Props) {
   const { formatMessage } = useIntl();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const selectedLocaleContext = useSelectedLocaleContext();
@@ -122,6 +127,7 @@ export function LanguageSelector() {
           md: "100%",
         }}
         onClick={onOpen}
+        {...buttonContainerProps}
       >
         <MdOutlineLanguage />
         <Text

renderer/layouts/OnboardingLayout.tsx

@@ -11,6 +11,7 @@ import Image from "next/image";
 import { ReactNode } from "react";
 import { defineMessages, useIntl } from "react-intl";
 
+import { LanguageSelector } from "@/components/LanguageSelector/LanguageSelector";
 import bigOnboardingFish from "@/images/big-onboarding-fish.svg";
 import discord from "@/images/discord.png";
 
@@ -55,7 +56,7 @@ export function OnboardingLayout({ children }: { children: ReactNode }) {
           maxW={{
             base: "100%",
             md: "724px",
-            "2xl": "900px",
+            "2xl": "1024px",
           }}
           position="relative"
           w="100%"
@@ -85,8 +86,23 @@ export function OnboardingLayout({ children }: { children: ReactNode }) {
             borderTop="1px solid #DEDFE2"
             py={3}
             alignSelf="stretch"
-            justifyContent="center"
+            justifyContent="space-between"
+            px={{
+              base: "64px",
+              "2xl": "152px",
+            }}
           >
+            <Box>
+              <LanguageSelector
+                buttonContainerProps={{
+                  px: {
+                    base: 0,
+                    md: 4,
+                  },
+                  bg: "white",
+                }}
+              />
+            </Box>
             <Box
               as="a"
               target="_blank"

renderer/ui/theme/index.ts

@@ -54,6 +54,13 @@ const theme = extendTheme({
       },
     }),
     Tabs: tabsTheme,
+    Progress: {
+      baseStyle: {
+        track: {
+          borderRadius: "full",
+        },
+      },
+    },
   },
   semanticTokens: {
     colors: {