From 154e4d22a8531c893ce1945ddcd9fc2847d5e6db Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Mon, 30 Mar 2020 11:16:37 +0530
Subject: [PATCH] extracted strings from fonts tab

---
 src/components/RightSidebar/RightSidebar.js   |  6 ++---
 src/components/RightSidebar/tabs/Fonts.js     | 25 +++++++++++--------
 src/i18n/resources/en/rightSidebar/fonts.json |  7 ++++++
 src/i18n/resources/en/rightSidebar/index.js   |  2 ++
 4 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 src/i18n/resources/en/rightSidebar/fonts.json

diff --git a/src/components/RightSidebar/RightSidebar.js b/src/components/RightSidebar/RightSidebar.js
index a1d9a42e..3ab0f0b6 100644
--- a/src/components/RightSidebar/RightSidebar.js
+++ b/src/components/RightSidebar/RightSidebar.js
@@ -16,8 +16,8 @@ const RightSidebar = () => {
   const { state, dispatch } = context;
   const { data, theme } = state;
 
-  const tabs = [t('templates.title'), t('colors.title'), 'Fonts', 'Actions', 'About'];
-  const [currentTab, setCurrentTab] = useState(t('colors.title'));
+  const tabs = [t('templates.title'), t('colors.title'), t('fonts.title'), 'Actions', 'About'];
+  const [currentTab, setCurrentTab] = useState(t('fonts.title'));
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
@@ -36,7 +36,7 @@ const RightSidebar = () => {
         return <TemplatesTab theme={theme} onChange={onChange} />;
       case t('colors.title'):
         return <ColorsTab theme={theme} onChange={onChange} />;
-      case 'Fonts':
+      case t('fonts.title'):
         return <FontsTab theme={theme} onChange={onChange} />;
       case 'Actions':
         return <ActionsTab data={data} theme={theme} dispatch={dispatch} />;
diff --git a/src/components/RightSidebar/tabs/Fonts.js b/src/components/RightSidebar/tabs/Fonts.js
index eb838491..c1632923 100644
--- a/src/components/RightSidebar/tabs/Fonts.js
+++ b/src/components/RightSidebar/tabs/Fonts.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+
 import TextField from '../../../shared/TextField';
 
 const fontOptions = [
@@ -14,6 +16,8 @@ const fontOptions = [
 ];
 
 const FontsTab = ({ theme, onChange }) => {
+  const { t } = useTranslation('rightSidebar');
+
   return (
     <div className="grid grid-cols-1 gap-6">
       {fontOptions.map(x => (
@@ -29,16 +33,17 @@ const FontsTab = ({ theme, onChange }) => {
         </div>
       ))}
 
-      <TextField
-        label="Font Family"
-        placeholder="Avenir Next"
-        value={theme.font.family}
-        onChange={v => onChange('theme.font.family', v)}
-      />
-      <p className="text-gray-600 text-sm">
-        You can use any font that is installed on your system as well. Just enter the name of the
-        font family here and the browser would load it up for you.
-      </p>
+      <div>
+        <TextField
+          className="mb-3"
+          label={t('fonts.fontFamily.label')}
+          placeholder="Avenir Next"
+          value={theme.font.family}
+          onChange={v => onChange('theme.font.family', v)}
+        />
+
+        <p className="text-gray-800 text-xs">{t('fonts.fontFamily.helpText')}</p>
+      </div>
     </div>
   );
 };
diff --git a/src/i18n/resources/en/rightSidebar/fonts.json b/src/i18n/resources/en/rightSidebar/fonts.json
new file mode 100644
index 00000000..dbcfe5f2
--- /dev/null
+++ b/src/i18n/resources/en/rightSidebar/fonts.json
@@ -0,0 +1,7 @@
+{
+  "title": "Fonts",
+  "fontFamily": {
+    "label": "Font Family",
+    "helpText": "You can use any font that is installed on your system as well. Just enter the name of the font family here and the browser would load it up for you."
+  }
+}
diff --git a/src/i18n/resources/en/rightSidebar/index.js b/src/i18n/resources/en/rightSidebar/index.js
index 0be98600..3d59d772 100644
--- a/src/i18n/resources/en/rightSidebar/index.js
+++ b/src/i18n/resources/en/rightSidebar/index.js
@@ -1,7 +1,9 @@
 import templates from './templates.json';
 import colors from './colors.json';
+import fonts from './fonts.json';
 
 export default {
   templates,
   colors,
+  fonts,
 };