[PAY-1350] Update send button styling on web (#3523)

Co-authored-by: Marcus Pasell <3690498+rickyrombo@users.noreply.github.com>
AudiusProject · Jun 7, 2023 · 100a4d6 · 100a4d6
1 parent 238f352
commit 100a4d6
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 15 deletions.
diff --git a/apps/audius-client/packages/web/src/components/data-entry/TextAreaV2.module.css b/apps/audius-client/packages/web/src/components/data-entry/TextAreaV2.module.css
@@ -74,3 +74,9 @@
   align-items: flex-end;
   gap: var(--unit-1);
 }
+
+.children {
+  display: flex;
+  align-items: center;
+  overflow: visible;
+}
diff --git a/apps/audius-client/packages/web/src/components/data-entry/TextAreaV2.tsx b/apps/audius-client/packages/web/src/components/data-entry/TextAreaV2.tsx
@@ -102,7 +102,12 @@ export const TextAreaV2 = (props: TextAreaV2Props) => {
       />
       <div className={styles.bottom}>
         <div className={styles.bottomRight}>
-          <div className={styles.children}>{children}</div>
+          <div
+            className={styles.children}
+            style={{ height: `${sizeToLineHeight[size]}px` }}
+          >
+            {children}
+          </div>
           {showMaxLength ? (
             <div
               className={cn(styles.characterCount, {

diff --git a/apps/audius-client/packages/web/src/pages/chat-page/components/ChatComposer.module.css b/apps/audius-client/packages/web/src/pages/chat-page/components/ChatComposer.module.css
@@ -7,20 +7,45 @@
   padding: var(--unit-2) var(--unit-4);
 }
 
+.input {
+  padding: var(--unit-2) var(--unit-4);
+}
+
 .icon {
-  width: 1.5em;
-  height: 1.5em;
-  display: block; /* Prevent descender space */
+  width: var(--unit-5);
+  height: var(--unit-5);
+  /* 1 pixel nudge to visually center */
+  position: relative;
+  left: -1px;
 }
 
 .icon path {
-  fill: var(--primary);
+  fill: var(--static-white);
 }
 
 button.sendButton {
-  display: block; /* Prevent descender space */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--unit-8);
+  width: var(--unit-8);
+  border-radius: var(--unit-4);
+  background-color: var(--primary);
+  transform: scale(1);
+  transition: all var(--quick);
+}
+
+button.sendButton:not(:disabled):hover {
+  transform: scale(1.05);
+  background-color: var(--primary-light-2);
+}
+
+button.sendButton:not(:disabled):active {
+  background-color: var(--primary-dark-2);
+  transform: scale(0.95);
 }
 
-.sendButton:not(:disabled) .icon:hover path {
-  fill: var(--secondary);
+button.sendButton:disabled,
+button.sendButton:disabled .icon path {
+  opacity: 0.5;
 }
diff --git a/apps/audius-client/packages/web/src/pages/chat-page/components/ChatComposer.tsx b/apps/audius-client/packages/web/src/pages/chat-page/components/ChatComposer.tsx
@@ -30,6 +30,20 @@ export type ChatComposerProps = ComponentPropsWithoutRef<'div'> & {
 
 const MAX_MESSAGE_LENGTH = 10000
 
+type ChatSendButtonProps = { disabled: boolean }
+
+export const ChatSendButton = ({ disabled }: ChatSendButtonProps) => {
+  return (
+    <IconButton
+      className={styles.sendButton}
+      disabled={disabled}
+      aria-label={messages.sendMessage}
+      type={'submit'}
+      icon={<IconSend className={styles.icon} />}
+    />
+  )
+}
+
 export const ChatComposer = (props: ChatComposerProps) => {
   const { chatId } = props
   const dispatch = useDispatch()
@@ -81,13 +95,7 @@ export const ChatComposer = (props: ChatComposerProps) => {
           grows
           resize
         >
-          <IconButton
-            className={styles.sendButton}
-            disabled={!value}
-            aria-label={messages.sendMessage}
-            type={'submit'}
-            icon={<IconSend className={styles.icon} />}
-          />
+          <ChatSendButton disabled={!value} />
         </TextAreaV2>
       </form>
     </div>