Skip to content

fix: finalize UI of no language data keyboard state (#633)#635

Open
prince-0408 wants to merge 1 commit intoscribe-org:mainfrom
prince-0408:fix-issue-633-download-data-keyboard-ui
Open

fix: finalize UI of no language data keyboard state (#633)#635
prince-0408 wants to merge 1 commit intoscribe-org:mainfrom
prince-0408:fix-issue-633-download-data-keyboard-ui

Conversation

@prince-0408
Copy link
Copy Markdown
Contributor

@prince-0408 prince-0408 commented Mar 31, 2026

Finalizes the UI for the keyboard state shown when no language data has been downloaded, addressing all design requirements outlined in the issue.

Closes #633

Changes

Area Before After
Scribe key Visible alongside the button Hidden when download button is shown
Button background (light) scribeCTAColor with white text scribeCTAColor (orange) with black text
Button background (dark) Semi-transparent orange Dark warm-brown with orange border (outlined style)
Text color White Black (light) / Orange (dark) for accessibility
Icon arrow.down.circle.fill (filled) arrow.down.circle (non-filled)
Button width Anchored to command bar only Full keyboard width
Dark mode updates Auto-updates via traitCollectionDidChange

Implementation Details

File Function Change
KeyboardViewController.swift showDownloadDataBtn() Full restyle — colors, icon, layout, dark mode
KeyboardViewController.swift conditionallyShowDownloadDataBtn() Restores scribeKey.isHidden = false when button is hidden

Design Spec Checklist

Requirement Status
Scribe key hidden in this state
Black text over orange background (light mode)
Dark mode version matching Scribe UI
Non-filled arrow icon (arrow.down.circle)

Notes

  • The dark mode button uses a dark warm-brown background (#2E1F0D) with an orange border and orange text/icon — matching the outlined style shown in the design spec
  • No new files added — all changes are contained in KeyboardViewController.swift
  • Dark mode appearance updates automatically through the existing traitCollectionDidChangeloadKeys()conditionallyShowDownloadDataBtn() flow, so no additional observer setup was needed

Screenshot

Screenshot 2026-04-01 at 12 56 24 AM Screenshot 2026-04-01 at 12 56 56 AM

- Hide the Scribe key and its shadow when the download data button is shown
- Light mode: solid orange background (scribeCTA) with black text for accessibility
- Dark mode: dark warm-brown background with orange border, orange text and icon (outlined style)
- Use non-filled arrow.down.circle icon instead of arrow.down.circle.fill
- Button spans full keyboard width, aligned to command bar position
- Scribe key is restored when language data is available or during command states
- Dark mode colors update automatically via traitCollectionDidChange -> loadKeys()
@github-actions
Copy link
Copy Markdown

Thank you for the pull request! 💙🩵

The Scribe-iOS team will do our best to address your contribution as soon as we can. The following are some important points:

  • Those interested in developing their skills and expanding their role in the community should read the mentorship and growth section of the contribution guide
  • If you're not already a member of our public Matrix community, please consider joining!
    • We'd suggest that you use the Element client as well as Element X for a mobile app
    • Join the General and iOS rooms once you're in
  • Also consider attending our bi-weekly Saturday developer syncs!
    • Details are shared in the General room on Matrix each Wednesday before the sync
    • It would be great to meet you 😊

Note

Scribe uses Conventional Comments in reviews to make sure that communication is as clear as possible.

@github-actions
Copy link
Copy Markdown

Maintainer Checklist

The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

  • Tests for changes have been written and the CI unit test, linting and formatting workflows within the PR checks do not indicate new errors in the files changed

  • The CHANGELOG has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Finalize the UI of the no language data keyboard state

1 participant