style/global menu: tweak the update available indicators

apps/client/src/stylesheets/theme-next-dark.css

@@ -160,6 +160,9 @@
     --launcher-pane-horiz-background-color-bgfx: #ffffff17; /* When background effects enabled */
     --launcher-pane-horiz-border-color-bgfx: #00000080; /* When background effects enabled */
 
+    --global-menu-update-available-badge-background-color: #7dbe61;
+    --global-menu-update-available-badge-color: black;
+
     --protected-session-active-icon-color: #8edd8e;
     --sync-status-error-pulse-color: #f47871;
 

apps/client/src/stylesheets/theme-next-light.css

@@ -153,6 +153,9 @@
     --launcher-pane-horiz-background-color-bgfx: #ffffffb3; /* When background effects enabled */
     --launcher-pane-horiz-border-color-bgfx: #00000026; /* When background effects enabled */
 
+    --global-menu-update-available-badge-background-color: #4fa450;
+    --global-menu-update-available-badge-color: white;
+
     --protected-session-active-icon-color: #16b516;
     --sync-status-error-pulse-color: #ff5528;
 

apps/client/src/stylesheets/theme-next/shell.css

@@ -279,14 +279,11 @@ body.layout-horizontal > .horizontal {
     animation: sync-status-pulse 1s ease-in-out alternate-reverse infinite;
 }
 
-#launcher-pane .global-menu-button {
+#launcher-pane button.global-menu-button {
-    --hover-item-background-color: transparent;
+    --update-badge-x-offset: 3%;
-}
+    --update-badge-y-offset: -12%;
 
-#launcher-pane.horizontal .global-menu-button .global-menu-button-update-available {
+    --hover-item-background-color: transparent;
-    inset-inline-end: -23px;
-    bottom: -22px;
-    transform: scale(0.85);
 }
 
 .tooltip .tooltip-arrow {

apps/client/src/widgets/buttons/global_menu.css

@@ -9,6 +9,9 @@
 }
 
 button.global-menu-button {
+    --update-badge-x-offset: 4%;
+    --update-badge-y-offset: -16%;
+
     position: relative;
     width: 100% !important;
     height: 100% !important;
@@ -55,13 +58,26 @@ button.global-menu-button {
 
 .global-menu-button-update-available {
     position: absolute;
-    inset-inline-end: -30px;
+    display: flex;
-    bottom: -30px;
+    width: 16px;
-    width: 100%;
+    height: 16px;
-    height: 100%;
+    right: calc(0px - var(--update-badge-x-offset));
+    bottom: calc(0px - var(--update-badge-y-offset));
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    background: var(--global-menu-update-available-badge-background-color, var(--admonition-tip-accent-color));
+    color: var(--global-menu-update-available-badge-color, var(--main-background-color));
+    font-size: 16px;
+    transition: transform 200ms ease-in-out;
     pointer-events: none;
 }
 
+.global-menu-button.show .global-menu-button-update-available {
+    transform: scale(.75);
+    transform-origin: center;
+}
+
 .global-menu .zoom-container {
     display: flex;
     flex-direction: row;
@@ -99,21 +115,6 @@ button.global-menu-button {
     margin-inline-end: 6px;
 }
 
-/* #region Update available */
-.global-menu-button-update-available-button {
-    width: 21px !important;
-    height: 21px !important;
-    padding: 0 !important;
-
-    border-radius: var(--button-border-radius);
-    transform: scale(0.9);
-    border: none;
-    opacity: 0.8;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
 
 .global-menu-button-wrapper:hover .global-menu-button-update-available-button {
     opacity: 1;

apps/client/src/widgets/buttons/global_menu.tsx

@@ -26,7 +26,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
     const isVerticalLayout = !isHorizontalLayout;
     const parentComponent = useContext(ParentComponent);
     const { isUpdateAvailable, latestVersion } = useTriliumUpdateStatus();
-
+    
     return (
         <Dropdown
             className="global-menu"
@@ -34,7 +34,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
             text={<>
                 {isVerticalLayout && <VerticalLayoutIcon />}
                 {isUpdateAvailable && <div class="global-menu-button-update-available">
-                    <span className="bx bx-sync global-menu-button-update-available-button" title={t("update_available.update_available")}></span>
+                    <span className="bx bxs-down-arrow-alt global-menu-button-update-available-button" title={t("update_available.update_available")}></span>
                 </div>}
             </>}
             noDropdownListStyle
@@ -58,7 +58,10 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
             <KeyboardActionMenuItem command="showHelp" icon="bx bx-help-circle" text={t("global_menu.show_help")} />
             <KeyboardActionMenuItem command="showCheatsheet" icon="bx bxs-keyboard" text={t("global_menu.show-cheatsheet")} />
             <MenuItem command="openAboutDialog" icon="bx bx-info-circle" text={t("global_menu.about")} />
-            {isUpdateAvailable && <MenuItem command={() => window.open("https://github.com/TriliumNext/Trilium/releases/latest")} icon="bx bx-sync" text={t("global_menu.update_available", { latestVersion })} /> }
+            {isUpdateAvailable &&  <>
+                <FormDropdownDivider />
+                <MenuItem command={() => window.open("https://github.com/TriliumNext/Trilium/releases/latest")} icon="bx bx-download" text={t("global_menu.update_available", { latestVersion })} />
+            </>}
             {!isElectron() && <BrowserOnlyOptions />}
         </Dropdown>
     )