From cb4795efb7a58b378fb9cc645f41b4b95181174b Mon Sep 17 00:00:00 2001
From: Mathieu Bastian <mathieu.bastian@gmail.com>
Date: Sun, 13 Sep 2026 12:27:19 +0200
Subject: [PATCH] Align Gephi plugins page styling with rest of site

- Style the plugins search input with Bootstrap's form-control class
  and give it a white background instead of blending into the page
- Give plugin cards a shadow + white background like the site's other
  card UI, and stretch them to equal height so grid rows line up
- Add spacing between icons and headings on the plugin detail page
- Use the branded title font for individual plugin page headings

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/plugins/PluginsFilters.tsx |  1 +
 src/pages/desktop/plugins/[id].astro      |  2 +-
 src/styles/_plugins.scss                  | 12 +++++++++++-
 src/styles/_variables-set.scss            |  1 +
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/plugins/PluginsFilters.tsx b/src/components/plugins/PluginsFilters.tsx
index 3c6791f..fdb5133 100644
--- a/src/components/plugins/PluginsFilters.tsx
+++ b/src/components/plugins/PluginsFilters.tsx
@@ -142,6 +142,7 @@ export const PluginsFilters: FC<{ plugins: Plugin[] }> = ({ plugins }) => {
             <legend>Search</legend>
             <input
               type="search"
+              className="form-control"
               value={query || ""}
               onChange={(e) => {
                 setQuery(e.target.value);
diff --git a/src/pages/desktop/plugins/[id].astro b/src/pages/desktop/plugins/[id].astro
index da6a360..fe87159 100644
--- a/src/pages/desktop/plugins/[id].astro
+++ b/src/pages/desktop/plugins/[id].astro
@@ -59,7 +59,7 @@ const topVersionIsLatestGephi = !!topVersionTag && topVersionTag === latestGephi
 
     <div class="banner-contents">
       <div class="banner-texts gap-3">
-        <h1 class="fs-2">{plugin.name}</h1>
+        <h1 class="fs-2 gephi-font">{plugin.name}</h1>
 
         <p class="fs-4">{plugin.short_description}</p>
         <p class="fs-5 opacity-75">last updated on {plugin.last_update}</p>
diff --git a/src/styles/_plugins.scss b/src/styles/_plugins.scss
index a7587ad..3d78620 100644
--- a/src/styles/_plugins.scss
+++ b/src/styles/_plugins.scss
@@ -42,18 +42,23 @@
     @extend .col-xl-4;
     @extend .col-xxl-3;
     padding: $spacer-2;
+    display: flex;
 
     .card {
+      @extend .shadow;
       @extend .text-dark;
+      background: $white;
       border: none;
+      padding: $spacer-3;
       text-decoration: none;
       display: flex;
       flex-direction: column;
       gap: $spacer-1;
+      height: 100%;
+      width: 100%;
     }
 
     .plugin-image {
-      @extend .border;
       margin-bottom: $spacer-2;
       background: white;
       max-width: 100%;
@@ -76,6 +81,7 @@
     .plugin-description {
       @extend .fs-5;
       margin: 0;
+      flex-grow: 1;
     }
   }
 }
@@ -129,6 +135,10 @@
 }
 
 .plugin-page {
+  h2 svg {
+    margin-right: $spacer-2;
+  }
+
   .older-versions {
     summary {
       display: inline-flex;
diff --git a/src/styles/_variables-set.scss b/src/styles/_variables-set.scss
index 93547bb..b144fb0 100644
--- a/src/styles/_variables-set.scss
+++ b/src/styles/_variables-set.scss
@@ -45,4 +45,5 @@ $h2-font-size: 2.5rem !default;
 $body-bg: $light !default;
 $primary: $custom-purple !default;
 $form-check-input-bg: white !default;
+$input-bg: white !default;
 $enable-rounded: false !default;