Style adjustment

Adjusted style and the status light: Added box-shadow and border for connected peer

src/dashboard.py

@@ -1122,9 +1122,7 @@ Dashboard Tools Related
 def get_ping_ip():
     config = request.form['config']
     sem.acquire()
-    
-    db = TinyDB('db/' + config_name + '.json')
-
+    db = TinyDB('db/' + config + '.json')
     html = ""
     for i in db.all():
         html += '<optgroup label="' + i['name'] + ' - ' + i['id'] + '">'
@@ -1158,8 +1156,6 @@ def ping_ip():
         }
         if returnjson['package_loss'] == 1.0:
             returnjson['package_loss'] = returnjson['package_sent']
-
-
         return jsonify(returnjson)
     except Exception:
         return "Error"

src/static/css/dashboard.css

@@ -117,22 +117,50 @@ body {
 
 .dot-running{
     background-color: #28a745!important;
+    box-shadow: 0 0 0 0.2rem #28a74545;
+}
+
+.h6-dot-running{
+    margin-left: 0.3rem;
 }
 
 .dot-stopped{
     background-color: #6c757d!important;
 }
 
+.card-running{
+    border-color: #28a745;
+}
 
 .info h6{
     line-break: anywhere;
 }
 
+.info .row .col-sm{
+    display: flex;
+    flex-direction: column;
+}
+
+.info .row .col-sm small{
+    display: flex;
+
+}
+
+.info .row .col-sm small strong:last-child(1){
+    margin-left: auto !important;
+}
+
 .btn-control{
     border: none !important;
     padding: 0 1rem 0 0;
 }
 
+.btn-control:active, .btn-control:focus{
+    background-color: transparent !important;
+    border: none !important;
+    box-shadow: none;
+}
+
 .share_peer_btn_group .btn-control{
     padding: 0 0 0 1rem;
 }
@@ -213,7 +241,7 @@ main{
     bottom: 3rem;
     right: 2rem;
     z-index: 99;
-    border-radius: 100px;
+    border-radius: 100px !important;
     padding: 10px 20px;
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
@@ -274,4 +302,24 @@ main{
 
 .key:hover{
     color: #007bff;
+}
+
+.card{
+    border-radius: 10px;
+}
+
+.peer_list .card .button-group{
+    height: 22px;
+}
+
+.form-control{
+    border-radius: 10px;
+}
+
+.btn{
+    border-radius: 8px;
+}
+
+.modal-content{
+    border-radius: 10px;
 }

src/templates/get_conf.html

@@ -109,7 +109,6 @@
                     <i class="bi bi-plus-circle-fill" style=""></i> Add Peer
                 </button>
             </div>
-            <hr>
 		</div>
 	</div>
 
@@ -126,26 +125,35 @@
             {% else %}
                 <div class="col-sm-6 col-lg-4">
             {% endif %}
-                <div class="card mb-3">
-                <div class="card-header">
+                <div class="card mb-3 card-{{i['status']}}">
+{#                <div class="card-header">#}
+{#                    <div class="row">#}
+{#                        <div class="col">#}
+{#                            <div class="card-header-body ">#}
+{#                                {% if not i['name']%}#}
+{#                                    {{ "Untitled" }}#}
+{#                                {% else %}#}
+{#                                    {{i['name']}}#}
+{#                                {% endif %}#}
+{#                            </div>#}
+{#                        </div>#}
+{#                    </div>#}
+{#                </div>#}
+                <div class="card-body">
                     <div class="row">
-                        <div class="col">
-                            <div class="card-header-body ">
+                        <div class="col-sm">
+                            <h4>
                                 {% if not i['name']%}
                                     {{ "Untitled" }}
                                 {% else %}
                                     {{i['name']}}
                                 {% endif %}
-{#                                <span class="dot dot-{{i['status']}}"></span>#}
-                            </div>
+                            </h4>
                         </div>
-                    </div>
-                </div>
-                <div class="card-body">
-                    <div class="row">
+                        <div class="w-100"></div>
                         <div class="col-6">
                             <small class="text-muted"><strong>STATUS</strong></small>
-                            <h6 style="text-transform: uppercase;" class="mb-2"><span class="dot dot-{{i['status']}}" style="margin-left: 0 !important;margin-top: 5px"></span></h6>
+                            <h6 style="text-transform: uppercase;" class="mb-2 h6-dot-{{i['status']}}"><span class="dot dot-{{i['status']}}" style="margin-left: 0 !important;margin-top: 5px"></span></h6>
                         </div>
                         <div class="col-6 peer_data_group" style="text-align: right">
                             <small class="text-muted"><strong>TRANSFER</strong></small>
@@ -162,7 +170,7 @@
                             <small class="text-muted"><strong>ALLOWED IP</strong></small>
                             <h6 style="text-transform: uppercase;">{{i['allowed_ip']}}</h6>
                         </div>
-                        <div class="w-100"></div>
+{#                        <div class="w-100"></div>#}
 
                         <div class="col-sm">
                             <small class="text-muted"><strong>LATEST HANDSHAKE</strong></small>

src/wgd.sh

@@ -33,9 +33,9 @@ _check_and_set_venv(){
 
 install_wgd(){
     # Check Python3 version
-    version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 7) else print("0");')
+    version_pass=$(python3 -c 'import sys; print("1") if (sys.version_info.major == 3 and sys.version_info.minor >= 8) else print("0");')
     if [ $version_pass == "0" ]
-      then printf "| WGDashboard required Python3.7+                  |\n"
+      then printf "| WGDashboard required Python3.8+                  |\n"
       printf "%s\n" "$dashes"
       exit 1
     fi