Match GUI UI with Figma designs

[andrewtavis]

Terms

• I have searched open and closed design issues
• I agree to follow Scribe-Desktop' Code of Conduct

Description

This is a very important issue for the development of Scribe-Desktop and the overall community around it. We have the goal at this point of getting a screenshot of the overall UI of the GUI so interested people will be able to see the progress in the readme. From there we can start working on the command functionality.

Note

More than one person can be assigned this issue as there's lots to do here!

The current GUI interface looks like this:

Ideally the GUI would look like the Desktop GUI designs on Figma. Changes needed for this are:

• The GUI UI should switch based on the color mode of the system
• The Scribe key should be Scribe blue for light or dark mode (Light: #4CADE6; Dark: #3E95CC)
• The icon color should be black for light mode and white for dark mode
• The command keys should similarly be Scribe blue for light or dark mode
• The background color for the GUI should be different shades of grey (Light: #CED2D9; Dark: #1E1E1E)
• The text entry field should be black for dark mode
• The text should be white for dark mode
• The Scribe key should not shift down when the command keys are shown after a Scribe key press
• All command keys should be the same width with centered text

Contribution

Happy to support as I can and review PRs as they're opened! 🚀

[andrewtavis]

@henrikth93, do you want to work on part of this? Feel free to let us know what you'd like to focus on!

[henrikth93]

@henrikth93, do you want to work on part of this? Feel free to let us know what you'd like to focus on!

I will get on it ASAP

[andrewtavis]

I've updated the checklist in the issue, @henrikth93 :) Do you want to look into the following:

• The text entry field should be black for dark mode
• The text should be white for dark mode
• All command keys should be the same width with centered text

I guess that we can skip "The GUI UI should switch based on the color mode of the system" for now :)

From there, it would be great if we were reflecting the key inputs again. I don't want us to break that somehow and not even realize it... Could you set it up so that the key inputs are being recorded into the command bar input again, and if there's no text then the placeholder text is shown?

Thanks for all your efforts here! 😊

[andrewtavis]

Looks like the last two tasks here are making the input of the text area black and the text white in dark mode, @henrikth93 😊

[andrewtavis]

@henrikth93: Do you want to do some pair coding over the weekend? You can close this one and I'll work on something for the website?