1915 filter reset button style

client/src/components/Button/TertiaryButton.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "./Button";
+import { MdPrint } from "react-icons/md";
+
+const TertiaryButton = ({ id, onClick, isDisabled, isDisplayed, children }) => {
+  return (
+    <Button
+      type="input"
+      color={"colorDisabled"}
+      variant="download"
+      onClick={onClick}
+      id={id}
+      data-testid={id}
+      disabled={isDisabled}
+      isDisplayed={isDisplayed}
+    >
+      <MdPrint style={{ marginRight: "0.5em" }} />
+      {children}
+    </Button>
+  );
+};
+
+TertiaryButton.propTypes = {
+  children: PropTypes.object,
+  onClick: PropTypes.func,
+  id: PropTypes.string.isRequired,
+  isDisabled: PropTypes.bool,
+  isDisplayed: PropTypes.bool.isRequired
+};
+
+export default TertiaryButton;

client/src/components/Projects/CsvModal.jsx

@@ -165,7 +165,11 @@ const CsvModal = ({
           </Button>
 
           {(project || projectCollection) && !loading && !csvData && (
-            <Button onClick={handleGenerateButton} variant="error">
+            <Button
+              onClick={handleGenerateButton}
+              variant="contained"
+              color={"colorPrimary"}
+            >
               Generate File
             </Button>
           )}
@@ -174,8 +178,8 @@ const CsvModal = ({
             <CSVLink
               data={csvData}
               style={{
-                backgroundColor: "green",
-                color: "black",
+                backgroundColor: theme.colorPrimary,
+                color: theme.colors.primary.black,
                 textDecoration: "none",
                 height: "1.4rem",
                 fontFamily: "Calibri",

client/src/components/Projects/DownloadProjectModal.jsx

@@ -98,13 +98,6 @@ export default function DownloadProjectModal({
         <Button onClick={onClose} variant="outlined">
           Close
         </Button>
-        {/* <Button
-          onClick={() => onClose("ok")}
-          variant="contained"
-          color={"colorPrimary"}
-        >
-          Create a Copy
-        </Button> */}
       </div>
     </ModalDialog>
   );

client/src/components/Projects/ProjectsPage.jsx

@@ -27,6 +27,7 @@ import MultiProjectToolbarMenu from "./MultiProjectToolbarMenu";
 import fetchEngineRules from "./fetchEngineRules";
 import UniversalSelect from "../UI/UniversalSelect";
 import ProjectTableColumnHeader from "./ColumnHeaderPopups/ProjectTableColumnHeader";
+import TertiaryButton from "../Button/TertiaryButton";
 
 const useStyles = createUseStyles({
   outerDiv: {
@@ -941,12 +942,12 @@ const ProjectsPage = ({ contentContainerRef }) => {
                     <MdOutlineSearch className={classes.searchIcon} />
                   </div>
                   <div>
-                    <button
+                    <TertiaryButton
                       onClick={resetFiltersSort}
                       style={{ height: "40px" }}
                     >
                       RESET FILTERS/SORT
-                    </button>
+                    </TertiaryButton>
                     {/* {filterCollapsed ? (
                       <button
                         alt="Show Filter Criteria"

client/src/components/Projects/RenameSnapshotModal.jsx

@@ -11,10 +11,7 @@ const useStyles = createUseStyles(theme => ({
     justifyContent: "center",
     margin: 0
   },
-  heading1: theme.typography.heading1,
-  buttonColor: {
-    backgroundColor: "#eaeff2"
-  }
+  heading1: theme.typography.heading1
 }));
 
 export default function RenameSnapshotModal({
@@ -54,14 +51,15 @@ export default function RenameSnapshotModal({
         <Button
           className={classes.buttonColor}
           onClick={onClose}
-          variant="contained"
+          variant="outlined"
         >
           Cancel
         </Button>
         <Button
           className={classes.buttonColor}
           onClick={() => onClose("ok", snapshotProjectName)}
           variant="contained"
+          color={"colorPrimary"}
         >
           Done
         </Button>

client/src/components/Projects/ShareSnapshotModal.jsx

@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
 import { createUseStyles, useTheme } from "react-jss";
 import Button from "../Button/Button";
 import ModalDialog from "../UI/AriaModal/ModalDialog";
-import clsx from "clsx";
 import * as projectShareService from "../../services/projectShare.service";
 
 const useStyles = createUseStyles(theme => ({
@@ -14,9 +13,6 @@ const useStyles = createUseStyles(theme => ({
   },
   heading1: theme.typography.heading1,
   heading2: theme.typography.heading2,
-  buttonColor: {
-    backgroundColor: theme.colors.secondary.lightGray
-  },
   buttonDisabled: {
     cursor: "default"
   },
@@ -216,12 +212,13 @@ If you don't already have a [TDM Calculator](${tdmLink}) account, please set one
                 style={{ justifyContent: "right" }}
               >
                 <Button
-                  className={clsx(classes.buttonColor, maybeDisabled)}
+                  className={maybeDisabled}
                   onClick={() => {
                     setPage(2);
                   }}
                   disabled={sharedEmails.length ? false : true}
                   variant="contained"
+                  color={"colorPrimary"}
                 >
                   Next
                 </Button>
@@ -308,11 +305,11 @@ If you don't already have a [TDM Calculator](${tdmLink}) account, please set one
                 }}
               >
                 <Button
-                  className={classes.buttonColor}
                   onClick={() => {
                     setPage(1);
                     setIsCopied(false);
                   }}
+                  variant="outlined"
                 >
                   Back
                 </Button>
@@ -363,6 +360,7 @@ If you don't already have a [TDM Calculator](${tdmLink}) account, please set one
                     setPage(1);
                     setSelectedEmail("");
                   }}
+                  variant="outlined"
                 >
                   Cancel
                 </Button>
@@ -374,6 +372,7 @@ If you don't already have a [TDM Calculator](${tdmLink}) account, please set one
                     setSelectedEmail("");
                   }}
                   variant="contained"
+                  color={"colorPrimary"}
                 >
                   Yes
                 </Button>