From 1de071cceb4aa8f6764f1d46515a4cbe3459b90d Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Mon, 9 Dec 2024 13:02:41 -0800
Subject: [PATCH] ui: Don't use nav-link inside card

- .nav-link classes are meant to be used in navbars and tab navigations. Don't
use them incorrectly in .card to avoid potential breakages and readability.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
---
 plinth/templates/card.html         |  2 +-
 plinth/templates/index.html        |  4 ++--
 static/themes/default/css/main.css | 11 ++++-------
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/plinth/templates/card.html b/plinth/templates/card.html
index 6466433c3..7a3e5169d 100644
--- a/plinth/templates/card.html
+++ b/plinth/templates/card.html
@@ -5,7 +5,7 @@
 {% load static %}
 
 <div class="card">
-  <a href="{{ item.url }}" class="nav-link">
+  <a href="{{ item.url }}">
     <div class="card-icon">
       {% if 'fa-' in item.icon %}
         <span class="fa {{ item.icon }}"></span>
diff --git a/plinth/templates/index.html b/plinth/templates/index.html
index 089805f7f..59a9ca2d1 100644
--- a/plinth/templates/index.html
+++ b/plinth/templates/index.html
@@ -57,9 +57,9 @@
               {% if user.is_authenticated or not shortcut.login_required %}
                 <div class="card">
                   {% if selected_shortcut.component_id == shortcut.component_id %}
-                    <a href="{{ shortcut.url }}" class="nav-link active">
+                    <a href="{{ shortcut.url }}" class="active">
                   {% else %}
-                    <a href="{{ shortcut.url }}" class="nav-link">
+                    <a href="{{ shortcut.url }}">
                   {% endif %}
                         <div class="card-icon">
                           {% if "custom" in shortcut.icon %}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index c0e751cff..a2066fc0e 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -291,10 +291,6 @@ body {
     animation: spin 1s linear infinite;
 }
 
-.nav-link:hover, .nav-link:visited, .nav-link:link, .nav-link:active {
-    text-decoration: none;
-}
-
 @keyframes spin {
     0% {
         transform: rotate(0deg);
@@ -594,10 +590,11 @@ footer {
     background: #eee;
 }
 
-.card .nav-link {
+.card > a {
     display: block;
     padding: 0rem;
-    color: #212529;  /* Same as Bootstrap default color */
+    color: var(--bs-body-color);
+    text-decoration: none;
 }
 
 .card-title {
@@ -631,7 +628,7 @@ footer {
     padding: 0;
 }
 
-.system-page .card .nav-link {
+.system-page .card > a {
     display: grid;
     grid-template-columns: 2.1875rem auto;
     grid-column-gap: 0.625rem;