Update colors

Author: MartinBraquet

web/components/answers/compatibility-questions-display.tsx

@@ -452,7 +452,9 @@ export function CompatibilityAnswerBlock(props: {
   return (
     <Col
       data-testid="profile-compatibility-section"
-      className={'bg-canvas-50 flex-grow gap-4 whitespace-pre-line rounded-xl p-4 leading-relaxed'}
+      className={
+        'bg-canvas-50 border border-canvas-200 flex-grow gap-4 whitespace-pre-line rounded-xl p-4 leading-relaxed'
+      }
     >
       <Row
         className="justify-between gap-1 font-semibold"

web/components/buttons/button.tsx

@@ -57,7 +57,7 @@ export function buttonClass(size: SizeType, color: ColorType) {
     color === 'gray' &&
       'bg-canvas-200 text-ink-900 disabled:bg-ink-200 disabled:text-ink-500 hover:bg-canvas-300 hover:text-ink-1000',
     color === 'gray-outline' && [outline, 'text-ink-600 hover:bg-canvas-25'],
-    color === 'gradient' && [gradient, 'from-primary-500 to-blue-400'],
+    color === 'gradient' && [gradient, 'from-primary-500 to-primary-800'],
     color === 'gradient-pink' && [gradient, 'from-primary-500 to-fuchsia-500'],
     color === 'gray-white' &&
       'text-ink-500 hover:text-ink-900 disabled:text-ink-300 disabled:bg-transparent',

web/components/buttons/sign-up-button.tsx

@@ -49,7 +49,7 @@ export function GoogleButton({onClick, isLoading = false, ...props}: GoogleButto
       className={clsx(
         'w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300',
         'rounded-full shadow-sm text-sm font-medium',
-        'hover:bg-canvas-25 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
+        'hover:bg-canvas-25 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
         'disabled:opacity-70 disabled:cursor-not-allowed',
       )}
       {...props}

web/components/filters/search.tsx

@@ -231,7 +231,7 @@ export const Search = forwardRef<
                 setOpenBookmarks(true)
               })
             }}
-            size={'xs'}
+            // size={'xs'}
             color={'none'}
             className={'text-white bg-primary-500 hover:bg-primary-400 rounded-xl'}
           >

web/components/nav/sidebar-item.tsx

@@ -28,7 +28,7 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
   }
 
   const sidebarClass = clsx(
-    isCurrentPage ? 'bg-canvas-900 text-primary-600' : 'text-[#776f65] hover:text-primary-700',
+    isCurrentPage ? 'bg-canvas-900 text-primary-600' : 'sidebar-text hover:text-primary-600',
     'group flex items-center rounded-xl px-3 py-2 text-sm font-medium',
     'focus-visible:bg-ink-100 outline-none transition-all',
   )

web/components/nav/sidebar.tsx

@@ -2,8 +2,8 @@ import {ArrowLeftOnRectangleIcon, ArrowRightOnRectangleIcon} from '@heroicons/re
 import clsx from 'clsx'
 import {ANDROID_APP_URL} from 'common/constants'
 import {buildArray} from 'common/util/array'
-import Image from 'next/image'
 import Router, {useRouter} from 'next/router'
+import {FaGooglePlay} from 'react-icons/fa'
 import {Button, ColorType, SizeType} from 'web/components/buttons/button'
 import {LanguagePicker} from 'web/components/language/language-picker'
 import {useProfile} from 'web/hooks/use-profile'
@@ -49,7 +49,7 @@ export default function Sidebar(props: {
       )}
       style={style}
     >
-      <SiteLogo className={'text-white'} />
+      <SiteLogo className={'text-black invert'} />
 
       {user === undefined && <div className="h-[24px]" />}
 
@@ -78,16 +78,23 @@ export default function Sidebar(props: {
       <div className="mb-[12px] mt-auto flex flex-col gap-1">
         <div className="h-px bg-canvas-900" />
         {!isAndroid && (
-          <Image
-            src="https://firebasestorage.googleapis.com/v0/b/compass-130ba.firebasestorage.app/o/misc%2FGoogle_Play_Store_badge_EN.svg.png?alt=media&token=3e0e8605-800a-422b-84d1-8ecec8af3e80"
-            alt="divider"
-            width={160}
-            height={80}
-            className="mx-auto pt-4 hover:opacity-70 cursor-pointer"
-            onClick={() => router.push(ANDROID_APP_URL)}
+          <SidebarItem
+            item={{
+              key: 'nav.android_app',
+              name: 'Get it on Google Play',
+              icon: FaGooglePlay,
+              href: ANDROID_APP_URL,
+            }}
+            currentPage={currentPage}
+          />
+        )}
+        {user === null && (
+          <LanguagePicker
+            className={
+              'w-fit mx-3 mt-2 pr-12 mb-2 bg-transparent border-canvas-900 sidebar-text hover:text-primary-600'
+            }
           />
         )}
-        {user === null && <LanguagePicker className={'w-fit mx-3 pr-12 mb-2'} />}
         {bottomNavOptions.map((item) => (
           <SidebarItem key={item.key} item={item} currentPage={currentPage} />
         ))}

web/components/photos-modal.tsx

@@ -75,7 +75,7 @@ export const ViewProfileCardButton = (props: {
   const username = user.username
   return (
     <>
-      <Button onClick={() => setOpen(true)}>
+      <Button onClick={() => setOpen(true)} className={'bg-canvas-50 '}>
         {t('share_profile.view_profile_card', 'View Profile Card')}
       </Button>
       <Modal open={open} setOpen={setOpen} size={'lg'} className={''}>

web/components/required-profile-form.tsx

@@ -94,7 +94,7 @@ export const RequiredProfileUserForm = (props: {
       {/*)}*/}
       <Col className={'gap-8 pb-[env(safe-area-inset-bottom)] w-fit'}>
         {(step === 0 || profileCreatedAlready) && (
-          <Col>
+          <Col className={'gap-2'}>
             <label className={clsx(labelClassName)}>
               {t('profile.basics.display_name', 'Display name')}
             </label>

web/components/searches/button.tsx

@@ -36,7 +36,7 @@ export function BookmarkSearchButton(props: {
       <Button
         onClick={() => setOpen(true)}
         color="gray-outline"
-        size={'xs'}
+        // size={'xs'}
         className={'rounded-xl bg-canvas-50'}
       >
         ⭐ {t('saved_searches.button', 'Saved Searches')}
@@ -164,7 +164,7 @@ export function BookmarkStarButton(props: {
       <Button
         onClick={() => setOpen(true)}
         color="gray-outline"
-        size={'xs'}
+        // size={'xs'}
         className={'rounded-xl bg-canvas-50'}
       >
         👥 {t('saved_people.button', 'Saved People')}

web/components/site-logo.tsx

@@ -8,7 +8,7 @@ export default function SiteLogo(props: {noLink?: boolean; className?: string})
   const {noLink, className} = props
   const inner = (
     <>
-      <FavIconBlack className="dark:invert" />
+      <FavIconBlack className={className?.includes('invert') ? '' : 'dark:invert'} />
       <div className={clsx('my-auto text-xl font-thin logo')}>
         {IS_PROD ? 'Compass' : 'Compass dev'}
       </div>