hide myBEDSet submit btn, styling

src/createBedSet.jsx

@@ -8,13 +8,13 @@ import { FaTrashAlt } from "react-icons/fa";
 import { FaDownload } from "react-icons/fa";
 import Header from "./header";
 import VersionsSpan from "./versionsSpan";
-import axios from "axios";
+// import axios from "axios";
 import bedhost_api_url from "./const/server";
 import "./style/home.css";
 
-const api = axios.create({
-  baseURL: bedhost_api_url,
-});
+// const api = axios.create({
+//   baseURL: bedhost_api_url,
+// });
 
 export default class CreateBedSet extends React.Component {
   constructor() {
@@ -34,18 +34,18 @@ export default class CreateBedSet extends React.Component {
   }
 
   async createBedSet() {
+    // hide before process myBEDSet function is complete 
+    // let md = await api.post(
+    //   "/api/bedset/create/" +
+    //   this.state.myBedSetName +
+    //   "/" +
+    //   this.state.myBedSetIdx
+    // ).then(({ data }) => data)
 
-    let md = await api.post(
-      "/api/bedset/create/" +
-      this.state.myBedSetName +
-      "/" +
-      this.state.myBedSetIdx
-    ).then(({ data }) => data)
-
-    alert("Your BED set has been submitted for processing!")
+    // alert("Your BED set has been submitted for processing!")
 
     localStorage.clear();
-
+    window.location.reload(true);
   }
 
   handleChange(e) {
@@ -78,12 +78,9 @@ export default class CreateBedSet extends React.Component {
         <div
           className="conten-body"
         >
-          <Container style={{ width: "75%" }} fluid className="p-4">
-            <h1>My BED Set</h1>
-          </Container>
-
           {this.state.myBedSet ? (
             <Container style={{ width: "75%" }} fluid className="p-4">
+              <h1>My BED Set</h1>
               <MaterialTable
                 title="My BED Set"
                 icons={tableIcons}
@@ -96,12 +93,12 @@ export default class CreateBedSet extends React.Component {
                   rowData => ({
                     icon: () => <a
                       href={bedhost_api_url + "/api/bed/" + rowData.md5sum + "/file/bed"}
-                    ><FaDownload color='#e76f51' /></a>,
+                    ><FaDownload className="my-icon" /></a>,
                     tooltip: 'Save User',
                     onClick: (event, rowData) => alert("Download " + rowData.name)
                   }),
                   {
-                    icon: () => <FaTrashAlt color='#e76f51' />,
+                    icon: () => <FaTrashAlt className="my-icon" />,
                     tooltip: 'Delete BED file',
                     onClick: (event, rowData) =>
                       new Promise((resolve, reject) => {
@@ -145,21 +142,23 @@ export default class CreateBedSet extends React.Component {
                 className="float-right btn btn-sm my-btn"
                 onClick={this.createBedSet.bind(this)}
               >
-                Create My BED Set
+                Empty My BED Set
               </button>
 
+              {/* 
+                // hide before process myBEDSet function is complete
               <input
                 type="text"
                 placeholder="My BED set name"
                 style={{ height: "33px", fontSize: 12 }}
                 className="float-right"
                 value={this.state.myBedSetName}
                 onChange={this.handleChange.bind(this)}
-              />
+              /> */}
             </Container>
           ) : (
             <Container style={{ width: "75%" }} fluid className="p-4">
-              <h1 >Your BED set cart is empty. </h1>
+              <h1 style={{ color: "#e76f51" }} >Your BED set cart is empty. </h1>
             </Container>
           )
           }

src/searchResult.jsx

@@ -329,7 +329,7 @@ export default class ResultsBed extends React.Component {
             data={this.state.data}
             actions={[
               {
-                icon: () => < FaFolderPlus color='#e76f51' />,
+                icon: () => < FaFolderPlus className="my-icon" />,
                 tooltip: 'add to your BED set',
                 onClick: (event, rowData) => this.addtoBedSet(rowData)
               }

src/style/home.css

@@ -1,76 +1,93 @@
-.header{
-    position:absolute;
-    left:0;
-    top:0;
-    right:0;
+.header {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
 }
 
-.footer{
-    left:0;
-    bottom:0;
-    right:0;
+.footer {
+    left: 0;
+    bottom: 0;
+    right: 0;
     font-size: small;
 }
 
-.conten-body{
+.conten-body {
     margin-top: 68px;
 }
 
 
 .list-group-item.active {
     z-index: 2;
     color: #fff;
-    background-color:teal;
+    background-color: teal;
     border-color: teal;
 }
 
 .home-link {
-    color:teal;
+    color: teal;
 }
+
 .home-link:hover {
     color: #e76f51;
 }
 
-.my-btn{
+.my-btn {
     color: #FFF;
-    background-color:#264653;
+    background-color: #264653;
     border-color: #264653;
 }
 
 .primary-btn:hover,
 .primary-btn:focus,
-.primary-btn.disabled, 
+.primary-btn.disabled,
 .primary-btn:disabled,
 .my-btn:hover,
 .my-btn:focus,
-.my-btn.disabled, 
-.my-btn:disabled{
+.my-btn.disabled,
+.my-btn:disabled {
     color: #FFF;
-    background-color:#e76f51;
-    border-color:#e76f51;
+    background-color: #e76f51;
+    border-color: #e76f51;
     opacity: 1
 }
 
-.primary-btn{
+.primary-btn {
     color: #FFF;
-    background-color:teal;
-    border-color:teal;
+    background-color: teal;
+    border-color: teal;
 }
 
-.btn-primary{
+.btn-primary {
     color: #FFF;
-    background-color:teal;
-    border-color:teal;
+    background-color: teal;
+    border-color: teal;
 }
 
-.btn-primary.focus, 
+.btn-primary.focus,
 .btn-primary:focus,
-.btn-primary.hover, 
+.btn-primary.hover,
 .btn-primary:hover,
-.btn-primary:not(:disabled):not(.disabled).active, 
+.btn-primary:not(:disabled):not(.disabled).active,
 .btn-primary:not(:disabled):not(.disabled):active,
-.show>.btn-primary.dropdown-toggle  {
+.show>.btn-primary.dropdown-toggle {
     color: #FFF;
-    background-color:#e76f51;
-    border-color:#e76f51;
+    background-color: #e76f51;
+    border-color: #e76f51;
+}
+
+.my-icon {
+    color: #264653;
+    background-color: rgba(255, 255, 255, 0);
+    border-color: rgba(255, 255, 255, 0);
+}
+
+.my-icon:hover,
+.my-icon:focus,
+.my-icon.disabled,
+.my-icon:disabled {
+    color: #e76f51;
+    background-color: rgba(255, 255, 255, 0);
+    border-color: rgba(255, 255, 255, 0);
+    opacity: 1
 }