Added translations to the sidebar

frontend/components/dashboard/CommentField.tsx

@@ -1,9 +1,13 @@
+import { useTranslation } from "next-i18next";
+
 /**
  * This is the text field where people can add comments to particular secrets.
  */
 const CommentField = ({ comment, modifyComment, position }: { comment: string; modifyComment: (value: string, posistion: number) => void; position: number;}) => {
+  const { t } = useTranslation();
+
   return <div className={`relative mt-4 px-4 pt-4`}>
-    <p className='text-sm text-bunker-300'>Comments & notes</p>
+    <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.comments")}</p>
     <textarea 
       className="bg-bunker-800 h-32 w-full bg-bunker-800 p-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
       value={comment}

frontend/components/dashboard/GenerateSecretMenu.tsx

@@ -1,4 +1,5 @@
 import { Fragment,useState } from 'react';
+import { useTranslation } from "next-i18next";
 import { faShuffle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Menu, Transition } from '@headlessui/react';
@@ -10,6 +11,7 @@ import { Menu, Transition } from '@headlessui/react';
  */
 const GenerateSecretMenu = ({ modifyValue, position }: { modifyValue: (value: string, position: number) => void; position: number; }) => {
   const [randomStringLength, setRandomStringLength] = useState(32);
+  const { t } = useTranslation();
 
   return <Menu as="div" className="relative inline-block text-left">
     <div>
@@ -51,8 +53,8 @@ const GenerateSecretMenu = ({ modifyValue, position }: { modifyValue: (value: st
             icon={faShuffle}
           />
           <div className="text-sm justify-between flex flex-row w-full">
-            <p>Generate Random Hex</p>
-            <p>digits</p>
+            <p>{t("dashboard:sidebar.generate-random-hex")}</p>
+            <p>{t("dashboard:sidebar.digits")}</p>
           </div>
         </div>
         <div className="flex flex-row absolute bottom-[0.4rem] right-[3.3rem] w-16 bg-bunker-800 border border-chicago-700 rounded-md text-bunker-200 ">

frontend/components/dashboard/SideBar.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useTranslation } from "next-i18next";
 import { faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import SecretVersionList from 'ee/components/SecretVersionList';
@@ -69,17 +70,18 @@ const SideBar = ({
   setSharedToHide 
 }: SideBarProps) => {
   const [overrideEnabled, setOverrideEnabled] = useState(data.map(secret => secret.type).includes("personal"));
+  const { t } = useTranslation();
 
   return <div className='absolute border-l border-mineshaft-500 bg-bunker fixed h-full w-96 top-14 right-0 z-50 shadow-xl flex flex-col justify-between'>
     <div className='h-min overflow-y-auto'>
       <div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
-        <p className="font-semibold text-lg text-bunker-200">Secret</p>
+        <p className="font-semibold text-lg text-bunker-200">{t("dashboard:sidebar.secret")}</p>
         <div className='p-1' onClick={() => toggleSidebar("None")}>
           <FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
         </div>
       </div>
       <div className='mt-4 px-4 pointer-events-none'>
-        <p className='text-sm text-bunker-300'>Key</p>
+        <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.key")}</p>
         <DashboardInputField
           onChangeHandler={modifyKey}
           type="varName"
@@ -91,7 +93,7 @@ const SideBar = ({
       </div>
       {data.filter(secret => secret.type == "shared")[0]?.value 
         ? <div className={`relative mt-2 px-4 ${overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
-        <p className='text-sm text-bunker-300'>Value</p>
+        <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.value")}</p>
         <DashboardInputField
           onChangeHandler={modifyValue}
           type="value"
@@ -105,13 +107,13 @@ const SideBar = ({
         </div>
       </div>
         : <div className='px-4 text-sm text-bunker-300 pt-4'>
-          <span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>Note:</span>
-          This secret is personal. It is not shared with any of your teammates.
+          <span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>{t("common:note")}:</span>
+          {t("dashboard:sidebar.personal-explanation")}
         </div>}
       <div className='mt-4 px-4'>
         {data.filter(secret => secret.type == "shared")[0]?.value &&
         <div className='flex flex-row items-center justify-between my-2 pl-1 pr-2'>
-          <p className='text-sm text-bunker-300'>Override value with a personal value</p>
+          <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.override")}</p>
           <Toggle 
             enabled={overrideEnabled} 
             setEnabled={setOverrideEnabled} 
@@ -154,7 +156,7 @@ const SideBar = ({
     </div>
     <div className={`flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]`}>
       <Button
-        text="Save Changes"
+        text={String(t("common:save-changes"))}
         onButtonPressed={savePush}
         color="primary"
         size="md"