fix(plugins/plugin-client-common): Change block rerun action button from Retry icon to Play icon

part of #7696

Author: starpit

packages/test/src/api/selectors.ts

@@ -194,7 +194,7 @@ export const BLOCK_DOWN_BUTTON = (N: number) => `${PROMPT_BLOCK_N(N)} .kui--bloc
 export const BLOCK_SECTION_BUTTON = (N: number) => `${PROMPT_BLOCK_N(N)} .kui--block-action [icon="Section"]`
 export const COMMAND_COPY_BUTTON = (N: number) => `${PROMPT_BLOCK_N(N)} .kui--block-action [icon="Copy"]`
 export const COMMAND_COPY_DONE_BUTTON = (N: number) => `${PROMPT_BLOCK_N(N)} .kui--block-action [icon="Checkmark"]`
-export const COMMAND_RERUN_BUTTON = (N: number) => `${PROMPT_BLOCK_N(N)} .kui--block-action [icon="Retry"]`
+export const COMMAND_RERUN_BUTTON = (N: number) => `${PROMPT_BLOCK_N(N)} .kui--block-action [icon="Play"]`
 export const PROMPT_LAST = `${PROMPT_BLOCK_LAST} .repl-input-element`
 export const PROMPT_FINAL = `${PROMPT_BLOCK_FINAL} .repl-input-element`
 export const OUTPUT_LAST = `${PROMPT_BLOCK_LAST} .repl-result`

plugins/plugin-client-common/src/components/Views/Terminal/Block/Actions.tsx

@@ -64,7 +64,7 @@ export default class Actions extends React.PureComponent<Props> {
         }
       }
 
-      return <Action icon="Retry" onClick={handler} title={strings('Re-execute this command')} />
+      return <Action icon="Play" onClick={handler} title={strings('Re-execute this command')} />
     }
   }
 

plugins/plugin-client-common/web/scss/components/Terminal/Block.scss

@@ -196,28 +196,27 @@
       }
     }
     @include BlockActions {
-      align-items: center;
       display: flex;
       opacity: 0;
       border-radius: 1px;
       background-color: var(--color-base03);
 
+      transition-property: opacity;
+      transition-delay: $action-hover-delay;
+      transition-duration: 140ms;
+
       position: absolute;
       top: 0; /* this with bottom:0 gives 1) vertical center; 2) occluding of repl-input-element content */
       bottom: 0;
       right: 0;
-
-      padding-left: 0.5em;
-      transition-property: opacity;
-      transition-delay: $action-hover-delay;
-      transition-duration: 140ms;
     }
 
     .kui--block-action {
       align-items: center;
+      justify-content: center;
       display: flex;
-      margin-right: $action-padding;
       padding: $action-padding;
+      width: $action-width;
       color: var(--color-text-01);
 
       /* This is a bit of a hack for TwoFaceIcon, to work around the Checkmark being narrower than other icons in Carbon */
@@ -238,8 +237,6 @@
     }
 
     .kui-block-actions-others:not(:empty) {
-      padding-right: $action-padding;
-      margin-right: $action-padding;
       display: flex;
       border-right: 1px solid var(--color-table-border1);
     }

plugins/plugin-client-common/web/scss/components/Terminal/_mixins.scss

@@ -21,8 +21,9 @@ $inset: 0.375em;
 $right-element-font-size-factor: 0.75;
 $right-element-font-size: $right-element-font-size-factor + rem;
 
-/** Padding for action buttons */
+/** Sizing for Block action buttons */
 $action-padding: 3px;
+$action-width: 2em;
 
 /** Color to indicate focused block */
 $focus-color: var(--color-brand-01);