Added Bulma for restyling, removed yarn because it stopped installing correctly.

package.json

@@ -22,11 +22,13 @@
   "homepage": "https://github.com/Alamantus/Lexiconga#readme",
   "dependencies": {
     "babel-polyfill": "^6.13.0",
+    "bulma": "^0.2.3",
     "json-query": "^2.2.0",
     "marked": "^0.3.6",
     "papaparse": "^4.1.2",
     "react": "^15.3.2",
-    "react-dom": "^15.3.2"
+    "react-dom": "^15.3.2",
+    "react-select": "^1.0.0-rc.2"
   },
   "devDependencies": {
     "babel-core": "^6.14.0",

src/components/Button.jsx

@@ -8,7 +8,7 @@ export class Button extends React.Component {
 
   // Always give the Button a 'clickable' class and then add any others.
   processClasses() {
-    var classes = 'clickable';
+    var classes = 'button is-small';
 
     if (this.props.classes) {
       classes += ' ' + this.props.classes;
@@ -19,12 +19,12 @@ export class Button extends React.Component {
 
   render() {
     return (
-      <span
+      <a
         id={this.props.id}
         className={this.processClasses()}
         onClick={this.props.action}>
         {this.props.label}
-      </span>
+      </a>
     );
   }
 }

src/components/Dictionary.jsx

@@ -27,7 +27,7 @@ export class Dictionary extends React.Component {
 
       return <div>{words}</div>;
     } else {
-      return <h3>No words yet!</h3>;
+      return <h3 className='title is-3'>No words yet!</h3>;
     }
   }
 

src/components/FixedPage.jsx

@@ -18,20 +18,20 @@ export class FixedPage extends React.Component {
 
   conditionalDisplay() {
     if (this.state.display) {
-      let contentClass = 'fixed-page-content';
+      let contentClass = 'modal-content fixed-page-content';
 
       if (this.props.contentClass) {
         contentClass += ' ' + this.props.contentClass;
       }
 
       return (
-        <div id={this.props.id} className='fixed-page-container'>
+        <div id={this.props.id} className='modal is-active'>
 
-          <div className='fixed-page-background-fade' onClick={this.hide}></div>
+          <div className='modal-background' onClick={this.hide}></div>
 
           <div className={contentClass}>
             
-            <Button classes='right-button'
+            <Button classes='modal-close'
               action={this.hide}
               label='Close' />
 

src/components/Header.jsx

@@ -77,7 +77,7 @@ export class Header extends React.Component {
 
   render() {
     return (
-      <header>
+      <header className='header'>
 
         <div id="headerPadder">
 

src/components/Input.jsx

@@ -40,7 +40,7 @@ export class Input extends React.Component {
     if (this.props.helperLink) {
       if (this.props.helperLink.url) {
         return (
-          <a className='clickable inline-button' href={this.props.helperLink.url} target='_blank' title={this.props.helperLink.hover}>
+          <a className='button is-small inline-button' href={this.props.helperLink.url} target='_blank' title={this.props.helperLink.hover}>
             {this.props.helperLink.label}
           </a>
         );

src/components/Word.jsx

@@ -34,7 +34,7 @@ export class Word extends React.Component {
 
   showName() {
     return (
-      <div className='name'>
+      <div className='title is-4 name'>
         {this.props.name}
       </div>
     );

src/index.jsx

@@ -246,45 +246,50 @@ class Lexiconga extends React.Component {
     return (
       <div>
         <Header />
-
+        <section className='section columns'>
-        <div className='left-column'>
+          <div className='column is-one-third'>
-          <div className='floating-form'>
+            <div className='floating-form'>
-            <WordForm
+              <WordForm
-              partsOfSpeech={this.state.settings.partsOfSpeech}
+                partsOfSpeech={this.state.settings.partsOfSpeech}
-              addWord={(wordObject) => this.addWord(wordObject)}
+                addWord={(wordObject) => this.addWord(wordObject)}
-              submitLabel='Add Word' />
+                submitLabel='Add Word' />
+            </div>
           </div>
-        </div>
 
-        <div className='center-column'>
+          <div className='column is-half'>
-          <Button
+            <Button
-            action={() => this.saveLocalDictionary()}
+              action={() => this.saveLocalDictionary()}
-            label='Save Dictionary' />
+              label='Save Dictionary' />
 
-          <Button
+            <Button
-            action={() => this.loadLocalDictionary()}
+              action={() => this.loadLocalDictionary()}
-            label='Load Dictionary' />
+              label='Load Dictionary' />
 
-          <EditDictionaryForm
+            <EditDictionaryForm
-            details={this.state.details}
+              details={this.state.details}
-            settings={this.state.settings}
+              settings={this.state.settings}
-            saveChanges={(changesObject) => this.saveChanges(changesObject)} />
+              saveChanges={(changesObject) => this.saveChanges(changesObject)} />
 
-          <h1 className="dictionary-name">
+            <h1 className="title is-1 dictionary-name">
-            {this.state.details.name} {this.state.details.listTypeName}
+              {this.state.details.name} {this.state.details.listTypeName}
-          </h1>
+            </h1>
 
-          <InfoDisplay
+            <InfoDisplay
-            details={this.state.details}
+              details={this.state.details}
-            numberOfWords={this.state.words.length}
+              numberOfWords={this.state.words.length}
-            isComplete={this.state.settings.isComplete} />
+              isComplete={this.state.settings.isComplete} />
 
-          <Dictionary
+            <Dictionary
-            details={this.state.details}
+              details={this.state.details}
-            words={this.state.words}
+              words={this.state.words}
-            settings={this.state.settings}
+              settings={this.state.settings}
-            updateWord={(wordId, wordObject) => this.updateWord(wordId, wordObject)} />
+              updateWord={(wordId, wordObject) => this.updateWord(wordId, wordObject)} />
-        </div>
+          </div>
+
+          <div className='column ad-column'>
+
+          </div>
+        </section>
 
         <Footer />
       </div>

src/sass/_lexiconga.scss

@@ -17,7 +17,7 @@ td, th {
 }
 
 a {
-	text-decoration: underline;
+	// text-decoration: underline;
 	color: #a01000;
 }
 

src/sass/_variables.scss

@@ -7,3 +7,6 @@ $max-column-width: 800px;
 $button-color: #dcb078;
 $dictionary-info-color: #f2d5b2;
 $footer-height: 32px;
+
+// Bulma Variables
+$radius: 0;

src/sass/main.scss

@@ -1,4 +1,6 @@
 @import 'variables';
+@import '../../node_modules/bulma/bulma';
 @import 'styles';
 @import 'lexiconga';
 @import 'mobile';
+@import '../../node_modules/react-select/dist/react-select';