Make WelcomeSidebar scrollable, improve styling & add help text

app/components/Sidebar.css

@@ -12,6 +12,12 @@
   background: linear-gradient(0deg, #7a8390, #d4a49a);
 }
 
+.sidebar > .body {
+  height: 100%;
+  overflow-y: auto;
+  padding-bottom: 100px;
+}
+
 .collapsed {
   width: 0%;
   right: 1px;
@@ -36,7 +42,7 @@
 }
 
 .sidebar .content {
-  margin-top: 25px;
+  margin-top: 10px;
   width: 85%;
   margin-left: auto;
   margin-right: auto;

app/components/Sidebar.js

@@ -22,7 +22,7 @@ class Sidebar extends SyncryptComponent {
         <div className="header">
           {this.props.header}
         </div>
-        <div>
+        <div className="body">
           <SidebarToggle direction={this.props.hidden ? 'left' : 'right'} />
           <div className="content">
             {this.props.children}

app/components/VaultSettingsBar.css

@@ -15,21 +15,21 @@
   position: relative;
   top: 18px;
   left: 10px;
-  font-size: 20px;
+  font-size: 15px;
   font-weight: bold;
 }
 
 .vault-settings-header .vault-name-edit {
   position: relative;
   top: -20px;
   left: 10px;
-  font-size: 20px;
+  font-size: 15px;
   font-weight: bold;
 }
 
 .vault-id {
   position: relative;
-  top: 8px;
+  top: 12px;
   left: 10px;
   font-weight: 600;
   font-size: 12px;

app/components/WelcomeSidebar.css

@@ -1,17 +1,46 @@
 .welcome-sidebar h1 {
-  font-size: 22px;
+  font-size: 20px;
+  margin-top: 0px;
 }
 
 .welcome-sidebar h2 {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 500;
   padding-bottom: 15px;
 }
 
 .welcome-sidebar p {
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .welcome-sidebar ul {
   padding-left: 0px;
 }
+
+.plus-icon-inline {
+  display: inline-block;
+  background-image: url(../assets/add.png);
+  background-repeat:no-repeat;
+  background-size: 15px 15px;
+  width: 14px;
+  height: 14px;
+  position: relative;
+  top: 2px;
+}
+
+.Collapsible {
+  margin-top: 20px;
+}
+
+.Collapsible__trigger {
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.Collapsible__trigger:hover {
+  cursor: pointer;
+}
+
+.help-text {
+  margin-top: 10px;
+}

app/components/WelcomeSidebar.js

@@ -10,6 +10,10 @@ import IconButton from './IconButton';
 import * as actions from '../actions';
 import { bindActionCreators } from 'redux';
 import rest from '../api';
+import ReactDOM from 'react-dom';
+import 'perfect-scrollbar/dist/css/perfect-scrollbar.css';
+import PerfectScrollbar from 'perfect-scrollbar';
+import Collapsible from 'react-collapsible';
 
 class WelcomeSidebar extends SyncryptComponent {
   constructor(props) {
@@ -25,6 +29,12 @@ class WelcomeSidebar extends SyncryptComponent {
     shell.openExternal("https://alpha.syncrypt.space/releases/");
   }
 
+  componentDidMount() {
+    var container = ReactDOM.findDOMNode(this.refs.welcomeSidebar);
+    console.log("sidebar: ", container)
+    PerfectScrollbar.initialize(container);
+  }
+
   render() {
     let { openFeedbackSideBar } = bindActionCreators(actions, this.props.dispatch);
 
@@ -35,17 +45,18 @@ class WelcomeSidebar extends SyncryptComponent {
 
     return(
       <Sidebar header={header}>
-        <div className="welcome-sidebar">
+        <div className="welcome-sidebar" ref="welcomeSidebar">
           <h1>Welcome, {this.props.user.first_name}!</h1>
           <h2>
             Thanks for using the Alpha version of Syncrypt.
           </h2>
           <p>
-            As much as we would like to give you a hassle free experience,
-            in this early stage you almost certainly will run into issues
-            with this program. We appreciate any kind of feedback, including
-            bug reports and ideas for UI/UX improvement.
+            As much as we'd like to give you a hassle-free experience, at this
+            early stage you'll almost certainly run into issues with this
+            program. We appreciate any kind of feedback, including bug reports
+            and ideas for UI/UX improvement.
           </p>
+
           <ul>
             <li>
               <IconButton icon="feedback"
@@ -81,6 +92,33 @@ class WelcomeSidebar extends SyncryptComponent {
               </p>
             </div> ) : <p>Checking for latest version...</p>
           }
+
+          <Collapsible trigger="User Interface Help ▼" triggerWhenOpen="User Interface Help ▲">
+            <div className="help-text">
+              <p>
+                You can start creating new vaults (or adding existing vaults you
+                have created before) by clicking on the <span className="plus-icon-inline"></span> button on the left.
+                <br/>
+                Once you've added vaults, you can inspect their details by clicking
+                on the vault card. A vault specific sidebar will open and will show
+                you the users that have access to it. You can also add users to a
+                vault there.
+              </p>
+              <p>
+                When adding a user to a vault, you will be prompted to select the
+                user's keys you want to give access to. We create a cryptographic
+                key pair for every device a user uses syncrypt on.
+                By default all of the user's keys will be added to the vault.
+              </p>
+              <p>
+                To the bottom you will see any vaults you have been invited to that
+                you currently don't have downloaded to your computer. You can
+                download them by clicking on their semi-transparent card and choose
+                a destination to save the vault to.
+              </p>
+            </div>
+          </Collapsible>
+
         </div>
       </Sidebar>
     );

package.json

@@ -119,6 +119,7 @@
     "postcss": "^5.2.5",
     "react": "^15.3.2",
     "react-bootstrap": "^0.29.5",
+    "react-collapsible": "^1.2.0",
     "react-dom": "^15.3.2",
     "react-redux": "^4.4.5",
     "react-router": "^2.8.1",