From 58925dce9c2e86cb3e4fdd1d7bfdab6288998985 Mon Sep 17 00:00:00 2001
From: DJ2LS <75909252+DJ2LS@users.noreply.github.com>
Date: Fri, 10 Sep 2021 17:09:16 +0200
Subject: [PATCH] decreased app height and readability optimization

---
 gui/src/index.html | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/gui/src/index.html b/gui/src/index.html
index 89f7dc9e..4cebca41 100644
--- a/gui/src/index.html
+++ b/gui/src/index.html
@@ -73,8 +73,8 @@
          <div class="row">
             <div class="col">
                <div class="card text-dark bg-light mb-0" >
-                  <div class="card-header p-2 p-1">
-                     1. AUDIO
+                  <div class="card-header p-1">
+                     <strong>Step 1: AUDIO</strong>
                   </div>
                   <div class="card-body p-2">
                      <div class="input-group  input-group-sm mb-1">
@@ -101,8 +101,8 @@
             </div>
             <div class="col">
                <div class="card text-dark bg-light mb-0">
-                  <div class="card-header p-2">
-                     2. RADIO
+                  <div class="card-header p-1">
+                     <strong>Step 2: RADIO</strong>
                   </div>
                   <div class="card-body p-2">
                      <div class="input-group  input-group-sm mb-1">
@@ -412,7 +412,7 @@
             </div>
             <div class="col">
                <div class="card text-dark bg-light mb-0" >
-                  <div class="card-header p-2">3. TNC</div>
+                  <div class="card-header p-1"><strong>Step 3: TNC</strong></div>
                   <div class="card-body p-2">
                      <!--
                         <div class="input-group input-group-sm mb-1">
@@ -478,7 +478,7 @@
          <div class="row">
             <div class="col">
                <div class="card text-dark bg-light mb-1">
-                  <div class="card-header p-2">MY STATION</div>
+                  <div class="card-header p-1"><strong>MY STATION</strong></div>
                   <div class="card-body p-2">
                      <div class="row">
                         <div class="col-md-auto">
@@ -508,7 +508,7 @@
             </div>
             <div class="col">
                <div class="card text-dark bg-light mb-1">
-                  <div class="card-header p-2">PING & CQ</div>
+                  <div class="card-header p-1"><strong>PING & CQ</strong></div>
                   <div class="card-body p-2">
                      <div class="row">
                         <div class="col-md-auto">
@@ -539,23 +539,23 @@
          <div class="row">
             <div class="col">
                <div class="card text-dark bg-light mb-1" >
-                  <div class="card-header p-2">
+                  <div class="card-header p-1">
                      <div class="btn-group btn-group-sm" role="group" aria-label="waterfall-scatter-switch toggle button group">
                         <input type="radio" class="btn-check" name="waterfall-scatter-switch" id="waterfall-scatter-switch1" autocomplete="off" checked>
-                        <label class="btn btn-outline-secondary" for="waterfall-scatter-switch1">WATERFALL</label>
+                        <label class="btn btn-sm btn-outline-secondary" for="waterfall-scatter-switch1"><strong>WATERFALL</strong></label>
                         <input type="radio" class="btn-check" name="waterfall-scatter-switch" id="waterfall-scatter-switch2" autocomplete="off">
-                        <label class="btn btn-outline-secondary" for="waterfall-scatter-switch2">SCATTER</label>
+                        <label class="btn btn-sm btn-outline-secondary" for="waterfall-scatter-switch2"><strong>SCATTER</strong></label>
                      </div>
                   </div>
-                  <!--<div class="card-body p-2">-->
-                  <canvas id="waterfall" style="position: relative; z-index: 2;"></canvas>
-                  <canvas id="scatter" style="position: relative; z-index: 1;"></canvas>
-                  <!-- </div>-->
+                  <div class="card-body p-1" style="height: 278px">
+                    <canvas id="waterfall" style="position: relative; z-index: 2;"></canvas>
+                    <canvas id="scatter" style="position: relative; z-index: 1;"></canvas>
+                  </div>
                </div>
             </div>
             <div class="col">
                <div class="card text-dark bg-light mb-1" style="height: 325px">
-                  <div class="card-header p-2">HEARD STATIONS</div>
+                  <div class="card-header p-1"><strong>HEARD STATIONS</strong></div>
                   <div class="card-body p-2">
                      <!-- START OF TABLE FOR HEARD STATIONS -->
                      <table class="table table-sm">