new button & UI changes

zeeguu · Jan 13, 2024 · dc423c1 · dc423c1
1 parent cfb41de
commit dc423c1
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 24 deletions.
diff --git a/src/JSInjection/Modal/Buttons.styles.js b/src/JSInjection/Modal/Buttons.styles.js
@@ -2,27 +2,26 @@ import styled, { css } from "styled-components";
 import colors from "../colors";
 
 export const StyledPrimaryButton = styled.button`
-  color: ${colors.white};
+  color: ${colors.black};
   background-color: ${colors.zeeguuOrange};
-  border-color:  ${colors.buttonBorder} !important;
 
   :hover{
     background-color: ${colors.lightOrange};
-    color: ${colors.brown};
   }
 
   height: 45px;
-  display: inline-block;
+  display: flex;
   padding: 5px 45px 5px 45px;
   margin: 5px;
   height: 50px;
   border-style: none;
   border-width: 2px;
-  border-radius: 40px;
+  border-radius: 10px;
   font-size: 18px;
   font-weight: bold;
   cursor: pointer;
-  box-shadow: 0px 4px ${colors.brown};
+  align-items: center;
+  justify-content: center;
 `;
 
 export const StyledCloseButton = styled.div`
@@ -39,7 +38,7 @@ export const StyledCloseButton = styled.div`
 `;
 
 export const StyledSmallButton = styled.button`
-  color: ${colors.zeeguuOrange} !important;
+  color: ${colors.lightBlue} !important;
   background-color: ${colors.white} !important;
   border-color: none;
   cursor: pointer;

diff --git a/src/JSInjection/Modal/Modal.js b/src/JSInjection/Modal/Modal.js
@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from "react";
 
 import { StyledModal,StyledHeading, GlobalStyle, OverwriteZeeguu,} from "./Modal.styles";
 
-import { StyledCloseButton } from "./Buttons.styles";
+import { StyledCloseButton, StyledSmallButton } from "./Buttons.styles";
 import FloatingMenu from './FloatingMenu';
 import ZeeguuLoader from "../ZeeguuLoader";
 import UserFeedback from "./UserFeedback";
@@ -25,6 +25,8 @@ import { cleanDOMAfter, getHTMLContent } from "../Cleaning/pageSpecificClean";
 import CloseSharpIcon from '@mui/icons-material/CloseSharp';
 import SaveToZeeguu from "./SaveToZeeguu";
 import colors from "../colors";
+import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined';
+import FactCheckIcon from '@mui/icons-material/FactCheck';
 
 import {SpeechContext} from "../../zeeguu-react/src/exercises/SpeechContext";
 import ZeeguuSpeech from "../../zeeguu-react/src/speech/ZeeguuSpeech";
@@ -53,6 +55,7 @@ export function Modal({
   const [interactiveTitle, setInteractiveTitle] = useState();
   const [nativeLang, setNativeLang] = useState();
   const [username, setUsername] = useState();
+  const [isHovered, setIsHovered] = useState(false);
 
   const [loadingPersonalCopy, setLoadingPersonalCopy] = useState(true);
   const [personalCopySaved, setPersonalCopySaved] = useState(false);
@@ -262,18 +265,26 @@ export function Modal({
         <OverwriteZeeguu>
           <StyledHeading>
             <div style={{ "float": "left", "max-width": "50%",  "display":"inline-flex", "padding": "1.5em"}}>
-            <div>
+            <StyledSmallButton>
                 <a href="https://www.zeeguu.org">
                     <img src={chrome.runtime.getURL("images/zeeguuLogo.svg")}
                     alt={"Zeeguu logo"}
                     className="logoModal"/>
-                </a>
-            </div>
+                </a> <br/>
+                <span>Home</span> 
+            </StyledSmallButton>
               <SaveToZeeguu
               api={api}
               articleId={articleId()}
               setPersonalCopySaved={setPersonalCopySaved}
               personalCopySaved={personalCopySaved} />
+             <div>
+                <StyledSmallButton onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)} onClick={openReview}>
+                 {isHovered ? <FactCheckIcon fontSize="large"/> : <FactCheckOutlinedIcon fontSize="large"/>} <br/>
+                <span>Words</span> 
+                </StyledSmallButton>
+            </div>
             </div>
             <div style={{ "float": "right", "width": "50%",  "display":"inline"}}>
               <StyledCloseButton role="button" onClick={handleClose} id="qtClose">

diff --git a/src/JSInjection/Modal/Modal.styles.js b/src/JSInjection/Modal/Modal.styles.js
@@ -126,6 +126,9 @@ export const StyledModal = styled(ReactModal)`
   .feedbackBox {
     background-color: ${colors.lighterBlue};
     border: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     max-width: 80%;
   }
 
@@ -135,8 +138,7 @@ export const StyledModal = styled(ReactModal)`
   }
 
   .logoModal {
-    height: 50px;
-    margin: 10px;
+    height: 2.5em;
   }
 `;
 

diff --git a/src/JSInjection/Modal/ReadArticle.js b/src/JSInjection/Modal/ReadArticle.js
@@ -85,13 +85,12 @@ export function ReadArticle({
             );
           }
         })}
-
-        <DifficultyFeedbackBox api={api} articleID={articleId} />
         <ReviewVocabulary
           articleId={articleId}
           api={api}
           openReview={openReview}
         />
+        <DifficultyFeedbackBox api={api} articleID={articleId} />
       </div>
     </>
   );

diff --git a/src/JSInjection/Modal/ReviewVocabulary.js b/src/JSInjection/Modal/ReviewVocabulary.js
@@ -2,17 +2,15 @@ import * as s from "../../zeeguu-react/src/reader/ArticleReader.sc";
 import strings from "../../zeeguu-react/src/i18n/definitions";
 import useUILanguage from "../../zeeguu-react/src/assorted/hooks/uiLanguageHook";
 import { StyledPrimaryButton } from "./Buttons.styles";
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 
 export default function ReviewVocabulary({openReview}) {
   useUILanguage(); 
   return (
     <>
     <s.FeedbackBox className="feedbackBox">
-      <h2>Practice your Vocabulary</h2>
-      <p>Get exercises based on the words you translated</p>
-      <s.CenteredContent>
-      <StyledPrimaryButton onClick={openReview}>Exercises</StyledPrimaryButton>
-      </s.CenteredContent>
+        <h2>Exercises</h2>
+      <StyledPrimaryButton onClick={openReview}> <span>Review words</span>{<NavigateNextIcon/>}</StyledPrimaryButton>
     </s.FeedbackBox>
     </>
   );

diff --git a/src/JSInjection/Modal/ToolbarButtons.js b/src/JSInjection/Modal/ToolbarButtons.js
@@ -7,6 +7,7 @@ import Switch from '@mui/material/Switch';
 import { styled } from '@mui/material/styles';
 import FormHelperText from '@mui/material/FormHelperText';
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+import colors from "../colors";
 
 const t = createTheme({
   components: {
@@ -74,16 +75,16 @@ const Android12Switch = styled(Switch)(({ theme }) => ({
 export default function ToolbarButtons({translating, setTranslating, pronouncing, setPronouncing}) {
   console.log(translating, pronouncing)
   return (
-    <s.Toolbar style={{"float": "right", "width": "auto", "height": "auto"}}>
+    <s.Toolbar style={{"float": "right", "width": "auto", "height": "auto",}}>
       <ThemeProvider theme={t}>
-      <FormGroup>
+      <FormGroup style={{color:`${colors.darkBlue}`}}>
           <FormHelperText>{<small>{"Click word(s) to:"}</small>}</FormHelperText>
           <FormControlLabel control={<Android12Switch defaultChecked />} className={translating ? "selected" : ""}
         onClick={(e) => toggle(translating, setTranslating)} 
-        label={<small >{"See translation"}</small>}/> 
+        label={<b><small>{"See translation"}</small></b>}/> 
           <FormControlLabel control={<Android12Switch defaultChecked />} className={pronouncing ? "selected" : ""}
         onClick={(e) => toggle(pronouncing, setPronouncing)}
-        label={<small>{"Hear pronunciation"}</small>} /> 
+        label={<b><small>{"Hear pronunciation"}</small></b>} /> 
       </FormGroup>
       </ThemeProvider> 
     </s.Toolbar>