new taskbar is here!

src/gui/src/UI/UIDesktop.js

@@ -643,6 +643,8 @@ async function UIDesktop(options){
             >`;
     h += `</div>`;
 
+    h += `<span id='clock'></span></div>`;
+
     // Get window sidebar width
     puter.kv.get('window_sidebar_width').then(async (val) => {
         let value = parseInt(val);

src/gui/src/UI/UITaskbar.js

@@ -42,7 +42,7 @@ async function UITaskbar(options){
     });
 
     let h = '';
-    h += `<div id="ui-taskbar_${window.global_element_id}" class="taskbar" style="height:${window.taskbar_height}px;"><span id='clock'></span></div>`;
+    h += `<div id="ui-taskbar_${window.global_element_id}" class="taskbar" style="height:${window.taskbar_height}px;">`;
 
     $('.desktop').append(h);
 
@@ -186,8 +186,9 @@ async function UITaskbar(options){
 
     //---------------------------------------------
     // Add other useful apps to the taskbar
+    // only if not mobile
     //---------------------------------------------
-    if(window.user.taskbar_items && window.user.taskbar_items.length > 0){
+    if(window.user.taskbar_items && !isMobile.phone && window.user.taskbar_items.length > 0){
         for (let index = 0; index < window.user.taskbar_items.length; index++) {
             const app_info = window.user.taskbar_items[index];
             // add taskbar item for each app

src/gui/src/UI/UIWindow.js

@@ -554,7 +554,7 @@ async function UIWindow(options) {
             'top': window.toolbar_height + 'px',
             'left': '0',
             'width': '100%',
-            'height': `calc(100% - ${window.taskbar_height + window.toolbar_height + 1}px)`,
+            'height': `calc(100% - ${window.taskbar_height + window.toolbar_height + 6}px)`,
             'transform': 'none',
         });
     }
@@ -3288,7 +3288,7 @@ window.scale_window = (el_window)=>{
             'top': window.toolbar_height+'px',
             'left': '0',
             'width': '100%',
-            'height': `calc(100% - ${window.taskbar_height + window.toolbar_height + 1}px)`,
+            'height': `calc(100% - ${window.taskbar_height + window.toolbar_height + 6}px)`,
             'transform': 'none',
         });
     }
@@ -3535,7 +3535,10 @@ $.fn.hideWindow = async function(options) {
     $(this).each(async function() {
         if($(this).hasClass('window')){
             // get taskbar item location
-            const taskbar_item_pos = $(`.taskbar .taskbar-item[data-app="${$(this).attr('data-app')}"]`).position();
+            let taskbar_item_pos = $(`.taskbar .taskbar-item[data-app="${$(this).attr('data-app')}"]`).position();
+
+            // taskbar position is center of window minus half of taskbar item width
+            taskbar_item_pos.left = taskbar_item_pos.left + ($( window ).width()/ 2) - ($(`.taskbar`).width() / 2);
 
             $(this).attr({
                 'data-orig-width': $(this).width(), 
@@ -3550,7 +3553,7 @@ $.fn.hideWindow = async function(options) {
                 width: `0`,
                 height: `0`,
                 top: 'calc(100% - 60px)',
-                left: taskbar_item_pos.left + 29,
+                left: taskbar_item_pos.left + 14.5,
             });
 
             // remove transitions a good while after setting css to make sure 

src/gui/src/css/style.css

@@ -2299,8 +2299,17 @@ label {
     display: flex;
     justify-content: center;
     z-index: 99999;
-    box-shadow: 5px 5px 5px 3px #6e6e6e;
+    box-shadow: 0px 0px 4px 0px #7575757a;
     overflow: hidden !important;
+
+    height: 50px;
+    border-radius: 10px;
+    bottom: 5px;
+    padding-left: 7px;
+    padding-right: 7px;
+    width: auto;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .taskbar .taskbar-item {
@@ -2367,6 +2376,10 @@ label {
     border-radius: 3px;
 }
 
+.device-phone .active-taskbar-indicator{
+    display: none !important; 
+}
+
 .taskbar .taskbar-icon img {
     width: 100%;
     height: 100%;
@@ -2382,7 +2395,15 @@ label {
 #clock {
     display: none;
     position: absolute;
-    right: 10px;
+    right: 15px;
+    color: white;
+    text-shadow: 0px 0px 3px #00000082, 0px 0px 3px #00000082, 0px 0px 3px #00000082;
+    font-size: 13px;
+    bottom:7px;
+}
+
+.device-phone #clock {
+    display: none !important;
 }
 
 .desktop-bg-settings-wrapper {
@@ -2429,7 +2450,6 @@ label {
         margin-right: 5px;
         overflow: visible !important;
         padding: 5px 5px 10px 5px;
-        position: absolute;
     }
     
     .taskbar-icon {