fix(plugins/plugin-client-common): clean up screenshot notification UI

Fixes #3699

Author: starpit

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

@@ -159,15 +159,16 @@ export default class Screenshot extends React.PureComponent<Props, State> {
         <ToastNotification
           id="screenshot-captured"
           timeout={timeout}
-          kind="info"
+          kind="success"
           title={strings('Screenshot')}
-          caption={strings('Successfully captured a screenshot to the clipboard')}
+          subtitle={strings('Successfully captured a screenshot to the clipboard')}
+          caption=""
           onCloseButtonClick={() => this.setState({ isActive: false, captured: undefined })}
         >
           <div className="flex-layout">
             <img src={this.state.captured.toDataURL()} className="screenshot-image" />
           </div>
-          <div className="small-top-pad">{this.saveToDiskButton()}</div>
+          <div className="kui--screenshot-captured-bottom-message">{this.saveToDiskButton()}</div>
         </ToastNotification>
       )
     }
@@ -186,7 +187,7 @@ export default class Screenshot extends React.PureComponent<Props, State> {
         this.activate()
       }
 
-      return { isActive }
+      return { isActive, captured: undefined }
     })
   }
 

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

@@ -10,6 +10,7 @@ body {
 
 .screenshot-save-button {
   color: var(--color-text-01) !important;
+  font-weight: normal !important;
 }
 
 .kui--screenshot-tooltip {
@@ -52,22 +53,42 @@ sidecar.kui--screenshotable {
   }
 }
 
-.bx--toast-notification--info {
+.bx--toast-notification--success {
+  border-color: var(--color-ok);
+
+  svg.bx--toast-notification__icon {
+    & {
+      stroke: var(--color-ok);
+    }
+    path {
+      fill: unset;
+    }
+  }
+}
+
+.bx--toast-notification--info,
+.bx--toast-notification--success {
   position: absolute;
   bottom: 2em;
-  right: 1em;
-  width: 32em;
+  right: 0em;
+  width: 28em;
   height: auto;
   z-index: 5;
 
   background: var(--color-screenshot-background);
   color: var(--color-screenshot-foreground);
 
+  .kui--screenshot-captured-bottom-message {
+    /* bookend the spacing with the top text */
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
   .screenshot-image {
     width: 100%;
     height: auto;
     max-height: 17em;
-    object-fit: cover;
+    object-fit: contain;
     object-position: top left;
   }
 }