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

@@ -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>

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 %}

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;