Add localizations

components/Header/index.tsx

@@ -33,6 +33,7 @@ import RemixIcon from '~public/icons/Remix.svg'
 import SaveIcon from '~public/icons/Save.svg'
 
 import './index.scss'
+import Tooltip from '~components/Tooltip'
 
 const Header = () => {
   // Localization
@@ -226,28 +227,32 @@ const Header = () => {
 
   const saveButton = () => {
     return (
-      <Button
+      <Tooltip content={t('tooltips.save')}>
-        leftAccessoryIcon={<SaveIcon />}
+        <Button
-        className={classNames({
+          leftAccessoryIcon={<SaveIcon />}
-          Save: true,
+          className={classNames({
-          Saved: party.favorited,
+            Save: true,
-        })}
+            Saved: party.favorited,
-        blended={true}
+          })}
-        text={party.favorited ? t('buttons.saved') : t('buttons.save')}
+          blended={true}
-        onClick={toggleFavorite}
+          text={party.favorited ? t('buttons.saved') : t('buttons.save')}
-      />
+          onClick={toggleFavorite}
+        />
+      </Tooltip>
     )
   }
 
   const remixButton = () => {
     return (
-      <Button
+      <Tooltip content={t('tooltips.remix')}>
-        leftAccessoryIcon={<RemixIcon />}
+        <Button
-        className="Remix"
+          leftAccessoryIcon={<RemixIcon />}
-        blended={true}
+          className="Remix"
-        text={t('buttons.remix')}
+          blended={true}
-        onClick={remixTeam}
+          text={t('buttons.remix')}
-      />
+          onClick={remixTeam}
+        />
+      </Tooltip>
     )
   }
 

components/PartyDetails/index.tsx

@@ -710,7 +710,7 @@ const PartyDetails = (props: Props) => {
               {name ? name : t('no_title')}
             </h1>
             {party.remix && party.sourceParty ? (
-              <Tooltip content="Go to original team">
+              <Tooltip content={t('tooltips.source')}>
                 <Button
                   className="IconButton Blended"
                   leftAccessoryIcon={<RemixIcon />}

components/Tooltip/index.scss

@@ -1,5 +1,8 @@
 .Tooltip {
   background: var(--dialog-bg);
   border-radius: $card-corner;
+  line-height: 1.3;
   padding: $unit * 1.5;
+  z-index: 35;
+  max-width: 200px;
 }

public/locales/en/common.json

@@ -390,6 +390,11 @@
   "toasts": {
     "copied": "This party's URL was copied to your clipboard"
   },
+  "tooltips": {
+    "remix": "Make a copy of this team",
+    "save": "Save this team to your account",
+    "source": "Go to original team"
+  },
   "extra_weapons": "Additional Weapons",
   "equipped": "Equipped",
   "coming_soon": "Coming Soon",

public/locales/ja/common.json

@@ -391,6 +391,11 @@
   "toasts": {
     "copied": "この編成のURLはクリップボードにコピーされました"
   },
+  "tooltips": {
+    "remix": "この編成をコピーする",
+    "save": "この編成をアカウントに保存する",
+    "source": "オリジナルの編成へ"
+  },
   "equipped": "装備した",
   "extra_weapons": "Additional Weapons",
   "coming_soon": "開発中",