From 8e4cffbc0a426e9d6ee901c77bf0a080abe20bfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Gonz=C3=A1lez?= <jose.gonzalez@pandorafms.com>
Date: Mon, 13 Jun 2022 12:34:16 +0200
Subject: [PATCH] Several style refactory

---
 pandora_console/include/styles/register.css   |   4 +-
 .../resources/javascript/umc.js               |   6 +-
 .../resources/styles/um.css                   | 325 +++++++++++++++++-
 .../update_manager_client/views/register.php  |  20 +-
 4 files changed, 339 insertions(+), 16 deletions(-)

diff --git a/pandora_console/include/styles/register.css b/pandora_console/include/styles/register.css
index b1d8068ef3..77d56dbc85 100644
--- a/pandora_console/include/styles/register.css
+++ b/pandora_console/include/styles/register.css
@@ -29,7 +29,7 @@ input[type="button"].submit-next {
   background: #fff;
   padding: 5px;
   font-size: 1.3em;
-  margin: 0.5em 1em 0.5em 0;
+  margin: 0.5em 0em;
   cursor: pointer;
   text-align: center;
   height: 30px;
@@ -71,7 +71,7 @@ div.submit_buttons_container {
   position: relative;
   margin: 10px auto 0px;
   bottom: 0px;
-  width: 90%;
+  width: 95%;
   clear: both;
   height: 4em;
 }
diff --git a/pandora_console/update_manager_client/resources/javascript/umc.js b/pandora_console/update_manager_client/resources/javascript/umc.js
index 659a240c61..af5832daba 100644
--- a/pandora_console/update_manager_client/resources/javascript/umc.js
+++ b/pandora_console/update_manager_client/resources/javascript/umc.js
@@ -460,7 +460,9 @@ function umShowUpdateDetails(update) {
   var um_update_details = document.getElementById("um-update-details");
   var header = document.getElementById("um-update-details-header");
   var content = document.getElementById("um-update-details-content");
-
+  var detailTitle = document
+    .getElementsByClassName("um-package-details")
+    .item(0).innerText;
   header.innerText = texts.updateText + " " + updates[update].version;
   content.innerText = updates[update].description;
 
@@ -468,7 +470,7 @@ function umShowUpdateDetails(update) {
     um_update_details.style.display = "block";
     if (typeof $ == "function") {
       $("#um-update-details").dialog({
-        title: update,
+        title: detailTitle,
         width: 800,
         height: 600
       });
diff --git a/pandora_console/update_manager_client/resources/styles/um.css b/pandora_console/update_manager_client/resources/styles/um.css
index 1f469512ef..d0208bd468 100644
--- a/pandora_console/update_manager_client/resources/styles/um.css
+++ b/pandora_console/update_manager_client/resources/styles/um.css
@@ -9,6 +9,58 @@
   margin: 5% auto;
   padding: 2em;
 }
+a.update_manager_button {
+  padding: 10px 12px;
+  margin-top: 10px;
+  display: inline-flex;
+  align-items: center;
+  font-size: 16px;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+a.update_manager_button:after {
+  content: url(../images/update_manager_button.png);
+  padding-left: 10px;
+}
+
+.progressbar {
+  margin-top: 15px;
+}
+
+#log_zone {
+  background-color: #e6e6e6;
+  border: 20px solid rgba(0, 0, 0, 0);
+  border-radius: 3px;
+  color: #707070;
+  font-size: 12px;
+  margin-bottom: 30px;
+  padding: 10px;
+  text-align: left;
+}
+
+#box_online {
+  background-image: url("../images/update_manager_background.jpg");
+  background-position: top right;
+  background-repeat: no-repeat;
+  background-color: #fff;
+  padding: 40px 50px;
+  border: 1px solid #f3f3f3;
+  border-radius: 5px;
+  min-height: 400px;
+  background-size: contain;
+}
+
+#box_online #pkg_version {
+  color: #82b92e;
+  font-size: 6em;
+  font-weight: bold;
+  margin: 30px 0 !important;
+}
+
+.update_manager_warning p {
+  font-size: 10pt;
+}
 #update-list {
   max-height: 0;
   overflow: hidden;
@@ -16,6 +68,31 @@
   flex-direction: column;
   transition: max-height 0.15s ease-in-out;
 }
+.update_popup {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.update_icon {
+  padding-left: 20px;
+}
+
+.update_text h3 {
+  font-weight: bold;
+  font-size: 12pt;
+}
+
+.update_text p {
+  font-size: 11pt;
+}
+
+.update_text a {
+  font-size: 11pt;
+  color: #82b92e;
+}
 
 .update {
   display: flex;
@@ -23,7 +100,155 @@
   justify-content: space-around;
   align-items: center;
 }
+#drop_file {
+  background-color: #e6e6e6;
+  border: 20px solid rgba(0, 0, 0, 0);
+  border-radius: 3px;
+  color: #707070;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 30px;
+  padding: 40px 50px;
+  text-align: center;
+  text-transform: uppercase;
+}
 
+#drop_file table {
+  vertical-align: middle;
+}
+
+#drop_file table td,
+#drop_file table label {
+  color: #707070;
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 0;
+  vertical-align: middle;
+}
+
+#drop_file table select {
+  float: none;
+}
+
+#drop_file a {
+  background-color: #82b92e;
+  border-radius: 2px;
+  color: #ffffff;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1;
+  padding: 12px 26px;
+}
+
+#drop_file a:hover {
+  background-color: #a6ce67;
+  text-decoration: none;
+}
+
+#drop_file input {
+  display: none;
+}
+
+/* Offline form */
+.fileupload_form {
+  background-color: #373a3d;
+  background-image: -moz-linear-gradient(center, #373a3d, #313437);
+  border-radius: 3px;
+  margin: 0px;
+  padding: 30px;
+}
+
+.fileupload_form ul {
+  border-bottom: 1px solid #3d4043;
+  border-top: 1px solid #2b2e31;
+  list-style: none outside none;
+  margin: 0 -30px;
+  padding: 0;
+}
+
+.fileupload_form ul li {
+  background-color: #333639;
+  background-image: -moz-linear-gradient(center, #333639, #303335);
+  border-bottom: 1px solid #2b2e31;
+  border-top: 1px solid #3d4043;
+  padding: 15px;
+  position: relative;
+}
+
+.fileupload_form ul li #input-progress {
+  left: 68px;
+  position: absolute;
+}
+
+.fileupload_form ul li p {
+  color: #eeeeee;
+  font-size: 12px;
+  font-weight: bold;
+  left: 95px;
+  overflow: hidden;
+  position: absolute;
+  top: 12px;
+  white-space: nowrap;
+}
+
+.fileupload_form ul li i {
+  color: #7f7f7f;
+  display: block;
+  font-style: normal;
+  font-weight: normal;
+}
+
+.fileupload_form ul li canvas {
+  left: 13px;
+  position: absolute;
+  top: 15px;
+}
+
+.fileupload_form ul li span {
+  background: url("../images/check-cross.png") no-repeat scroll 0 0
+    rgba(0, 0, 0, 0);
+  cursor: pointer;
+  height: 12px;
+  position: absolute;
+  right: 13px;
+  top: 34px;
+  width: 15px;
+}
+
+.fileupload_form ul li div {
+  display: block !important;
+}
+
+.fileupload_form ul li.working span {
+  background-position: 0 -12px;
+  height: 16px;
+}
+
+.fileupload_form ul li.loading span {
+  background: url("../images/spinner.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
+  height: 16px;
+}
+
+.fileupload_form ul li.suc span {
+  background: url("../images/check-cross.png") no-repeat scroll 0 0
+    rgba(0, 0, 0, 0);
+  height: 12px;
+}
+
+.fileupload_form ul li.suc p {
+  color: #5a8629;
+}
+
+.fileupload_form ul li.error span {
+  background: url("../images/check-cross.png") no-repeat scroll 0 -12px rgba(0, 0, 0, 0);
+  height: 16px;
+}
+
+.fileupload_form ul li.error p {
+  top: 18px;
+  color: #ff3333;
+}
 #um-loading {
   background-image: url(../images/spinner.gif);
   height: 1em;
@@ -64,7 +289,7 @@
 }
 
 #um-update-details * {
-  font-size: 16pt;
+  font-size: 10pt;
 }
 
 #um-update-details-header {
@@ -115,11 +340,17 @@
   background-color: #1f282b;
 }
 
+div#box_online * {
+  font-size: 14pt;
+}
+
+#box_online .content {
+  max-width: 50%;
+}
 #box_offline form {
   background-color: #373a3d;
   background-image: -moz-linear-gradient(top, #373a3d, #313437);
   border-radius: 3px;
-  font-family: "PT Sans Narrow", sans-serif;
   margin: 0px;
   padding: 30px;
 }
@@ -180,7 +411,9 @@ span.warning {
   justify-content: space-between;
 }
 .ui-dialog-content.ui-widget-content p {
+  font-size: 10pt;
   word-break: keep-all;
+  text-align: justify;
 }
 
 .license_text {
@@ -204,3 +437,91 @@ input.error {
 textarea#signature {
   margin-top: 1em;
 }
+a.update_manager_button_open:hover {
+  color: #fff;
+  background-color: #82b92e;
+}
+
+#um-update-details-header {
+  background-image: url(../images/pandora_logo.png);
+  font-size: 16pt;
+}
+
+.um-progress-bar {
+  background-color: #8bb92e !important;
+}
+
+.um-error {
+  color: #e63c52;
+}
+
+.um-success {
+  color: #8bb92e;
+}
+
+.dz-success-mark svg {
+  background: #8bb92e;
+  border-radius: 50%;
+}
+
+.newsletter_div {
+  margin: 5px 20px;
+  float: left;
+  padding-top: 23px;
+}
+
+.register_update_manager {
+  margin: 5px 0 10px;
+  float: left;
+  padding-left: 15px;
+}
+
+/* METACONSOLE */
+.box_online_meta {
+  background: none;
+  min-height: 400px;
+  text-align: center;
+  border: none;
+}
+
+div#box_online.box_online_meta * {
+  font-size: 14pt;
+}
+
+#box_online.box_online_meta .content {
+  max-width: 100%;
+}
+
+#box_online.box_online_meta #pkg_version {
+  font-size: 60pt;
+}
+
+/* COMMUNITY */
+.update_manager_open {
+  max-width: 50%;
+  font-size: 10pt;
+  margin-top: 40px;
+  padding: 20px;
+  border: 1px solid #eaeaea;
+  border-radius: 5px;
+}
+
+.update_manager_warning {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.update_manager_warning img {
+  padding-right: 20px;
+  width: 90px;
+}
+
+a.update_manager_button_open {
+  padding: 5px 10px;
+  font-size: 16px;
+  text-decoration: none;
+  border: 1px solid #82b92e;
+  color: #82b92e;
+  border-radius: 2px;
+}
diff --git a/pandora_console/update_manager_client/views/register.php b/pandora_console/update_manager_client/views/register.php
index 89225432ad..b893479c23 100644
--- a/pandora_console/update_manager_client/views/register.php
+++ b/pandora_console/update_manager_client/views/register.php
@@ -41,7 +41,6 @@ $product_name = get_product_name(); ?>
     <script src="<?php $asset('resources/javascript/umc.js'); ?>" type="text/javascript"></script>
     <link rel="stylesheet" href="<?php $asset('resources/styles/jquery-ui.min.css'); ?>">
     <link rel="stylesheet" href="<?php $asset('resources/styles/um.css'); ?>">
-    <link rel="stylesheet" href="<?php $asset('resources/styles/pandora.css'); ?>">
 </head>
 
 <div id="registration_wizard" title="
@@ -51,12 +50,12 @@ $product_name = get_product_name(); ?>
         <?php echo html_print_image('images/pandora_circle_big.png', true); ?>
     </div>
 
-    <div class="newsletter_div">
-        <?php echo __('Keep this %s console up to date with latest updates.', $product_name); ?>
+    <div class="newsletter_div lato font_10pt">
+            <?php echo __('Keep this %s console up to date with latest updates.', $product_name); ?>
     </div>
 
     <div class="license_text both">
-        <p>
+        <p class="lato font_10pt">
             <?php
             echo __(
                 'When you subscribe to the Warp update service for %s, you accept that we
@@ -71,12 +70,12 @@ $product_name = get_product_name(); ?>
             ?>
         </p>
 
-        <p>
+        <p class="lato font_10pt">
             <?php echo __('Visit our privacy policy for more information'); ?>:
             <a href="https://pandorafms.com/privacy-policy/" target="_blank">https://pandorafms.com/privacy-policy/</a>
         </p>
 
-        <input id="registration-email" type="email" placeholder="<?php echo __('Your email'); ?>" />
+        <input id="registration-email" class="lato" type="email" placeholder="<?php echo __('Your email'); ?>" />
     </div>
 
     <div class="submit_buttons_container">
@@ -86,7 +85,8 @@ $product_name = get_product_name(); ?>
                 __('Cancel'),
                 'cancel_registration',
                 false,
-                'class="ui-widget ui-state-default ui-corner-all ui-button-text-only sub upd submit-cancel"',
+                'class="lato ui-widget
+            ui-state-default ui-corner-all ui-button-text-only sub upd submit-cancel"',
                 true
             );
             ?>
@@ -97,7 +97,7 @@ $product_name = get_product_name(); ?>
                 __('OK!'),
                 'register',
                 false,
-                'class="ui-widget
+                'class="lato ui-widget
             ui-state-default ui-corner-all ui-button-text-only sub ok submit-next w100px"',
                 true
             );
@@ -108,7 +108,7 @@ $product_name = get_product_name(); ?>
 
 <!-- Verification modal.. -->
 <div id="reg_ensure_cancel" title="Confirmation Required" class="invisible">
-    <div class="font_12_20">
+    <div class="lato font_10pt">
         <?php echo __('Are you sure you don\'t want to use Warp update?'); ?>
         <p>
             <?php
@@ -124,7 +124,7 @@ $product_name = get_product_name(); ?>
 
 <!-- Results modal. -->
 <div id="reg_result" title="Registration process result" class="invisible">
-    <div id="reg_result_content" class="font_12_20">
+    <div id="reg_result_content" class="lato font_10pt">
     </div>
 </div>