Modern design for the settings pane
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.
Comments
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.
A simple build I made for the extension popup
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
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.
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.
This is an image of the style mentioned above.
Updated version with some minor fixes:
• Menus border
• White search text
• labels alignment
Updated with #messagesHidden transition & progress-bar colors
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;
}
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
@Jason I uploaded the theme to GitHub for future updates.
Can be found under https://gist.github.com/E-RELevant/e7ab7359acd0c6b72bd4394a6d7a6677
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.