From cfbcab02acd0c387d24be40d1d0dc43d7ff7dd78 Mon Sep 17 00:00:00 2001 From: Darinka Date: Thu, 11 Jan 2024 23:26:46 +0100 Subject: [PATCH 1/4] Changes to save button --- src/JSInjection/Modal/SaveToZeeguu.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/JSInjection/Modal/SaveToZeeguu.js b/src/JSInjection/Modal/SaveToZeeguu.js index 0f0dda1..22d74db 100644 --- a/src/JSInjection/Modal/SaveToZeeguu.js +++ b/src/JSInjection/Modal/SaveToZeeguu.js @@ -4,8 +4,9 @@ import { } from "./Buttons.styles"; import { useState } from "react"; import {EXTENSION_SOURCE} from "../constants"; -import BeenhereIcon from '@mui/icons-material/Beenhere'; -import BeenhereOutlinedIcon from '@mui/icons-material/BeenhereOutlined'; +import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined'; +import BookmarkAddedIcon from '@mui/icons-material/BookmarkAdded'; +import BookmarkAddIcon from '@mui/icons-material/BookmarkAdd'; import Tooltip from '@mui/material/Tooltip'; export default function SaveToZeeguu({ api, articleId, setPersonalCopySaved, personalCopySaved}) { @@ -21,7 +22,7 @@ export default function SaveToZeeguu({ api, articleId, setPersonalCopySaved, per {personalCopySaved ? ( -
+
Saved @@ -29,8 +30,8 @@ export default function SaveToZeeguu({ api, articleId, setPersonalCopySaved, per setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}> - {isHovered ? : }
- {isHovered ? "Save" : ""} + {isHovered ? : }
+ Save )} From 8c136bd53d233644824c3b0884df1031d1d8b286 Mon Sep 17 00:00:00 2001 From: Darinka Date: Thu, 11 Jan 2024 23:30:36 +0100 Subject: [PATCH 2/4] menu icon change --- src/JSInjection/Modal/FloatingMenu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/JSInjection/Modal/FloatingMenu.js b/src/JSInjection/Modal/FloatingMenu.js index 2beb4b5..25c68da 100644 --- a/src/JSInjection/Modal/FloatingMenu.js +++ b/src/JSInjection/Modal/FloatingMenu.js @@ -4,7 +4,7 @@ import ButtonGroup from '@mui/material/ButtonGroup'; import CloseSharpIcon from '@mui/icons-material/CloseSharp'; import Box from '@mui/material/Box'; import Fab from '@mui/material/Fab'; -import AddIcon from '@mui/icons-material/Add'; +import MenuIcon from '@mui/icons-material/Menu'; import colors from "../colors"; const FloatingMenu = ({ buttons, buttonGroupVisible, toggleButtonGroup }) => ( @@ -30,7 +30,7 @@ const FloatingMenu = ({ buttons, buttonGroupVisible, toggleButtonGroup }) => ( position="fixed" onClick={toggleButtonGroup} > - {buttonGroupVisible ? : } + {buttonGroupVisible ? : } From cfb41de21f67dcad2e41de05359dc6217427397a Mon Sep 17 00:00:00 2001 From: Darinka Date: Thu, 11 Jan 2024 23:35:15 +0100 Subject: [PATCH 3/4] Made logo clickable --- src/JSInjection/Modal/Modal.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/JSInjection/Modal/Modal.js b/src/JSInjection/Modal/Modal.js index 6e77037..823a03a 100644 --- a/src/JSInjection/Modal/Modal.js +++ b/src/JSInjection/Modal/Modal.js @@ -262,13 +262,13 @@ export function Modal({ Date: Sat, 13 Jan 2024 17:09:34 +0100 Subject: [PATCH 4/4] new button & UI changes --- src/JSInjection/Modal/Buttons.styles.js | 13 ++++++------- src/JSInjection/Modal/Modal.js | 19 +++++++++++++++---- src/JSInjection/Modal/Modal.styles.js | 6 ++++-- src/JSInjection/Modal/ReadArticle.js | 3 +-- src/JSInjection/Modal/ReviewVocabulary.js | 8 +++----- src/JSInjection/Modal/ToolbarButtons.js | 9 +++++---- 6 files changed, 34 insertions(+), 24 deletions(-) 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"}} />