v0.0.2 - webview and other updates

app/components/Content/Content.scss

@@ -2,6 +2,8 @@
 
 .content {
   flex: 1;
+  display: flex;
+  flex-direction: column;
 
   .path-container {
     display: flex;
@@ -12,13 +14,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $blue;
+    background: $dark-blue--3;
     transition: background 0.2s linear;
     outline: none;
     padding: 0 15px;
+    border-bottom: 2px solid lighten($dark-blue--3, 10%);
+    font-size: 14px;
+    color: $blue--lighter;
 
     &:hover {
-      background: darken($blue, 5%);
+      background: lighten($dark-blue--3, 5%);
     }
   }
 
@@ -28,9 +33,23 @@
     border: none;
     color: $blue--lighter;
     padding: 5px;
+    font-size: 14px;
 
     &::-webkit-input-placeholder {
-      color: $dark-blue--2;
+      color: $gray;
     }
   }
+
+  .webview {
+    flex: 1;
+  }
+
+  .noSite {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $gray;
+  }
+
 }

app/components/Content/Content.tsx

@@ -12,6 +12,9 @@ interface Props {
 @inject('AppState')
 @observer
 export class Content extends React.Component<Props, any> {
+
+  private webviewRef: any;
+
   constructor() {
     super();
     this.state = {
@@ -19,6 +22,12 @@ export class Content extends React.Component<Props, any> {
     };
   }
 
+  public componentDidMount(): void {
+    this.webviewRef.addEventListener('dom-ready', () => {
+      this.webviewRef.insertCSS(injectedCSS);
+    });
+  }
+
   private onFolderSelect(e: React.ChangeEvent<HTMLInputElement>): void {
     const path: string = _.get(e, `target.files[0].path`);
 
@@ -32,20 +41,15 @@ export class Content extends React.Component<Props, any> {
   }
 
   public render(): any {
-    const { selectedExpansion } = this.props.AppState;
+    const { selectedExpansion, selectedServer } = this.props.AppState;
+    const website = _.get(selectedServer, 'website');
 
     return (
       <div className="content">
         <div className="path-container">
-          <input
-            type="text"
-            className="content-input"
-            placeholder="Your wow directory"
-            value={selectedExpansion.directory}
-            onChange={this.onInputChange.bind(this)}
-          />
           <label htmlFor="folder-browser" className="content-button">
-            Browse
+            {/* <span>Browse</span> */}
+            <i className="fa fa-folder-open"/>
           </label>
           <input
             id="folder-browser"
@@ -54,8 +58,49 @@ export class Content extends React.Component<Props, any> {
             onChange={this.onFolderSelect.bind(this)}
             style={{ display: 'none' }}
           />
+          <input
+            type="text"
+            className="content-input"
+            placeholder="Your WoW directory"
+            value={selectedExpansion.directory}
+            onChange={this.onInputChange.bind(this)}
+          />
         </div>
+        <webview
+          id="foo"
+          className="webview"
+          src={website}
+          ref={(r: any) => this.webviewRef = r}
+          style={{ display: website ? null : 'none' }}
+        />
+        {!website && <div className="noSite"><h2>No Website Available</h2></div>}
       </div>
     );
   }
 }
+
+const injectedCSS: string = `
+  ::-webkit-scrollbar-track
+  {
+    border-radius: 10px;
+    background-color: none;
+  }
+
+  ::-webkit-scrollbar
+  {
+    width: 10px;
+    height: 10px;
+    background-color: none;
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb
+  {
+    border-radius: 10px;
+    background-color: #141d27;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+`;