Improve colors buttons connect-actions.tsx

web/components/messaging/new-message-button.tsx

@@ -1,6 +1,7 @@
 import {PlusIcon} from '@heroicons/react/solid'
 import clsx from 'clsx'
 import {DisplayUser} from 'common/api/user-types'
+import {APIError} from 'common/api/utils'
 import {buildArray} from 'common/util/array'
 import {useRouter} from 'next/router'
 import {useState} from 'react'
@@ -33,13 +34,15 @@ function MessageModal(props: {open: boolean; setOpen: (open: boolean) => void})
   const privateUser = usePrivateUser()
   const router = useRouter()
   const t = useT()
+  const [errorText, setErrorText] = useState<string>('')
 
   const [users, setUsers] = useState<DisplayUser[]>([])
   const createChannel = async () => {
     const res = await api('create-private-user-message-channel', {
       userIds: users.map((user) => user.id),
-    }).catch((e) => {
+    }).catch((e: APIError) => {
       console.error(e)
+      setErrorText(String(e))
       return
     })
     if (!res) {
@@ -61,6 +64,7 @@ function MessageModal(props: {open: boolean; setOpen: (open: boolean) => void})
             .concat(buildArray(privateUser?.id))}
         />
       </Col>
+      {errorText && <p className={'bg-canvas-0 text-red-500 px-5'}>{errorText}</p>}
       <Row className={'bg-canvas-0 justify-end rounded-b-md p-2'}>
         <Button disabled={users.length === 0} onClick={createChannel}>
           {t('messages.create', 'Create')}

web/components/profile/connect-actions.tsx

@@ -154,12 +154,12 @@ export function ConnectActions(props: {profile: Profile; user: User}) {
                 border
                 ${
                   isMutual
-                    ? 'bg-primary-500 text-white border-primary-500'
+                    ? 'bg-primary-200 border-primary-500'
                     : isSelected
-                      ? 'bg-primary-100 text-primary-800 border-primary-300'
-                      : 'bg-canvas-50 text-ink-700 border-ink-300 hover:border-primary-400'
+                      ? 'bg-primary-100 border-primary-300'
+                      : 'bg-canvas-50 text-ink-700 border-ink-300'
                 }
-                ${isDisabled ? 'opacity-40 cursor-not-allowed' : ''}
+                ${isDisabled ? 'opacity-30 cursor-not-allowed' : 'hover:border-primary-400'}
               `}
                       >
                         {t(`profile.relationship.${type}`, label)}

web/styles/globals.css

@@ -252,8 +252,8 @@
     --color-primary-500: 59 130 246; /* standard blue */
     --color-primary-400: 37 99 235;
     --color-primary-300: 29 78 216;
-    --color-primary-200: 30 64 175;
-    --color-primary-100: 30 58 138;
+    --color-primary-200: 60 60 60;
+    --color-primary-100: 30 30 30;
     --color-primary-50: 23 37 84; /* very dark navy */
 
     --color-no-950: 255 255 255; /* white */