termMain and termExtended styling

dbdoyle182 · May 8, 2018 · 576de0a · 576de0a
1 parent 120353e
commit 576de0a
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 17 deletions.
diff --git a/client/src/components/CodeSandbox/CodeSandbox.css b/client/src/components/CodeSandbox/CodeSandbox.css
@@ -0,0 +1,32 @@
+.column {
+    margin: auto;
+    font-family: "Rubik", sans-serif;
+    font-size: 1.2rem;
+    color: #333;
+}
+
+.field {
+    display: inline-block;
+    text-align: center;
+    width:30%;
+    margin-bottom: 10px;
+}
+
+select {
+    font-family: "Rubik", sans-serif;
+    font-size: 1.1rem;
+
+}
+
+.ace_editor {
+    width: 100%;
+}
+
+.ace_content {
+    width: 100%;
+}
+
+.editor {
+    width: 100%;
+}
+
diff --git a/client/src/components/CodeSandbox/CodeSandbox.js b/client/src/components/CodeSandbox/CodeSandbox.js
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { render } from "react-dom";
 import brace from "brace";
 import AceEditor from "react-ace";
+import "./CodeSandbox.css"
 
 import "brace/mode/jsx";
 import "brace/mode/javascript";
@@ -123,7 +124,7 @@ class CodeSandbox extends Component {
       <div className="columns">
         <div className="column">
           <div className="field">
-            <label>Mode:</label>
+            <label>Mode</label>
             <p className="control">
               <span className="select">
                 <select
@@ -142,7 +143,7 @@ class CodeSandbox extends Component {
           </div>
 
           <div className="field">
-            <label>Theme:</label>
+            <label>Theme</label>
             <p className="control">
               <span className="select">
                 <select
@@ -161,15 +162,15 @@ class CodeSandbox extends Component {
           </div>
 
           <div className="field">
-            <label>Font Size:</label>
+            <label>Font Size</label>
             <p className="control">
               <span className="select">
                 <select
                   name="Font Size"
                   onChange={this.setFontSize}
                   value={this.state.fontSize}
                 >
-                  {[14, 16, 18, 20, 24, 28, 32, 40].map(lang => (
+                  {[14, 16, 18, 20, 24].map(lang => (
                     <option key={lang} value={lang}>
                       {lang}
                     </option>
@@ -182,9 +183,10 @@ class CodeSandbox extends Component {
         <div className="examples column">
           <h2>Code Editor</h2>
           <AceEditor
+            className="editor"
             mode={this.state.mode}
             theme={this.state.theme}
-            name="blah2"
+            name="Code Editor"
             onLoad={this.onLoad}
             onChange={this.onChange}
             onSelectionChange={this.onSelectionChange}

diff --git a/client/src/components/Modal/Modal.js b/client/src/components/Modal/Modal.js
@@ -17,18 +17,12 @@ class Modal extends Component {
 
   render() {
     const actions = [
-      <FlatButton label="Cancel" primary={true} onClick={this.handleClose} />,
-      <FlatButton
-        label="Submit"
-        primary={true}
-        disabled={true}
-        onClick={this.handleClose}
-      />
+      <FlatButton label="Close" primary={true} onClick={this.handleClose} />,
     ];
 
     return (
       <div>
-        <RaisedButton label="Code" onClick={this.handleOpen} />
+        <RaisedButton label="Code Editor" onClick={this.handleOpen} />
         <Dialog
           title="Code Sandbox"
           actions={actions}

diff --git a/client/src/components/Modal/index.js b/client/src/components/Modal/index.js
@@ -0,0 +1 @@
+export { default } from "./Modal";
diff --git a/client/src/components/TermExtended/TermExtended.css b/client/src/components/TermExtended/TermExtended.css
@@ -4,6 +4,7 @@
   margin: 15px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   width: 100%;
+  padding-bottom: 15px;
 }
 
 .termExtended h3 {
@@ -24,6 +25,13 @@
   text-align: left;
 }
 
+.editDefinition {
+    width: 95%;
+    height: 100px;
+    font-size: 1.2rem;
+    margin-top: 5px;
+}
+
 .termExtended:hover {
   transition: all 0.3s ease-out;
   box-shadow: -2px 8px 22px 0 rgba(0, 0, 0, 0.15);

diff --git a/client/src/components/TermExtended/TermExtended.js b/client/src/components/TermExtended/TermExtended.js
@@ -1,11 +1,14 @@
 import React from "react";
 import "./TermExtended.css";
+import Modal from "../Modal";
+
 
 const TermExtended = props => (
     <div className="termExtended">
             <h3>Extended Definition: {props.word}</h3>
-            {props.editTerm ? <textarea style={{ width: '80%', height: '100px'}} onChange={props.handleChange} value={props.definition} name='definition'></textarea> 
+            {props.editTerm ? <textarea className="editDefinition" onChange={props.handleChange} value={props.definition} name='definition'></textarea> 
             : <p>{props.definition}</p>}
+            <Modal />
     </div>
 );
 

diff --git a/client/src/components/TermMain/TermMain.css b/client/src/components/TermMain/TermMain.css
@@ -21,6 +21,23 @@
   font-family: "Rubik", sans-serif;
 }
 
+.editDefinition {
+    width: 100%;
+    height: 100px;
+    font-size: 1.2rem;
+}
+
+.termMain button {
+    display: inline-block;
+    font-size: 1rem;
+    line-height: 1.8rem;
+    font-family: "Rubik", sans-serif;
+    padding: 3px 8px;
+    border: 1.5px solid white;
+    color: white;
+    background-color: #015249;
+  }
+
 .termMain:hover {
   transition: all 0.3s ease-out;
   box-shadow: -2px 8px 22px 0 rgba(0, 0, 0, 0.15);

diff --git a/client/src/components/TermMain/TermMain.js b/client/src/components/TermMain/TermMain.js
@@ -4,10 +4,10 @@ import "./TermMain.css";
 const TermMain = (props) => (
     <div className="termMain">
             <h2>{props.word}</h2>
-            {props.edit ? <textarea style={{ width: '80%', height: '100px'}} onChange={props.handleChange} value={props.summary} name='summary'></textarea>
+            {props.edit ? <textarea className="editDefinition" onChange={props.handleChange} value={props.summary} name='summary'></textarea>
             : <p>{props.summary}</p>}
-            {props.admin && props.edit === false && <button onClick={props.editWord}>Edit Term</button>}
-            {props.admin && props.edit && <button onClick={props.handleSubmit}>Submit</button>}
+            {props.admin && props.edit === false && <button className="button" onClick={props.editWord}>Edit Term</button>}
+            {props.admin && props.edit && <button className="button" onClick={props.handleSubmit}>Submit</button>}
     </div>
 );