quick filters style

Author: RafaelGB

src/components/NavBar.tsx

@@ -123,6 +123,7 @@ export function NavBar(navBarProps: NavBarProps) {
               mr: 2,
               maxWidth: 40,
               marginRight: 1,
+              padding: 0.5,
             }}
           >
             <MenuIcon />

src/components/reducers/QuickFilters.tsx

@@ -34,6 +34,7 @@ const QuickFilters = (props: DataviewFiltersProps) => {
   return filters.conditions.length > 0 ? (
     <Stack direction="row" spacing={1} key="stack-quick-filters">
       {filters.conditions.map((condition, filterIndex) => {
+        const { disabled } = condition as FilterGroupCondition;
         if ((condition as FilterGroupCondition).condition) {
           const label = (condition as FilterGroupCondition).label;
           return (
@@ -45,11 +46,15 @@ const QuickFilters = (props: DataviewFiltersProps) => {
                 size="small"
                 label={label ?? `filter-${filterIndex}`}
                 sx={{
-                  backgroundColor: (condition as FilterGroupCondition).disabled
-                    ? StyleVariables.BACKGROUND_SECONDARY
-                    : StyleVariables.BACKGROUND_MODIFIER_SUCCESS,
-                  boxShadow: `1px 1px 1px 1px ${StyleVariables.TEXT_NORMAL}`,
-                  color: StyleVariables.TEXT_NORMAL,
+                  backgroundColor: disabled
+                    ? StyleVariables.INTERACTIVE_NORMAL
+                    : StyleVariables.TEXT_ACCENT,
+                  boxShadow: disabled ? StyleVariables.INPUT_SHADOW : "none",
+                  borderColor: disabled ? StyleVariables.LINK_COLOR : "none",
+                  color: disabled
+                    ? StyleVariables.LINK_COLOR
+                    : StyleVariables.TEXT_NORMAL,
+                  borderRadius: "4px",
                 }}
               />
             </div>

src/helpers/Constants.ts

@@ -243,6 +243,9 @@ export const StyleVariables = Object.freeze({
   TEXT_NORMAL: 'var(--text-normal)',
   TEXT_ACCENT_HOVER: 'var(--text-accent-hover)',
   TEXT_ACCENT: 'var(--text-accent)',
+  LINK_COLOR: 'var(--link-color)',
+  INTERACTIVE_NORMAL: 'var(--interactive-normal)',
+  INPUT_SHADOW: 'var(--input-shadow)',
 });
 
 export const SourceDataTypes = Object.freeze({

styles.css

@@ -85,13 +85,15 @@ div.database-plugin__td.data-input:hover {
   box-shadow: 0 0 1px 2px var(--text-accent-hover);
 }
 
+/******************************************************
+ *                  Inputs of cells
+ ******************************************************/
 .data-input {
   white-space: pre-wrap;
   border: none;
   padding: 0.5rem;
   color: var(--text-normal);
   font-size: 1rem;
-  border-radius: 4px;
   resize: none;
   box-sizing: border-box;
   flex: 1 1 auto;