fix: group help buttons (#37671)

client/src/components/layouts/global.css

@@ -210,7 +210,6 @@ fieldset[disabled] .btn-primary.focus {
 .btn-cta {
   background-color: #ffac33;
   background-image: linear-gradient(#ffcc4d, #ffac33);
-  -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d,  endColorstr=#ffac33,  GradientType=0)';
   border-color: #f1a02a;
   color: #0a0a23 !important;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
@@ -221,7 +220,6 @@ fieldset[disabled] .btn-primary.focus {
 .btn-cta:active:hover {
   background-color: #e99110;
   background-image: linear-gradient(#ffcc4d, #e99110);
-  -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d,  endColorstr=#e99110,  GradientType=0)';
   color: #0a0a23 !important;
 }
 .btn-cta:active {
@@ -319,11 +317,18 @@ hr {
   border-radius: 0px;
 }
 
+.dropdown-menu {
+  background-color: var(--secondary-color);
+}
+
 .dropdown-menu > li > a {
   color: var(--secondary-background);
 }
-.dropdown-menu {
-  background-color: var(--secondary-color);
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  color: var(--secondary-color);
+  background-color: var(--secondary-background);
 }
 
 .table-striped > tbody > tr:nth-child(2n + 1) > td,

client/src/templates/Challenges/components/Tool-Panel.js

@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import { Button } from '@freecodecamp/react-bootstrap';
+import {
+  Button,
+  DropdownButton,
+  MenuItem
+} from '@freecodecamp/react-bootstrap';
 
 import './tool-panel.css';
 import { openModal, executeChallenge } from '../redux';
@@ -42,7 +46,7 @@ function ToolPanel({
   return (
     <Fragment>
       <div
-        className={`tool-panel-group ${
+        className={`tool-panel-group button-group ${
           isMobile ? 'tool-panel-group-mobile' : ''
         }`}
       >
@@ -57,35 +61,40 @@ function ToolPanel({
         >
           {isMobile ? 'Reset' : 'Reset All Code'}
         </Button>
-        {guideUrl ? (
-          <Button
-            block={true}
-            bsStyle='primary'
-            className='btn-invert'
-            href={guideUrl}
-            target='_blank'
-          >
-            {isMobile ? 'Hint' : 'Get a hint'}
-          </Button>
-        ) : null}
-        {videoUrl ? (
-          <Button
-            block={true}
-            bsStyle='primary'
-            className='btn-invert'
-            onClick={openVideoModal}
-          >
-            {isMobile ? 'Video' : 'Watch a video'}
-          </Button>
-        ) : null}
-        <Button
+        <DropdownButton
           block={true}
           bsStyle='primary'
           className='btn-invert'
-          onClick={openHelpModal}
+          id='get-help-dropdown'
+          title={isMobile ? 'Help' : 'Get Help'}
         >
-          {isMobile ? 'Help' : 'Ask for help'}
-        </Button>
+          {guideUrl ? (
+            <MenuItem
+              bsStyle='primary'
+              className='btn-invert'
+              href={guideUrl}
+              target='_blank'
+            >
+              {'Get a Hint'}
+            </MenuItem>
+          ) : null}
+          {videoUrl ? (
+            <MenuItem
+              bsStyle='primary'
+              className='btn-invert'
+              onClick={openVideoModal}
+            >
+              {'Watch a video'}
+            </MenuItem>
+          ) : null}
+          <MenuItem
+            bsStyle='primary'
+            className='btn-invert'
+            onClick={openHelpModal}
+          >
+            {'Ask for help'}
+          </MenuItem>
+        </DropdownButton>
       </div>
     </Fragment>
   );

client/src/templates/Challenges/components/tool-panel.css

@@ -11,11 +11,43 @@
 .tool-panel-group-mobile {
   display: flex;
   flex-direction: row-reverse;
-  padding: 0 2px;
 }
 
-.tool-panel-group-mobile .btn-block + .btn-block {
+.tool-panel-group-mobile > .btn-block,
+.tool-panel-group-mobile > .dropdown > .btn-block {
   margin: 0 2px 0 0;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding: 5px 0px;
+}
+
+.tool-panel-group .btn-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.tool-panel-group-mobile .btn-group {
+  display: block;
+  width: 100%;
+  margin: 0 2px 0 2px;
+}
+
+.tool-panel-group-mobile .btn {
+  margin-bottom: 0 !important;
+}
+
+.tool-panel-group .dropdown-menu {
+  top: auto;
+  bottom: 100%;
+  width: calc(100% + 2px);
+  text-align: center;
+  min-width: 240px;
+  left: -1px;
+}
+
+.tool-panel-group .dropdown-menu a {
+  padding: 0.5rem;
+}
+
+#get-help-dropdown > .caret {
+  transform: rotate(180deg);
 }