Review Words page refactoring by AnnieeBennie · Pull Request #974 · zeeguu/web

AnnieeBennie · 2026-03-18T12:11:06Z

changed the layout
added more info buttons and explanation pop-ups for them
adjusted colors to also work in a dark mode
changed the wording of the infoboxes and infobox icon

netlify · 2026-03-18T12:11:12Z

✅ Deploy Preview for voluble-nougat-015dd1 ready!

Name	Link
🔨 Latest commit	`de99e96`
🔍 Latest deploy log	https://app.netlify.com/projects/voluble-nougat-015dd1/deploys/69cbae3f0166a700099eeef6
😎 Deploy Preview	https://deploy-preview-974--voluble-nougat-015dd1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

AnnieeBennie · 2026-03-18T12:17:39Z

Hi @mircealungu, I think I finished the refactoring of the Review Words page. I tested it on both iphone and android emulators, and it worked well. I also changed colors a bit. I think if we add those colors we talked about, we can also add some of them here (so I added that light purple for a button and Info icon). What do you think?

mircealungu

a few change requests for you @AnnieeBennie

mircealungu · 2026-03-23T11:34:17Z

+    },
+    wontBeInExercises: {
+      mainInfo: "Phrases composed of 3 or more words are not used in the exercises.",
+      extraInfo: "You can still find them in Words or History tab.",


maybe make the Words a link?

mircealungu · 2026-03-23T11:34:37Z

  return (
    <s.Infobox>
-      <img src={APP_DOMAIN + "/static/icons/info-icon.png"} alt="" />
+      <img src={infoIcon} alt="" />


there is a reason for this:

The browser extension -- When the web app runs inside the extension, window.location.origin is a chrome-extension:// URL, not zeeguu.org. So
static assets referenced as /static/icons/... wouldn't resolve. The fallback on line 17 catches this: if the origin doesn't match an expected
domain (zeeguu.org, netlify.app, localhost), it forces APP_DOMAIN to https://www.zeeguu.org, so image URLs like APP_DOMAIN +
"/static/icons/info-icon.png" point to the actual server.

how can we solve this?

mircealungu · 2026-03-24T09:43:14Z

  flex-direction: row;
  align-items: center;
-  margin: 1em;
+  margin: 0.5em;


is this important? does 0.5em it make a difference in some situation

mircealungu · 2026-03-24T09:43:50Z

+        {!exercisesEnabled ? (
+          <Tooltip title="You need to translate words in the article first." arrow>
+            <span>
+              <StyledButton disabled style={{ backgroundColor: "#AAB1DE", color: "white" }}>


we need to make this dark-mode friendly

mircealungu · 2026-03-24T09:44:06Z

+            </span>
+          </Tooltip>
+        ) : (
+          <StyledButton navigation onClick={toExercises} style={{ backgroundColor: "#AAB1DE", color: "white" }}>


mircealungu · 2026-03-24T09:47:21Z

+    <WordsForArticleContainer>
+      <LeftContent>
+        <BackArrow />
+        <WordsToReview


WordsToReview never uses the screenWidth. Maybe we can avoid passing it then?

mircealungu · 2026-03-24T09:49:43Z

-    history.push(`/exercises/}`);
-  };
-
  function logGoingToExercisesAfterReview(e) {


this is never called. we should either call it or remove it.

mircealungu · 2026-03-24T09:50:50Z

+          <WordsListColumn>
+            <h3
+              style={{
+                display: "flex",


should we define this as a separate style? or reuse an existing style?

mircealungu · 2026-03-24T09:51:23Z

@@ -1,10 +1,10 @@
 import * as s from "./Infobox.sc";
-import { APP_DOMAIN } from "../appConstants";
+import infoIcon from "/static/icons/info-info-icon.png";


why is it info-info? :)

mircealungu · 2026-03-24T09:59:00Z

Could we just use the MUI InfoOutlined icon since the project already imports from @mui/material. Something like that:

import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; // in the styled-components file: const StyledInfoIcon = styled(InfoOutlinedIcon)` cursor: pointer; flex-shrink: 0; color: var(--text-secondary); font-size: 22px; `;

This eliminates both PNG files, both CSS variables (--more-info-icon), and works automatically in any theme. MUI is already a dependency so there's zero cost.

+ centered the infobox on mobile devices

AnnieeBennie · 2026-03-24T19:51:06Z

@mircealungu I fixed acc to your comments, also I added dark mode styles for buttons

+ now it shows the ZeeguuSelectedWords infobox correctly + it always shows the list of words that won't appear in exercises

AnnieeBennie · 2026-03-25T11:11:42Z

@mircealungu I deleted those infoboxes, and now we have only two of them. One is shown always when the user translates some words, and one in case no words were translated but they somehow open this page

mircealungu · 2026-03-26T11:07:19Z

@AnnieeBennie - what's the situation with this? are the changes we discussed yesterday implemented?

AnnieeBennie · 2026-03-26T11:29:16Z

@mircealungu yes, I changed the infoboxes we had. So now this one with a toggle shows up if a user translates at least 1 word.

Also I fixed that bug that hid the other word list if the infobox was on a screen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

mircealungu · 2026-03-29T07:11:05Z

@AnnieeBennie I've played a bit more with the text on this page. Now it looks like this:

There is still something off with this though. For one, the Info icon, we don't really have such great info in there. The more important "info" is in the (?) popup rather. I wonder, if we could swap the two somehow. Have the (?) near "Manage words"... and have the Infobox be "How words are added to exercsies?" and then put the main explanation there.

Moved spaced repetition explanation into info box, removed (?) from "Will appear in exercises" header, removed unused variables/imports, simplified redundant condition, removed debug console.log. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

mircealungu · 2026-03-29T07:24:57Z

Ah! I was trying to see how it looks, and I committed by mistake to this branch. This is how it looks. What do you think @AnnieeBennie ?

AnnieeBennie · 2026-03-29T08:30:37Z

I think now it looks good!
But I'm not sure about its size on mobile phones, this infobox takes half of the screen and it will be there every time a user opens this page, I think it will be unnecessary after they read it. Maybe we can make it open only the first time when a user visits this page like onboarding and then make it collapsible (only leave the toggle to be there all the time)? What do you think?

AnnieeBennie · 2026-03-29T08:45:23Z

These are my ideas, I think the first one is the cleanest one. We can show the infobox on the first visit and then move it into the question icon. Or in the other two screenshots, we can also show the infobox on the first visit and after make it like a link and open it when users tap on it, what do you think?

mircealungu · 2026-03-29T12:28:28Z

I love the simplicity of the first one! And the explanation inside of the (?). We can surely "show the infobox on the first visit and then move it into the question icon". But that is a bit of extra code. Even the version with only the details on demand is great. And maybe the first header could be: "Will eventually appear in exercises". To make it clear that it's not straight away. (We could even put the (?) after eventually?)

AnnieeBennie · 2026-03-29T16:45:08Z

Yes, let’s do that! I’ll tag you when it’s done

+ moved the infobox text into the moreInfoBox +created a toggleContainer instead of using infobox for the toggle

AnnieeBennie · 2026-03-31T11:26:46Z

@mircealungu done.
I tried to put the infoicon after the "eventually" but it split the text and looked like in the screenshot, so I left it at the end of the line. What do you think?

mircealungu · 2026-03-31T13:28:18Z

@AnnieeBennie - yes, it's strange in the middle. at hte end is best!

mircealungu · 2026-03-31T13:30:30Z

The current solution is so much cleaner and nicer! Thanks @AnnieeBennie . I'll merge!

AnnieeBennie added 7 commits March 17, 2026 13:52

aded icon for more info button

c1eff12

changed the layout of the page

57bc761

created a moreInfoBox to show extra info

96d8378

refactoring WordsToReview layout

69d0f0f

Changed the style and wording of the infobox

9e687d4

changed the import for the icon

99d3e00

adjusted colors for the nightmode

b31af14

AnnieeBennie requested a review from mircealungu March 18, 2026 12:11

mircealungu requested changes Mar 24, 2026

View reviewed changes

AnnieeBennie added 12 commits March 24, 2026 13:26

added links for Words and Words in Learning

84e8b44

added AppDomain to the info-icon

b898bab

fixed margins

c6273e5

+ centered the infobox on mobile devices

changed the icon

0d00893

dark-mode for the button

ac6219e

removed max-width

cd4ac92

fixed key position

40d13ad

deleted unused elements

e68ac80

style fixes

f9af478

info icon now uses MUI

4118268

added dark-mode for speaker button and edit button

dc1bd17

fixed the name

277595f

AnnieeBennie added 2 commits March 25, 2026 11:06

fixed the bug with infobox not showing

83e2120

+ now it shows the ZeeguuSelectedWords infobox correctly + it always shows the list of words that won't appear in exercises

changed the infoboxes

720a156

fixed the speaker color in dark-mode

f17d745

improved clarity of word review page text and info flow

f74330d

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

infobox changes

de99e96

+ moved the infobox text into the moreInfoBox +created a toggleContainer instead of using infobox for the toggle

mircealungu merged commit d07a549 into master Mar 31, 2026
4 checks passed

Conversation

AnnieeBennie commented Mar 18, 2026

Uh oh!

netlify Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for voluble-nougat-015dd1 ready!

Uh oh!

AnnieeBennie commented Mar 18, 2026

Uh oh!

mircealungu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AnnieeBennie commented Mar 24, 2026

Uh oh!

AnnieeBennie commented Mar 25, 2026

Uh oh!

mircealungu commented Mar 26, 2026

Uh oh!

AnnieeBennie commented Mar 26, 2026

Uh oh!

mircealungu commented Mar 29, 2026

Uh oh!

mircealungu commented Mar 29, 2026

Uh oh!

AnnieeBennie commented Mar 29, 2026

Uh oh!

AnnieeBennie commented Mar 29, 2026

Uh oh!

mircealungu commented Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AnnieeBennie commented Mar 29, 2026

Uh oh!

AnnieeBennie commented Mar 31, 2026

Uh oh!

mircealungu commented Mar 31, 2026

Uh oh!

mircealungu commented Mar 31, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify Bot commented Mar 18, 2026 •

edited

Loading

mircealungu commented Mar 29, 2026 •

edited

Loading