refactor: Additional UI cleanup.

src/components/about/About.tsx

@@ -16,7 +16,7 @@ const links = {
       <SiKofi
         className="d-none d-md-inline"
         style={{ transform: 'translateY(1px)' }}
-      /> donating on Ko-Fi
+      />&nbsp;donating on Ko-Fi
     </ExternalLink>
   ),
   makePrivacyStick: (
@@ -101,7 +101,7 @@ const Links = () => {
 
 // ----- Search Help -----------------------------------------------------------
 
-const Example = ({ children }: { children: React.ReactNode }) => (
+const Example = ({ children }: React.PropsWithChildren) => (
   <div className="card mb-4">
     <div className="card-body px-3 py-2">
       <pre className="mb-0 fs-5"><code>{children}</code></pre>
@@ -190,7 +190,7 @@ const PrivacyPolicy = () => (
       <ul>
         <li>
           To provide statistics, we count the number of visitors on <InlineCode>signalstickers.org</InlineCode>
-          in a way that does not track your IP address ({links.noTrack}), so our statistics are anonymous.
+          {' '}in a way that does not track your IP address, so our statistics are anonymous. ({links.noTrack})
         </li>
         <li>
           The <InlineCode>signalstickers.org</InlineCode> website is hosted on {links.githubPages}. We
@@ -224,7 +224,7 @@ const PrivacyPolicy = () => (
 
 export default function AboutPage() {
   return (
-    <div className="my-4 p-lg-3">
+    <div className="my-3 my-sm-4">
       <AboutSection />
       <hr className="my-4 pb-2" />
       <Links />

src/components/contribute/Contribute.tsx

@@ -205,7 +205,7 @@ export default function ContributePack() {
 
 
   return (
-    <div className="my-4 p-lg-3 px-lg-4">
+    <div className="my-3 my-sm-4">
       <div className="row">
         <div className="col-12">
           <h1 className="mb-4">Contribute</h1>

src/components/home/SearchInput.css.ts

@@ -7,43 +7,12 @@ const classes: Record<string, string> = {
   }),
   searchClearIcon: style({
     opacity: 0.6,
-    transition: 'opacity 0.2s ease-in-out, transform 0.1s ease',
+    transition: 'opacity 0.2s ease-in-out, transform 0.1s ease-in-out',
     ':hover': {
       opacity: 1
     }
-  }),
-  miniTag: style({
-    padding: '0px 5px',
-    color: 'var(--bs-primary) !important',
-    ':focus': {
-      boxShadow: '0px 0px 0px 2px rgba(var(--bs-primary-rgb), 0.25)'
-    }
   })
 };
 
-classes.miniTagAnimated = style([classes.miniTag, {
-  border: '1px solid var(--bs-orange) !important',
-  color: 'var(--bs-orange) !important',
-  ':hover': {
-    color: 'var(--bs-orange)'
-  },
-  ':focus': {
-    // N.B. Bootstrap does not define a --bs-orange-rgb CSS variable, so we have
-    // to define it explicitly.
-    boxShadow: '0px 0px 0px 2px rgba(253, 126, 20, 0.25)'
-  }
-}]);
-
-classes.miniTagEditorsChoice = style([classes.miniTag, {
-  border: '1px solid rgb(148, 0, 211) !important',
-  color: 'rgb(148, 0, 211) !important',
-  ':hover': {
-    color: 'rgb(148, 0, 211)'
-  },
-  ':focus': {
-    boxShadow: '0px 0px 0px 2px rgba(148, 0, 211, 0.25)'
-  }
-}]);
-
 
 export default classes;

src/components/home/SearchInput.tsx

@@ -2,8 +2,9 @@ import cx from 'classnames';
 import debounceFn from 'debounce-fn';
 import pluralize from 'pluralize';
 import React from 'react';
-import { BsSearch, BsX } from 'react-icons/bs';
+import { BsSearch, BsXLg } from 'react-icons/bs';
 
+import Tag from 'components/general/Tag';
 import AppStateContext from 'contexts/AppStateContext';
 import StickersContext from 'contexts/StickersContext';
 
@@ -55,18 +56,13 @@ export default function SearchInputComponent() {
 
 
   /**
-   * [Event Handler] Sets the search query when a tag or the 'animated'
-   * suggestion is clicked.
+   * [Event Handler] Sets an appropriate search query when non-tag suggestion
+   * types are selected.
    */
   const onSuggestionClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
     if (!searcher || !event.currentTarget.textContent) return;
 
     switch (event.currentTarget.dataset.suggestionType) {
-      case 'tag':
-        setSearchQuery(searcher.buildQueryString({
-          expression: { $and: [{ tag: event.currentTarget.textContent }] }
-        }));
-        break;
       case 'animated':
         setSearchQuery(searcher.buildQueryString({
           expression: { $and: [{ animated: 'true' }] }
@@ -123,29 +119,38 @@ export default function SearchInputComponent() {
 
 
   /**
-   * [Memo] JSX fragment containing the set of suggested tags.
+   * [Memo] Suggested categories and tags.
    */
-  const tagsFragment = React.useMemo(() => suggestedTags.map(tag => (
-    <button
-      type="button"
-      key={tag}
-      className={cx(
-        classes.miniTag,
-        'btn btn-outline-primary bg-transparent fs-7 fw-medium me-1'
-      )}
-      onClick={onSuggestionClick}
-      data-suggestion-type="tag"
-    >
-      {tag}
-    </button>
-  )), [suggestedTags]);
+  const tagsFragment = React.useMemo(() => {
+    return (
+      <>
+        <button
+          type="button"
+          className="btn btn-outline-secondary px-2 py-0 text-nowrap shadow-sm fs-7"
+          onClick={onSuggestionClick}
+          data-suggestion-type="editorschoice"
+        >
+          Editor's Choice
+        </button>
+        <button
+          type="button"
+          className="btn btn-outline-secondary px-2 text-nowrap shadow-sm py-0 fs-7"
+          onClick={onSuggestionClick}
+          data-suggestion-type="animated"
+        >
+          Animated
+        </button>
+        {suggestedTags.map(tag => <Tag key={tag} label={tag} className="shadow-sm" />)}
+      </>
+    );
+  }, [suggestedTags]);
 
 
   return (
     <div className="position-relative mb-4">
-      <div className="mb-1 position-relative">
-        <div className="position-absolute inset-0 d-flex align-items-center ps-3 h-100 pe-none">
-          <BsSearch className="text-secondary" />
+      <div className="mb-2 position-relative rounded-3 shadow-sm">
+        <div className="position-absolute top-0 start-0 d-flex align-items-center ps-3 h-100 pe-none">
+          <BsSearch className="text-body-secondary" />
         </div>
         <input
           type="text"
@@ -167,56 +172,29 @@ export default function SearchInputComponent() {
         {/* Search Clear Button */}
         <button
           type="button"
+          title="Clear Search Results"
           className={cx(
-            'btn btn-link position-absolute top-0 end-0 text-light',
-            'd-flex align-items-center h-100 px-2'
+            'btn btn-link position-absolute top-0 end-0 text-reset',
+            'd-flex align-items-center h-100 px-3 fs-4'
           )}
-          title="Clear Search Results"
           onClick={clearSearchResults}
           style={{ opacity: searchQueryInputValue ? 1 : 0 }}
         >
-          <BsX className={cx(classes.searchClearIcon, 'fs-1')} />
+          <BsXLg className={classes.searchClearIcon} />
         </button>
       </div>
-      <div className="d-flex flex-column flex-md-row-reverse justify-content-between">
-        {/* Search Result Count */}
-        <div className="text-muted text-end fs-6 me-1">
-          {(searchResults?.length || 0).toLocaleString()} {pluralize('result', searchResults.length ?? 0)}
-        </div>
-
+      <div className="d-flex align-items-start justify-content-between gap-2 mb-4 mb-md-5">
         {/* Suggested Tags */}
-        <div>
-          <span className="fs-6">
-            Suggested: {' '}
-          </span>
-          <br className="d-inline d-md-none" />
-          <button
-            type="button"
-            className={cx(
-              classes.miniTagAnimated,
-              'btn fs-7 fw-medium bg-transparent me-1'
-            )}
-            onClick={onSuggestionClick}
-            data-suggestion-type="animated"
-          >
-            Animated
-          </button>
-          <button
-            type="button"
-            className={cx(
-              classes.miniTagEditorsChoice,
-              'btn fs-7 fw-medium me-1'
-            )}
-            onClick={onSuggestionClick}
-            data-suggestion-type="editorschoice"
-          >
-            Editor's choice
-          </button>
+        <div className="d-flex align-items-center align-self-start flex-wrap gap-2">
           {tagsFragment}
         </div>
-      </div>
-      <div className="mt-4 mt-md-5 d-flex">
 
+        {/* Search Result Count */}
+        <div className="text-muted text-nowrap fs-6 align-self-start">
+          {(searchResults?.length || 0).toLocaleString()} {pluralize('result', searchResults.length ?? 0)}
+        </div>
+      </div>
+      <div className="d-flex">
         {/* Sort Dropdown */}
         <div className="me-4">
           <span className="fs-6">

src/components/home/SearchResults.tsx

@@ -4,11 +4,10 @@ import { Link } from 'react-router-dom';
 import { Waypoint } from 'react-waypoint';
 
 import StickersContext from 'contexts/StickersContext';
+import globalClasses from 'etc/global-styles.css';
 
-import classes from './SearchResults.css';
 import StickerPackPreviewCard from './StickerPackPreviewCard';
 
-
 /**
  * How many items we will load each time loadMore() is called.
  */
@@ -56,12 +55,13 @@ export default function StickerPackListComponent() {
     <div className="d-flex flex-column flex-grow-1 mb-4">
       <div className="row flex-grow-1">
         <div className="col-12">
-          <div className={classes.stickerGridView}>
+          <div className={globalClasses.gridView}>
             {renderedSearchResults.map(stickerPackPartial => {
               return (
                 <Link
                   key={stickerPackPartial.meta.id}
                   to={`/pack/${stickerPackPartial.meta.id}`}
+                  style={{ aspectRatio: 1 }}
                 >
                   <StickerPackPreviewCard stickerPack={stickerPackPartial} />
                 </Link>
@@ -72,7 +72,7 @@ export default function StickerPackListComponent() {
         <Waypoint
           key={cursor}
           onEnter={loadMore}
-          bottomOffset="-500px"
+          bottomOffset="-640px"
         />
       </div>
     </div>

src/components/home/StickerPackPreviewCard.css.ts

@@ -4,8 +4,12 @@ import { style, globalStyle } from '@vanilla-extract/css';
 const classes = {
   stickerPackPreviewCard: style({
     transition: 'border 0.15s ease-in-out',
-    ':hover': {
-      borderColor: 'rgba(var(--bs-secondary-rgb), 0.7)'
+    '@media': {
+      '(pointer: fine)': {
+        ':hover': {
+          borderColor: 'rgba(var(--bs-secondary-rgb), 0.7)'
+        }
+      }
     }
   }),
   cardHeader: style({
@@ -21,20 +25,11 @@ const classes = {
       width: '10%'
     }
   }),
-  originalAnnotation: style({
-    borderBottomRightRadius: '4px'
-  }),
-  animatedAnnotation: style({
-    borderBottomLeftRadius: '4px',
-    backgroundColor: 'var(--bs-orange)'
+  annotation: style({
+    filter: 'drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.15))'
   })
 };
 
-globalStyle(`${classes.stickerPackPreviewCard} .card-img-top`, {
-  width: '72px',
-  height: '72px'
-});
-
 // Pack title overflow fade for light mode.
 globalStyle(`[data-bs-theme="light"] ${classes.cardHeader}:after`, {
   background: 'linear-gradient(90deg, transparent, #F8F8F8 80%)'