buttongroup large prop

components/forms/ButtonGroup.tsx

@@ -7,6 +7,7 @@ interface ButtonGroupProps {
   unit?: string
   values: Array<any>
   names?: Array<string>
+  large?: boolean
 }
 
 const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
@@ -16,6 +17,7 @@ const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
   values,
   onChange,
   names,
+  large,
 }) => {
   return (
     <div className="rounded-md bg-th-bkg-3">
@@ -33,7 +35,9 @@ const ButtonGroup: FunctionComponent<ButtonGroupProps> = ({
         ) : null}
         {values.map((v, i) => (
           <button
-            className={`${className} default-transition relative w-1/2 cursor-pointer rounded-md px-2 py-1.5 text-center text-xs font-normal
+            className={`${className} default-transition relative w-1/2 cursor-pointer rounded-md px-2 text-center ${
+              large ? 'h-12 text-sm' : 'h-10 text-xs'
+            } font-normal
               ${
                 v === activeValue
                   ? `text-th-primary`

components/swap/Swap.tsx

@@ -290,7 +290,7 @@ const Swap = () => {
             <ButtonGroup
               activeValue={sizePercentage}
               onChange={(p) => handleSizePercentage(p)}
-              values={['0', '25', '50', '75', '100']}
+              values={['10', '25', '50', '75', '100']}
               unit="%"
             />
           </div>

pages/settings.tsx

@@ -57,17 +57,19 @@ const Settings: NextPage = () => {
               activeValue={theme}
               onChange={(t) => setTheme(t)}
               values={THEMES}
+              large
             />
           </div>
         </div>
         <div className="flex flex-col border-t border-th-bkg-3 p-4 md:flex-row md:items-center md:justify-between">
           <p className="mb-2 lg:mb-0">{t('language')}</p>
-          <div className="w-full min-w-[280px] md:w-auto">
+          <div className="w-full min-w-[300px] md:w-auto">
             <ButtonGroup
               activeValue={savedLanguage}
               onChange={(l) => handleLangChange(l)}
               values={LANGS.map((val) => val.locale)}
               names={LANGS.map((val) => t(val.name))}
+              large
             />
           </div>
         </div>

public/locales/en/common.json

@@ -5,6 +5,8 @@
    "borrow": "Borrow",
    "borrow-value": "Borrow Value",
    "buy": "Buy",
+   "chinese": "简体中文",
+   "chinese-traditional": "繁體中文",
    "close-account": "Close Account",
    "collateral-multiplier": "Collateral Multiplier",
    "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
@@ -14,6 +16,7 @@
    "daily-volume": "24h Volume",
    "deposit": "Deposit",
    "deposit-value": "Deposit Value",
+   "english": "English",
    "fee": "Fee",
    "fees": "Fees",
    "governance": "Governance",
@@ -33,7 +36,9 @@
    "select-token": "Select Token",
    "sell": "Sell",
    "settings": "Settings",
+   "spanish": "Español",
    "stats": "Stats",
+   "theme": "Theme",
    "token": "Token",
    "tokens": "Tokens",
    "token-collateral-multiplier": "{{token}} Collateral Multiplier",

public/locales/es/common.json

@@ -5,6 +5,8 @@
    "borrow": "Borrow",
    "borrow-value": "Borrow Value",
    "buy": "Buy",
+   "chinese": "简体中文",
+   "chinese-traditional": "繁體中文",
    "close-account": "Close Account",
    "collateral-multiplier": "Collateral Multiplier",
    "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
@@ -14,6 +16,7 @@
    "daily-volume": "24h Volume",
    "deposit": "Deposit",
    "deposit-value": "Deposit Value",
+   "english": "English",
    "fee": "Fee",
    "fees": "Fees",
    "governance": "Governance",
@@ -33,7 +36,9 @@
    "select-token": "Select Token",
    "sell": "Sell",
    "settings": "Settings",
+   "spanish": "Español",
    "stats": "Stats",
+   "theme": "Theme",
    "token": "Token",
    "tokens": "Tokens",
    "token-collateral-multiplier": "{{token}} Collateral Multiplier",

public/locales/zh/common.json

@@ -5,6 +5,8 @@
     "borrow": "Borrow",
     "borrow-value": "Borrow Value",
     "buy": "Buy",
+    "chinese": "简体中文",
+    "chinese-traditional": "繁體中文",
     "close-account": "Close Account",
     "collateral-multiplier": "Collateral Multiplier",
     "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
@@ -14,6 +16,7 @@
     "daily-volume": "24h Volume",
     "deposit": "Deposit",
     "deposit-value": "Deposit Value",
+    "english": "English",
     "fee": "Fee",
     "fees": "Fees",
     "governance": "Governance",
@@ -33,7 +36,9 @@
     "select-token": "Select Token",
     "sell": "Sell",
     "settings": "Settings",
+    "spanish": "Español",
     "stats": "Stats",
+    "theme": "Theme",
     "token": "Token",
     "tokens": "Tokens",
     "token-collateral-multiplier": "{{token}} Collateral Multiplier",

public/locales/zh_tw/common.json

@@ -5,6 +5,8 @@
   "borrow": "Borrow",
   "borrow-value": "Borrow Value",
   "buy": "Buy",
+  "chinese": "简体中文",
+  "chinese-traditional": "繁體中文",
   "close-account": "Close Account",
   "collateral-multiplier": "Collateral Multiplier",
   "collateral-multiplier-desc": "Each token on Mango has a multiplier used to calculate the collateral value of that token. The higher the multiplier, the more collateral you get.",
@@ -14,6 +16,7 @@
   "daily-volume": "24h Volume",
   "deposit": "Deposit",
   "deposit-value": "Deposit Value",
+  "english": "English",
   "fee": "Fee",
   "fees": "Fees",
   "governance": "Governance",
@@ -33,7 +36,9 @@
   "select-token": "Select Token",
   "sell": "Sell",
   "settings": "Settings",
+  "spanish": "Español",
   "stats": "Stats",
+  "theme": "Theme",
   "token": "Token",
   "tokens": "Tokens",
   "token-collateral-multiplier": "{{token}} Collateral Multiplier",