fix(plugins/plugin-client-common): improve consistency of button hover effects

Fixes #3986

Author: starpit

plugins/plugin-client-common/src/components/Screenshot.tsx

@@ -277,9 +277,9 @@ export default class Screenshot extends React.PureComponent<Props, State> {
         data-active={active}
       >
         {active ? (
-          <CameraAction width={18} height={18} onMouseDown={evt => evt.preventDefault()} />
+          <CameraAction onMouseDown={evt => evt.preventDefault()} />
         ) : (
-          <Camera width={18} height={18} onMouseDown={evt => evt.preventDefault()} />
+          <Camera onMouseDown={evt => evt.preventDefault()} />
         )}
       </a>
     )

plugins/plugin-client-common/src/components/StatusStripe/index.tsx

@@ -86,7 +86,7 @@ export default class StatusStripe extends React.PureComponent {
               tabIndex={0}
               onClick={() => this.doAbout()}
             >
-              <SettingsIcon width={18} height={18} />
+              <SettingsIcon />
             </a>
           </div>
         </div>

plugins/plugin-client-common/src/components/TopTabStripe/Tab.tsx

@@ -15,7 +15,7 @@
  */
 
 import * as React from 'react'
-import { Close16 } from '@carbon/icons-react'
+import { Close20 as CloseButton } from '@carbon/icons-react'
 import { i18n, eventChannelUnsafe, Event, ExecType, Theme } from '@kui-shell/core'
 import { HeaderMenuItem } from 'carbon-components-react'
 
@@ -157,7 +157,7 @@ export default class Tab extends React.PureComponent<Props, State> {
               this.props.onCloseTab(this.props.idx)
             }}
           >
-            <Close16 focusable="false" preserveAspectRatio="xMidYMid meet" aria-hidden="true" />
+            <CloseButton focusable="false" preserveAspectRatio="xMidYMid meet" aria-hidden="true" />
           </div>
         )}
       </HeaderMenuItem>

plugins/plugin-client-common/web/css/static/TopTabStripe.scss

@@ -153,12 +153,16 @@
         fill: var(--color-text-02);
       }
       &:hover svg path {
-        fill: var(--color-base01);
+        fill: var(--color-text-01);
       }
       &:hover {
-        background: var(--color-base05);
+        background: var(--color-table-border1);
       }
     }
+
+    &:not(.kui--tab--active) .kui--tab-close:hover {
+      background: var(--color-table-border3);
+    }
   }
 
   .kui--top-tab-buttons {
@@ -168,12 +172,17 @@
 
     .kui--new-tab__plus {
       display: flex;
+      padding: 3px;
+
+      &:hover {
+        background: var(--color-table-border3);
+      }
 
       svg {
         fill: var(--color-text-02);
 
         &:hover {
-          fill: var(--color-brand-01);
+          fill: var(--color-text-01);
         }
       }
     }

plugins/plugin-client-common/web/css/static/repl.scss

@@ -231,7 +231,7 @@ body/*:not(.sidecar-full-screen)*/ repl.sidecar-visible .repl-selection, body/*.
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding-top: 1rem;
+  padding-top: 0.5rem;
   flex: 4;
   background-color: var(--color-repl-background);
 }

plugins/plugin-client-common/web/css/static/status-stripe.css

@@ -1,6 +1,6 @@
 .kui--status-stripe {
   display: flex;
-  flex-basis: 1.75em;
+  flex-basis: 1.875em;
   background-color: var(--color-sidecar-background-02);
 
   --color-fg: var(--color-text-01);
@@ -85,7 +85,7 @@ body[kui-theme-style="dark"] {
   display: flex;
   align-items: center;
   font-weight: bold;
-  padding-right: calc(1em * 0.875);
+  margin-right: calc(1em * 0.875 - 6px);
 }
 
 .kui--status-stripe-element > a {
@@ -103,11 +103,15 @@ body[kui-theme-style="dark"] {
   color: var(--color-support-04) !important;
   text-decoration: none;
 }
-.kui--status-stripe .kui--status-stripe-element .clickable:hover svg,
-.kui--status-stripe .kui--status-stripe-element .clickable:hover svg path,
-.kui--status-stripe .kui--status-stripe-element .clickable:hover svg rect,
-.kui--status-stripe .kui--status-stripe-element .clickable:hover svg circle {
-  fill: var(--color-support-04) !important;
+
+.kui--status-stripe .kui--status-stripe-button .kui--status-stripe-element {
+  padding: 3px;
+  &:hover {
+    background-color: var(--color-table-border1);
+    svg {
+      fill: var(--color-text-01) !important;
+    }
+  }
 }
 
 .kui--status-stripe-icon {