mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-05-08 23:25:01 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update colors

Browse Source
This commit is contained in:
MartinBraquet
2026-04-30 17:02:48 +02:00
parent 48b41aae5f
commit ce9ce2c5cb
15 changed files with 61 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/answers/compatibility-questions-display.tsx
View File

@@ -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"

2
web/components/buttons/button.tsx
View File

@@ -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',

2
web/components/buttons/sign-up-button.tsx
View File

@@ -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}

2
web/components/filters/search.tsx
View File

@@ -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'}
>

2
web/components/nav/sidebar-item.tsx
View File

@@ -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',
)

27
web/components/nav/sidebar.tsx
View File

@@ -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} />
))}

2
web/components/photos-modal.tsx
View File

@@ -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={''}>

2
web/components/required-profile-form.tsx
View File

@@ -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>

4
web/components/searches/button.tsx
View File

@@ -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')}

2
web/components/site-logo.tsx
View File

@@ -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>

40
web/components/widgets/input.tsx
View File

@@ -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
},
)

1
web/components/widgets/searchable-select.tsx
View File

@@ -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) => (

8
web/pages/register.tsx
View File

@@ -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...')

6
web/pages/signin.tsx
View File

@@ -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>

4
web/styles/globals.css
View File

@@ -568,3 +568,7 @@ select {
@apply hover-bold;
@apply cursor-pointer;
}
.sidebar-text {
color: #978f85;
}