Changed button style

src/components/Bai.js

@@ -63,7 +63,7 @@ class Bai extends React.Component {
         <div className="content">
             <h1>Would you like to download the model?</h1>
             <p>By clicking Accept below, you will download the model which may be between 100 mb in size to 1 gb.</p>
-            <button className={this.props.loading?"hide":""} onClick={()=>{this.props.loadingModel();this.props.downloadModel()}}>Accept Download</button>
+            <button className={`btn ${this.props.loading?"hide":""}`} onClick={()=>{this.props.loadingModel();this.props.downloadModel()}}>Accept Download</button>
             <h2>{this.props.loading}</h2>
             <ProgressBar progress={this.props.downloadProgress}/>
             <h2>{this.props.loading?this.props.downloadProgress+"%":""}</h2>
@@ -83,7 +83,7 @@ class Bai extends React.Component {
 
             <input type='file' id="fileSubmit" onChange={({target}) => this.fileUpload(target, this.props.predict)} />
 
-            <button onClick={()=>{document.getElementById('fileSubmit').click();}}>Upload Image</button>
+            <button className='btn' onClick={()=>{document.getElementById('fileSubmit').click();}}>Upload Image</button>
             
         </div>
         );

src/components/css/App.css

@@ -37,6 +37,35 @@ html, body {
     border-width: 1px;
     background-color: #373747;
     padding: 6px;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    width: fit-content;
+    cursor: pointer;
+}
+.btn:hover {
+    color: #C3C0C0;
+    background-color: #363643;
+    border-color: #C3C0C0;
+}
+
+.btn.mar-la {
+    margin-left: auto;
+}
+
+.btn.mar-ra {
+    margin-right: auto;
+}
+
+.btn.btn-compact-right {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+.btn.btn-compact-left {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 @media only screen and (max-width: 600px) {

src/components/css/Bai.css

@@ -42,12 +42,11 @@
     font-size: 24px;
     margin-left: auto;
     margin-right: auto;
-    background-color: #4f5f49;
+    /*background-color: #4f5f49;*/
+    color: white;
     border-style: none;
     border-radius: 5px;
     padding: 15px;
-    color: white;
-
 }
 
 .Bai input {

src/components/css/Card.css

@@ -14,7 +14,7 @@
 
 .card .content-box {
     text-align:left;
-    font-size:xx-large;
+    font-size:x-large;
     margin-right: 2rem;
     margin-top: 2rem;
 }