add descriptions

Author: paigecalvert

src/components/CopyMarkdown.js

@@ -209,7 +209,10 @@ function CopyMarkdown() {
                 onClick={openInChatGpt}
                 role="menuitem"
               >
-                <span>Open in ChatGPT</span>
+                <div className={styles.actionContent}>
+                  <span className={styles.actionTitle}>Open in ChatGPT</span>
+                  <span className={styles.actionDescription}>Ask questions about this page</span>
+                </div>
               </button>
             </li>
             <li className={styles.item}>
@@ -218,7 +221,10 @@ function CopyMarkdown() {
                 onClick={copyMarkdown}
                 role="menuitem"
               >
-                <span>Copy Markdown</span>
+                <div className={styles.actionContent}>
+                  <span className={styles.actionTitle}>Copy Markdown</span>
+                  <span className={styles.actionDescription}>Copy page source to clipboard</span>
+                </div>
               </button>
             </li>
             <li className={styles.item}>
@@ -227,7 +233,10 @@ function CopyMarkdown() {
                 onClick={viewAsMarkdown}
                 role="menuitem"
               >
-                <span>View in Markdown</span>
+                <div className={styles.actionContent}>
+                  <span className={styles.actionTitle}>View Markdown</span>
+                  <span className={styles.actionDescription}>Open this page in plain text format</span>
+                </div>
               </button>
             </li>
           </ul>

src/components/CopyMarkdown.module.css

@@ -108,7 +108,7 @@
 .actionButton {
   display: flex;
   align-items: center;
-  padding: 0.75rem 1rem;
+  padding: 0.875rem 1rem;
   width: 100%;
   text-align: left;
   color: var(--ifm-color-gray-800, #444950);
@@ -120,6 +120,24 @@
   outline: none;
 }
 
+.actionContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.actionTitle {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.actionDescription {
+  font-size: 0.8125rem;
+  color: var(--ifm-color-gray-600, #606770);
+  font-weight: 400;
+}
+
 .dropdownItemIcon {
   width: 16px;
   height: 16px;
@@ -189,6 +207,10 @@ html[data-theme='dark'] .actionButton:focus {
   color: var(--ifm-color-white, #ffffff);
 }
 
+html[data-theme='dark'] .actionDescription {
+  color: var(--ifm-color-gray-500, #a8acb3);
+}
+
 .copied .buttonText {
   padding-left: 24px; /* Equal to the width of the copy icon */
   padding-right: 27px; /* Equal to the width of the arrow icon plus its margin */