mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-07-30 09:48:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve SendMessageButton styles: adjust padding, rounding, and text size for better readability and usability; add envelope icon for visual clarity.

Browse Source
This commit is contained in:
MartinBraquet
2026-07-28 18:27:28 +02:00
parent df1fe87f5f
commit adeed6a802
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/components/messaging/send-message-button.tsx
View File

@@ -10,6 +10,7 @@ import React, {useEffect, useRef, useState} from 'react'
import {BiEnvelope} from 'react-icons/bi'
import {Button, buttonClass} from 'web/components/buttons/button'
import {CommentInputTextArea} from 'web/components/comments/comment-input'
import {linkifyTrailingUrl} from 'web/components/editor/autolink'
import {Col} from 'web/components/layout/col'
import {Modal, MODAL_CLASS} from 'web/components/layout/modal'
import {Row} from 'web/components/layout/row'
@@ -19,7 +20,7 @@ import {
AccountOnHoldNotice,
isAutoBanUnderReviewError,
} from 'web/components/moderation/account-on-hold'
import {linkifyTrailingUrl, useTextEditor} from 'web/components/widgets/editor'
import {useTextEditor} from 'web/components/widgets/editor'
import {Tooltip} from 'web/components/widgets/tooltip'
import {useFirebaseUser} from 'web/hooks/use-firebase-user'
import {usePrivateUser, useUser} from 'web/hooks/use-user'
@@ -211,7 +212,13 @@ export const SendMessageButton = (props: {
>
{text ? (
<Button
className={clsx('h-fit gap-1', disabled && 'opacity-50 cursor-not-allowed')}
// Solid fill, tight radius, an envelope leading the label: the one control in Connect
// that should read as a button at a glance. The `cta` glow is dropped — at this size it
// haloed the button against the page instead of sitting on it.
className={clsx(
'h-fit gap-2 !rounded-[10px] !px-5 !py-3 !text-[15px] font-semibold !shadow-none',
disabled && 'opacity-50 cursor-not-allowed',
)}
// `cta`, not `primary`: `primary` is the *tinted secondary* pill (see button.tsx), which
// in the dark ramp is brown-on-brown and read as disabled on the one control that is the
// whole point of the Connect section.
@@ -224,6 +231,7 @@ export const SendMessageButton = (props: {
onPointerDown={onPointerDown}
disabled={disabled}
>
<BiEnvelope className="h-[18px] w-[18px] flex-none" />
{text}
</Button>
) : circleButton ? (

3
web/components/votes/vote-info.tsx
View File

@@ -7,11 +7,12 @@ import Link from 'next/link'
import {useEffect, useState} from 'react'
import toast from 'react-hot-toast'
import {Button} from 'web/components/buttons/button'
import {linkifyTrailingUrl} from 'web/components/editor/autolink'
import {Col} from 'web/components/layout/col'
import {Row} from 'web/components/layout/row'
import {EnglishOnlyWarning} from 'web/components/news/english-only-warning'
import {Vote, VoteItem} from 'web/components/votes/vote-item'
import {linkifyTrailingUrl, TextEditor, useTextEditor} from 'web/components/widgets/editor'
import {TextEditor, useTextEditor} from 'web/components/widgets/editor'
import {Input} from 'web/components/widgets/input'
import {Title} from 'web/components/widgets/title'
import {useGetter} from 'web/hooks/use-getter'