Tweak changed filter indicator

br1anchen · Jun 29, 2019 · b9f5ffa · b9f5ffa
1 parent 364d9fd
commit b9f5ffa
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/packages/components/src/components/columns/ColumnOptions.tsx b/packages/components/src/components/columns/ColumnOptions.tsx
@@ -357,7 +357,7 @@ export const ColumnOptions = React.memo((props: ColumnOptionsProps) => {
               <ColumnOptionsRow
                 analyticsLabel="involves"
                 enableBackgroundHover={allowToggleCategories}
-                hasChanged={false}
+                hasChanged
                 headerItemFixedIconSize={columnHeaderItemContentSize}
                 iconName="person"
                 isOpen={openedOptionCategories.has('involves')}

diff --git a/packages/components/src/components/columns/ColumnOptionsInbox.tsx b/packages/components/src/components/columns/ColumnOptionsInbox.tsx
@@ -34,7 +34,7 @@ export function ColumnOptionsInbox(props: ColumnOptionsInboxProps) {
       containerStyle={containerStyle}
       contentContainerStyle={contentContainerStyle}
       enableBackgroundHover={enableBackgroundHover}
-      hasChanged={false}
+      hasChanged={inbox !== 'all'}
       headerItemFixedIconSize={columnHeaderItemContentSize}
       iconName="inbox"
       isOpen={isOpen}

diff --git a/packages/components/src/components/columns/ColumnOptionsRow.tsx b/packages/components/src/components/columns/ColumnOptionsRow.tsx
@@ -185,6 +185,9 @@ export function ColumnOptionsRow(props: ColumnOptionsRowProps) {
           <ColumnHeaderItem
             analyticsLabel={undefined}
             fixedIconSize
+            foregroundThemeColor={
+              hasChanged ? 'primaryBackgroundColor' : 'foregroundColor'
+            }
             iconName={iconName}
             iconStyle={{ lineHeight: 22 }}
             noPadding
@@ -196,7 +199,7 @@ export function ColumnOptionsRow(props: ColumnOptionsRowProps) {
           <Spacer width={contentPadding / 2} />
 
           <ThemedText
-            color="foregroundColor"
+            color={hasChanged ? 'primaryBackgroundColor' : 'foregroundColor'}
             numberOfLines={1}
             style={{ fontWeight: '500' }}
           >
@@ -205,17 +208,15 @@ export function ColumnOptionsRow(props: ColumnOptionsRowProps) {
 
           <Spacer flex={1} minWidth={contentPadding / 2} />
 
-          {!!(subtitle || hasChanged) && (
+          {!!subtitle && (
             <ThemedText
               color={
-                !subtitle && hasChanged
-                  ? 'primaryBackgroundColor'
-                  : 'foregroundColorMuted60'
+                hasChanged ? 'primaryBackgroundColor' : 'foregroundColorMuted60'
               }
               numberOfLines={1}
-              style={{ fontSize: subtitle ? 12 : 10 }}
+              style={{ fontSize: 12 }}
             >
-              {subtitle || '●'}
+              {subtitle}
             </ThemedText>
           )}