From c011881027846e434f0e676b2f8e3566b2492779 Mon Sep 17 00:00:00 2001
From: Camerin Figueroa <cam@camscode.com>
Date: Thu, 9 Jun 2022 21:27:51 -0400
Subject: [PATCH] Changed button style

---
 src/components/Bai.js       |  4 ++--
 src/components/css/App.css  | 29 +++++++++++++++++++++++++++++
 src/components/css/Bai.css  |  5 ++---
 src/components/css/Card.css |  2 +-
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/Bai.js b/src/components/Bai.js
index 72a0245..3d56f67 100644
--- a/src/components/Bai.js
+++ b/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>
         );
diff --git a/src/components/css/App.css b/src/components/css/App.css
index cffe44f..bb99752 100644
--- a/src/components/css/App.css
+++ b/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) {
diff --git a/src/components/css/Bai.css b/src/components/css/Bai.css
index b72d612..e773b8e 100644
--- a/src/components/css/Bai.css
+++ b/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 {
diff --git a/src/components/css/Card.css b/src/components/css/Card.css
index 8056bff..c38a153 100644
--- a/src/components/css/Card.css
+++ b/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;
 }