Merge pull request #128 from RichmondCroft/118-add-gif-image-to-show-…

…how-feature-works 118 add gif image to show how feature works
RichmondCroft · Jan 12, 2023 · a76c369 · a76c369
2 parents 01ecf3a + 46254ea
commit a76c369
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/popup/components/NavigationBar/index.tsx b/popup/components/NavigationBar/index.tsx
@@ -21,7 +21,6 @@ type InputProps = {
   marginLeft: string
 }
 
-
 const NavBarContainer = styled.div`
   display: flex;
   flex-direction: row;

diff --git a/popup/images/dyslens-gif-feat.gif b/popup/images/dyslens-gif-feat.gif
diff --git a/popup/pages/TextToSpeech/index.tsx b/popup/pages/TextToSpeech/index.tsx
@@ -1,10 +1,17 @@
 import { Slider, Switch } from "@mui/material";
 import { ChangeEvent, useContext, useEffect, useState } from "react";
+import styled from "styled-components";
 
 
 import StoreContext from "~popup/storage/StoreContext";
 import ComponentContainer from "~popup/components/ComponentContainer";
 import DropDown from "~popup/components/DropDown";
+import imageGif from "./../../images/dyslens-gif-feat.gif";
+
+
+const StyledGifImage = styled.img`
+  width: 100%;
+`;
 
 export default function TextToSpeech() {
     const { appData, setAppState } = useContext(StoreContext);
@@ -88,6 +95,9 @@ export default function TextToSpeech() {
     }
 
     return <div>
+        <ComponentContainer label="How to use">
+            <StyledGifImage data-testid="image-gif" src={imageGif} alt="dyslensGifFeature" />
+        </ComponentContainer>
         <ComponentContainer label="Enabled" horizontal>
             <Switch
                 checked={appData.textToSpeech.enabled}