Merge pull request #81 from gephi/fix-plugins-page-styling

Align Gephi plugins page styling with rest of site

Author: mbastian

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);

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>

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;

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;