From 20c8522399f479d6a55d9b7c41a86e278c5ffb0c Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Fri, 8 Dec 2017 13:24:50 -0700
Subject: [PATCH] Add some space between words

---
 .../{WordDisplay.jsx => WordDisplay/index.jsx}     | 14 +++++++-------
 .../{WordDisplay.scss => WordDisplay/styles.scss}  | 13 +++++++++++++
 2 files changed, 20 insertions(+), 7 deletions(-)
 rename src/components/display/{WordDisplay.jsx => WordDisplay/index.jsx} (93%)
 rename src/components/display/{WordDisplay.scss => WordDisplay/styles.scss} (80%)

diff --git a/src/components/display/WordDisplay.jsx b/src/components/display/WordDisplay/index.jsx
similarity index 93%
rename from src/components/display/WordDisplay.jsx
rename to src/components/display/WordDisplay/index.jsx
index fab6eb4..5e9cc36 100644
--- a/src/components/display/WordDisplay.jsx
+++ b/src/components/display/WordDisplay/index.jsx
@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
 import marked from 'marked';
 import swal from 'sweetalert2';
 
-import './WordDisplay.scss';
+import './styles.scss';
 
-import idManager from '../../managers/IDManager';
-import { Word } from '../../managers/Word';
+import idManager from '../../../managers/IDManager';
+import { Word } from '../../../managers/Word';
 
-import { WordForm } from '../management/WordForm';
+import { WordForm } from '../../management/WordForm';
 
 export class WordDisplay extends Component {
   constructor (props) {
@@ -90,9 +90,9 @@ export class WordDisplay extends Component {
       );
     }
     return (
-      <div className='card'>
+      <div className='word-card'>
 
-        <header className='card-header'>
+        <header className='word-card-header'>
           <div className='word-card-header-title'>
             <span className='word-name'>
               { word.name }
@@ -143,7 +143,7 @@ export class WordDisplay extends Component {
           </div>
         </header>
 
-        <section className='card-content'>
+        <section className='word-card-content'>
           <div className='content'>
             {
               (word.definition)
diff --git a/src/components/display/WordDisplay.scss b/src/components/display/WordDisplay/styles.scss
similarity index 80%
rename from src/components/display/WordDisplay.scss
rename to src/components/display/WordDisplay/styles.scss
index 0ad8131..5c1fb6f 100644
--- a/src/components/display/WordDisplay.scss
+++ b/src/components/display/WordDisplay/styles.scss
@@ -2,6 +2,19 @@
 @import '../../node_modules/bulma/sass/utilities/derived-variables';
 @import '../../node_modules/bulma/sass/components/card';
 
+.word-card {
+  @extend .card;
+
+  margin-bottom: 10px;
+
+  .word-card-header {
+    @extend .card-header;
+  }
+  .word-card-content {
+    @extend .card-content;
+  }
+}
+
 .word-card-header-title {
   @extend .card-header-title;