💎

client/src/App.css

@@ -1,20 +1,9 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+:root {
+  --color-primary: #282c34;
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: var(--color-primary);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -61,7 +50,7 @@
 }
 
 .loading-bar-container {
-  background: #282c34;
+  background: var(--color-primary);
   width: 100%;
   height: 30px;
   min-height: 30px;
@@ -74,7 +63,7 @@
 }
 
 .page-head {
-  background: #282c34;
+  background: var(--color-primary);
   color: white !important;
   margin-top: 0;
   padding: 1rem;
@@ -103,14 +92,41 @@
 }
 
 .ant-card {
-  border: 1px solid #0005;
+  border: 1px solid var(--color-primary);
   border-radius: 0.2rem;
 }
 
 .ant-card-head {
-  background: #333a;
+  background: var(--color-primary);
   color: white;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 0.2rem;
 }
+
+.session-toolbar {
+  justify-content: center;
+  width: 60%;
+  margin: 1rem auto;
+}
+
+.session-toolbar h3 {
+  font-weight: bold;
+  color: white;
+  margin-right: 1rem;
+}
+
+.slider {
+  margin: auto 1rem;
+}
+
+.toolbar {
+  padding: 0.5rem;
+  background: var(--color-primary);
+}
+
+.client-info {
+  justify-content: space-around;
+  width: 60%;
+  margin: 1rem auto;
+}