Proper color for dropdown caret in light mode + make count + caret cl…

…ickable
Flared · Nov 29, 2024 · 2cfc3aa · 2cfc3aa
1 parent 3da3021
commit 2cfc3aa
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 16 deletions.
diff --git a/packages/react-components/src/components/SourceTypeCategoryOption.css b/packages/react-components/src/components/SourceTypeCategoryOption.css
@@ -22,26 +22,35 @@
     flex-direction: row;
 }
 
+.source-types-category-filler {
+    flex: 1;
+}
+
+.source-types-category-count-container {
+    display: flex;
+    flex-direction: row;
+    cursor: pointer;
+}
+
 .source-types-category-count {
+    width: 1rem;
     user-select: none;
     color: var(--secondary-text-color);
-    flex: 1;
-    text-align: end;
+    text-align: center;
 }
 
 .source-types-category {
     width: 1rem;
     height: 1rem;
     margin-left: 0.5rem;
-    cursor: pointer;
     align-self: center;
 }
 
 .source-types-category > span {
     display: inline-table;
     width: 0.5rem;
     height: 0.5rem;
-    border: solid white;
+    border: solid var(--text-color);
     border-width: 0 0 0.125rem 0.125rem;
 }
 

diff --git a/packages/react-components/src/components/SourceTypeCategoryOption.tsx b/packages/react-components/src/components/SourceTypeCategoryOption.tsx
@@ -36,22 +36,31 @@ const SourceTypeCategoryOption: FC<{
                     onCheckChange={(checked): void => onCategoryCheckChange(checked)}
                 />
 
-                <span
-                    hidden={sourceTypeCategory.types.length <= 1}
-                    className="source-types-category-count"
-                >
-                    {selectedCategoryCount}
-                </span>
                 <div
                     hidden={sourceTypeCategory.types.length <= 1}
-                    className={`source-types-category ${
-                        isExpanded
-                            ? 'source-types-category-collapse'
-                            : 'source-types-category-expand'
-                    }`}
+                    className="source-types-category-filler"
+                />
+
+                <div
+                    className="source-types-category-count-container"
                     onClick={(): void => setExpanded(!isExpanded)}
                 >
-                    <span />
+                    <div
+                        hidden={sourceTypeCategory.types.length <= 1}
+                        className="source-types-category-count"
+                    >
+                        {selectedCategoryCount}
+                    </div>
+                    <div
+                        hidden={sourceTypeCategory.types.length <= 1}
+                        className={`source-types-category ${
+                            isExpanded
+                                ? 'source-types-category-collapse'
+                                : 'source-types-category-expand'
+                        }`}
+                    >
+                        <span />
+                    </div>
                 </div>
             </div>
             <div className="source-types-children-container" hidden={!isExpanded}>