Diverse UI Changes

[DarinkaGM]

Changes including:

Article reader

• Displaying only the first author's name
• Swapped the order of Exercises and Difficulty level boxes
• Exercises box styling and description change
• General proportions and spacing changes

Exercises/Words to review

• Back to Article and To Exercises buttons fixed and styled
• Enlarged and modified top descriptions
• Tooltip added to disabled button

[netlify[bot]]

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

Name	Link
🔨 Latest commit	3703fff9edbf610f16fa8157aee8c3c1d4f57c98
🔍 Latest deploy log	https://app.netlify.com/sites/voluble-nougat-015dd1/deploys/65bf713e4ac8b90008fdb047
😎 Deploy Preview	https://deploy-preview-290--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 site configuration.

[mircealungu]

@tfnribeiro - do you want to have a quick look at the PR of Darinka?

[tfnribeiro]

I did and it looks quite good! I have some notes:

The tooltip: "You need to star words before..." might be a bit strange if a user hasn't translated any words (and therefor doesn't have any words to star?

The new word lists should also be included in the Word tab, which still looks the same at the moment:

Finally, I can see the buttons at the login page are now displaying the cursor as click correctly, but it's still missing the behaviour at the "Sign in" button:

Also, I have noticed after going to sign in or the sign up page there is no way to go back to the landing page. Maybe making the Elephant clickable to return to the landing page would solve that.

[tfnribeiro]

Also, what do you both think about making the Speech button on the left rather than after the word, this way they are all positioned in the same location:

[mircealungu]

@tfnribeiro - it does look more elegant with the speaker button to the left.

[DarinkaGM]

Hi @tfnribeiro !

Tooltip

• I agree! Do you have a suggestion to re-write it? or could it be "Translate and star words to get exercises"?

Sign-in button

• I'm a bit confused about your comment

it's still missing the behaviour at the "Sign in" button

The button's fucionality works on my end.

• @igawaclawska and I had come up with a redesigned version of the onboarding flow, which includes de sign-in form. I believe she will be implementing those changes. See below.

[tfnribeiro]

@DarinkaGM It's tricky, but maybe "You need to translate words [or star them] in an article before you can go to exercises.". If we could make an if based on the words translated you could check if there are any words in the list, then you can give the star tooltip ☺️.

It's because I saw that you made changes to the landing page CSS, and I wasn't sure exactly what they were. When comparing with the current deployment I could see that the cursor would change to a "clickable" state on the homepage vs the old version where it doesn't change. When you hover the "sign in" button the mouse cursor doesn't change state. But if it's getting updated you can just ignore it ⭐ it looks great! The funtionality works fine.

[DarinkaGM]

@tfnribeiro I've changed the cursor to pointer and the tooltip to "Translate or star words in the article before accessing exercises."