From 5fedde1bda82e40bf50bb29d10a19eebf9e5c50f Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Sat, 2 Nov 2024 19:02:52 -0700
Subject: [PATCH] ui: Drop box shadow around the card in card lists

- Drop the box shadow around a card item. Applies to home, apps, system, and
help pages.

- Replace the box shadow on hover with gray background. This gives the card a
much flatter look.

- Drop the top and bottom padding for app title as this is no longer necessary
as the white space around the icon/text is not overwhelming.

  - Add top padding for app titles to make them level with icon tops.

- Drop the margin around the cards as it is not needed anymore. This completely
removes non-clickable area between the cards (which is unnecessary).

  - Increase the padding to compensate for the reduction in the total gap
  between the cards.

  - In system page, increase in top margin for the section title is needed to
  compensate for the loss of bottom margin for cards.

  - In system page, increase in the total width of the card is necessary to make
  the total row size the size of the container.

Tests:

- In apps and system pages, gap between the section title and cards in the
previous row is sufficient.

- In system page, 4 cards fit exactly in each row given the screen is large
enough.

- In apps page, app titles margins appear pleasant.

- In system page, the app titles align with icon tops.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 static/themes/default/css/main.css | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index a5e3624a4..2d0825116 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -515,14 +515,10 @@ footer {
     display: flex;
     font-weight: 800;
     font-size: 1.25rem;
-    margin-bottom: 1.25rem;
+    margin: 1.25rem 0;
     border-bottom: var(--neutral-dark-color) solid 2px;
 }
 
-.card-section-title {
-    margin-top: 1.25rem;
-}
-
 a.menu_link {
     text-decoration: none;
 }
@@ -539,17 +535,15 @@ a.menu_link_active {
     display: block;
     line-height: 1.42857143;
     text-align: center;
-    box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0,0,0,0.2);
     width: 10rem;
-    padding: 0.5rem 0.25rem;
-    margin: 0 0.625rem 1.25rem;
+    padding: 1rem;
     border: none;
     border-radius: 0.5rem;
     transition: border .2s ease-in-out;
 }
 
 .card:hover {
-    box-shadow: 0 0.3125rem 0.9375rem 0.125rem rgba(0, 0, 0, 0.2);
+    background: #eee;
 }
 
 .card .nav-link {
@@ -560,7 +554,6 @@ a.menu_link_active {
 
 .card-title {
     font-size: 1.25rem;
-    padding: 0.25rem 0;
     margin-bottom: 0;
 }
 
@@ -581,7 +574,7 @@ a.menu_link_active {
 /* System page - special card styling */
 .system-page .card {
     text-align: left;
-    width: 19.375rem;
+    width: 20.625rem;
     padding: 0;
 }
 
@@ -600,7 +593,7 @@ a.menu_link_active {
     text-overflow: ellipsis;
     grid-row: 1;
     grid-column: 2;
-    padding: 0;
+    padding: 0.375rem 0 0;
 }
 
 .system-page .card-icon {