Modern design for the settings pane

Erel

It's been a while since Google launched Material 2.0, and I think a compatible design can help a lot with the extension.

Not only is it more visually appealing, with the right UX design you can make the Settings\'Options' screen much more accessible.

Attached a sketch I've created:

Would be glad to help as requested.

Jason

Wow, that is amazing, i'll definitely use this as a guide.

My development bottle neck right now is preparing the Gmail extension for manifest v3 - using background persistent false - as i've done with my Calendar extension recently. This means the extension is unloaded from memory when not in use.

Erel

A simple build I made for the extension popup

Jason

Great work again, do you have any experience with CSS, because you could use the custom skin to recreate this now. https://jasonsavard.com/wiki/Skins_and_Themes

Erel

So I've created a new dark, so called "Midnight", theme with the limitations I had.

Unfortunately, I couldn't replace even the 'compose' button to Google's new colorful plus icon (https://i.imgur.com/tZ2cZXy.png) since it's protected under #shadow-root.

I really do think that the extension could use some changes to make it fit the new standards. I've struggled with the making of this theme.

CSS code attached below.

Checker-Plus-for-Gmail-Midnight-Theme.txt

Jason

ah good idea with the + (compose symbol) i used it already in my drive extension, but forgot to propagate it to the other extensions.

as for your midnight theme, can you send me a screenshot of it?

redesigns are lovely, but they take a lot of testing because their are many options and different views depending on each user's configuration. So normally I try to proceed incrementally.

Erel

This is an image of the style mentioned above.

Erel

Updated version with some minor fixes:

• Menus border

• White search text

• labels alignment

Checker-Plus-for-Gmail-Midnight-Theme.txt

Erel

Updated with #messagesHidden transition & progress-bar colors

Checker-Plus-for-Gmail-Midnight-Theme.txt

Same theme can be easily changed to fit any other color scheme.

For example: This is "Dark Brave" theme-

* {

  --primary-text-color: #ededed;

  --primary-background-color: #222222;

  --secondary-text-color: #909192;

  --secondary-background-color: #282828;

  --disabled-text-color: #6f6f6f;

  --highlight-background-color: #393939;

  --compose-color: #444444;

  --hover-message-color: #444444;

  --error-color: #d04a48;

  --primary-color: #f15220;

  --accent-color: #f95234;

  --icons: #ffffff;

}

Erel

Also, I gathered some material design colors which should replace the current contactPhoto colors (especially the current gray which is WAY too bright):

• Red #E57373

• Pink #F06292

• Purple #BA68C8

• Deep Purple #9575CD

• Indigo #7986CB

• Blue #64B5F6

• Light Blue #4FC3F7

• Cyan #4DD0E1

• Teal #4DB6AC

• Green #81C784

• Light Green #AED581

• Lime #DCE775

• Yellow #FFF176

• Amber #FFD54F

• Orange #FFB74D

• Deep Orange #FF8A65

• Brown #A1887F

• Blue Gray #90A4AE

Erel

@Jason I uploaded the theme to GitHub for future updates.

Can be found under https://gist.github.com/E-RELevant/e7ab7359acd0c6b72bd4394a6d7a6677

Erel

It's been a year... or three, since the last time. 🦥

Is there any update on this one? I would be glad to assist you in making the transition.