QA Feedback resolution

Author: jlchilders11

libraries/views.py

@@ -108,12 +108,12 @@ def get_v3_context_data(self, **kwargs):
                 "label": "View",
                 "options": [
                     ("list", "List"),
-                    ("grid", "Grid"),
+                    ("grid", "Card"),
                     ("categorized", "Category"),
                     ("grading", "Grading"),
                 ],
                 "selected": self.kwargs.get("library_view_str"),
-                "width": "narrow",
+                "width": "category",
             },
             {
                 "type": "dropdown",
@@ -349,14 +349,17 @@ def get_results_by_tier(self):
         return [
             {
                 "category": "Flagship",
+                "icon": "flag",
                 "library_version_list": flagship,
             },
             {
                 "category": "Core",
+                "icon": None,
                 "library_version_list": core,
             },
             {
                 "category": "Other",
+                "icon": None,
                 "library_version_list": other,
             },
         ]

static/css/v3/library-filter.css

@@ -35,6 +35,10 @@
   flex-shrink: 0;
 }
 
+.library-filter__field-category {
+  width: 120px;
+}
+
 .library-filter__field-narrow {
   width: 104px;
 }

static/css/v3/library-page.css

@@ -37,6 +37,18 @@
     width: auto;
 }
 
+.library-page-hero .hero-image-dark {
+    display: none;
+}
+
+html.dark .library-page-hero .hero-image-light {
+    display: none;
+}
+
+html.dark .library-page-hero .hero-image-dark {
+    display:block
+}
+
 .library-page-hero .hero-title {
     grid-area: a;
     margin: 0;
@@ -129,6 +141,11 @@
     border: 1px solid var(--color-stroke-weak);
 }
 
+.library-page__category-header .icon {
+    display: inline-block;
+    margin-left: var(--space-large);
+}
+
 .grouped .library-item--list:first-child {
     border-radius: 0;
     border-top: none;

static/img/v3/solo-images/beaver-black-and-white-dark.png

@@ -91,6 +91,8 @@
     <path d="M13.3333 1.33331H1.33325V14.6666H2.66659V2.66665H13.3333V10.6666H3.99992V12H2.66659V13.3333H3.99992V12H14.6666V1.33331H13.3333ZM3.99992 4.66665H11.9999V5.99998H3.99992V4.66665ZM9.33325 7.33331H3.99992V8.66665H9.33325V7.33331Z" />
   {% elif icon_name == "github-issues" %}
     <path d="M3.33341 1.33331H6.00008V2.66665H4.66675V3.99998H3.33341V1.33331ZM3.33341 7.99998H2.00008V3.99998H3.33341V7.99998ZM4.66675 9.33331H3.33341V7.99998H4.66675V9.33331ZM6.00008 10.6666V9.33331H4.66675V10.6666H2.00008V9.33331H0.666748V10.6666H2.00008V12H4.66675V14.6666H6.00008V12H7.33341V10.6666H6.00008ZM6.00008 10.6666V12H4.66675V10.6666H6.00008ZM10.0001 2.66665V3.99998H6.00008V2.66665H10.0001ZM12.6667 3.99998H11.3334V2.66665H10.0001V1.33331H12.6667V3.99998ZM12.6667 7.99998V3.99998H14.0001V7.99998H12.6667ZM11.3334 9.33331V7.99998H12.6667V9.33331H11.3334ZM10.0001 10.6666V9.33331H11.3334V10.6666H10.0001ZM10.0001 12H8.66675V10.6666H10.0001V12ZM10.0001 12H11.3334V14.6666H10.0001V12Z" />
+  {% elif icon_name == "flag" %}
+    <path d="M3 2H13V4H21V18H11V16H5V22H3V2ZM5 14H13V16H19V6H11V4H5V14Z" />
   {% endif %}
 </svg>
 {% endif %}

templates/includes/icon.html

@@ -24,7 +24,8 @@ <h1 class="hero-title">Find a battle-tested library for the problem you're solvi
             {% include 'v3/includes/_field_text.html' with label='Search' name='ex_search' placeholder='Keyword, name, etc.' icon_left='search' submit_icon='arrow-right' %}
           </div>
           <div class="hero-image-container">
-            <img alt="Excited Cartoon Mascot" class="hero-image" src="{% static 'img/v3/solo-images/beaver-black-and-white.png' %}" loading="lazy" decoding="async" />
+            <img alt="Excited Cartoon Mascot" class="hero-image hero-image-light" src="{% static 'img/v3/solo-images/beaver-black-and-white.png' %}" loading="lazy" decoding="async" />
+            <img alt="Excited Cartoon Mascot" class="hero-image hero-image-dark" src="{% static 'img/v3/solo-images/beaver-black-and-white-dark.png' %}" loading="lazy" decoding="async" />
           </div>
       </section>
     <form action="" method="get">
@@ -55,7 +56,7 @@ <h1 class="hero-title">Find a battle-tested library for the problem you're solvi
     {% elif library_view_str == 'categorized' or library_view_str == 'grading' %}
       {% for result in library_versions_by_category %}
       <section>
-        <h2 class="library-page__category-header">{{ result.category }}</h2>
+        <h2 class="library-page__category-header">{{ result.category }} {% if result.icon %}{% include "includes/icon.html" with icon_name=result.icon only %}{% endif %}</h2>
         <ul class="library-item-list grouped">
           {% for item in result.library_version_list %}
             {% include 'v3/includes/_library_item.html' with variant='list' library_name=item.library.name library_url=item.library_detail_url_for_version description=item.description categories=item.library.category_tags cpp_version=item.cpp_standard_minimum author=item.author_details doc_url=item.documentation_url version_str=version_str only %}