Add dark mode colors

2026-05-09 07:34:55 -04:00 · 2026-04-30 16:04:25 +02:00
parent bbeccca977
commit 48b41aae5f
20 changed files with 140 additions and 134 deletions
--- a/web/components/answers/compatibility-questions-display.tsx
+++ b/web/components/answers/compatibility-questions-display.tsx
@@ -254,7 +254,7 @@ export function CompatibilityQuestionsDisplay(props: {
      )}
      <Row className="flex-wrap items-center justify-between gap-x-6 gap-y-4">
        {answeredQuestions.length > 0 && (
-          <div className="relative mt-3">
+          <div className="relative mt-3 w-full max-w-[50%] xl:max-w-[600px]">
            {/*<input*/}
            {/*  type="text"*/}
            {/*  placeholder={t('answers.search_placeholder', 'Search prompts...')}*/}
@@ -268,10 +268,11 @@ export function CompatibilityQuestionsDisplay(props: {
            <Input
              value={searchTerm}
              placeholder={t('answers.search_placeholder', 'Search prompts...')}
-              className={'w-48 xs:w-64'}
+              className={'w-full'}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                setSearchTerm(e.target.value)
              }}
+              searchIcon
            />
          </div>
        )}
@@ -451,9 +452,7 @@ export function CompatibilityAnswerBlock(props: {
  return (
    <Col
      data-testid="profile-compatibility-section"
-      className={
-        'bg-canvas-50 flex-grow gap-4 whitespace-pre-line rounded-xl px-3 py-2 leading-relaxed'
-      }
+      className={'bg-canvas-50 flex-grow gap-4 whitespace-pre-line rounded-xl p-4 leading-relaxed'}
    >
      <Row
        className="justify-between gap-1 font-semibold"
@@ -582,28 +581,30 @@ export function CompatibilityAnswerBlock(props: {
            ))}
        </Row>
      )}
-      <Col>
-        {comparedProfile && isAnswered && (
-          <Row className="w-full justify-end sm:hidden">
-            <CompatibilityDisplay
-              question={question}
-              profile1={profile}
-              answer1={answer}
-              profile2={comparedProfile as Profile}
-              currentUserIsComparedProfile={!fromProfilePage}
-              currentUser={currentUser}
-            />
-          </Row>
-        )}
-        {isCurrentUser && isAnswered && (
-          <Row className="w-full justify-end sm:hidden">
-            <ImportanceButton importance={answer.importance} onClick={() => setEditOpen(true)} />
-          </Row>
-        )}
-        {/*{question.importance_score == 0 && <div className="text-ink-500 text-sm">Core Question</div>}*/}
-      </Col>
+      {/*{isAnswered && (*/}
+      {/*  <Col>*/}
+      {/*    {comparedProfile && isAnswered && (*/}
+      {/*      <Row className="w-full justify-end sm:hidden">*/}
+      {/*        <CompatibilityDisplay*/}
+      {/*          question={question}*/}
+      {/*          profile1={profile}*/}
+      {/*          answer1={answer}*/}
+      {/*          profile2={comparedProfile as Profile}*/}
+      {/*          currentUserIsComparedProfile={!fromProfilePage}*/}
+      {/*          currentUser={currentUser}*/}
+      {/*        />*/}
+      {/*      </Row>*/}
+      {/*    )}*/}
+      {/*    {isCurrentUser && isAnswered && (*/}
+      {/*      <Row className="w-full justify-end sm:hidden">*/}
+      {/*        <ImportanceButton importance={answer.importance} onClick={() => setEditOpen(true)} />*/}
+      {/*      </Row>*/}
+      {/*    )}*/}
+      {/*    /!*{question.importance_score == 0 && <div className="text-ink-500 text-sm">Core Question</div>}*!/*/}
+      {/*  </Col>*/}
+      {/*)}*/}
      {showCommunityInfo && (
-        <Row className={'mt-[-10px]'}>
+        <Row className={''}>
          {shortenedPopularity && (
            <Tooltip
              text={t(
--- a/web/components/buttons/general-button.tsx
+++ b/web/components/buttons/general-button.tsx
@@ -7,9 +7,9 @@ export const GeneralButton = (props: {url: string; content: string}) => {
    <div className="rounded-xl p-3 flex flex-col items-center group">
      <Link
        href={url}
-        className="w-full px-8 py-3 rounded-full border-2 border-gray-300 dark:border-gray-600 text-gray-800 dark:text-white font-medium text-lg 
+        className="w-full px-8 py-3 rounded-full border-2 border-primary-200 dark:border-gray-600 text-gray-800 dark:text-white font-medium text-lg
                  hover:translate-y-[-2px] transition-transform duration-200 ease-in-out
-                  bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800/50"
+                  bg-canvas-50 hover:bg-canvas-100 dark:hover:bg-gray-800/50"
        target={url.startsWith('http') ? '_blank' : undefined}
        rel={url.startsWith('http') ? 'noopener noreferrer' : undefined}
      >
--- a/web/components/filters/location-filter.tsx
+++ b/web/components/filters/location-filter.tsx
@@ -120,6 +120,7 @@ export function LocationFilter(props: {
          className="h-8 w-full rounded-none border-0 bg-transparent px-1 focus:border-b focus:ring-0 focus:ring-transparent"
          autoFocus
          // onBlur // TODO
+          searchIcon
        />
      </Row>

--- a/web/components/filters/search.tsx
+++ b/web/components/filters/search.tsx
@@ -171,6 +171,7 @@ export const Search = forwardRef<
          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
            setKeywordInput(e.target.value)
          }}
+          searchIcon
        />

        <Row className="gap-2">
@@ -232,7 +233,7 @@ export const Search = forwardRef<
            }}
            size={'xs'}
            color={'none'}
-            className={'text-ink-100 bg-primary-500 hover:bg-primary-400 rounded-xl'}
+            className={'text-white bg-primary-500 hover:bg-primary-400 rounded-xl'}
          >
            🔔
            {bookmarked
--- a/web/components/messaging/new-message-button.tsx
+++ b/web/components/messaging/new-message-button.tsx
@@ -20,7 +20,11 @@ export default function NewMessageButton() {
  const t = useT()
  return (
    <>
-      <Button className="h-fit gap-1" color={'gray-outline'} onClick={() => setOpen(true)}>
+      <Button
+        className="h-fit gap-1 bg-canvas-50"
+        color={'gray-outline'}
+        onClick={() => setOpen(true)}
+      >
        <PlusIcon className="h-5 w-5" aria-hidden="true" />
        {t('messages.new_message', 'New Message')}
      </Button>
--- a/web/components/multi-checkbox.tsx
+++ b/web/components/multi-checkbox.tsx
@@ -129,6 +129,7 @@ export const MultiCheckbox = (props: {
              }
            }}
            className="h-10"
+            searchIcon
          />
          <Button size="sm" onClick={submitAdd} loading={adding} disabled={adding}>
            {t('common.add', 'Add')}
--- a/web/components/nav/profile-summary.tsx
+++ b/web/components/nav/profile-summary.tsx
@@ -15,7 +15,7 @@ export function ProfileSummary(props: {user: User; className?: string}) {
      href={profile === null ? '/signup' : `/${user.username}`}
      onClick={trackCallback('sidebar: profile')}
      className={clsx(
-        'hover:bg-ink-100 text-ink-700 group flex w-full shrink-0 flex-row items-center truncate rounded-md py-3',
+        'hover:bg-canvas-900 text-ink-700 group flex w-full shrink-0 flex-row items-center truncate rounded-xl py-3',
        className,
      )}
    >
--- a/web/components/nav/sidebar-item.tsx
+++ b/web/components/nav/sidebar-item.tsx
@@ -28,8 +28,8 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
  }

  const sidebarClass = clsx(
-    isCurrentPage ? 'bg-ink-100 text-primary-700' : 'text-ink-100 hover:text-primary-700',
-    'group flex items-center rounded-md px-3 py-2 text-sm font-medium',
+    isCurrentPage ? 'bg-canvas-900 text-primary-600' : 'text-[#776f65] hover:text-primary-700',
+    'group flex items-center rounded-xl px-3 py-2 text-sm font-medium',
    'focus-visible:bg-ink-100 outline-none transition-all',
  )

@@ -40,7 +40,7 @@ export function SidebarItem(props: {item: Item; currentPage?: string}) {
          className={clsx(
            isCurrentPage
              ? 'text-primary-700'
-              : 'text-ink-100 group-hover:text-primary-700 group-hover:translate-x-[2px]',
+              : 'text-[#574f45] group-hover:text-primary-700 group-hover:translate-x-[2px]',
            '-ml-1 mr-3 h-6 w-6 flex-shrink-0 transition-all',
          )}
          aria-hidden="true"
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -49,26 +49,23 @@ export default function Sidebar(props: {
      )}
      style={style}
    >
-      <SiteLogo className={'invert'} />
+      <SiteLogo className={'text-white'} />

      {user === undefined && <div className="h-[24px]" />}

-      {user && !isMobile && <ProfileSummary user={user} className="mb-3 text-white" />}
+      {user && !isMobile && (
+        <>
+          <div className="h-px bg-canvas-900 mb-4" />
+          <ProfileSummary user={user} className="mb-3 text-white" />
+        </>
+      )}
+
+      <div className="h-px bg-canvas-900 mb-4" />

      <div className="mb-4 flex flex-col gap-1 !overflow-y-auto">
        {navOptions.map((item) => (
          <SidebarItem key={item.key} item={item} currentPage={currentPage} />
        ))}
-        {!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)}
-          />
-        )}

        {user === null && <SignUpButton className="mt-4" text={t('nav.sign_up', 'Sign up')} />}

@@ -79,6 +76,17 @@ export default function Sidebar(props: {
        )}
      </div>
      <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)}
+          />
+        )}
        {user === null && <LanguagePicker className={'w-fit mx-3 pr-12 mb-2'} />}
        {bottomNavOptions.map((item) => (
          <SidebarItem key={item.key} item={item} currentPage={currentPage} />
--- a/web/components/optional-profile-form.tsx
+++ b/web/components/optional-profile-form.tsx
@@ -849,7 +849,7 @@ export const OptionalProfileUserForm = (props: {
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
              setProfile('political_details', e.target.value)
            }
-            className={'w-full sm:w-96'}
+            className={'w-full sm:w-[700px]'}
            value={profile['political_details'] ?? undefined}
          />
        </Col>
@@ -873,7 +873,7 @@ export const OptionalProfileUserForm = (props: {
            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
              setProfile('religious_beliefs', e.target.value)
            }
-            className={'w-full sm:w-96'}
+            className={'w-full sm:w-[700px]'}
            value={profile['religious_beliefs'] ?? undefined}
          />
        </Col>
@@ -1220,6 +1220,7 @@ const CitySearchBox = (props: {onCitySelected: (city: City | undefined) => void}
          // Set to the best guess (first city) if no option selected
          if (cities.length > 0) props.onCitySelected(cities[0])
        }}
+        searchIcon
      />
      <div className="relative w-full" ref={dropdownRef}>
        <Col className="bg-canvas-50 absolute left-0 right-0 top-1 z-10 w-full overflow-hidden rounded-md">
--- a/web/components/profile-about.tsx
+++ b/web/components/profile-about.tsx
@@ -20,7 +20,6 @@ import {formatHeight, MeasurementSystem} from 'common/measurement-utils'
 import {Profile} from 'common/profiles/profile'
 import {Socials} from 'common/socials'
 import {UserActivity} from 'common/user'
-import {capitalize} from 'lodash'
 import {
  BarChart2,
  Brain,
@@ -91,7 +90,7 @@ export function AboutRow(props: {
      <div className="text-ink-600 w-5 mt-0.5">{icon}</div>
      <Col className={'w-full'}>
        {children}
-        {suffix && <div className={'guidance'}>{capitalize(suffix)}</div>}
+        {suffix && <div className={'guidance'}>{suffix}</div>}
      </Col>
    </Row>
  )
--- a/web/components/profile-grid.tsx
+++ b/web/components/profile-grid.tsx
@@ -311,8 +311,6 @@ function ProfilePreview(props: {
    large: 'flex-col',
  }[cardSize ?? 'medium']

-  const hover = 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
-
  return (
    <div
      className={clsx(
@@ -327,13 +325,21 @@ function ProfilePreview(props: {
        onPointerUp={handlePointerUp}
        onClick={handleClick}
        className={clsx(
+          'relative overflow-hidden rounded-lg bg-canvas-50 person-card',
+          'border-[1.5px] border-[#E4DDD4]',
+          'transition-all duration-[120ms] ease-in',
+          'before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[4px]',
+          'before:bg-[#C17F3E] before:rounded-l-lg',
+          'before:opacity-0 before:transition-opacity before:duration-[120ms]',
+          'hover:before:opacity-100',
+          'hover:bg-canvas-100',
          'relative z-10 cursor-pointer group block rounded-lg overflow-hidden bg-transparent h-full border border-canvas-300',
-          hover,
+          // hover,
        )}
      >
        {/* Phase 1: Dim overlay */}
        {isLoading && (
-          <div className="absolute inset-0 bg-canvas-50/[0.32] rounded-lg z-20 pointer-events-none" />
+          <div className="absolute inset-0 bg-canvas-100/[0.32] rounded-lg z-20 pointer-events-none" />
        )}
        <Col className={clsx('relative w-full rounded transition-all')}>
          <Row className={clsx('absolute top-2 right-2 items-start justify-end px-2 pb-3 z-10')}>
@@ -482,7 +488,7 @@ function ProfilePreview(props: {
                <div
                  className={clsx(
                    'absolute bottom-0 inset-x-0 h-16 bg-gradient-to-t from-canvas-50 to-transparent pointer-events-none',
-                    'group-hover:from-canvas-100 dark:group-hover:from-canvas-100',
+                    // 'group-hover:from-canvas-100 dark:group-hover:from-canvas-100',
                  )}
                />
              )}
@@ -522,7 +528,7 @@ function ProfilePreview(props: {
          <div
            className="absolute -inset-[200%] animate-spin"
            style={{
-              background: `conic-gradient(from 0deg, ${isDarkTheme ? '#000000' : '#ffffff'}, ${isDarkTheme ? '#000000' : '#ffffff'}, #3b82f6)`,
+              background: `conic-gradient(from 0deg, ${isDarkTheme ? '#000000' : '#ffffff'}, ${isDarkTheme ? '#000000' : '#ffffff'}, #C17F3E)`,
              animationDuration: '1s',
            }}
          />
--- a/web/components/searches/button.tsx
+++ b/web/components/searches/button.tsx
@@ -37,7 +37,7 @@ export function BookmarkSearchButton(props: {
        onClick={() => setOpen(true)}
        color="gray-outline"
        size={'xs'}
-        className={'rounded-xl'}
+        className={'rounded-xl bg-canvas-50'}
      >
        ⭐ {t('saved_searches.button', 'Saved Searches')}
      </Button>
@@ -165,7 +165,7 @@ export function BookmarkStarButton(props: {
        onClick={() => setOpen(true)}
        color="gray-outline"
        size={'xs'}
-        className={'rounded-xl'}
+        className={'rounded-xl bg-canvas-50'}
      >
        👥 {t('saved_people.button', 'Saved People')}
      </Button>
--- a/web/components/select-users.tsx
+++ b/web/components/select-users.tsx
@@ -84,6 +84,7 @@ export function SelectUsers(props: {
              value={query}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
              placeholder="Search users..."
+              searchIcon
            />
          </Col>
          {queryReady && (
--- a/web/components/widgets/hide-profile-button.tsx
+++ b/web/components/widgets/hide-profile-button.tsx
@@ -77,7 +77,7 @@ export function HideProfileButton(props: HideProfileButtonProps) {
    >
      <button
        className={clsx(
-          'rounded-full p-1 hover:bg-canvas-200 shadow focus:outline-none',
+          'border border-canvas-200 rounded-md p-1 hover:bg-canvas-200 focus:outline-none',
          className,
        )}
        disabled={submitting}
--- a/web/components/widgets/input.tsx
+++ b/web/components/widgets/input.tsx
@@ -7,10 +7,11 @@ export const Input = forwardRef(
  (
    props: {
      error?: boolean
+      searchIcon?: boolean
    } & ComponentPropsWithoutRef<'input'>,
    ref: Ref<HTMLInputElement>,
  ) => {
-    const {error, className, ...rest} = props
+    const {error, searchIcon, className, ...rest} = props

    return (
      <Row
@@ -22,7 +23,7 @@ export const Input = forwardRef(
          className,
        )}
      >
-        <span className="search-icon">🔍</span>
+        {searchIcon && <span className="search-icon">🔍</span>}
        <input
          ref={ref}
          step={0.001} // default to 3 decimal places
@@ -30,7 +31,7 @@ export const Input = forwardRef(
            '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}
--- a/web/components/widgets/searchable-select.tsx
+++ b/web/components/widgets/searchable-select.tsx
@@ -64,6 +64,7 @@ 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) => (
--- a/web/components/widgets/stat-box.tsx
+++ b/web/components/widgets/stat-box.tsx
@@ -39,7 +39,11 @@ export function StatBox(props: StatBoxProps) {
        className,
      )}
    >
-      <div className={clsx('font-semibold leading-none tracking-tight', sizeClass)}>{value}</div>
+      <div
+        className={clsx('font-semibold leading-none tracking-tight text-primary-800', sizeClass)}
+      >
+        {value}
+      </div>
      {label && <div className="text-ink-700 text-sm">{label}</div>}
      {children}
    </Card>