Merge pull request #1347 from durenadev/MDLSITE-7941-7956

MDLSITE-7941 MDLSITE-7956: Improve waffle menu title and top bar site indication

Author: sarjona

src/theme/Navbar/index.js

@@ -81,7 +81,7 @@ export default function NavbarWrapper(props) {
                             <a className={styles.nav_link} href="https://tracker.moodle.org"><span>Tracker</span></a>
                         </li>
                         <li>
-                            <a className={styles.nav_link} href="https://moodledev.io/"><span>Development</span></a>
+                            <a className={styles.nav_link} href="https://moodledev.io/"><span className={styles.active}>Development</span></a>
                         </li>
                         <li>
                             <a className={styles.nav_link} href="https://lang.moodle.org"><span>Translation</span></a>
@@ -121,7 +121,8 @@ export default function NavbarWrapper(props) {
                                 className={styles.nav_link}
                                 type="button"
                                 onClick={() => openMenu('waffle_menu')}
-                                aria-label="Toggle sites menu"
+                                aria-label="Other Moodle Sites"
+                                title="Other Moodle Sites"
                             >
                                 <i className={styles.fa_waffle} />
                             </button>

src/theme/Navbar/index.module.css

@@ -186,6 +186,22 @@
     padding-left: 0.5rem;
     background: none !important;
     border: 0 !important;
+    text-decoration: none;
+}
+.moodlesitestopnavbar .nav_link span {
+    height: 22px;
+}
+.moodlesitestopnavbar .nav_link span.active,
+.moodlesitestopnavbar .nav_link:hover span.active {
+    color: #194866;
+    border-bottom: 3px solid #f98012;
+    height: 25px;
+}
+
+.moodlesitestopnavbar .nav_link:hover span {
+  color : #000000;
+  border-bottom: 3px solid #f98012;
+  height: 25px;
 }
 
 .moodlesitestopnavbar .mobile_menu{