Update icon usage within maker table

symfony/assets/styles/general.scss

@@ -46,9 +46,7 @@ span.utc_datetime {
   text-underline-offset: 0.2ex;
 }
 
-.new-creator,
-#legend-modal .new-creator, // More precise selector, otherwise was overwritten by Bootstrap styles
-{
+.new-creator {
   color: #4cae4c;
 }
 

symfony/assets/styles/main.scss

@@ -21,6 +21,29 @@
   }
 }
 
+span.maker-table-icon {
+  color: var(--maker-icon-color);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--maker-icon-color), #fff 80%);
+  border-radius: 8px;
+  line-height: 12px;
+
+  .fas {
+    font-size: 22px;
+  }
+
+  .text {
+    font-size: 10px;
+  }
+}
+
 div#data-table-container {
   table .makerId,
   table .state,
@@ -82,6 +105,16 @@ table#creators-table {
       vertical-align: middle;
     }
 
+    td.icons {
+      padding: 0 0.5rem;
+
+      .icons-container {
+        display: flex;
+        justify-content: space-evenly;
+        gap: 0.5rem;
+      }
+    }
+
     td.features,
     td.types,
     td.styles,

symfony/src/Twig/AppExtensions.php

@@ -68,6 +68,7 @@ public function getFunctions(): array
             new TwigFunction('get_cst_issue_text', $this->getCstIssueText(...)),
             new TwigFunction('has_good_completeness', $this->hasGoodCompleteness(...)),
             new TwigFunction('is_new', $this->isNew(...)),
+            new TwigFunction('is_minor', $this->isMinor(...)),
             new TwigFunction('unique_int', fn () => $this->uniqueInt++),
             new TwigFunction('unknown_value', $this->unknownValue(...), SafeFor::HTML),
         ];
@@ -108,6 +109,11 @@ public function isNew(Creator $creator): bool
         return NewArtisan::isNew($creator);
     }
 
+    public function isMinor(Creator $creator): bool
+    {
+        return Ages::MINORS === $creator->getAges();
+    }
+
     public function hasGoodCompleteness(Creator $creator): bool
     {
         return Completeness::hasGood($creator);

symfony/templates/main/htmx/creators_in_table.html.twig

@@ -7,6 +7,17 @@
             inactive: creator.isHidden,
             'matched-maker-id': creator.hasMakerId(searched_creator_id),
         }) }}">
+        <td class="icons">
+            <div class="icons-container">
+                {% if is_new(creator) %}
+                    {{ include('main/htmx/maker_icon.html.twig', { text: 'New', fa_icon: 'leaf', color: '#4cae4c'}) }}
+                {% endif %}
+
+                {% if is_minor(creator) %}
+                    {{ include('main/htmx/maker_icon.html.twig', { text: 'Minor', fa_icon: 'child', color: '#E3963E'}) }}
+                {% endif %}
+            </div>
+        </td>
         <td class="name" {{ card_open_attrs(creator.lastMakerId) }}>
             <span class="flag-icon flag-icon-{{ creator.country|lower }}"></span>&nbsp;
 
@@ -15,12 +26,6 @@
             {%- if creator.isHidden -%}
                 &nbsp;[hidden]{# grep-inactive-mark #}
             {%- endif -%}
-
-            <span class="text-nowrap">{{ ages_description(creator, false) }}</span>
-
-            {% if is_new(creator) %}
-                <span class="text-nowrap new-creator"><i class="fa-solid fa-leaf"></i>&nbsp;recently added</span>
-            {% endif %}
         </td>
 
         <td class="makerId column-toggleable" {{ card_open_attrs(creator.lastMakerId) }}>

symfony/templates/main/htmx/maker_icon.html.twig

@@ -0,0 +1,7 @@
+<span
+    class="maker-table-icon"
+    style="--maker-icon-color: {{ color }}"
+>
+    <i class="fas fa-{{ fa_icon }}"></i>
+    <span class="text">{{ text }}</span>
+</span>

symfony/templates/main/main.html.twig

@@ -33,8 +33,6 @@
 
     {{ include('main/parts/filters.html.twig') }}
 
-    {{ include('main/parts/legend_modal.html.twig') }}
-
     <div id="creator-updates-modal" class="modal fade" tabindex="-1" aria-hidden="true">
         <div class="modal-dialog" role="document">
             <div id="creator-updates-modal-content" class="modal-content">
@@ -65,7 +63,7 @@
 
     <div id="main-primary-content" class="row d-none">
         <div class="col-md-6">
-            <div class="btn-group mb-2" role="group" aria-label="Menus and legend">
+            <div class="btn-group mb-2" role="group" aria-label="Menus">
                 <div class="btn-group" role="group">
                     <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown"
                             data-bs-auto-close="outside" aria-expanded="false">
@@ -86,10 +84,6 @@
 
                     <span id="active-filters-count" class="badge rounded-pill text-bg-light"></span>
                 </button>
-
-                <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#legend-modal">
-                    Legend
-                </button>
             </div>
         </div>
 
@@ -101,6 +95,7 @@
             <table id="creators-table" class="table table-striped table-sm table-hover">
                 <thead class="table-dark">
                     <tr>
+                        <th></th>
                         <th class="name text-start">Fursuit maker /&nbsp;studio name</th>
                         {% for column in columns %}
                             <th class="{{ column.id }} {{ column.alignment_class }}">