fix: turn modal cancel buttons into tertiary (#2979)

David Kim · web-flow · commit 720e00981a42 · 2021-10-21T16:27:25.000-04:00
diff --git a/src/annotations/components/annotationForm/AnnotationForm.tsx b/src/annotations/components/annotationForm/AnnotationForm.tsx
@@ -348,6 +348,7 @@ export const AnnotationForm: FC<Props> = (props: Props) => {
           <div className={buttonClasses}>
             <Button
               text="Cancel"
+              color={ComponentColor.Tertiary}
               onClick={handleCancel}
               testID="edit-annotation-cancel-button"
               className="edit-annotation-cancel"
diff --git a/src/authorizations/components/AllAccessTokenOverlay.tsx b/src/authorizations/components/AllAccessTokenOverlay.tsx
@@ -82,7 +82,11 @@ class AllAccessTokenOverlay extends PureComponent<Props, State> {
 
           <Form.Footer>
             <Overlay.Footer>
-              <Button text="Cancel" onClick={this.handleDismiss} />
+              <Button
+                text="Cancel"
+                color={ComponentColor.Tertiary}
+                onClick={this.handleDismiss}
+              />
               <Button
                 text="Save"
                 testID="button--save"
diff --git a/src/authorizations/components/BucketsTokenOverlay.tsx b/src/authorizations/components/BucketsTokenOverlay.tsx
@@ -128,6 +128,7 @@ class BucketsTokenOverlay extends PureComponent<Props, State> {
             <Overlay.Footer>
               <Button
                 text="Cancel"
+                color={ComponentColor.Tertiary}
                 onClick={this.handleDismiss}
                 testID="button--cancel"
               />
diff --git a/src/authorizations/components/redesigned/AllAccessTokenOverlay.tsx b/src/authorizations/components/redesigned/AllAccessTokenOverlay.tsx
@@ -95,6 +95,7 @@ const AllAccessTokenOverlay: FC<OwnProps> = props => {
             <Form.Footer>
               <Button
                 text="Cancel"
+                color={ComponentColor.Tertiary}
                 icon={IconFont.Remove}
                 onClick={handleDismiss}
               />
diff --git a/src/authorizations/components/redesigned/CustomApiTokenOverlay.tsx b/src/authorizations/components/redesigned/CustomApiTokenOverlay.tsx
@@ -316,7 +316,7 @@ const CustomApiTokenOverlay: FC<Props> = props => {
       </Overlay.Body>
       <Overlay.Footer>
         <Button
-          color={ComponentColor.Primary}
+          color={ComponentColor.Tertiary}
           shape={ButtonShape.Default}
           onClick={handleDismiss}
           testID="cancel-token-overlay--buton"
diff --git a/src/authorizations/components/redesigned/EditTokenOverlay.tsx b/src/authorizations/components/redesigned/EditTokenOverlay.tsx
@@ -153,7 +153,7 @@ const EditTokenOverlay: FC<Props> = props => {
             <Page.ControlBarCenter>
               <FlexBox margin={ComponentSize.Medium}>
                 <Button
-                  color={ComponentColor.Default}
+                  color={ComponentColor.Tertiary}
                   text="Cancel"
                   onClick={handleDismiss}
                   testID="token-cancel-btn"
diff --git a/src/buckets/components/RenameBucketForm.tsx b/src/buckets/components/RenameBucketForm.tsx
@@ -69,6 +69,7 @@ class RenameBucketForm extends PureComponent<Props, State> {
                 >
                   <Button
                     text="Cancel"
+                    color={ComponentColor.Tertiary}
                     onClick={this.handleClose}
                     type={ButtonType.Button}
                   />
diff --git a/src/buckets/components/createBucketForm/BucketOverlayForm.tsx b/src/buckets/components/createBucketForm/BucketOverlayForm.tsx
@@ -205,7 +205,12 @@ export default class BucketOverlayForm extends PureComponent<Props> {
           {makeAdvancedSection()}
         </Overlay.Body>
         <Overlay.Footer>
-          <Button text="Cancel" onClick={onClose} type={ButtonType.Button} />
+          <Button
+            text="Cancel"
+            color={ComponentColor.Tertiary}
+            onClick={onClose}
+            type={ButtonType.Button}
+          />
           {buttonText === 'Save Changes' && (
             <Button
               text="Rename"
diff --git a/src/buckets/components/lineProtocol/UploadFileButtons.tsx b/src/buckets/components/lineProtocol/UploadFileButtons.tsx
@@ -26,7 +26,7 @@ const UploadFileButtons: FC = () => {
   if (writeStatus === RemoteDataState.Error) {
     return (
       <Button
-        color={ComponentColor.Default}
+        color={ComponentColor.Tertiary}
         text="Cancel"
         size={ComponentSize.Medium}
         type={ButtonType.Button}
diff --git a/src/buckets/components/lineProtocol/configure/DragAndDropButtons.tsx b/src/buckets/components/lineProtocol/configure/DragAndDropButtons.tsx
@@ -25,7 +25,7 @@ const DragAndDropButtons: FC<Props> = ({
     return (
       <span className="drag-and-drop--buttons">
         <Button
-          color={ComponentColor.Default}
+          color={ComponentColor.Tertiary}
           text="Cancel"
           size={ComponentSize.Medium}
           type={ButtonType.Button}
@@ -51,7 +51,7 @@ const DragAndDropButtons: FC<Props> = ({
         testID="write-data--button"
       />
       <Button
-        color={ComponentColor.Default}
+        color={ComponentColor.Tertiary}
         text="Cancel"
         size={ComponentSize.Medium}
         type={ButtonType.Submit}
diff --git a/src/cloud/components/WriteLimitOverlay.tsx b/src/cloud/components/WriteLimitOverlay.tsx
@@ -77,7 +77,7 @@ const WriteLimitOverlay: FC = () => {
           shape={ButtonShape.Default}
           type={ButtonType.Submit}
           size={ComponentSize.Medium}
-          color={ComponentColor.Default}
+          color={ComponentColor.Tertiary}
           text="Cancel"
           onClick={onClose}
         />
diff --git a/src/dashboards/components/AutoRefreshOverlay.tsx b/src/dashboards/components/AutoRefreshOverlay.tsx
@@ -163,7 +163,7 @@ const AutoRefreshForm: FC = () => {
             <Button
               onClick={handleCancel}
               text="Cancel"
-              color={ComponentColor.Default}
+              color={ComponentColor.Tertiary}
               className="refresh-form-cancel-button"
               testID="refresh-form-cancel-button"
             />
diff --git a/src/dashboards/components/NoteEditorOverlay.tsx b/src/dashboards/components/NoteEditorOverlay.tsx
@@ -105,6 +105,7 @@ class NoteEditorOverlay extends PureComponent<Props, State> {
         <Overlay.Footer>
           <Button
             text="Cancel"
+            color={ComponentColor.Tertiary}
             onClick={this.handleDismiss}
             testID="cancel-note--button"
           />
diff --git a/src/dataExplorer/components/SaveAsCellForm.tsx b/src/dataExplorer/components/SaveAsCellForm.tsx
@@ -115,6 +115,7 @@ class SaveAsCellForm extends PureComponent<Props, State> {
                   onClick={dismiss}
                   titleText="Cancel save"
                   type={ButtonType.Button}
+                  color={ComponentColor.Tertiary}
                   testID="save-as-dashboard-cell--cancel"
                 />
                 <Button
diff --git a/src/flows/pipes/Schedule/ExportTaskOverlay/ExportTaskButtons.tsx b/src/flows/pipes/Schedule/ExportTaskOverlay/ExportTaskButtons.tsx
@@ -17,6 +17,7 @@ const ExportTaskButtons: FC = () => {
       <Button
         text="Cancel"
         onClick={closeFn}
+        color={ComponentColor.Tertiary}
         titleText="Cancel"
         type={ButtonType.Button}
       />
diff --git a/src/labels/components/LabelOverlayForm.tsx b/src/labels/components/LabelOverlayForm.tsx
@@ -127,6 +127,7 @@ export default class LabelOverlayForm extends PureComponent<Props> {
         <Overlay.Footer>
           <Button
             text="Cancel"
+            color={ComponentColor.Tertiary}
             onClick={onCloseModal}
             titleText="Cancel creation of Label and return to list"
             type={ButtonType.Button}
diff --git a/src/notifications/endpoints/components/EndpointOverlayFooter.tsx b/src/notifications/endpoints/components/EndpointOverlayFooter.tsx
@@ -59,6 +59,7 @@ const EndpointOverlayFooter: FC<Props> = ({
         testID="endpoint-cancel--button"
         onClick={onCancel}
         text="Cancel"
+        color={ComponentColor.Tertiary}
       />
       <Button
         testID="endpoint-save--button"
diff --git a/src/organizations/components/CreateOrgOverlay.tsx b/src/organizations/components/CreateOrgOverlay.tsx
@@ -96,7 +96,11 @@ class CreateOrgOverlay extends PureComponent<Props, State> {
               </Form.Element>
             </Overlay.Body>
             <Overlay.Footer>
-              <Button text="Cancel" onClick={this.closeModal} />
+              <Button
+                text="Cancel"
+                color={ComponentColor.Tertiary}
+                onClick={this.closeModal}
+              />
               <Button
                 text="Create"
                 type={ButtonType.Submit}
diff --git a/src/organizations/components/RenameOrgForm.tsx b/src/organizations/components/RenameOrgForm.tsx
@@ -78,6 +78,7 @@ class RenameOrgForm extends PureComponent<Props, State> {
                   <Button
                     text="Cancel"
                     icon={IconFont.Remove_New}
+                    color={ComponentColor.Tertiary}
                     onClick={this.handleGoBack}
                   />
                   <Button
diff --git a/src/scrapers/components/CreateScraperForm.tsx b/src/scrapers/components/CreateScraperForm.tsx
@@ -93,6 +93,7 @@ export class ScraperTarget extends PureComponent<Props> {
               <Form.Footer>
                 <Button
                   text="Cancel"
+                  color={ComponentColor.Tertiary}
                   onClick={onDismiss}
                   testID="create-scraper--cancel"
                 />
diff --git a/src/secrets/components/CreateSecretForm.tsx b/src/secrets/components/CreateSecretForm.tsx
@@ -122,7 +122,11 @@ const CreateSecretForm: FC = () => {
         />
       </Overlay.Body>
       <Overlay.Footer>
-        <Button text="Cancel" onClick={handleDismiss} />
+        <Button
+          text="Cancel"
+          color={ComponentColor.Tertiary}
+          onClick={handleDismiss}
+        />
         <Button
           text="Add Secret"
           testID="variable-form-save"
diff --git a/src/secrets/components/EditSecretForm.tsx b/src/secrets/components/EditSecretForm.tsx
@@ -103,7 +103,11 @@ const EditSecretForm: FC = () => {
       <Grid.Row>
         <Grid.Column>
           <Form.Footer>
-            <Button text="Cancel" onClick={handleDismiss} />
+            <Button
+              text="Cancel"
+              color={ComponentColor.Tertiary}
+              onClick={handleDismiss}
+            />
             <Button
               text={submitButtonText}
               onClick={handleSubmit}
diff --git a/src/shared/components/DragAndDrop.tsx b/src/shared/components/DragAndDrop.tsx
@@ -146,7 +146,7 @@ class DragAndDrop extends PureComponent<Props, State> {
       return (
         <span className="drag-and-drop--buttons">
           <Button
-            color={ComponentColor.Default}
+            color={ComponentColor.Tertiary}
             text="Cancel"
             size={ComponentSize.Medium}
             type={ButtonType.Button}
@@ -166,7 +166,7 @@ class DragAndDrop extends PureComponent<Props, State> {
           onClick={this.handleSubmit}
         />
         <Button
-          color={ComponentColor.Default}
+          color={ComponentColor.Tertiary}
           text="Cancel"
           size={ComponentSize.Medium}
           type={ButtonType.Submit}
diff --git a/src/shared/components/cells/CellCloneOverlay.tsx b/src/shared/components/cells/CellCloneOverlay.tsx
@@ -203,7 +203,7 @@ const CellCloneOverlay: FC = () => {
           onClick={() => {
             onClose()
           }}
-          color={ComponentColor.Default}
+          color={ComponentColor.Tertiary}
           text="Cancel"
           testID="copy-cell-cancel-button"
         />
diff --git a/src/tasks/components/TaskForm.tsx b/src/tasks/components/TaskForm.tsx
@@ -157,6 +157,7 @@ export default class TaskForm extends PureComponent<Props, State> {
         <Form.Footer>
           <Button
             text="Cancel"
+            color={ComponentColor.Tertiary}
             onClick={dismiss}
             titleText="Cancel save"
             type={ButtonType.Button}
diff --git a/src/tasks/components/TaskHeader.tsx b/src/tasks/components/TaskHeader.tsx
@@ -29,7 +29,7 @@ export default class TaskHeader extends PureComponent<Props> {
         <Page.ControlBar fullWidth={true}>
           <Page.ControlBarRight>
             <Button
-              color={ComponentColor.Default}
+              color={ComponentColor.Tertiary}
               text="Cancel"
               onClick={onCancel}
               testID="task-cancel-btn"
diff --git a/src/telegrafs/components/TelegrafConfigOverlayForm.tsx b/src/telegrafs/components/TelegrafConfigOverlayForm.tsx
@@ -109,7 +109,7 @@ const TelegrafConfigOverlayForm: FC = () => {
       </Overlay.Body>
       <Overlay.Footer>
         <Button
-          color={ComponentColor.Default}
+          color={ComponentColor.Tertiary}
           text="Cancel"
           onClick={onClose}
         />
diff --git a/src/templates/components/createFromTemplateOverlay/CreateFromTemplateOverlay.tsx b/src/templates/components/createFromTemplateOverlay/CreateFromTemplateOverlay.tsx
@@ -72,6 +72,7 @@ class DashboardImportFromTemplateOverlay extends PureComponent<
             <Overlay.Body>{this.overlayBody}</Overlay.Body>
             <Overlay.Footer>
               <Button
+                color={ComponentColor.Tertiary}
                 text="Cancel"
                 onClick={this.onDismiss}
                 key="cancel-button"
diff --git a/src/variables/components/RenameVariableForm.tsx b/src/variables/components/RenameVariableForm.tsx
@@ -72,7 +72,7 @@ class RenameVariableOverlayForm extends PureComponent<Props, State> {
         <Overlay.Footer>
           <Button
             text="Cancel"
-            color={ComponentColor.Danger}
+            color={ComponentColor.Tertiary}
             onClick={onClose}
           />
           <Button
diff --git a/src/variables/components/UpdateVariableOverlay.tsx b/src/variables/components/UpdateVariableOverlay.tsx
@@ -143,7 +143,7 @@ class UpdateVariableOverlay extends PureComponent<Props, State> {
             <Overlay.Footer>
               <Button
                 text="Cancel"
-                color={ComponentColor.Secondary}
+                color={ComponentColor.Tertiary}
                 onClick={onClose}
               />
               <Button
diff --git a/src/variables/components/VariableForm.tsx b/src/variables/components/VariableForm.tsx
@@ -125,7 +125,11 @@ export default class VariableForm extends PureComponent<Props, State> {
           </Grid>
         </Overlay.Body>
         <Overlay.Footer>
-          <Button text="Cancel" onClick={onHideOverlay} />
+          <Button
+            text="Cancel"
+            color={ComponentColor.Tertiary}
+            onClick={onHideOverlay}
+          />
           <Button
             text={submitText}
             type={ButtonType.Submit}
diff --git a/src/writeData/components/PluginAddToExistingConfiguration/Footer.tsx b/src/writeData/components/PluginAddToExistingConfiguration/Footer.tsx
@@ -43,7 +43,7 @@ const FooterConfigure: FC<FooterProps> = props => {
   return (
     <>
       <Button
-        color={ComponentColor.Default}
+        color={ComponentColor.Tertiary}
         onClick={onCancel}
         tabIndex={1}
         testID="plugin-add-to-configuration-cancel"
diff --git a/src/writeData/components/PluginCreateConfiguration/Footer.tsx b/src/writeData/components/PluginCreateConfiguration/Footer.tsx
@@ -102,7 +102,7 @@ const FooterComponent: FC<Props> = props => {
     return (
       <Overlay.Footer>
         <Button
-          color={ComponentColor.Default}
+          color={ComponentColor.Tertiary}
           onClick={onExit}
           tabIndex={1}
           testID="plugin-create-configuration-cancel"

Original file line number	Diff line number	Diff line change
`@@ -69,6 +69,7 @@ class RenameBucketForm extends PureComponent<Props, State> {`
`69`	`69`	`>`
`70`	`70`	`<Button`
`71`	`71`	`text="Cancel"`
	`72`	`+ color={ComponentColor.Tertiary}`
`72`	`73`	`onClick={this.handleClose}`
`73`	`74`	`type={ButtonType.Button}`
`74`	`75`	`/>`