From 3f5f7c6642171a677ff5079847cec97ff5112451 Mon Sep 17 00:00:00 2001
From: Ludovic <54670129+lbr38@users.noreply.github.com>
Date: Mon, 11 Nov 2024 10:24:51 +0100
Subject: [PATCH] 5.2.0

---
 README.md                                     |  16 +-
 www/public/resources/js/functions.js          | 201 ++++++++++++------
 www/public/resources/js/general.js            |  48 ++---
 www/public/resources/js/motion.js             |   9 +-
 www/public/resources/styles/common.css        |  95 +++++----
 www/public/resources/styles/motionui.css      |  35 +--
 www/version                                   |   2 +-
 .../includes/containers/buttons/top.inc.php   |   2 +-
 .../includes/containers/cameras/list.inc.php  |   4 +-
 www/views/includes/panels/userspace.inc.php   |  13 +-
 .../includes/tables/motion/events.inc.php     |  43 ++--
 11 files changed, 254 insertions(+), 214 deletions(-)

diff --git a/README.md b/README.md
index 9ebda49b..ddafbf24 100644
--- a/README.md
+++ b/README.md
@@ -3,15 +3,19 @@
 A web responsive interface to manage <a href="https://motion-project.github.io/"><b>motion</b></a> (an open-source motion detection software) and visualize cameras live stream.
 
 <div align="center">
-    <img src="https://github.com/user-attachments/assets/870aef98-5e5c-42e0-8387-261f6981561e" width=25% align="top">
-    <img src="https://github.com/user-attachments/assets/76b7150b-6439-445d-815f-e899563dacbd" width=25% align="top">
-    <img src="https://github.com/user-attachments/assets/26cbd47b-d2c4-483d-8b37-857018876df7" width=25% align="top">
+    <img src="https://github.com/user-attachments/assets/bdae2550-819d-40c4-895b-541ee64bdc03" width=25% align="top">
+    &nbsp;
+    <img src="https://github.com/user-attachments/assets/afe3e48a-3a26-4e75-a6a7-a97b2ac2bf9e" width=25% align="top">
+    &nbsp;
+    <img src="https://github.com/user-attachments/assets/a2472f8b-24fc-4967-bb6a-f8ad8af95270" width=25% align="top">
 </div>
 <br>
 <div align="center">
-    <img src="https://github.com/user-attachments/assets/93d00121-defb-42ae-b655-83ef339eee0b" width=25% align="top">
-    <img src="https://github.com/user-attachments/assets/a8e596cc-e5f5-4123-bae4-d94f3ba7de1d" width=25% align="top">
-    <img src="https://github.com/user-attachments/assets/50509fd8-6af0-46e4-be29-0592b43cc306" width=25% align="top">
+    <img src="https://github.com/user-attachments/assets/cb9137c7-484a-4c2c-ad0f-c33ef7a602bd" width=25% align="top">
+    &nbsp;
+    <img src="https://github.com/user-attachments/assets/81c05e3f-599d-4cc1-9d9a-9748fce54763" width=25% align="top">
+    &nbsp;
+    <img src="https://github.com/user-attachments/assets/04b18116-2af0-4bd3-8438-e9f1fed8c7ed" width=25% align="top">
 </div>
 
 <br>
diff --git a/www/public/resources/js/functions.js b/www/public/resources/js/functions.js
index 5575bb7c..cd7d99f6 100644
--- a/www/public/resources/js/functions.js
+++ b/www/public/resources/js/functions.js
@@ -32,102 +32,167 @@ function closePanel(name = null)
 }
 
 /**
- *  Print alert or error message
- *  @param {string} message
- *  @param {string} type
- *  @param {int} timeout
+ * Print an alert
+ * @param {*} message
+ * @param {*} type
+ * @param {*} timeout
  */
-function printAlert(message, type = null, timeout = 2500)
+function printAlert(message, type = null, timeout = 3000)
 {
-    $('#newalert').remove();
+    if (type == null) {
+        var alertType = 'alert';
+        var icon = 'info';
+    }
 
-    if (type == "error") {
-        $('footer').append('<div id="newalert" class="alert-error"><div>' + message + '</div></div>');
+    if (type == 'success') {
+        var alertType = 'alert-success';
+        var icon = 'check';
     }
-    if (type == "success") {
-        $('footer').append('<div id="newalert" class="alert-success"><div>' + message + '</div></div>');
+
+    if (type == 'error') {
+        var alertType = 'alert-error';
+        var icon = 'error';
+        timeout = 4000;
     }
 
+    // Remove any existing alert
+    $('#alert').remove();
+
+    $('footer').append(' \
+    <div id="alert" class="' + alertType + '"> \
+        <div class="flex align-item-center column-gap-8 padding-left-15 padding-right-15"> \
+            <img src="/assets/icons/' + icon + '.svg" class="icon" /> \
+            <div> \
+                <p>' + message + '</p> \
+            </div> \
+        </div> \
+    </div>');
+
+    $('#alert').css({
+        visibility: 'visible'
+    }).promise().done(function () {
+        $('#alert').animate({
+            right: '0'
+        }, 150)
+    })
+
     if (timeout != 'none') {
         window.setTimeout(function () {
-            $('#newalert').fadeTo(1000, 0).slideUp(1000, function () {
-                $('#newalert').remove();
-            });
+            closeAlert();
         }, timeout);
     }
 }
 
 /**
- * Print a confirm alert box before executing specified function
+ * Print a confirm box
  * @param {*} message
- * @param {*} myfunction1
- * @param {*} confirmBox1
+ * @param {*} confirmBoxFunction1
+ * @param {*} confirmBtn1
+ * @param {*} confirmBoxFunction2
+ * @param {*} confirmBtn2
  */
-function confirmBox(message, myfunction1, confirmBox1 = 'Delete', myfunction2 = null, confirmBox2 = null)
+function confirmBox(message = '', confirmBoxFunction1, confirmBtn1 = 'Delete', confirmBoxFunction2 = null, confirmBtn2 = null, confirmBoxId = null)
 {
     /**
-     *  First, delete all active confirm box if any
+     *  If there is already a confirm box with the same id, do nothing
+     *  The Id is used to prevent a same confirm box from being re-opened
      */
-    $("#newConfirmAlert").remove();
+    if (confirmBoxId != null) {
+        if ($('#confirm-box').length > 0) {
+            if ($('#confirm-box').attr('confirm-box-id') == confirmBoxId) {
+                return;
+            }
+        }
+    }
 
-    /**
-     *  Case there is three choices
-     */
-    if (myfunction2 != null && confirmBox2 != null) {
-        var $content = '<div id="newConfirmAlert" class="confirmAlert"><span></span><span>' + message + '</span><div class="confirmAlert-buttons-container"><span class="pointer btn-doConfirm1">' + confirmBox1 + '</span><span class="pointer btn-doConfirm2">' + confirmBox2 + '</span><span class="pointer btn-doCancel">Cancel</span></div></div>';
-    /**
-     *  Case there is two choices
-     */
-    } else {
-        var $content = '<div id="newConfirmAlert" class="confirmAlert"><span></span><span>' + message + '</span><div class="confirmAlert-buttons-container"><span class="pointer btn-doConfirm1">' + confirmBox1 + '</span><span class="pointer btn-doCancel">Cancel</span></div></div>';
+    // Remove any existing confirm box
+    $("#confirm-box").remove();
+
+    // Base html
+    var html = '<div id="confirm-box" class="confirm-box"><div class="flex flex-direction-column row-gap-10 padding-left-15 padding-right-15">'
+
+    // If there is a message
+    if (message != "") {
+        html += '<p class="wordbreakall">' + message + '</p>';
     }
 
-    $('footer').append($content);
+    // Container for buttons
+    html += '<div class="flex flex-wrap column-gap-15 row-gap-10">';
 
-    /**
-     *  If choice one is clicked
-     */
-    $('.btn-doConfirm1').click(function () {
-        /**
-         *  Execute function 1
-         */
-        myfunction1();
+    // First function and button
+    html += '<div class="confirm-box-btn1 btn-small-red pointer">' + confirmBtn1 + '</div>';
 
-        /**
-         *  Then remove alert
-         */
-        $("#newConfirmAlert").slideToggle(0, function () {
-            $("#newConfirmAlert").remove();
-        });
+    // Second function and button
+    if (confirmBoxFunction2 != null && confirmBtn2 != null) {
+        html += '<div class="confirm-box-btn2 btn-small-blue pointer">' + confirmBtn2 + '</div>';
+    }
+
+    // Cancel button
+    html += '<div class="confirm-box-cancel-btn btn-small-blue pointer">Cancel</div>';
+
+    html += '</div>'
+
+    // Close base html
+    html += '</div></div>'
+
+    // Append html to footer
+    $('footer').append(html);
+
+    // Set confirm box id if specified
+    if (confirmBoxId != null) {
+        $('#confirm-box').attr('confirm-box-id', confirmBoxId);
+    }
+
+    // Show confirm box
+    $('#confirm-box').css({
+        visibility: 'visible'
+    }).promise().done(function () {
+        $('#confirm-box').animate({
+            right: '0'
+        }, 150)
+    })
+
+    // If choice one is clicked
+    $('.confirm-box-btn1').click(function () {
+        // Execute function 1
+        confirmBoxFunction1();
+        closeConfirmBox();
     });
 
-    /**
-     *  If choice two is clicked
-     */
-    $('.btn-doConfirm2').click(function () {
-        /**
-         *  Execute function 2
-         */
-        myfunction2();
+    // If choice two is clicked
+    $('.confirm-box-btn2').click(function () {
+        // Execute function 2
+        confirmBoxFunction2();
+        closeConfirmBox();
+    });
 
-        /**
-         *  Then remove alert
-         */
-        $("#newConfirmAlert").slideToggle(0, function () {
-            $("#newConfirmAlert").remove();
-        });
+    // If 'cancel' choice is clicked
+    $('.confirm-box-cancel-btn').click(function () {
+        closeConfirmBox();
     });
+}
 
-    /**
-     *  If 'cancel' choice is clicked
-     */
-    $('.btn-doCancel').click(function () {
-        /**
-         *  Remove alert
-         */
-        $("#newConfirmAlert").slideToggle(0, function () {
-            $("#newConfirmAlert").remove();
-        });
+/**
+ *  Close alert and confirm box modal
+ */
+function closeAlert()
+{
+    $('#alert').animate({
+        right: '-1000px'
+    }, 150).promise().done(function () {
+        $('#alert').remove();
+    });
+}
+
+/**
+ *  Close confirm box
+ */
+function closeConfirmBox()
+{
+    $('#confirm-box').animate({
+        right: '-1000px'
+    }, 150).promise().done(function () {
+        $('#confirm-box').remove();
     });
 }
 
diff --git a/www/public/resources/js/general.js b/www/public/resources/js/general.js
index 08c68524..e56b38c4 100644
--- a/www/public/resources/js/general.js
+++ b/www/public/resources/js/general.js
@@ -17,6 +17,8 @@ $(document).ready(function () {
 $(document).keyup(function (e) {
     if (e.key === "Escape") {
         closePanel();
+        closeAlert();
+        closeConfirmBox();
     }
 });
 
@@ -42,7 +44,24 @@ $(document).on('click','.slide-panel-close-btn',function () {
 $(document).on('click','.acquit-log-btn',function () {
     var id = $(this).attr('log-id');
 
-    acquitLog(id);
+    $.ajax({
+        type: "POST",
+        url: "ajax/controller.php",
+        data: {
+            controller: "general",
+            action: "acquitLog",
+            id: id
+        },
+        dataType: "json",
+        success: function (data, textStatus, jqXHR) {
+            jsonValue = jQuery.parseJSON(jqXHR.responseText);
+            reloadContainer('header/general-log-messages');
+        },
+        error : function (jqXHR, textStatus, thrownError) {
+            jsonValue = jQuery.parseJSON(jqXHR.responseText);
+            printAlert(jsonValue.message, 'error');
+        },
+    });
 });
 
 /**
@@ -103,33 +122,6 @@ function reloadOpenedClosedElements()
     });
 }
 
-/**
- * Ajax: Mark log as read
- * @param {string} id
- */
-function acquitLog(id)
-{
-    $.ajax({
-        type: "POST",
-        url: "ajax/controller.php",
-        data: {
-            controller: "general",
-            action: "acquitLog",
-            id: id
-        },
-        dataType: "json",
-        success: function (data, textStatus, jqXHR) {
-            jsonValue = jQuery.parseJSON(jqXHR.responseText);
-            reloadContainer('header/general-log-messages');
-        },
-        error : function (jqXHR, textStatus, thrownError) {
-            jsonValue = jQuery.parseJSON(jqXHR.responseText);
-            printAlert(jsonValue.message, 'error');
-        },
-    });
-}
-
-
 /**
  *  Ajax: Get all containers state and reload them if needed
  */
diff --git a/www/public/resources/js/motion.js b/www/public/resources/js/motion.js
index 470c49ba..b0ea64df 100644
--- a/www/public/resources/js/motion.js
+++ b/www/public/resources/js/motion.js
@@ -294,7 +294,7 @@ $(document).on('click','input[class=event-media-checkbox]',function () {
         /**
          *  Hide confirm box, checkboxes and 'Select all' button
          */
-        $('#newConfirmAlert').remove();
+        closeConfirmBox();
         $('#events-captures-div').find('input[class=event-media-checkbox]').removeAttr('style');
         $('#events-captures-div').find('.select-all-media-checkbox').hide();
         return;
@@ -304,13 +304,14 @@ $(document).on('click','input[class=event-media-checkbox]',function () {
      *  Print confirm box to delete selected medias
      */
     confirmBox(
-        '',
+        'Delete or download selected media(s)',
         function () {
             deleteMedia(); },
         'Delete',
         function () {
             downloadMedia(); },
-        'Download'
+        'Download',
+        'select-media-confirm'
     );
 
     /**
@@ -346,7 +347,7 @@ $(document).on('click',".select-all-media-checkbox",function () {
         // Hide 'select all' button
         $(this).hide();
         // Hide confirm box
-        $('#newConfirmAlert').remove();
+        closeConfirmBox();
     } else {
         $('#events-captures-div').find('input[class=event-media-checkbox][event-id="' + eventId + '"]').prop('checked', true);
     }
diff --git a/www/public/resources/styles/common.css b/www/public/resources/styles/common.css
index 9686c6d0..289e794b 100644
--- a/www/public/resources/styles/common.css
+++ b/www/public/resources/styles/common.css
@@ -109,6 +109,7 @@ pre.codeblock {
     font-size: 12px;
     line-height: 1.5;
     text-align: left;
+    text-wrap: auto;
     padding: 20px;
 }
 
@@ -190,6 +191,7 @@ pre.codeblock {
 .row-gap-1 {row-gap: 1px}.row-gap-2 {row-gap: 2px}.row-gap-4 {row-gap: 4px}.row-gap-5 {row-gap: 5px}.row-gap-6 {row-gap: 6px}.row-gap-7 {row-gap: 7px}.row-gap-8 {row-gap: 8px}.row-gap-9{row-gap: 9px}.row-gap-10{row-gap: 10px}.row-gap-15{row-gap: 15px}.row-gap-20{row-gap: 20px}
 .padding-left-15{padding-left:15px !important}.padding-left-20{padding-left:20px !important}.padding-left-30{padding-left:30px !important}.padding-left-40{padding-left:40px !important}
 .padding-right-15{padding-right:15px !important}.padding-right-20{padding-right:20px !important}.padding-right-30{padding-right:30px !important}.padding-right-40{padding-right:40px !important}
+.margin-10{margin:10px !important}.margin-15{margin:15px !important}
 .margin-left-0 {margin-left: 0px !important}.margin-left-5 {margin-left: 5px !important}.margin-left-10 {margin-left: 10px !important}.margin-left-15 {margin-left: 15px !important}.margin-left-20 {margin-left: 20px !important}.margin-left-30 {margin-left: 30px !important}.margin-left-40 {margin-left: 40px !important}
 .margin-right-0 {margin-right: 0px !important}.margin-right-5 {margin-right: 5px !important}.margin-right-10 {margin-right: 10px !important}.margin-right-15 {margin-right: 15px !important}.margin-right-20 {margin-right: 20px !important}.margin-right-30 {margin-right: 30px !important}.margin-right-40 {margin-right: 40px !important}
 .margin-top-0 {margin-top: 0px !important}.margin-top-5 {margin-top: 5px !important}.margin-top-10 {margin-top: 10px !important}.margin-top-15 {margin-top: 15px !important}.margin-top-20 {margin-top: 20px !important}.margin-top-30 {margin-top: 30px !important}.margin-top-40 {margin-top: 40px !important}
@@ -292,14 +294,12 @@ td {
  *  Icons
  */
 .icon, .icon-small, .icon-medium, .icon-lowopacity, .icon-mediumopacity, .icon-nf, .icon-np {
-    /* height: 16px; */
-    /* height: 17px; */
     height: 19px;
     vertical-align: middle;
     cursor: pointer;
 }
 .icon-small {
-    height: 8px !important;
+    height: 12px !important;
 }
 .icon-medium {
     height: 18px !important;
@@ -358,8 +358,10 @@ input::placeholder, select::placeholder, textarea::placeholder {
 
 /* All checkboxes unless onoff-switch-input */
 input[type=checkbox]:not(.onoff-switch-input) {
-    width: 16px;
-    height: 16px;
+    /* width: 16px;
+    height: 16px; */
+    width: 20px;
+    height: 20px;
     background-color: white;
     border-radius: 50%;
     vertical-align: middle;
@@ -388,7 +390,7 @@ input[type=checkbox]:not(.onoff-switch-input):checked {
 
 /* All buttons */
 [class^="btn-"], [class*=" btn-"], input::file-selector-button {
-    padding: 7px 5px 7px 5px;
+    padding: 10px 5px 10px 5px;
     border: none;
     border-radius: 60px;
     color: white;
@@ -810,57 +812,55 @@ textarea {
 /**
  *  Alert div
  */
-.action, .alert, .alert-success, .alert-error, .confirmAlert {
-    width: 100%;
+.alert, .alert-success, .alert-error, .confirm-box {
+    width: 95%;
+    max-width: 100%;
     display: grid;
-    grid-template-columns: repeat(1, auto);
-    justify-content: space-around;
-    align-items: center;
-    align-content: center;
-    min-height: 60px;
-    padding-top: 15px;
-    padding-bottom: 15px;
+    grid-template-columns: 1fr;
+    column-gap: 10px;
+    align-items: flex-start;
+    visibility: hidden;
+    min-height: 20px;
+    padding: 20px 0px 20px 0px;
     font-size: 16px;
     position: fixed;
     bottom: 0;
-    left: 0;
+    right: -1000px;
+    bottom: 50px;
     z-index: 1000;
-    background-color: #182b3e;
-    border-top: 1px solid rgb(60, 70, 75);
+    background-color: #1d3349;
     box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
     color: white;
-    text-align: center;
+    border-radius: 8px 0 0 8px;
+    border-left: 5px solid #15bf7f;
 }
-.confirmAlert {
-    grid-template-columns: repeat(3, 33%);
+.alert-success {
+    background-color: #47ebac;
+    border-left: 5px solid #0f8a5b;
 }
-.alert-success { background-color: #14be7e; }
-.alert-error { background-color: #F32F63; }
-.alert span, .alert-success span, .alert-error span, .confirmAlert span,
-.alert a, .alert-success a, .alert-error a, .confirmAlert a {
-    font-size: 16px;
+.alert-error {
+    background-color: #F32F63;
+    border-left: 5px solid #780725;
 }
-.confirmAlert-buttons-container {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
+.alert-success p {
+    color: #0f8a5b;
 }
-
-[class*="btn-doConfirm"], .btn-doGeneric, .btn-doCancel {
-    margin-left: 15px;
-    margin-right: 15px;
-    padding: 20px;
-    border-radius: 30px;
-    box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
+.alert-error p {
+    color: #780725;
 }
-[class*="btn-doConfirm"] {
-    background-color: #F32F63;
+.alert-close-btn {
+    position: absolute;
+    right: 15px;
+    top: 10px;
+    filter: brightness(0) saturate(100%) invert(9%) sepia(54%) saturate(6819%) hue-rotate(335deg) brightness(98%) contrast(100%);
 }
-[class*="btn-doConfirm"]:hover {
-    background-color: #f10e4b;
+.alert-error pre.codeblock {
+    max-height: 100px;
+    overflow: auto;
 }
-.btn-doGeneric:hover {
-    background-color: #1d3349;
+.confirm-box {
+    border-top: 1px solid #d1d1d11f;
+    border-bottom: 1px solid #d1d1d11f;
 }
 
 /**
@@ -963,6 +963,11 @@ textarea {
 
 /* Desktop configuration */
 @media (min-width:1025px) {
+    /* All buttons */
+    [class^="btn-"], [class*=" btn-"], input::file-selector-button {
+        padding: 7px 5px 7px 5px;
+    }
+
     /**
      *  Slide btns
      */
@@ -973,4 +978,8 @@ textarea {
     .slide-panel {
         width: 30%;
     }
+
+    .alert, .alert-success, .alert-error, .confirm-box {
+        width: 25%;
+    }
 }
\ No newline at end of file
diff --git a/www/public/resources/styles/motionui.css b/www/public/resources/styles/motionui.css
index 624a86e5..cdc8022c 100644
--- a/www/public/resources/styles/motionui.css
+++ b/www/public/resources/styles/motionui.css
@@ -56,15 +56,6 @@ h3 {
     width: 90%;
 }
 
-.action, .alert-success, .alert-error, .confirmAlert {
-    grid-template-columns: repeat(3, auto);
-}
-
-.alert-success, .alert-error {
-    grid-template-columns: repeat(1, auto) !important;
-    justify-content: space-around !important;
-}
-
 /* Red blink background */
 .bkg-red-blink {
     background-color: #FF495C;
@@ -80,9 +71,6 @@ h3 {
     border-radius: 50%;
     margin-left: auto;
     margin-right: auto;
-    /* margin-top: 10px;
-    margin-bottom: 10px; */
-    /* padding: 4px; */
     color: white;
     text-align: center;
     text-decoration: none;
@@ -296,8 +284,9 @@ h3 {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
-    width: 95%;
+    column-gap: 20px;
+    align-items: flex-start;
+    width: 100%;
 }
 
 .event-camera-name-id {
@@ -322,10 +311,6 @@ h3 {
     min-height: 150px;
 }
 
-.event-id {
-    align-self: center;
-}
-
 .event-loading {
     background-color: #152637;
     border-radius: 8px;
@@ -648,10 +633,6 @@ footer #github img { width: 25px; }
     bottom: 6px;
 }
 
-.select-all-media-checkbox {
-    margin-right: 14px;
-}
-
 .event-media-checkbox-container {
     position: absolute;
     top: 8px;
@@ -783,11 +764,6 @@ footer #github img { width: 25px; }
         width: 29.5%;
     }
 
-    .action, .alert-success, .alert-error, .confirmAlert {
-        display: grid;
-        grid-template-columns: repeat(3, 33%);
-    }
-
     .main-buttons-container {
         display: grid;
         align-items: center;
@@ -855,6 +831,7 @@ footer #github img { width: 25px; }
 
     .event-metadata {
         flex-direction: column;
+        align-items: center;
         row-gap: 20px;
         width: 250px;
         margin-left: 20px;
@@ -867,6 +844,10 @@ footer #github img { width: 25px; }
         row-gap: 20px;
     }
 
+    .event-id {
+        align-self: center;
+    }
+
     .event-media-checkbox, .select-all-media-checkbox {
         width: 22px !important;
         height: 22px !important;
diff --git a/www/version b/www/version
index acf69b48..7cbea073 100644
--- a/www/version
+++ b/www/version
@@ -1 +1 @@
-5.1.0
\ No newline at end of file
+5.2.0
\ No newline at end of file
diff --git a/www/views/includes/containers/buttons/top.inc.php b/www/views/includes/containers/buttons/top.inc.php
index 9965d0ad..55be433d 100644
--- a/www/views/includes/containers/buttons/top.inc.php
+++ b/www/views/includes/containers/buttons/top.inc.php
@@ -33,7 +33,7 @@
         </div>
     </div>
    
-    <div class="flex column-gap-40 margin-right-15">
+    <div class="flex column-gap-30 margin-right-15">
         <div class="relative">
             <img src="/assets/icons/alarm.svg" class="pointer lowopacity slide-panel-btn" slide-panel="notification" title="Show notifications" />
             <?php
diff --git a/www/views/includes/containers/cameras/list.inc.php b/www/views/includes/containers/cameras/list.inc.php
index 3a29c29d..8d038278 100644
--- a/www/views/includes/containers/cameras/list.inc.php
+++ b/www/views/includes/containers/cameras/list.inc.php
@@ -96,9 +96,9 @@
                     </div>
 
                     <div class="camera-btn-div flex">
-                        <div class="flex align-item-center justify-space-between">
+                        <div class="flex align-item-center justify-space-between column-gap-20">
                             <div>
-                                <p class="label-green"><b><?= $camera['Name'] ?></b></p>
+                                <p class="label-green wordbreakall"><b><?= $camera['Name'] ?></b></p>
                             </div>
                             <div class="flex column-gap-10">
                                 <div class="slide-btn-medium-tr timelapse-camera-btn" title="See timelapse" camera-id="<?= $camera['Id'] ?>">
diff --git a/www/views/includes/panels/userspace.inc.php b/www/views/includes/panels/userspace.inc.php
index 92c764a7..34c0dbd3 100644
--- a/www/views/includes/panels/userspace.inc.php
+++ b/www/views/includes/panels/userspace.inc.php
@@ -1,11 +1,5 @@
 <?php ob_start(); ?>
 
-<a href="/logout">
-    <div class="btn-small-red" title="Logout">
-        <span>Logout</span>
-    </div>
-</a>
-
 <h5>CHANGE PASSWORD</h5>
 
 <form id="new-password-form" username="<?= $_SESSION['username'] ?>">
@@ -15,13 +9,18 @@
     <h6>NEW PASSWORD</h6>
     <input type="password" class="input-large" name="new-password" autocomplete required />
 
-    <h6>NEW PASSWORD (re-type)</h6>
+    <h6>NEW PASSWORD (confirm)</h6>
     <input type="password" class="input-large" name="new-password-retype" autocomplete required />
     
     <br><br>
     <button type="submit" class="btn-small-green">Save</button>
 </form>
 
+<h5>LOGOUT FROM MOTION-UI</h5>
+<a href="/logout">
+    <button type="button" class="btn-small-red" title="Logout">Logout</button>
+</a>
+
 <?php
 $content = ob_get_clean();
 $slidePanelName = 'userspace';
diff --git a/www/views/includes/tables/motion/events.inc.php b/www/views/includes/tables/motion/events.inc.php
index a5ff916f..5b0cd747 100644
--- a/www/views/includes/tables/motion/events.inc.php
+++ b/www/views/includes/tables/motion/events.inc.php
@@ -61,13 +61,13 @@
                 <div class="event-metadata">
                     <div class="flex flex-direction-column align-item-center" title="Event start time">
                         <p class="font-size-22"><?= $eventTimeShort ?></p>
-                        <p class="note font-size-11"><?= $eventTime ?></p>
+                        <p class="lowopacity-cst font-size-11"><?= $eventTime ?></p>
                     </div>
 
                     <div class="event-camera-name-id">
                         <?php
                         if ($cameraId != $lastCameraId) : ?>                            
-                            <p class="label-green">
+                            <p class="label-green wordbreakall">
                                 <b>
                                     <?php
                                     if (!empty($cameraName)) {
@@ -80,39 +80,28 @@
                             <?php
                         endif ?>
                     
-                        <div class="event-id">
+                        <div class="event-id flex column-gap-5">
                             <?php
                             if ($motionEventId != $lastMotionEventId) : ?>
-                                <div class="flex column-gap-5 align-item-center">
-                                    <p class="note" title="Full event ID #<?= $motionEventId ?>">
-                                        <?php
-                                        if ($totalFilesCount == 1) {
-                                            echo 'Event #' . $motionEventIdShort;
-                                        } else {
-                                            echo 'Event #' . $motionEventIdShort;
-                                        } ?>
-                                    </p>
+                                <p class="" title="Full event ID #<?= $motionEventId ?>">
+                                    Event #<?= $motionEventIdShort ?>
+                                </p>
 
+                                <?php
+                                if ($eventSeen != 'true') : ?>
                                     <p>
-                                        <?php
-                                        if ($eventSeen != 'true') {
-                                            echo ' <code class="bkg-green font-size-10">New</code>';
-                                        } ?>
+                                        <code class="bkg-green font-size-10">New</code>
                                     </p>
-                                </div>
-
-                                <p class="note">
-                                    
-                                </p>
-                                <?php
+                                    <?php
+                                endif;
                             endif; ?>
                         </div>
                     </div>
                 </div>
 
                 <div class="flex flex-direction-column row-gap-10 width-100">
-                    <div class="flex align-item-center column-gap-5 align-self-end">
-                        <p class="note file-counter">
+                    <div class="flex flex-direction-column align-item-right column-gap-5 align-self-end">
+                        <p class="lowopacity-cst">
                             <?php
                             if ($totalFilesCount == 1) {
                                 echo '1 file';
@@ -121,7 +110,7 @@
                             } ?>
                         </p>
 
-                        <input type="checkbox" class="select-all-media-checkbox hide" event-id="<?= $eventId ?>" title="Select event" />
+                        <input type="checkbox" class="select-all-media-checkbox hide" event-id="<?= $eventId ?>" title="Select all media files" />
                     </div>
 
                     <div class="event-camera">
@@ -168,7 +157,7 @@
                                                 <?php
                                                 if (file_exists($filepath)) {
                                                     if (is_writeable($filepath)) {
-                                                        echo '<input type="checkbox" class="event-media-checkbox" file-name="' . basename($filepath) . '" file-id="' . $fileId . '" event-id="' . $eventId . '" />';
+                                                        echo '<input type="checkbox" class="event-media-checkbox" file-name="' . basename($filepath) . '" file-id="' . $fileId . '" event-id="' . $eventId . '" title="Select media file" />';
                                                     } else {
                                                         echo '<img src="/assets/icons/warning.svg" class="icon" title="File cannot be selected: not writeable" />';
                                                     }
@@ -224,7 +213,7 @@
                                                     <?php
                                                     if (file_exists($filepath)) {
                                                         if (is_writeable($filepath)) {
-                                                            echo '<input type="checkbox" class="event-media-checkbox" file-name="' . basename($filepath) . '" file-id="' . $fileId . '" event-id="' . $eventId . '" />';
+                                                            echo '<input type="checkbox" class="event-media-checkbox" file-name="' . basename($filepath) . '" file-id="' . $fileId . '" event-id="' . $eventId . '" title="Select media file" />';
                                                         } else {
                                                             echo '<img src="/assets/icons/warning.svg" class="icon" title="File cannot be selected: not writeable" />';
                                                         }