Merge pull request #107 from back4app/update_api_reference_sidebar_button

style: Change API Reference button to Get Started

Author: paivaric

src/components/Sidebar/Sidebar.scss

@@ -261,6 +261,31 @@
   }
 }
 
+.section_header_external_link {
+  color: white;
+  margin: 10px;
+  height: 40px;
+  background-color: #4caf50;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: normal;
+  font-family: Raleway;
+
+  &:hover {
+    color: white;
+    background-color: #57c55b;
+  }
+
+  &:focus {
+    color: white;
+    text-decoration: none;
+  }
+}
+
 .section_contents {
   background: #0e69a0;
   padding: 16px 14px 16px 50px;

src/components/Sidebar/SidebarSection.react.js

@@ -27,7 +27,7 @@ let SidebarSection = ({ active, children, name, link, icon, style, primaryBackgr
 
   const linkComponent = link.startsWith('/')
     ? <Link style={style} className={styles.section_header} to={{ pathname: link || '' }}>{iconContent}<span>{name}</span></Link>
-    : <a style={style} className={styles.section_header} href={link} target="_blank" onClick={() => sendEvent(name)}>{iconContent}<span>{name}</span></a>;
+    : <a style={style} className={styles.section_header_external_link} href={link} target="_blank" onClick={() => sendEvent(name)}>{iconContent}<span>{name}</span></a>;
   return (
     <div className={classes.join(' ')}>
       {active ?

src/dashboard/DashboardView.react.js

@@ -196,9 +196,9 @@ export default class DashboardView extends React.Component {
 
     if (coreSubsections.length > 0) {
       appSidebarSections.push({
-        name: 'API Reference',
-        icon: 'api-reference',
-        link: `${b4aSettings.DASHBOARD_PATH}/apidocs/${this.context.currentApp.applicationId}`,
+        name: 'Get Started!',
+        icon: 'get-started',
+        link: `${b4aSettings.DASHBOARD_PATH}/apidocs/${this.context.currentApp.applicationId}`
       });
       appSidebarSections.push({
         name: 'Core',