fix css a bit

elizaOS · Feb 28, 2025 · a6aea0b · a6aea0b
1 parent cede1c2
commit a6aea0b
Show file tree

Hide file tree

Showing 7 changed files with 209 additions and 46 deletions.
diff --git a/docs/src/pages/showcase/_components/ShowcaseCard/index.tsx b/docs/src/pages/showcase/_components/ShowcaseCard/index.tsx
@@ -19,15 +19,33 @@ function TagIcon({label, color}: {label: string; color: string}) {
   );
 }
 
+function getShortLabel(label: string): string {
+  // Convert longer tag names to shorter versions for display consistency
+  switch (label.toLowerCase()) {
+    case 'favorite':
+      return 'favorite';
+    case 'adapter':
+      return 'adapter';
+    case 'client':
+      return 'client';
+    case 'plugin':
+      return 'plugin';
+    default:
+      return label;
+  }
+}
+
 function ShowcaseCardTag({tags}: {tags: TagType[]}) {
   return (
     <>
       {tags.map((tag) => {
         const {label, color} = Tags[tag];
+        const displayLabel = getShortLabel(label);
+
         return (
           <li key={tag} className={styles.tag} title={label}>
             <TagIcon label={label} color={color} />
-            <span className={styles.textLabel}>{label.toLowerCase()}</span>
+            <span className={styles.textLabel}>{displayLabel.toLowerCase()}</span>
           </li>
         );
       })}
@@ -69,7 +87,7 @@ export default function ShowcaseCard({user}: {user: User}) {
         <p className={styles.showcaseCardBody}>{user.description}</p>
       </div>
       <ul className={clsx('card__footer', styles.cardFooter)}>
-        <ShowcaseCardTag tags={user.tags.filter(tag => tag !== 'opensource')} />
+        <ShowcaseCardTag tags={user.tags.filter(tag => tag)} />
       </ul>
     </li>
   );

diff --git a/docs/src/pages/showcase/_components/ShowcaseCard/styles.module.css b/docs/src/pages/showcase/_components/ShowcaseCard/styles.module.css
@@ -62,11 +62,8 @@
   line-height: 1.66;
 }
 
-.cardFooter {
-  display: flex;
-  flex-wrap: wrap;
-}
 
+/* Base tag styling */
 .tag {
   font-size: 0.675rem;
   border: 1px solid var(--ifm-color-secondary-darkest);
@@ -77,8 +74,19 @@
   display: inline-flex;
   align-items: center;
   padding: 2px 10px;
+  /* Width is controlled by content */
 }
 
+/* Make the text label for all tags exactly the same width */
 .textLabel {
+  width: 40px; /* Fixed width for all text labels */
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Specific fix for the TagIcon spacing */
+.tag span:first-child {
   margin-right: 4px;
 }
diff --git a/docs/src/pages/showcase/_components/ShowcaseFilters/index.tsx b/docs/src/pages/showcase/_components/ShowcaseFilters/index.tsx
@@ -1,5 +1,6 @@
-import React, {useState} from 'react';
+import React from 'react';
 import clsx from 'clsx';
+import { X } from 'lucide-react';
 import {TagList, Tags, type TagType} from '../../../../data/users';
 import styles from './styles.module.css';
 
@@ -49,25 +50,46 @@ export default function ShowcaseFilters({
   operator: 'AND' | 'OR';
   toggleOperator: () => void;
 }): JSX.Element {
+  const clearAllFilters = () => {
+    // Clear all selected tags by toggling each one that's currently selected
+    selectedTags.forEach(tag => toggleTag(tag));
+  };
+
+  const hasActiveFilters = selectedTags.length > 0;
+
   return (
-    <div className={styles.filtersWrapper}>
-      <div className={styles.filterHeader}>
-        <h3 className={styles.filterTitle}>Filters</h3>
-        <div className={styles.operatorToggle}>
-          <span>Match:</span>
-          <button
-            className={clsx(styles.operatorSwitch, {
-              [styles.operatorSwitchAnd]: operator === 'AND'
-            })}
-            onClick={toggleOperator}
-            title={operator === 'OR' ? 'Change to AND (all filters must match)' : 'Change to OR (any filter can match)'}
+    <>
+      <div className={styles.filtersWrapper}>
+        <div className={styles.filterHeader}>
+          <h3 className={styles.filterTitle}>Filters</h3>
+
+          <div className={styles.operatorToggle}>
+            <span>Combine:</span>
+            <button
+              className={clsx(styles.operatorSwitch, {
+                [styles.operatorSwitchAnd]: operator === 'AND'
+              })}
+              onClick={toggleOperator}
+              title={operator === 'OR' ? 'Change to AND (all filters must match)' : 'Change to OR (any filter can match)'}
+            >
+              <span className={styles.switchKnob}></span>
+              <span className={styles.switchLabel}>AND</span>
+            </button>
+          </div>
+
+          <button 
+            className={styles.clearButton}
+            onClick={clearAllFilters}
+            disabled={!hasActiveFilters}
+            aria-label="Clear all filters"
+            title="Clear all filters"
           >
-            <span className={styles.switchKnob}></span>
-            <span className={styles.switchLabel}>OR</span>
-            <span className={styles.switchLabel}>AND</span>
+            <X size={14} />
+            Clear
           </button>
         </div>
       </div>
+
       <ul className={clsx('clean-list', styles.tagList)}>
         {TagList.filter(tag => tag).map((tag) => {
           const {label, description, color} = Tags[tag];
@@ -84,6 +106,6 @@ export default function ShowcaseFilters({
           );
         })}
       </ul>
-    </div>
+    </>
   );
 }
diff --git a/docs/src/pages/showcase/_components/ShowcaseFilters/styles.module.css b/docs/src/pages/showcase/_components/ShowcaseFilters/styles.module.css
@@ -1,24 +1,34 @@
 .filtersWrapper {
-  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  height: 40px; /* Match the height of the search bar */
 }
 
 .filterHeader {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  height: 40px;
 }
 
 .filterTitle {
   margin: 0;
   font-size: 1.2rem;
+  margin-right: 16px;
+  white-space: nowrap;
+  font-weight: bold;
 }
 
 .operatorToggle {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.9rem;
+  white-space: nowrap;
+  margin-left: 8px;
 }
 
 .operatorSwitch {
@@ -65,34 +75,44 @@
   font-size: 0.8rem;
   font-weight: bold;
   text-align: center;
-  transition: opacity 0.3s;
+  transition: color 0.3s;
 }
 
 .switchLabel:first-of-type {
   left: 0;
-  color: var(--ifm-color-emphasis-700);
-  opacity: 1;
 }
 
 .switchLabel:last-of-type {
   right: 0;
-  color: white;
-  opacity: 0.6;
 }
 
+/* OR label color when OR is selected */
+.operatorSwitch:not(.operatorSwitchAnd) .switchLabel:first-of-type {
+  color: var(--ifm-color-emphasis-800);
+}
+
+/* OR label color when AND is selected */
 .operatorSwitchAnd .switchLabel:first-of-type {
-  opacity: 0.6;
+  color: white;
 }
 
+/* AND label color when OR is selected */
+.operatorSwitch:not(.operatorSwitchAnd) .switchLabel:last-of-type {
+  color: var(--ifm-color-emphasis-600);
+}
+
+/* AND label color when AND is selected */
 .operatorSwitchAnd .switchLabel:last-of-type {
-  opacity: 1;
+  color: var(--ifm-color-emphasis-800);
 }
 
 .tagList {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
+  margin: 0;
+  padding: 0;
 }
 
 .tagListItem {
@@ -122,10 +142,63 @@
   color: white;
 }
 
+.filterControls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: 16px;
+}
+
+.clearButton {
+  display: inline-flex;
+  align-items: center;
+  margin-left:6px;
+  gap: 4px;
+  padding: 6px 14px;
+  border-radius: 15px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background-color: transparent;
+  color: var(--ifm-color-emphasis-700);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.clearButton:hover {
+  background-color: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-emphasis-900);
+}
+
+.clearButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 992px) {
+  .filtersWrapper {
+    height: auto;
+    width: 100%;
+  }
+
+  .filterHeader {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
 @media (max-width: 768px) {
   .filterHeader {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
   }
+
+  .filterControls {
+    margin-left: 0;
+  }
+
+  .tagList {
+    margin-top: 16px;
+  }
 }
diff --git a/docs/src/pages/showcase/_components/ShowcaseLayout/styles.module.css b/docs/src/pages/showcase/_components/ShowcaseLayout/styles.module.css
@@ -1,15 +1,37 @@
 .filtersContainer {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
   margin-bottom: 20px;
-  padding: 0 var(--ifm-spacing-horizontal);
+  padding: 12px var(--ifm-spacing-horizontal);
+  gap: 16px;
+  background-color: var(--ifm-color-emphasis-100);
+  border-radius: 8px;
+}
+
+.filtersRow {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  flex-wrap: nowrap;
+  gap: 16px;
+}
+
+.tagsRow {
+  display: flex;
+  width: 100%;
 }
 
 .submitButton {
   margin-top: 1rem;
 }
 
+@media (max-width: 992px) {
+  .filtersContainer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
 @media (max-width: 768px) {
   .filtersContainer {
     flex-direction: column;

diff --git a/docs/src/pages/showcase/_components/ShowcaseSearchBar/styles.module.css b/docs/src/pages/showcase/_components/ShowcaseSearchBar/styles.module.css
@@ -1,5 +1,7 @@
 .searchContainer {
   width: 300px;
+  min-width: 200px;
+  flex-shrink: 0;
 }
 
 .searchInputWrapper {
@@ -24,6 +26,7 @@
   color: var(--ifm-font-color-base);
   font-size: 0.9rem;
   transition: all var(--ifm-transition-fast);
+  margin: 0;
 }
 
 .searchInput:focus {
@@ -58,6 +61,12 @@
   color: var(--ifm-color-emphasis-700);
 }
 
+@media (max-width: 992px) {
+  .searchContainer {
+    width: 300px;
+  }
+}
+
 @media (max-width: 768px) {
   .searchContainer {
     width: 100%;