Sometimes I see people talking about the ‘outdated look’ of Brave.
While I don’t care much about the UI, Brave has been working lately a lot in the UI, of course the updates are on Nightly, so they might take a while to get to Stable builds.
So I decided to show why using Nightly would be good for people who want the lastest change, but also so people who are interested in the development can see Brave is working in the UI and UX experience of Brave.
I posted some screenshots from Github, but also give the link to the PR or Issue in case someone wants to follow the progress and see more screenshots if any.
Most are already available in Nightly, but people should be happy to know Brave is working on the UI or re-arranging menus and settings to make it better for users to manage Brave. So they are focusing in the UI/UX, and not just in Privacy tools like Adblocker, or Web3 or Ads/Reward stuff or VPN.
This is why using Nightly is good, it is stable even if you are getting the latest commits, sometimes they cause crash or an issue, but it is fairly stable 99% of the time, and when something goes wrong, fixes happen quickly.
The important thing about Nightly, besides getting the latest changes is to help development and give feedback and report issues, so issues don’t hit Stable where fixing issues is not as flexible as doing it from Nightly way before it hits Stable.
Anyway, these are few recent updates in Brave Nightly builds or updates that will hit Nightly fairly soon.
Brave’s Menu now has icons:
Besides the new icons, you can see how they re-organized the menus so they are not as cluttered as before.
master ← app-menu
opened 09:42PM - 22 Aug 23 UTC
Resolves https://github.com/brave/brave-browser/issues/32089
History:

Bookmarks:

More tools:

Help:

## Submitter Checklist:
- [ ] I confirm that no [security/privacy review is needed](https://github.com/brave/brave-browser/wiki/Security-reviews) and no other type of reviews are needed, or that I have [requested](https://github.com/brave/reviews/issues/new/choose) them
- [ ] There is a [ticket](https://github.com/brave/brave-browser/issues) for my issue
- [ ] Used Github [auto-closing keywords](https://docs.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue) in the PR description above
- [ ] Wrote a good [PR/commit description](https://google.github.io/eng-practices/review/developer/cl-descriptions.html)
- [ ] Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
- [ ] Added appropriate labels (`QA/Yes` or `QA/No`; `release-notes/include` or `release-notes/exclude`; `OS/...`) to the associated issue
- [ ] Checked the PR locally:
* `npm run test -- brave_browser_tests`, `npm run test -- brave_unit_tests` [wiki](https://github.com/brave/brave-browser/wiki/Tests)
* `npm run lint`, `npm run presubmit` [wiki](https://github.com/brave/brave-browser/wiki/Presubmit-checks), `npm run gn_check`, `npm run tslint`
- [ ] Ran `git rebase master` (if needed)
## Reviewer Checklist:
- [ ] A security review [is not needed](https://github.com/brave/brave-browser/wiki/Security-reviews), or a link to one is included in the PR description
- [ ] New files have MPL-2.0 license header
- [ ] Adequate test coverage exists to prevent regressions
- [ ] Major classes, functions and non-trivial code blocks are well-commented
- [ ] Changes in component dependencies are properly reflected in `gn`
- [ ] Code follows the [style guide](https://chromium.googlesource.com/chromium/src/+/HEAD/styleguide/c++/c++.md)
- [ ] Test plan is specified in PR before merging
## After-merge Checklist:
- [ ] The associated issue milestone is set to the smallest version that the
changes has landed on
- [ ] All relevant documentation has been updated, for instance:
- [ ] https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
- [ ] https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
- [ ] https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
- [ ] https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
- [ ] https://github.com/brave/brave-browser/wiki/Custom-Headers
- [ ] https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
- [ ] https://github.com/brave/brave-browser/wiki/QA-Guide
- [ ] https://github.com/brave/brave-browser/wiki/P3A
## Test Plan:
Horizontal tabs have a new style
They started working on the Horizontal tabs strip update, that means it should be available for Nightly users soon!
master ← ksmith-h-tabs
opened 03:21PM - 07 Sep 23 UTC
Resolves https://github.com/brave/brave-browser/issues/31646
This changes upd… ates the horizontal tabs styling, under the feature flag `#brave-horizontal-tabs-update`.
<img width="1312" alt="Screenshot 2023-09-21 at 6 09 37 PM" src="https://github.com/brave/brave-core/assets/5995084/ca1fa31c-36e3-409f-b0c7-cf08b04eff3c">
## Submitter Checklist:
- [ ] I confirm that no [security/privacy review is needed](https://github.com/brave/brave-browser/wiki/Security-reviews) and no other type of reviews are needed, or that I have [requested](https://github.com/brave/reviews/issues/new/choose) them
- [ ] There is a [ticket](https://github.com/brave/brave-browser/issues) for my issue
- [ ] Used Github [auto-closing keywords](https://docs.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue) in the PR description above
- [ ] Wrote a good [PR/commit description](https://google.github.io/eng-practices/review/developer/cl-descriptions.html)
- [ ] Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
- [ ] Added appropriate labels (`QA/Yes` or `QA/No`; `release-notes/include` or `release-notes/exclude`; `OS/...`) to the associated issue
- [ ] Checked the PR locally:
* `npm run test -- brave_browser_tests`, `npm run test -- brave_unit_tests` [wiki](https://github.com/brave/brave-browser/wiki/Tests)
* `npm run lint`, `npm run presubmit` [wiki](https://github.com/brave/brave-browser/wiki/Presubmit-checks), `npm run gn_check`, `npm run tslint`
- [ ] Ran `git rebase master` (if needed)
## Reviewer Checklist:
- [ ] A security review [is not needed](https://github.com/brave/brave-browser/wiki/Security-reviews), or a link to one is included in the PR description
- [ ] New files have MPL-2.0 license header
- [ ] Adequate test coverage exists to prevent regressions
- [ ] Major classes, functions and non-trivial code blocks are well-commented
- [ ] Changes in component dependencies are properly reflected in `gn`
- [ ] Code follows the [style guide](https://chromium.googlesource.com/chromium/src/+/HEAD/styleguide/c++/c++.md)
- [ ] Test plan is specified in PR before merging
## After-merge Checklist:
- [ ] The associated issue milestone is set to the smallest version that the
changes has landed on
- [ ] All relevant documentation has been updated, for instance:
- [ ] https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
- [ ] https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
- [ ] https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
- [ ] https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
- [ ] https://github.com/brave/brave-browser/wiki/Custom-Headers
- [ ] https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
- [ ] https://github.com/brave/brave-browser/wiki/QA-Guide
- [ ] https://github.com/brave/brave-browser/wiki/P3A
## Test Plan:
Shadows and rounded corners for the main content view
After the styling of the horizontal tabs, seems like they will work on adding shadow and rounded corners to the content area, like Edge did to create ‘separation’.
opened 03:34PM - 14 Jul 23 UTC
closed 07:07PM - 23 Oct 23 UTC
QA Pass-Win64
QA Pass-macOS
QA Pass-Linux
priority/P3
needs-discussion
QA/Yes
release-notes/exclude
OS/Desktop
QA/Test-All-Platforms
front-end-change
## Description
Add padding and shadow to main content window to show separat… ion. Add border radius to all four corners.
This will allow for clear separation when vertical and sidebar are open.
## Design
<img width="947" alt="Screenshot 2023-07-14 at 8 33 30 AM" src="https://github.com/brave/brave-browser/assets/5951041/65ad07e1-da8a-4229-9a83-a015eac75442">
<img width="961" alt="Screenshot 2023-07-14 at 8 36 14 AM" src="https://github.com/brave/brave-browser/assets/5951041/e75d4fef-bc80-4b0e-be97-4030256da045">
Figma: https://www.figma.com/file/H11ZOl6JMYbCTW4ZJXqR5V/%F0%9F%A6%81-Browser?type=design&node-id=186%3A17108&mode=design&t=nhfxV22NiGDSYN2e-1
## Brave version (brave://version info)
## Version/Channel Information:
- Can you reproduce this issue with the current release? n/a
- Can you reproduce this issue with the beta channel? n/a
- Can you reproduce this issue with the nightly channel? n/a
## Other Additional Information:
- Does the issue resolve itself when disabling Brave Shields? n/a
- Does the issue resolve itself when disabling Brave Rewards? n/a
- Is the issue reproducible on the latest version of Chrome? n/a
## Miscellaneous Information:
Showing Vertical tabs on hover when Full screen
They are adding first to Vertical tabs, but Horizontal will come after.
opened 07:18AM - 20 Sep 23 UTC
closed 06:03AM - 21 Sep 23 UTC
QA Pass-Win64
QA Pass-macOS
QA Pass-Linux
priority/P3
QA/Yes
release-notes/include
OS/Desktop
QA/Test-All-Platforms
feature/vertical-tabs
Sub task of https://github.com/brave/brave-browser/issues/2635 and https://githu… b.com/brave/brave-browser/issues/33020
We were showing vertical tabs on browser fullscreen. But we've got mixed response about the visibility. Some want it to be visible on the browser fullscreen mode, while others want the opposite.
So we're going to hide vertical tabs by default but support revealing it by mouse hovering. And especially on Mac, there's a pref named "Always show toolbar in fullscreen". Vertical tab strip will be applied that pref too so that users can decide the default visibility.
### Expected behaviors
#### Common
* Enable browser fullscreen via F11 or app menu -> fullscreen (square icon)
* Vertical tab should be hidden
* When moving mouse over the edge where the vertical tab should be, vertical tab should show up in few seconds.
#### On Mac OS
* From the OS's app menu on top of screen, toggle on `View -> Always show toolbar in fullscreen`
* Enable browser fullscreen
* Vertical tab should be visible just like toolbar.
* turning off the option should make vertical tab works as described from `Common`
Custom filtering for Android in Settings
Lastly, they are finally bringing custom filters to the Settings so you can easily enable regional lists and add your custom filters in a nicer UI in Setting and not in a complete different page like brave://adblock is today in Android. It is still missing Custom Filters, but they will be added soon.
opened 05:32PM - 05 May 23 UTC
closed 04:09PM - 11 Aug 23 UTC
priority/P3
privacy/feature
QA/Yes
release-notes/include
feature-request
OS/Android
QA Pass - Android ARM
privacy/discussed
_**Related issue:** https://github.com/brave/brave-browser/issues/26587 (ideally… we do both at the same time)_
## Description
Currently users can add custom filter lists via settings on iOS and Desktop. This ticket is to bring over the same feature to Android.
| iOS Filter Lists | iOS Add Custom Filter List |
| ------------- | ------------- |
|  | 
## Requirements
- Android users are able to add custom filter lists via settings.
- The setting should live under Brave Shields & privacy, after the "prevent fingerprinting via language settings" toggle.
### Design
If possible copy the iOS layout. If an Android-specific design is required then design is TBD.
cc @deeppandya @anthonypkeane
Playlist
Besides a nice playlist functionality, they have been polishing the UI.
opened 04:04AM - 06 Oct 22 UTC
closed 12:44AM - 04 Mar 24 UTC
priority/P3
QA/No
release-notes/exclude
features/playlist
OS/Desktop
<details>
<summary> ios specs </summary>
polish a little bit based on iOS cu… rrent implementation.
First view
https://www.figma.com/proto/KQAbL5AQeftvFNXUlI2jHN/Brave-Playlist?page-id=1%3A3984&node-id=936%3A42819&scaling=min-zoom&starting-point-node-id=1619%3A97407&show-proto-sidebar=1
menu button on first view
https://www.figma.com/proto/KQAbL5AQeftvFNXUlI2jHN/Brave-Playlist?page-id=1%3A3984&node-id=1768%3A137175&scaling=min-zoom&starting-point-node-id=1619%3A97407&show-proto-sidebar=1
playlist detail
https://www.figma.com/proto/KQAbL5AQeftvFNXUlI2jHN/Brave-Playlist?page-id=1%3A3984&node-id=1223%3A60497&scaling=min-zoom&starting-point-node-id=1619%3A97407&show-proto-sidebar=1
player
https://www.figma.com/proto/KQAbL5AQeftvFNXUlI2jHN/Brave-Playlist?page-id=1%3A3984&node-id=1229%3A60878&scaling=min-zoom&starting-point-node-id=1619%3A97407&show-proto-sidebar=1
</details>
### Desktop design(WIP)
https://www.figma.com/file/RxyQnpxi9qtf5HmnAj1yH0/Desktop-Playlist?type=design&t=DFOlyqRgtAMpvy8K-0
```[tasklist]
### Tasks
- [ ] https://github.com/brave/brave-browser/issues/31913
- [ ] https://github.com/brave/brave-browser/issues/31159
- [ ] https://github.com/brave/brave-browser/issues/31133
- [ ] https://github.com/brave/brave-browser/issues/31536
- [ ] https://github.com/brave/brave-browser/issues/31186
- [ ] https://github.com/brave/brave-browser/issues/31418
- [ ] https://github.com/brave/brave-browser/issues/31844
- [ ] https://github.com/brave/brave-browser/issues/32540
- [ ] https://github.com/brave/brave-browser/issues/32568
- [ ] https://github.com/brave/brave-browser/issues/32572
- [x] https://github.com/brave/brave-browser/issues/32834
- [ ] https://github.com/brave/brave-browser/issues/32898
- [ ] https://github.com/brave/brave-browser/issues/32922
- [ ] https://github.com/brave/brave-browser/issues/33561
- [ ] https://github.com/brave/brave-browser/issues/33863
- [ ] https://github.com/brave/brave-browser/issues/33864
- [ ] https://github.com/brave/brave-browser/issues/34614
- [ ] https://github.com/brave/brave-browser/issues/32543
- [ ] Crash occurs when/after removing an ite
- [ ] We can get thumbanils from media controls and fill the empty thumbnails. ( global_media_controls::MediaItemUI:)
- [ ] Should use Default folder's image on MoveDialog
```
Sidebar
Well, besides all the changes and Leo and playlist and all that, sidebar recently got an update to make it look nicer.
They also adding Titles to Reading list and Bookmarks.
master ← sko/sidebar-leo
opened 12:13AM - 14 Sep 23 UTC
* Apply leo icons for built-in sidebar buttons
* Apply ink drop to sidebar butt… on
* Update size values for sidebar
* Use ui::ImageModel so that we can remove calls from OnThemeChanged().
* About new sidebar design:
https://www.figma.com/file/H11ZOl6JMYbCTW4ZJXqR5V/%F0%9F%A6%81-Browser?type=design&node-id=186%3A17108&mode=design&t=nhfxV22NiGDSYN2e-1
* About new sidebar default width:
https://www.figma.com/file/RxyQnpxi9qtf5HmnAj1yH0/Desktop-Playlist?type=design&node-id=1570%3A47&mode=design&t=jMkE56gA0UFLPN5a-1
Resolves https://github.com/brave/brave-browser/issues/30187
### Screenshot
<img width="51" alt="image" src="https://github.com/brave/brave-core/assets/5474642/5f440915-7b23-4d3f-93f2-60229fcaa815">
## Submitter Checklist:
- [ ] I confirm that no [security/privacy review is needed](https://github.com/brave/brave-browser/wiki/Security-reviews) and no other type of reviews are needed, or that I have [requested](https://github.com/brave/reviews/issues/new/choose) them
- [ ] There is a [ticket](https://github.com/brave/brave-browser/issues) for my issue
- [ ] Used Github [auto-closing keywords](https://docs.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue) in the PR description above
- [ ] Wrote a good [PR/commit description](https://google.github.io/eng-practices/review/developer/cl-descriptions.html)
- [ ] Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
- [ ] Added appropriate labels (`QA/Yes` or `QA/No`; `release-notes/include` or `release-notes/exclude`; `OS/...`) to the associated issue
- [ ] Checked the PR locally:
* `npm run test -- brave_browser_tests`, `npm run test -- brave_unit_tests` [wiki](https://github.com/brave/brave-browser/wiki/Tests)
* `npm run lint`, `npm run presubmit` [wiki](https://github.com/brave/brave-browser/wiki/Presubmit-checks), `npm run gn_check`, `npm run tslint`
- [ ] Ran `git rebase master` (if needed)
## Reviewer Checklist:
- [ ] A security review [is not needed](https://github.com/brave/brave-browser/wiki/Security-reviews), or a link to one is included in the PR description
- [ ] New files have MPL-2.0 license header
- [ ] Adequate test coverage exists to prevent regressions
- [ ] Major classes, functions and non-trivial code blocks are well-commented
- [ ] Changes in component dependencies are properly reflected in `gn`
- [ ] Code follows the [style guide](https://chromium.googlesource.com/chromium/src/+/HEAD/styleguide/c++/c++.md)
- [ ] Test plan is specified in PR before merging
## After-merge Checklist:
- [ ] The associated issue milestone is set to the smallest version that the
changes has landed on
- [ ] All relevant documentation has been updated, for instance:
- [ ] https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
- [ ] https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
- [ ] https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
- [ ] https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
- [ ] https://github.com/brave/brave-browser/wiki/Custom-Headers
- [ ] https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
- [ ] https://github.com/brave/brave-browser/wiki/QA-Guide
- [ ] https://github.com/brave/brave-browser/wiki/P3A
## Test Plan:
opened 02:03AM - 13 Sep 23 UTC
closed 10:40PM - 19 Sep 23 UTC
l10n
QA Pass-macOS
priority/P4
QA/Yes
release-notes/include
OS/Desktop
feature/sidebar
## Description
Add icon and title to Reading list side panel
Figma link: … `https://www.figma.com/file/HatZxtZooDutHqg5D03CZA/Reading-List?type=design&node-id=1-25&mode=design`
## Expected result:

## Brave version (brave://version info)
Target 1.60.x
## Version/Channel Information:
- Can you reproduce this issue with the current release? n/a
- Can you reproduce this issue with the beta channel? n/a
- Can you reproduce this issue with the nightly channel? n/a
## Other Additional Information:
- Does the issue resolve itself when disabling Brave Shields? n/a
- Does the issue resolve itself when disabling Brave Rewards? n/a
- Is the issue reproducible on the latest version of Chrome? n/a
## Miscellaneous Information:
cc: @minkyeongshin
opened 02:00AM - 13 Sep 23 UTC
closed 04:06PM - 22 Sep 23 UTC
feature/bookmarks
polish
priority/P4
QA/No
release-notes/include
OS/Desktop
feature/sidebar
## Description
Add icon and title to bookmarks side panel
Figma link: `ht… tps://www.figma.com/file/RV4KVz8dBmHuF7ORm7yO2y/Bookmarks-panel-and-manager?type=design&node-id=1-25&mode=design`
## Expected result:
<img width="541" alt="Screenshot 2023-09-12 at 6 57 48 PM" src="https://github.com/brave/brave-browser/assets/5951041/2df82f11-adc0-4ff7-a92e-60d866785984">
## Brave version (brave://version info)
Target 1.60.x
## Version/Channel Information:
- Can you reproduce this issue with the current release? n/a
- Can you reproduce this issue with the beta channel? n/a
- Can you reproduce this issue with the nightly channel? n/a
## Other Additional Information:
- Does the issue resolve itself when disabling Brave Shields? n/a
- Does the issue resolve itself when disabling Brave Rewards? n/a
- Is the issue reproducible on the latest version of Chrome? n/a
## Miscellaneous Information:
cc: @minkyeongshin
Settings
They have been re-organizing the Settings, just like they have been doing with the app’s menu and all that.
They already did it with Shields settings, but now they are doing it with Appearance to make it less cluttered and confusing by adding titles.
opened 12:11AM - 20 Sep 23 UTC
closed 03:42AM - 11 Oct 23 UTC
QA Pass-Win64
QA Pass-macOS
QA Pass-Linux
priority/P3
QA/Yes
release-notes/exclude
feature/settings
OS/Desktop
QA/Test-All-Platforms
## Description
Update brave://settings/appearance page with sub-titles and g… rouping.
This will bring the Brave Wallet button show/hide to the appearance page from web3 section.
Add section titles for Address bar, Tabs, Sidebar, and Content.
Figma link: `https://www.figma.com/file/IXNCYwXmMWaF6u7Pdv1pOW/Desktop-settings---Leo?type=design&node-id=1-17&mode=design&t=k9wGm2Ix9QSrfSZB-0`
## Design:
<img width="538" alt="Screenshot 2023-09-19 at 5 07 38 PM" src="https://github.com/brave/brave-browser/assets/5951041/8de5c237-3eda-466d-868c-c7bbd22178f9">
## Reproduces how often:
Easily.
## Brave version (brave://version info)
Target 1.60.x
## Version/Channel Information:
- Can you reproduce this issue with the current release? yes
- Can you reproduce this issue with the beta channel? yes
- Can you reproduce this issue with the nightly channel? yes
## Other Additional Information:
- Does the issue resolve itself when disabling Brave Shields? n/a
- Does the issue resolve itself when disabling Brave Rewards? n/a
- Is the issue reproducible on the latest version of Chrome? n/a
## Miscellaneous Information:
Related pr: https://github.com/brave/brave-core/pull/20160
opened 03:38AM - 13 Sep 23 UTC
closed 08:45AM - 14 Sep 23 UTC
feature/shields
QA Pass-macOS
QA/Yes
release-notes/exclude
feature/settings
OS/Desktop
## Description
In Shields settings, brave://settings/shields, the toggles no… t found in Shields proper should go below Content filtering and the actual Shield settings should be nearer to the top and description.
Show the number of blocked items, Auto-redirect AMP pages, Auto-redirect tracking URLs, and Prevent sites from fingerprinting me based on my language preferences should all be below Content Filtering. See mock-up in Expected result
## Expected result:
<img width="759" alt="267525107-5b50bc6b-2b0d-49a1-bd90-c1760dfbe63f" src="https://github.com/brave/brave-browser/assets/5951041/7ae056b7-70b7-4c40-afac-8317259176cf">
## Currently in release:
In 1.58.x and 1.59.x
<img width="738" alt="Screenshot 2023-09-12 at 8 37 46 PM" src="https://github.com/brave/brave-browser/assets/5951041/4e35a46c-00d2-4b38-b12c-ea215a343580">
## Brave version (brave://version info)
Target 1.60.x
## Version/Channel Information:
- Can you reproduce this issue with the current release? n/a
- Can you reproduce this issue with the beta channel? n/a
- Can you reproduce this issue with the nightly channel? n/a
## Other Additional Information:
- Does the issue resolve itself when disabling Brave Shields? n/a
- Does the issue resolve itself when disabling Brave Rewards? n/a
- Is the issue reproducible on the latest version of Chrome? n/a
## Miscellaneous Information:
Shared Pinned tabs
This is not a new feature, but some people are not aware of brave://flags/#brave-shared-pinned-tabs
Which will share the pinned tabs across windows, making pinned tabs way more useful than they are otday.
Also, people might not know this but now Brave in brave://flags/ displays Defaults state of features/flags, either way if their default state is Enabled or Disabled to make it easier for users to know if a flag is on or off before doing any change that will not do anything.