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 ? (
+        <DropdownButton
-          <Button
           block={true}
+          bsStyle='primary'
+          className='btn-invert'
+          id='get-help-dropdown'
+          title={isMobile ? 'Help' : 'Get Help'}
+        >
+          {guideUrl ? (
+            <MenuItem
               bsStyle='primary'
               className='btn-invert'
               href={guideUrl}
               target='_blank'
             >
-            {isMobile ? 'Hint' : 'Get a hint'}
+              {'Get a Hint'}
-          </Button>
+            </MenuItem>
           ) : null}
           {videoUrl ? (
-          <Button
+            <MenuItem
-            block={true}
               bsStyle='primary'
               className='btn-invert'
               onClick={openVideoModal}
             >
-            {isMobile ? 'Video' : 'Watch a video'}
+              {'Watch a video'}
-          </Button>
+            </MenuItem>
           ) : null}
-        <Button
+          <MenuItem
-          block={true}
             bsStyle='primary'
             className='btn-invert'
             onClick={openHelpModal}
           >
-          {isMobile ? 'Help' : 'Ask for help'}
+            {'Ask for help'}
-        </Button>
+          </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: 5px 0px;
-  padding-right: 8px;
+}
+
+.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);
 }