toggleCheckbox styling and rendering button implemented

Author: Jeffrey Na

app/containers/ModifyMetricsContainer.tsx

@@ -28,15 +28,6 @@ const MetricsContainer: React.FC = React.memo(props => {
     setSavedMetrics(updatedMetric);
   };
 
-  const toggleCheckbox = () => {
-    const newMetrics = { ...savedMetrics };
-    for (let key in newMetrics) {
-      newMetrics[key].selected = !showCheckMark;
-    }
-    setSavedMetrics(newMetrics);
-    setShowCheckMark(!showCheckMark);
-  };
-
   const updateMetrics = () => {
     // Sets state for savedMetrics with metrics "selected" option updated based on checkbox selection
     const newMetrics = { ...savedMetrics };
@@ -49,6 +40,18 @@ const MetricsContainer: React.FC = React.memo(props => {
     // ipcRenderer.on('updateResponse')
   };
 
+  /** 
+   * @desc Toggle functionality to deselect and select all metrics.
+   */
+  const toggleCheckbox = () => {
+    const newMetrics = { ...savedMetrics };
+    for (let key in newMetrics) {
+      newMetrics[key].selected = !showCheckMark;
+    }
+    setSavedMetrics(newMetrics);
+    setShowCheckMark(!showCheckMark);
+  };
+
   Object.values(savedMetrics).forEach((el: any) => {
     const jsxEl = (
       <div key={el.metric} className="modifyMetric">
@@ -83,8 +86,8 @@ const MetricsContainer: React.FC = React.memo(props => {
       <button id="changeDatabaseSettingsButton" className="select" onClick={updateMetrics}>
         Change Database Settings
       </button>
-      <Button id="toggleCheck" onClick={toggleCheckbox}>
-        Select/Deselect All
+      <Button variant="contained" color="primary" id="toggleCheck" onClick={toggleCheckbox}>
+        {showCheckMark ? 'Deselect All' : 'Select All'}
       </Button>
       {!!kubernetesMetrics.length && (
         <div className="metricsSublist">