refactor: change the design of desktop search

frappe/desk/page/desktop/desktop.css

@@ -32,23 +32,22 @@
 
 .desktop-search-wrapper{
     flex: 1;
-    max-width: 396px;
     position: relative;
 }
 
-#navbar-modal-search{
-    padding-left: 32px;
+.desktop-search-wrapper span {
+    color: var(--text-light);
 }
-.desktop-search-icon{
-    position: absolute;
-    left: 10px;
-    top: 4px;
+
+#navbar-modal-search{
+    background-color: var(--control-bg);
 }
 #brand-logo{
     width: auto;
 }
 .desktop-search-icon > .icon {
     stroke-width: 1px;
+    margin-bottom: 2px;
 }
 
 .desktop-container{

frappe/desk/page/desktop/desktop.html

@@ -8,21 +8,23 @@
                 alt="{{ _("App Logo") |e }}"
             >
         </div>
-        <div class="flex">
-            <div class="desktop-search-wrapper input-group search-bar text-muted ">
-                <button
-                    id="navbar-modal-search"
-                    class="btn-reset"
-                    title="Search"
-                >
-                    <span class="desktop-search-icon">
-                        <svg class="icon icon-sm"><use href="#icon-search"></use></svg>
-                    </span>
-                </button>
-            </div>
-            <div class="desktop-avatar" style="margin-left: -10px;">
+        <div class="desktop-search-wrapper input-group search-bar">
+            <button
+                id="navbar-modal-search"
+                class="btn-reset flex justify-between"
+                title="Search"
+            >
+                <span class="desktop-search-icon">
+                    <svg class="icon icon-sm"><use href="#icon-search"></use></svg>
+                    Search
+                </span>
+                <span>
+                    {{ "⌘ K" if is_mac else "Ctrl K" }}
+                </span>
+            </button>
+        </div>
+        <div class="desktop-avatar" style="margin-left: -10px;">
 
-            </div>
         </div>
     </header>
     <div class="desktop-container">

frappe/desk/page/desktop/desktop.py

@@ -1,3 +1,5 @@
+import sys
+
 import frappe
 from frappe.desk.doctype.desktop_icon.desktop_icon import get_desktop_icons
 
@@ -13,4 +15,6 @@ def get_context(context):
 	context.brand_logo = brand_logo
 	context.desktop_icons = get_desktop_icons()
 	context.current_user = frappe.session.user
+	# check if system is mac or not
+	context.is_mac = sys.platform == "darwin"
 	return context