fix(options): update tutorial on how to change the shortcut

fixes #43
bibixx · Mar 19, 2023 · 30c5bf6 · 30c5bf6
1 parent 61aff6c
commit 30c5bf6
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/src/options/components/HowTo/HowTo.styled.ts b/src/options/components/HowTo/HowTo.styled.ts
@@ -19,3 +19,10 @@ export const Ol = styled.ol`
     }
   }
 `;
+
+export const YTIframe = styled.iframe`
+  width: 100%;
+  aspect-ratio: 560/350;
+  height: auto;
+  margin-top: 1rem;
+`;
diff --git a/src/options/components/HowTo/HowTo.tsx b/src/options/components/HowTo/HowTo.tsx
@@ -4,7 +4,7 @@ import { H2 } from '../Headings/Headings';
 import { LinkButton } from '../LinkButton/LinkButton';
 import { Modal } from '../Modal/Modal';
 
-import { Ol } from './HowTo.styled';
+import { Ol, YTIframe } from './HowTo.styled';
 import { getTranslatedText } from '../../../shared/getTranslatedText/getTranslatedText';
 
 export const HowTo = () => {
@@ -38,14 +38,29 @@ export const HowTo = () => {
         <Ol>
           <li>
             {i18n('change_shrt_popup_line1', [
-              <LinkButton href="chrome://extensions/" key="link">
-                chrome://extensions/
+              <LinkButton
+                key="link"
+                onClick={() =>
+                  chrome.tabs.create({
+                    url: 'chrome://extensions/shortcuts',
+                  })
+                }
+              >
+                chrome://extensions/shortcuts
               </LinkButton>,
             ])}
           </li>
           <li>{i18n('change_shrt_popup_line2')}</li>
           <li>{i18n('change_shrt_popup_line3')}</li>
         </Ol>
+
+        <YTIframe
+          src="https://www.youtube-nocookie.com/embed/-lavzrWOins"
+          title="How to Change the Extension's Shortcut?"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+        ></YTIframe>
       </Modal>
     </>
   );

diff --git a/static/_locales/en/messages.json b/static/_locales/en/messages.json
@@ -36,11 +36,11 @@
 		"description": "How to change shortcut - popup – line 1"
 	},
 	"change_shrt_popup_line2": {
-		"message": "Scroll to the bottom of the page and click \"Keyboard shortcuts\"",
+		"message": "Find a section called \"Tab pinner\"",
 		"description": "How to change shortcut - popup – line 2"
 	},
 	"change_shrt_popup_line3": {
-		"message": "You can now enter your shortcut in the field next to the name of plugin",
+		"message": "Click on a box next to the \"Activate the extension\" text and define the new shortcut",
 		"description": "How to change shortcut - popup – line 3"
 	},
 	"rules_header": {

diff --git a/static/_locales/pl/messages.json b/static/_locales/pl/messages.json
@@ -36,12 +36,12 @@
 		"description": "How to change shortcut - popup – line 1"
 	},
 	"change_shrt_popup_line2": {
-		"message": "Przesuń stronę na sam dół i naciśnij „Skróty klawiaturowe”",
+		"message": "Znajdź sekcję o nazwie \"Tab pinner\"",
 		"description": "How to change shortcut - popup – line 2"
 	},
 	"change_shrt_popup_line3": {
-		"message": "Po wybraniu pola obok nazwy wtyczki możesz wprowadzić swój własny skrót",
-		"description": "How to change shortcut - popup – line 1"
+		"message": "Kliknij w pole obok tekstu \"Aktywuj rozszerzenie\" i zdefiniuj nowy skrót klawiszowy",
+		"description": "How to change shortcut - popup – line 3"
 	},
 	"rules_header": {
 		"message": "Reguły",