make the start button greyed out when the database creation hasn't fniished yet

Author: tayabsoomro

frontend/src/modules/analysis/analysis-data/analysis-data.component.tsx

@@ -271,7 +271,7 @@ const AnalysisDataComponent: FunctionComponent<IAnalysisDataProps> = ({ data })
                                     overlay={<Tooltip id="database-not-found-tooltip">Database not found</Tooltip>}
                                 >
                                     <span>
-                                        <button className="btn btn-outline-primary nano-btn" disabled>
+                                        <button className="btn btn-outline-grey nano-btn" disabled>
                                             <i className="fas fa-play"></i> Start Analysis
                                         </button>
                                     </span>

frontend/src/styles/theme.css

@@ -172,6 +172,27 @@ a:hover {
   border-color: var(--ont-danger);
 }
 
+.btn-grey {
+  color: var(--ont-black);
+  background-color: var(--ont-light-gray);
+  border-color: var(--ont-gray);
+}
+
+.btn-grey:hover, .btn-grey:focus {
+  color: var(--ont-white);
+  background-color: var(--ont-gray);
+}
+
+.btn-outline-grey {
+  color: var(--ont-black);
+  background-color: transparent;
+  border: 1px solid var(--ont-black);
+}
+.btn-outline-grey:hover, .btn-outline-grey:focus {
+  color: var(--ont-white);
+  background-color: var(--ont-gray);
+}
+
 .btn-outline-primary {
   color: var(--ont-primary);
   background-color: transparent;