diff --git a/src/JSInjection/Modal/Buttons.styles.js b/src/JSInjection/Modal/Buttons.styles.js index 0999e93..12978b8 100644 --- 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 index 823a03a..aacd54b 100644 --- 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({
-
+ {"Zeeguu - -
+
+ Home + +
+ setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} onClick={openReview}> + {isHovered ? : }
+ Words +
+
diff --git a/src/JSInjection/Modal/Modal.styles.js b/src/JSInjection/Modal/Modal.styles.js index c699cb8..7b2fd99 100644 --- 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 index 872d4ce..c139581 100644 --- a/src/JSInjection/Modal/ReadArticle.js +++ b/src/JSInjection/Modal/ReadArticle.js @@ -85,13 +85,12 @@ export function ReadArticle({ ); } })} - - +
); diff --git a/src/JSInjection/Modal/ReviewVocabulary.js b/src/JSInjection/Modal/ReviewVocabulary.js index b8e8f72..a5d0817 100644 --- 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 ( <> -

Practice your Vocabulary

-

Get exercises based on the words you translated

- - Exercises - +

Exercises

+ Review words{}
); diff --git a/src/JSInjection/Modal/ToolbarButtons.js b/src/JSInjection/Modal/ToolbarButtons.js index 603acae..09da7b4 100644 --- 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 ( - + - + {{"Click word(s) to:"}} } className={translating ? "selected" : ""} onClick={(e) => toggle(translating, setTranslating)} - label={{"See translation"}}/> + label={{"See translation"}}/> } className={pronouncing ? "selected" : ""} onClick={(e) => toggle(pronouncing, setPronouncing)} - label={{"Hear pronunciation"}} /> + label={{"Hear pronunciation"}} />