fix merge conflicts

README.md

@@ -5,7 +5,7 @@
 [![codecov](https://codecov.io/gh/fac-14/OSCEBossKey/branch/master/graph/badge.svg)](https://codecov.io/gh/fac-14/OSCEBossKey)
 
 Weeks 13-16 > Tech for Better project
-## [Run in the browser](https://reverent-ptolemy-d2df8c.netlify.com/)
+## [Run in the browser](https://oscebosskey.herokuapp.com)
 
 ## Instructions to run the program locally
 

__test__/removeHyphens.test.js

@@ -5,4 +5,6 @@ test("removeHyphens() should all hyphens from a string of text", () => {
   expect(removeHyphens("not the definition of insanity - e=mc2")).toEqual(
     "not the definition of insanity   e=mc2"
   );
+  expect(removeHyphens("")).toEqual("");
+  expect(removeHyphens(null)).toEqual(null);
 });

package.json

@@ -43,14 +43,14 @@
     "node-fetch": "^2.2.0",
     "nodemon": "^1.18.4",
     "react-testing-library": "^5.1.1",
+    "styled-components": "^4.0.2",
     "supertest": "^3.3.0"
   },
   "dependencies": {
     "airtable": "^0.5.7",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
-    "babel-plugin-styled-components": "^1.8.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
@@ -67,7 +67,6 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "sass": "^1.14.1",
-    "serve-favicon": "^2.5.0",
-    "styled-components": "^4.0.2"
+    "serve-favicon": "^2.5.0"
   }
 }

src/assets/index.scss

@@ -5,7 +5,6 @@
 // components
 @import "./universal-styles.scss";
 @import "../components/Navbar/navbar.scss";
-@import "../components/Pages/AddNew/style.scss";
 
 // pages
 @import "../components/Pages/Revision/style.scss";

src/assets/universal-styles.scss

@@ -33,3 +33,15 @@ body {
   text-align: center;
   padding: 32px 0;
 }
+
+textarea {
+  resize: none;
+  margin: 16px;
+  padding: 8px;
+  width: calc(100vw - 48px);
+  height: calc(100vh - 322px);
+  border: none;
+  font-size: 16px;
+  line-height: 1.2;
+  font-family: $text-font;
+}

src/components/Navbar/navbar.scss

@@ -18,6 +18,7 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
+  height: 100%;
 }
 
 #navbar img {

src/components/Pages/AddNew/AddTile.js

@@ -12,9 +12,9 @@ import TopBar from "../../TopBar/TopBar";
 import airtableQuery from "../../../utils/fetch";
 import removeWhitespace from "../../../utils/removeWhitespace";
 
-const StyledInstructionContainer = styled.div`
-  margin-top: 100px;
-`;
+// const StyledInstructionContainer = styled.div`
+//   margin-top: 100px;
+// `;
 
 const StyledAddNewBannerContainer = styled.div`
   margin-bottom: 16px;
@@ -23,15 +23,18 @@ const StyledAddNewBannerContainer = styled.div`
 export default class AddTile extends React.Component {
   state = {
     exam: this.props.match.params.exam,
-    station: ""
+    station: "",
+    tickDisplayed: false
   };
 
   submitTile = () => {
     airtableQuery(`/api/add-station/${removeWhitespace(this.state.station)}`);
   };
 
   userTypes = input => {
-    this.setState({ station: input });
+    input
+      ? this.setState({ station: input, tickDisplayed: true })
+      : this.setState({ station: "", tickDisplayed: false });
   };
 
   render() {
@@ -42,23 +45,25 @@ export default class AddTile extends React.Component {
           submitCase={this.submitTile}
           stationName={"add new"}
           station={this.state.station}
-          tickDisplayed={true}
+          tickDisplayed={this.state.tickDisplayed}
           addNewFlow={true}
         />
         <StyledInstructionContainer>
           <NewTileInput
             instructionText={"Add station"}
             userTypes={this.userTypes}
           />
-          <InstructionText text={"Add case"} />
         </StyledInstructionContainer>
-        <StyledAddNewBannerContainer>
-          <AddNewBanner
-            exam={this.state.exam}
-            station={this.state.station.replace(/\s/g, "-")}
-            submitStation={this.submitTile}
-          />
-        </StyledAddNewBannerContainer>
+        <InstructionText text={"Add case"} />
+        {this.state.station && (
+          <StyledAddNewBannerContainer>
+            <AddNewBanner
+              exam={this.state.exam}
+              station={this.state.station.replace(/\s/g, "-")}
+              submitStation={this.submitTile}
+            />
+          </StyledAddNewBannerContainer>
+        )}
       </React.Fragment>
     );
   }

src/components/Pages/AddNew/NewTileInput.js

@@ -7,6 +7,7 @@ import NewTileTextInput from "./NewTileTextInput";
 
 const StyledNewTileInputContainer = styled.div`
   margin-bottom: 16px;
+  margin-top: 100px;
 `;
 
 export default class NewTileInput extends React.Component {

src/components/TopBar/style.scss

@@ -0,0 +1,36 @@
+#topbar-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px;
+  height: 40px;
+  background-color: $darkgrey;
+  color: #fff;
+  font-family: $title-font;
+  text-transform: uppercase;
+  //border: 1px solid red;
+}
+
+#topbar-container #back,
+#topbar-container #complete {
+  padding: 0 16px;
+  border: none;
+  background-color: transparent;
+}
+
+#topbar-title {
+  flex: 1;
+  justify-content: flex-start;
+}
+
+#topbar-timer {
+  width: 60px;
+}
+
+#topbar img {
+  height: 20px;
+}

src/utils/removeHyphens.js

@@ -1,3 +1,3 @@
-const removeHyphens = string => string.replace(/-/g, " ");
+const removeHyphens = string => (string ? string.replace(/-/g, " ") : string);
 
 export default removeHyphens;