Improve resources panel styling, add default focus color and link highlight color (#212)

Author: Anemy

src/views/webview-app/components/atlas-cta/atlas-cta.less

@@ -13,6 +13,10 @@
   margin: 0 32px;
 }
 
+.atlas-cta-text-link {
+  color: #13AA52;
+}
+
 .atlas-cta-logo {
   display: inline-block;
   margin-left: auto;

src/views/webview-app/components/atlas-cta/atlas-cta.tsx

@@ -11,9 +11,7 @@ type DispatchProps = {
   onLinkClicked: (screen: string, linkId: string) => void;
 };
 
-type props = DispatchProps;
-
-class AtlasCTA extends React.Component<props> {
+class AtlasCTA extends React.Component<DispatchProps> {
   onLinkClicked = (screen: string, linkId: string): void => {
     this.props.onLinkClicked(screen, linkId);
   };
@@ -32,6 +30,7 @@ class AtlasCTA extends React.Component<props> {
             If you don't already have a cluster you can create one for free
             using&nbsp;
             <a
+              className={styles['atlas-cta-text-link']}
               target="_blank"
               rel="noopener"
               href="https://www.mongodb.com/cloud/atlas"

src/views/webview-app/components/resources-panel/resources-panel.less

@@ -36,7 +36,9 @@
   top: 0;
   right: 0;
   bottom: 0;
+  left: calc(100% - 468px);
   width: 420px;
+  overflow: auto;
   padding: 48px 24px;
   background: var(--vscode-editor-background);
   animation-duration: 250ms;
@@ -48,11 +50,11 @@
 
 @keyframes panelOpenAnimation {
   from {
-    width: 0px;
+    left: 100%;
   }
 
   to {
-    width: 420px;
+    left: calc(100% - 468px);
   }
 }
 
@@ -84,22 +86,30 @@
 }
 
 .resources-panel-links-container {
-  margin-top: 54px;
+  margin-top: 70px;
 }
 
 .resources-panel-link {
   margin-top: 8px;
-  padding: 10px 20px;
+  padding: 10px 16px;
   background-color: var(--vscode-sideBar-background, rgba(50, 50, 50, 0.25));
   line-height: 20px;
   color: var(--vscode-editor-foreground);
   text-align: left;
   text-decoration: none;
   display: block;
+  position: relative;
+}
+
+.resources-panel-link-icon {
+  font-size: 18px;
+  position: absolute;
+  right: 16px;
+  top: 21px;
 }
 
 .resources-panel-footer {
-  margin-top: 36px;
+  margin-top: 40px;
   display: flex;
   flex-direction: row;
   text-align: left;
@@ -109,6 +119,9 @@
   display: inline-block;
   width: 50%;
 }
+.resources-panel-footer-item:last-child {
+  padding-left: 10px;
+}
 
 .resources-panel-footer-item-title {
   margin: 10px 0px;

src/views/webview-app/components/resources-panel/resources-panel.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { Icon } from '@iconify/react';
 import bookIcon from '@iconify-icons/codicon/book';
 
@@ -121,6 +121,10 @@ class ResourcesPanel extends React.Component<DispatchProps> {
             <div>
               {resourceLink.description}
             </div>
+            <FontAwesomeIcon
+              className={styles['resources-panel-link-icon']}
+              icon={faArrowRight}
+            />
           </a>
         ))}
       </div>

src/views/webview-app/connect.module.less

@@ -1,5 +1,17 @@
 @import "~./styles/_variables";
 
+a:hover {
+  color: #13AA52;
+}
+
+*:focus {
+  outline-color: #C3E7CA;
+}
+
+a:focus {
+  outline-color: #C3E7CA;
+}
+
 .page {
   display: flex;
   flex-direction: row;