Improve button look

web/components/buttons/button.tsx

@@ -1,6 +1,6 @@
-import { forwardRef, MouseEventHandler, ReactNode, Ref } from 'react'
+import {forwardRef, MouseEventHandler, ReactNode, Ref} from 'react'
 import clsx from 'clsx'
-import { LoadingIndicator } from 'web/components/widgets/loading-indicator'
+import {LoadingIndicator} from 'web/components/widgets/loading-indicator'
 
 export type SizeType = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 export type ColorType =
@@ -37,7 +37,7 @@ export const baseButtonClasses =
 
 const solid = 'disabled:bg-ink-300 text-white'
 export const outline =
-  'ring-2 ring-current hover:ring-transparent disabled:ring-ink-300 disabled:text-ink-300 hover:text-ink-0 disabled:bg-inherit'
+  'ring-1 ring-current ring-ink-300 disabled:ring-ink-300 disabled:text-ink-300 disabled:bg-inherit'
 const gradient = [solid, 'bg-gradient-to-r hover:saturate-150 disabled:bg-none']
 
 export function buttonClass(size: SizeType, color: ColorType) {
@@ -65,7 +65,7 @@ export function buttonClass(size: SizeType, color: ColorType) {
     ],
     color === 'gray' &&
       'bg-ink-300 text-ink-900 disabled:bg-ink-200 disabled:text-ink-500 hover:bg-ink-200 dark:enabled:hover:bg-ink-400 hover:text-ink-1000',
-    color === 'gray-outline' && [outline, 'text-ink-600 hover:bg-ink-500'],
+    color === 'gray-outline' && [outline, 'text-ink-600 hover:bg-canvas-200'],
     color === 'gradient' && [gradient, 'from-primary-500 to-blue-400'],
     color === 'gradient-pink' && [gradient, 'from-primary-500 to-fuchsia-500'],
     color === 'gray-white' &&

web/components/filters/search.tsx

@@ -15,10 +15,11 @@ import {BookmarkedSearchesType} from "web/hooks/use-bookmarked-searches";
 import {submitBookmarkedSearch} from "web/lib/supabase/searches";
 import {useUser} from "web/hooks/use-user";
 import toast from "react-hot-toast";
-import {FilterFields} from "common/filters";
+import {FilterFields, initialFilters} from "common/filters";
 import {DisplayUser} from "common/api/user-types";
 import {useChoices} from "web/hooks/use-choices";
 import {useT} from "web/lib/locale";
+import {isEqual} from "lodash";
 
 function isOrderBy(input: string): input is FilterFields['orderBy'] {
   return ['last_online_time', 'created_time', 'compatibility_score'].includes(
@@ -140,6 +141,10 @@ export const Search = (props: {
   const [openStarBookmarks, setOpenStarBookmarks] = useState(false);
   const user = useUser()
   const youSeekingRelationship = youProfile?.pref_relation_styles?.includes('relationship')
+  const isClearedFilters = isEqual(
+    {...filters, orderBy: undefined},
+    {...initialFilters, orderBy: undefined}
+  )
   const {choices: interestChoices} = useChoices('interests')
   const {choices: causeChoices} = useChoices('causes')
   const {choices: workChoices} = useChoices('work')
@@ -276,7 +281,14 @@ export const Search = (props: {
             color={'none'}
             className={'bg-canvas-100 hover:bg-canvas-200'}
           >
-            {bookmarked ? t('common.saved', 'Saved!') : loadingBookmark ? '' : t('common.notified', 'Get Notified')}
+            {bookmarked
+              ? t('common.saved', 'Saved!')
+              : loadingBookmark
+                ? ''
+                : isClearedFilters
+                  ? t('common.notified_any', 'Get notified for any new profile')
+                  : t('common.notified', 'Get notified for selected filters')
+            }
           </Button>
 
           <BookmarkSearchButton

web/messages/de.json

@@ -124,6 +124,7 @@
   "common.next": "Weiter",
   "common.no": "Nein",
   "common.notified": "Benachrichtigt werden",
+  "common.notified_any": "Über neue Profile benachrichtigt werden",
   "common.or": "Oder",
   "common.people": "Personen",
   "common.per_month": "/ Monat",

web/messages/fr.json

@@ -123,7 +123,8 @@
   "common.new": "Nouveau",
   "common.next": "Suivant",
   "common.no": "Non",
-  "common.notified": "Être notifié",
+  "common.notified": "Recevoir notifs pour les filtres sélectionnés",
+  "common.notified_any": "Recevoir notifs pour tout nouveau profil",
   "common.or": "Ou",
   "common.people": "personnes",
   "common.per_month": "/ mois",