Fix styling for JSON copy buttons (#878)

Fix styling for JSON copy buttons to have a transparent background

Author: adhityamamallan

src/views/workflow-history/workflow-history-event-details-json/workflow-history-event-details-json.styles.ts

@@ -1,3 +1,5 @@
+import { type ButtonOverrides } from 'baseui/button';
+
 import type {
   StyletronCSSObject,
   StyletronCSSObjectOf,
@@ -25,3 +27,13 @@ const cssStylesObj = {
 
 export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =
   cssStylesObj;
+
+export const overrides = {
+  copyButton: {
+    BaseButton: {
+      style: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+      },
+    },
+  } satisfies ButtonOverrides,
+};

src/views/workflow-history/workflow-history-event-details-json/workflow-history-event-details-json.tsx

@@ -6,7 +6,10 @@ import PrettyJson from '@/components/pretty-json/pretty-json';
 import useStyletronClasses from '@/hooks/use-styletron-classes';
 import losslessJsonStringify from '@/utils/lossless-json-stringify';
 
-import { cssStyles } from './workflow-history-event-details-json.styles';
+import {
+  cssStyles,
+  overrides,
+} from './workflow-history-event-details-json.styles';
 import type { Props } from './workflow-history-event-details-json.types';
 
 export default function WorkflowHistoryEventDetailsJson({ entryValue }: Props) {
@@ -19,7 +22,10 @@ export default function WorkflowHistoryEventDetailsJson({ entryValue }: Props) {
     <div className={cls.jsonViewWrapper}>
       <div className={cls.jsonViewContainer}>
         <div className={cls.jsonViewHeader}>
-          <CopyTextButton textToCopy={textToCopy} />
+          <CopyTextButton
+            textToCopy={textToCopy}
+            overrides={overrides.copyButton}
+          />
         </div>
         <PrettyJson json={entryValue} />
       </div>

src/views/workflow-queries/workflow-queries-result-json/workflow-queries-result-json.styles.ts

@@ -1,4 +1,5 @@
 import { styled as createStyled } from 'baseui';
+import { type ButtonOverrides } from 'baseui/button';
 
 export const styled = {
   ViewContainer: createStyled<'div', { $isError: boolean }>(
@@ -24,3 +25,13 @@ export const styled = {
     })
   ),
 };
+
+export const overrides = {
+  copyButton: {
+    BaseButton: {
+      style: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+      },
+    },
+  } satisfies ButtonOverrides,
+};

src/views/workflow-queries/workflow-queries-result-json/workflow-queries-result-json.tsx

@@ -6,7 +6,7 @@ import PrettyJson from '@/components/pretty-json/pretty-json';
 import losslessJsonStringify from '@/utils/lossless-json-stringify';
 
 import getQueryJsonContent from './helpers/get-query-json-content';
-import { styled } from './workflow-queries-result-json.styles';
+import { overrides, styled } from './workflow-queries-result-json.styles';
 import { type Props } from './workflow-queries-result-json.types';
 
 export default function WorkflowQueriesResultJson(props: Props) {
@@ -24,7 +24,10 @@ export default function WorkflowQueriesResultJson(props: Props) {
       {content !== undefined && (
         <>
           <PrettyJson json={content} />
-          <CopyTextButton textToCopy={textToCopy} />
+          <CopyTextButton
+            textToCopy={textToCopy}
+            overrides={overrides.copyButton}
+          />
         </>
       )}
     </styled.ViewContainer>

src/views/workflow-summary-tab/workflow-summary-tab-json-view/workflow-summary-tab-json-view.styles.ts

@@ -1,3 +1,5 @@
+import { type ButtonOverrides } from 'baseui/button';
+
 import type {
   StyletronCSSObject,
   StyletronCSSObjectOf,
@@ -19,3 +21,13 @@ const cssStylesObj = {
 
 export const cssStyles: StyletronCSSObjectOf<typeof cssStylesObj> =
   cssStylesObj;
+
+export const overrides = {
+  copyButton: {
+    BaseButton: {
+      style: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+      },
+    },
+  } satisfies ButtonOverrides,
+};

src/views/workflow-summary-tab/workflow-summary-tab-json-view/workflow-summary-tab-json-view.tsx

@@ -10,7 +10,7 @@ import useStyletronClasses from '@/hooks/use-styletron-classes';
 import losslessJsonStringify from '@/utils/lossless-json-stringify';
 
 import { jsonViewTabsOptions } from './workflow-summary-tab-json-view.constants';
-import { cssStyles } from './workflow-summary-tab-json-view.styles';
+import { cssStyles, overrides } from './workflow-summary-tab-json-view.styles';
 import type { Props } from './workflow-summary-tab-json-view.types';
 
 export default function WorkflowSummaryTabJsonView({
@@ -42,7 +42,10 @@ export default function WorkflowSummaryTabJsonView({
           options={jsonViewTabsOptions}
           onChange={({ activeKey }) => setActiveTab(activeKey.toString())}
         />
-        <CopyTextButton textToCopy={textToCopy} />
+        <CopyTextButton
+          textToCopy={textToCopy}
+          overrides={overrides.copyButton}
+        />
       </div>
       {activeTab === 'result' && isWorkflowRunning ? (
         <PrettyJsonSkeleton width="200px" />