Trash button instead of action menu

microsoft · Feb 17, 2024 · 6dbc88b · 6dbc88b
1 parent c93740c
commit 6dbc88b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 22 deletions.
diff --git a/teachertool/src/components/ActiveRubricDisplay.tsx b/teachertool/src/components/ActiveRubricDisplay.tsx
@@ -14,31 +14,16 @@ import { MenuItem } from "react-common/components/controls/MenuDropdown";
 import { Strings } from "../constants";
 import { Toolbar } from "./Toolbar";
 import React from "react";
+import { Button } from "react-common/components/controls/Button";
 
 interface CriteriaActionMenuProps {
-    criteriaInstance: CriteriaInstance | undefined;
+    criteriaInstance: CriteriaInstance;
     hidden: boolean;
 }
 const CriteriaActionMenu: React.FC<CriteriaActionMenuProps> = ({ criteriaInstance, hidden }) => {
-    const actions: MenuItem[] = criteriaInstance
-        ? [
-              {
-                  title: Strings.Remove,
-                  label: Strings.Remove,
-                  ariaLabel: Strings.Remove,
-                  onClick: () => removeCriteriaFromRubric(criteriaInstance),
-              },
-          ]
-        : [];
-
     return (
         <div className={classList(css["criteria-action-menu"], hidden ? css["hidden-menu-button"] : css["visible-menu-button"])}>
-            <Toolbar.MenuDropdown
-                title={lf("Actions")}
-                items={actions}
-                disabled={!actions.length}
-                ariaLabel="Actions"
-            />
+            <Button label={<i className="fas fa-trash" />} title={Strings.Remove} ariaLabel={Strings.Remove} onClick={() => removeCriteriaFromRubric(criteriaInstance)} />
         </div>
     );
 };
@@ -96,7 +81,7 @@ export const ActiveRubricDisplay: React.FC<IProps> = ({}) => {
                         {lf("Criteria")}
                     </div>
                     <div className={classList(css["cell"], css["criteria-action-menu-cell"])} role="columnheader">
-                        <CriteriaActionMenu criteriaInstance={undefined} hidden={false} />
+                        <i className="fas fa-trash" />
                     </div>
                 </div>
                 <div className={css["criteria-table-body"]}>

diff --git a/teachertool/src/components/styling/ActiveRubricDisplay.module.scss b/teachertool/src/components/styling/ActiveRubricDisplay.module.scss
@@ -86,14 +86,19 @@
 
             .criteria-action-menu {
                 button {
+                    transition: background-color 0.15s ease;
                     color: var(--black);
                     padding: 0.2rem;
-    
-                    i[class*="fas"] {
-                        font-size: 1rem;
+
+                    &:hover {
+                        background-color: var(--pxt-content-accent);
                     }
                 }
             }
+
+            i[class*="fas"] {
+                font-size: 1rem;
+            }
         }
     }
 }