Improve Option Panel Header "On Hover" Color

[raamdev]

When hovering over the option panels in Comment Mail, the header changes to a bright green color, which is so totally different than the default blue color that it creates a lot of distraction and emotional stress when moving the mouse over many option panels at once.

I suggest we change it to something that goes better with the default blue color, but is enough of a contrast that it stands out when you hover over it, something like #142D4D:

[jaswrks]

Next Actions

Prerequisites

• Install the YUI Compressor

  $ brew install yuicompressor

---

Start a New Feature Branch

Assuming you have already cloned the repos locally.

$ cd ~/projects/websharks/comment-mail-pro
$ git checkout 000000-dev # Start from the dev branch.
$ git pull # Pull the latest changes into your 000000-dev branch.
$ git checkout -b feature/117 # Start a new feature branch.

---

Make Changes

See: https://github.com/websharks/comment-mail-pro/blob/000000-dev/comment-mail-pro/client-s/css/menu-pages.css#L825-L830

What we have now...

.comment-mail-menu-page .pmp-panel-heading:hover,
.comment-mail-menu-page .pmp-panel-heading.open
{
    background : #307D27;
    color            : #FFFFFF !important;
}

---

What we need to do ...

Separate this into two different selectors and set a different color for the hover state.

.comment-mail-menu-page .pmp-panel-heading:hover
{
    background : #2D5587;
    color            : #FFFFFF !important;
}
.comment-mail-menu-page .pmp-panel-heading.open
{
    background : #307D27;
    color            : #FFFFFF !important;
}

Note: Don't feel the need to follow my instructions exactly here. If you feel that you can improve anything else in the CSS or in the UI, go right ahead and do your own thing! It might help to read over Raam's details above and then build upon his ideas :-)

See also: The IMPORTANT NOTE in the next step.

---

Compress Into menu-pages.min.css

Notice there are two CSS files for the menu pages listed here:
https://github.com/websharks/comment-mail/tree/150709/comment-mail/client-s/css

This is actually the same file. One is the development copy, and the other is a compressed version of the CSS; i.e., menu-pages.min.css. What you need to do is take the development copy that you are working from: menu-pages.css and compile this into menu-pages.min.css

IMPORTANT NOTE: You will need to do this even during your own testing, because it's the minified file that Comment Mail loads into the dashboard. Thus, changing menu-pages.css without minifying the file doesn't really do anything. Make a change, minify, then test. Make a change, minify, then test again. Or, rename the file to menu-pages.min.css temporarily while you are working on things.

Run YUI Compressor from the command line:

$ yuicompressor ~/projects/websharks/comment-mail-pro/comment-mail-pro/client-s/css/menu-pages.css -o ~/projects/websharks/comment-mail-pro/comment-mail-pro/client-s/css/menu-pages.min.css --charset utf-8 --type css

---

Commit and Push Changes

$ cd ~/projects/websharks/comment-mail-pro
$ git add --all && git commit -m 'UI enhancement; updating menu page colors. See: websharks/comment-mail#117'
$ git push -u origin feature/117

---

Open Pull Request On GitHub

Open a pull request on GitHub and ask for your enhancements to be merged into the dev branch.

---

Repeat for Lite version of Comment Mail

Repeat the same steps and bring the Comment Mail lite copy up-to-date.

[kristineds]

@jaswsinc @raamdev Submitted PRs for this:
CM Pro: wpsharks/comment-mail-pro/pull/4
CM Lite: /pull/121

[jaswrks]

Merged. Thank you.

[raamdev]

Next Lite Release Changelog:

• Enhancement: Improved the on-hover color when hovering the mouse over Option Panels in the Comment Mail Options by changing it from green to dark blue. Props @kristineds. See Issue #117.

[raamdev]

Next Pro Release Changelog:

• Enhancement: Improved the on-hover color when hovering the mouse over Option Panels in the Comment Mail Options by changing it from green to dark blue. Props @kristineds. See Issue #117.

[raamdev]

Comment Mail v151224 has been released and includes changes from this GitHub Issue: See the v151224 announcement for further details.

---

This issue will now be locked to further updates. If you have something to add related to this GitHub Issue, please open a new GitHub Issue and reference this one (#117).