From b8263aaf557047a9a8c7d5f290656d2bc60db790 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 12 Aug 2024 16:23:14 +0530
Subject: [PATCH] fix: redesigned the apps page

---
 frappe/www/apps.css  | 100 ++++++++++++++++++++++++++++++-------------
 frappe/www/apps.html |  84 ++++++++++++------------------------
 2 files changed, 98 insertions(+), 86 deletions(-)

diff --git a/frappe/www/apps.css b/frappe/www/apps.css
index 78f2203d5b..c8732faf1e 100644
--- a/frappe/www/apps.css
+++ b/frappe/www/apps.css
@@ -1,37 +1,43 @@
 .container {
-	max-width: 1000px;
-	padding: 0 1.25rem;
-}
-
-.apps-navbar {
 	display: flex;
+	flex-direction: column;
+	justify-content: center;
 	align-items: center;
-	justify-content: space-between;
-	height: 3rem;
-	border-bottom: 1px solid var(--border-color);
-}
-
-.apps-wrapper {
-	margin-top: 2.5rem;
+	height: 100vh;
+	max-width: 100vw;
+	padding: 0;
+	margin: 0;
+	background: var(--bg-light-gray);
 }
 
 .apps-container {
-	margin-top: 2rem;
-	margin-bottom: 2rem;
-	display: grid;
-	grid-template-columns: repeat(6, 60px);
-	row-gap: 50px;
-	justify-content: space-between;
+	display: flex;
+	flex-direction: column;
+	gap: 40px;
+	align-items: center;
+	justify-content: center;
+	background: var(--fg-color);
+	padding: 45px 80px;
+	border-radius: var(--border-radius-md);
+	border: 1px solid var(--border-color);
 }
 
-.apps-title {
-	margin: 0;
+.title {
 	font-size: var(--font-size-xl);
+	font-weight: 600;
+}
+
+.apps {
+	gap: 30px;
+	display: grid;
 }
 
 .app-icon {
 	display: flex;
 	flex-direction: column;
+	gap: 12px;
+	height: fit-content;
+	width: fit-content;
 	align-items: center;
 	justify-content: center;
 	text-decoration: none;
@@ -54,26 +60,60 @@
 }
 
 .app-title {
-	margin-top: 0.5rem;
-	font-size: 0.875rem;
-	font-weight: 400;
-	white-space: nowrap;
-	letter-spacing: 0.05em;
-	color: var(--gray-900);
+	color: var(--gray-900, #171717);
+	font-size: var(--font-size-md);
+	height: fit-content;
+	letter-spacing: 0.24px;
+	line-height: 115%;
+	min-width: 30px;
+	width: fit-content;
+	text-decoration: none;
+}
+
+.logout-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 5px;
+	border-radius: var(--border-radius-md);
+	background-color: #fff !important;
+}
+
+.logout-btn:hover {
+	background-color: var(--bg-light-gray) !important;
+}
+
+.logout-btn a {
+	text-decoration: none;
 }
 
 @media (max-width: 900px) {
-	.apps-container {
-		grid-template-columns: repeat(6, 60px);
+	.apps {
+		grid-template-columns: repeat(4, 1fr) !important;
 	}
 }
 
 @media (max-width: 575px) {
 	.apps-container {
-		grid-template-columns: repeat(4, 60px);
+		background: var(--fg-color);
+		gap: 30px;
+		padding: var(--padding-lg);
+		border: none;
+	}
+
+	.container {
+		background: var(--fg-color);
+	}
+
+	.title {
+		font-size: var(--font-size-md);
+	}
+
+	.apps {
+		grid-template-columns: repeat(3, 1fr) !important;
 	}
 
 	.app-title {
-		font-size: 0.75rem;
+		font-size: var(--font-size-sm);
 	}
 }
diff --git a/frappe/www/apps.html b/frappe/www/apps.html
index 67f5fdf391..6ae8591c51 100644
--- a/frappe/www/apps.html
+++ b/frappe/www/apps.html
@@ -1,69 +1,41 @@
 ---
-base_template: 'templates/base.html'
+base_template: "templates/base.html"
 no_cache: 1
 ---
 
-{%- block navbar -%}
-
-{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
-
-<nav class="apps-navbar">
-	<div class="container">
-		<div class="d-flex align-items-center justify-content-between">
-			<a class="navbar-brand" href="{{ url_prefix }}{{ home_page or "/" }}">
-				{%- if brand_html -%}
-					{{ brand_html }}
-				{%- elif banner_image -%}
-					<img src='{{ banner_image }}'>
-				{%- else -%}
-					<span>{{ (frappe.get_hooks("brand_html") or [_("Home")])[0] }}</span>
-				{%- endif -%}
-			</a>
-			<div class="dropdown">
-				<button class="btn" data-toggle="dropdown">
-					<div class="d-flex align-items-center">
-						{% set user = frappe.utils.get_user_info_for_avatar(frappe.session.user) %}
-						{{ avatar(full_name=user.name, image=user.image) }}
-						<span class="ml-1">{{ user.name }}</span>
-						<span class="ml-2 d-flex">
-							<svg class="es-icon icon-xs"><use href="#es-line-down"></use></svg>
-						</span>
-					</div>
-				</button>
-				<div class="dropdown-menu dropdown-menu-right" role="menu">
-					<a class="dropdown-item" href="/app">
-						{{ _('Switch to Admin') }}
-					</a>
-					<a class="dropdown-item" href="/api/method/web_logout">
-						{{ _('Logout') }}
-					</a>
-				</div>
-			</div>
-		</div>
-	</div>
-</nav>
-{%- endblock -%}
-
-{%- block footer -%}
-{%- endblock -%}
-
-{% block content %}
+{%- block navbar -%} {% from "frappe/templates/includes/avatar_macro.html" import avatar %} {%-
+endblock -%} {%- block footer -%} {%- endblock -%} {% block content %}
 <div class="container">
-	<div class="apps-wrapper">
-		<div class="d-flex justify-content-between">
-			<h2 class="apps-title">{{ _("Apps") }}</h2>
-			<a class="btn btn-default" href="/me">{{ _('My Account') }}</a>
-		</div>
-		<div class="apps-container">
+	<div class="apps-container">
+		<div class="title">{{ _('Select the app to continue') }}</div>
+		{% set appsCount = apps|length if apps|length <= 6 else 6 %}
+		<div class="apps" style="grid-template-columns: repeat({{ appsCount }}, 1fr);">
 			{% for app in apps %}
 			<a href="{{ app.route }}" class="app-icon">
 				<img class="app-logo" src="{{ app.logo }}" />
-				<div class="app-title">
-					{{ app.title }}
-				</div>
+				<div class="app-title">{{ app.title }}</div>
 			</a>
 			{% endfor %}
 		</div>
+		<a href="/api/method/web_logout" class="logout-btn btn btn-default">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class="lucide lucide-log-out"
+			>
+				<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+				<polyline points="16 17 21 12 16 7" />
+				<line x1="21" x2="9" y1="12" y2="12" />
+			</svg>
+			<span> {{ _('Logout') }} </span>
+		</a>
 	</div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}