wip - add/edit server with modal

app/components/Header/Header.tsx

@@ -41,7 +41,6 @@ export class Header extends React.Component<Props, any> {
     return (
       <div className="header">
         <div className="header__version">
-          {/* <i className="fa fa-2x fa-github"/> */}
           <img src={headerIcon}/>
           <span style={{ fontSize: '10px' }}>v{VERSION}</span>
         </div>

app/components/Modal/Modal.scss

@@ -0,0 +1,50 @@
+@import '../../scss/variables';
+
+.CustomModal--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.CustomModal__base {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.CustomModal__content {
+  height: 400px;
+  width: 400px;
+  background: $dark-blue--1;
+  border-radius: 4px;
+  z-index: 200;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+}
+
+.CustomModal__overlay {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background: $dark-blue;
+  opacity: 0.8;
+}
+
+.CustomModal__header {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  background: $dark-blue--2;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}

app/components/Modal/Modal.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import './Modal.scss';
+
+interface Props {
+  isOpen: boolean;
+  title: string;
+  onClose?(): any;
+}
+
+export class Modal extends React.Component<Props, any> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public render(): any {
+    const { isOpen, onClose, title } = this.props;
+
+    const hiddenClass = !isOpen ? 'CustomModal--hidden' : '';
+
+    return (
+      <div className={'CustomModal__base ' + hiddenClass}>
+        <div className="CustomModal__content">
+          <div className="CustomModal__header">
+            <h3>{title}</h3>
+          </div>
+          {this.props.children}
+        </div>
+        <div className="CustomModal__overlay" onClick={onClose.bind(this)} />
+      </div>
+    );
+  }
+}

app/components/ServerList/ServerList.scss

@@ -71,4 +71,16 @@
     }
   }
 
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    flex: 1;
+  }
+
+  .button-group {
+    align-self: flex-end;
+    justify-content: flex-end;
+  }
+
 }

app/components/ServerList/ServerList.tsx

@@ -4,6 +4,7 @@ import { exec } from 'child_process';
 import { inject, observer } from 'mobx-react';
 import { AppState } from '../../state/AppState';
 import { toast } from '../../util';
+import { Modal } from '../Modal/Modal';
 
 import './ServerList.scss';
 
@@ -11,23 +12,19 @@ interface Props {
   AppState?: AppState;
 }
 
+interface State {
+  showModal: boolean;
+}
+
 @inject('AppState')
 @observer
-export class ServerList extends React.Component<Props, any> {
+export class ServerList extends React.Component<Props, State> {
+
   constructor(props: Props) {
     super(props);
-  }
-
-  private renderItems(): any {
-    const { AppState } = this.props;
-    return this.props.AppState.selectedExpansion.servers.map((server, index) => {
-      const selected = AppState.selectedExpansion.selectedServerIndex === index ? ' selected' : '';
-      return (
-        <div key={index} className={'list-item' + selected} onClick={() => AppState.setSelectedServerIndex(index)}>
-          {server.name}
-        </div>
-      );
-    });
+    this.state = {
+      showModal: false,
+    };
   }
 
   private async play(): Promise<void> {
@@ -72,14 +69,60 @@ export class ServerList extends React.Component<Props, any> {
     });
   }
 
+  private renderItems(): any {
+    const { AppState } = this.props;
+    return this.props.AppState.selectedExpansion.servers.map((server, index) => {
+      const selected = AppState.selectedExpansion.selectedServerIndex === index ? ' selected' : '';
+      return (
+        <div key={index} className={'list-item' + selected} onClick={() => AppState.setSelectedServerIndex(index)}>
+          {server.name}
+        </div>
+      );
+    });
+  }
+
+  private renderModal(): any {
+    return (
+      <Modal
+        isOpen={this.state.showModal}
+        onClose={() => this.setState({ showModal: false })}
+        title="Add a server"
+      >
+        <div className="modal-content">
+          <div style={{ flex: 1 }}>
+            <div className="form-group">
+              <label className="form-group__label">Server Name</label>
+              <input className="input" placeholder="Awesome Server Name"/>
+            </div>
+            <div className="form-group">
+              <label className="form-group__label">Realm List</label>
+              <input className="input" placeholder="logon.server.com"/>
+            </div>
+            <div className="form-group">
+              <label className="form-group__label">Website URL</label>
+              <input className="input" placeholder="https://www.awesomeserver.com"/>
+            </div>
+          </div>
+
+          <div className="button-group">
+            <button className="button" onClick={() => this.setState({ showModal: false })}>Cancel</button>
+            <button className="button button--success">Save</button>
+          </div>
+
+        </div>
+      </Modal>
+    );
+  }
+
   public render(): any {
     const { selectedServer } = this.props.AppState;
 
     return (
       <div className="server-list">
+        {this.renderModal()}
         <div className="server-list-heading">
           <div>Servers</div>
-          <i className="fa fa-plus" />
+          <i className="fa fa-plus" onClick={() => this.setState({ showModal: true })}/>
         </div>
         <div className="item-container">{this.renderItems()}</div>
         <div className="start-button-container">

app/scss/style.scss

@@ -31,22 +31,72 @@ a {
   }
 }
 
-::-webkit-scrollbar-track
-{
-	border-radius: 10px;
+.input {
+  padding: 10px;
+  border: 0;
+  border-radius: 4px;
+  background: $dark-blue;
+  width: 100%;
+  color: $white;
+  border: 1px solid darken($dark-blue, 5%);
+
+  &::-webkit-input-placeholder {
+    color: $dark-blue--3;
+  }
+}
+
+.form-group {
+  & + & {
+    margin-top: 20px;
+  }
+}
+
+.form-group__label {
+  font-size: 12px;
+  line-height: 20px;
+  color: $gray;
+  padding-left: 5px;
+}
+
+.button {
+  border: 0;
+  padding: 10px;
+  border-radius: 4px;
+  background: darken($gray, 5%);
+  transition: all 0.2s linear;
+  color: $white;
+  cursor: pointer;
+
+  &:hover {
+    background: $gray;
+  }
+
+  & + & {
+    margin-left: 5px;
+  }
+}
+
+.button--success {
+  background: $blue;
+
+  &:hover {
+    background: $blue--lighter;
+  }
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
   background-color: none;
 }
 
-::-webkit-scrollbar
-{
-	width: 5px;
-	height: 5px;
-	background-color: none;
-	border-radius: 10px;
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background-color: none;
+  border-radius: 10px;
 }
 
-::-webkit-scrollbar-thumb
-{
-	border-radius: 10px;
-	background-color: darken($dark-blue, 5%);
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: darken($dark-blue, 5%);
 }