From ce9ce2c5cba9fe081a5a87bd733bee6ee52d367d Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Thu, 30 Apr 2026 17:02:48 +0200
Subject: [PATCH] Update colors

---
 .../compatibility-questions-display.tsx       |  4 +-
 web/components/buttons/button.tsx             |  2 +-
 web/components/buttons/sign-up-button.tsx     |  2 +-
 web/components/filters/search.tsx             |  2 +-
 web/components/nav/sidebar-item.tsx           |  2 +-
 web/components/nav/sidebar.tsx                | 27 ++++++++-----
 web/components/photos-modal.tsx               |  2 +-
 web/components/required-profile-form.tsx      |  2 +-
 web/components/searches/button.tsx            |  4 +-
 web/components/site-logo.tsx                  |  2 +-
 web/components/widgets/input.tsx              | 40 ++++++++++---------
 web/components/widgets/searchable-select.tsx  |  1 -
 web/pages/register.tsx                        |  8 ++--
 web/pages/signin.tsx                          |  6 +--
 web/styles/globals.css                        |  4 ++
 15 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/web/components/answers/compatibility-questions-display.tsx b/web/components/answers/compatibility-questions-display.tsx
index 6a3b3d06..f00d3224 100644
--- a/web/components/answers/compatibility-questions-display.tsx
+++ b/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"
diff --git a/web/components/buttons/button.tsx b/web/components/buttons/button.tsx
index 3b4f43aa..4941f801 100644
--- a/web/components/buttons/button.tsx
+++ b/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',
diff --git a/web/components/buttons/sign-up-button.tsx b/web/components/buttons/sign-up-button.tsx
index 7fb91668..96180a1b 100644
--- a/web/components/buttons/sign-up-button.tsx
+++ b/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}
diff --git a/web/components/filters/search.tsx b/web/components/filters/search.tsx
index 21c8a440..3729988a 100644
--- a/web/components/filters/search.tsx
+++ b/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'}
           >
diff --git a/web/components/nav/sidebar-item.tsx b/web/components/nav/sidebar-item.tsx
index a3fa471f..7cb65317 100644
--- a/web/components/nav/sidebar-item.tsx
+++ b/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',
   )
diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index 7fc1606d..83a6b0be 100644
--- a/web/components/nav/sidebar.tsx
+++ b/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} />
         ))}
diff --git a/web/components/photos-modal.tsx b/web/components/photos-modal.tsx
index 8b7ec327..8f1a13c7 100644
--- a/web/components/photos-modal.tsx
+++ b/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={''}>
diff --git a/web/components/required-profile-form.tsx b/web/components/required-profile-form.tsx
index 576c9569..746edf88 100644
--- a/web/components/required-profile-form.tsx
+++ b/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>
diff --git a/web/components/searches/button.tsx b/web/components/searches/button.tsx
index 0eed6d88..6572609a 100644
--- a/web/components/searches/button.tsx
+++ b/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')}
diff --git a/web/components/site-logo.tsx b/web/components/site-logo.tsx
index ee0334e9..8f2a43f6 100644
--- a/web/components/site-logo.tsx
+++ b/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>
diff --git a/web/components/widgets/input.tsx b/web/components/widgets/input.tsx
index 219bbe45..6bac6d42 100644
--- a/web/components/widgets/input.tsx
+++ b/web/components/widgets/input.tsx
@@ -13,30 +13,32 @@ export const Input = forwardRef(
   ) => {
     const {error, searchIcon, className, ...rest} = props
 
-    return (
-      <Row
+    const rowClassName =
+      'bg-canvas-50 h-12 rounded-xl border border-canvas-200 px-4 shadow-sm transition-colors items-center gap-2'
+    const elem = (
+      <input
+        ref={ref}
+        step={0.001} // default to 3 decimal places
         className={clsx(
-          'bg-canvas-50 h-12 rounded-xl border px-4 shadow-sm transition-colors items-center gap-2',
+          'bg-canvas-50 invalid:border-error invalid:text-error  invalid:placeholder-rose-700 focus:outline-none focus:ring-1 disabled:cursor-not-allowed md:text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0',
           error
             ? 'border-error text-error focus:border-error focus:ring-error placeholder-rose-700' // matches invalid: styles
-            : 'border-ink-300 placeholder-ink-400 focus:ring-primary-500 focus:border-primary-500',
+            : 'focus:border-canvas-200 focus:ring-transparent',
+          !searchIcon && rowClassName,
           className,
         )}
-      >
-        {searchIcon && <span className="search-icon">🔍</span>}
-        <input
-          ref={ref}
-          step={0.001} // default to 3 decimal places
-          className={clsx(
-            'bg-canvas-50 invalid:border-error invalid:text-error  invalid:placeholder-rose-700 focus:outline-none focus:ring-1 disabled:cursor-not-allowed md:text-sm [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-outer-spin-button]:m-0',
-            error
-              ? 'border-error text-error focus:border-error focus:ring-error placeholder-rose-700' // matches invalid: styles
-              : 'border-transparent focus:border-transparent focus:ring-transparent',
-            className,
-          )}
-          {...rest}
-        />
-      </Row>
+        {...rest}
+      />
     )
+
+    if (searchIcon)
+      return (
+        <Row className={clsx(rowClassName)}>
+          {searchIcon && <span className="search-icon">🔍</span>}
+          {elem}
+        </Row>
+      )
+
+    return elem
   },
 )
diff --git a/web/components/widgets/searchable-select.tsx b/web/components/widgets/searchable-select.tsx
index 75919685..fcdf24c1 100644
--- a/web/components/widgets/searchable-select.tsx
+++ b/web/components/widgets/searchable-select.tsx
@@ -64,7 +64,6 @@ export function SearchableSelect(props: {
                 onChange={(e: any) => setQuery(e.target.value)}
                 placeholder="Search..."
                 className="mb-2 w-full"
-                searchIcon
               />
               <div className="max-h-48 space-y-1 overflow-auto">
                 {filteredSuggestions.map((suggestion) => (
diff --git a/web/pages/register.tsx b/web/pages/register.tsx
index e1e5a2fe..2e56ea90 100644
--- a/web/pages/register.tsx
+++ b/web/pages/register.tsx
@@ -156,7 +156,7 @@ function RegisterComponent() {
               <div className="mt-6">
                 <Link
                   href="/signin"
-                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium  bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium  bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                 >
                   {t('register.back_to_login', 'Back to Login')}
                 </Link>
@@ -186,7 +186,7 @@ function RegisterComponent() {
                       name="email"
                       type="email"
                       required
-                      className="bg-canvas-50 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                      className="bg-canvas-50 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                       placeholder="Email"
                     />
                   </div>
@@ -199,7 +199,7 @@ function RegisterComponent() {
                       name="password"
                       type="password"
                       required
-                      className="bg-canvas-50 bg-input appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500  rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                      className="bg-canvas-50 bg-input appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500  rounded-b-md focus:outline-none focus:ring-primary-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                       placeholder={t('register.password_placeholder', 'Password')}
                     />
                   </div>
@@ -221,7 +221,7 @@ function RegisterComponent() {
                   <button
                     type="submit"
                     disabled={isLoading}
-                    className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
+                    className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-full text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
                   >
                     {isLoading
                       ? t('register.button.creating', 'Creating account...')
diff --git a/web/pages/signin.tsx b/web/pages/signin.tsx
index 4c3773b7..98f0310d 100644
--- a/web/pages/signin.tsx
+++ b/web/pages/signin.tsx
@@ -162,7 +162,7 @@ function RegisterComponent() {
                   name="email"
                   type="email"
                   required
-                  className="bg-canvas-50 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                  className="bg-canvas-50 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-t-md border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                   placeholder="Email"
                 />
               </div>
@@ -175,7 +175,7 @@ function RegisterComponent() {
                   name="password"
                   type="password"
                   required
-                  className="bg-canvas-50 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-b-md border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
+                  className="bg-canvas-50 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-b-md border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-blue-500 focus:z-10 sm:text-sm"
                   placeholder={t('signin.password_placeholder', 'Your password')}
                 />
                 <div className="text-right mt-1 custom-link">
@@ -210,7 +210,7 @@ function RegisterComponent() {
               <button
                 type="submit"
                 disabled={isLoading}
-                className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
+                className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-full text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
               >
                 {isLoading ? 'Signing in...' : t('signin.submit', 'Sign in with Email')}
               </button>
diff --git a/web/styles/globals.css b/web/styles/globals.css
index e7133cf8..14455674 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -568,3 +568,7 @@ select {
   @apply hover-bold;
   @apply cursor-pointer;
 }
+
+.sidebar-text {
+  color: #978f85;
+}