some webv2 UI polish (#2940)

* style tweaks for Action Button, UserMenu, Modal

* a bunch of misc polish; some around chat

* Prettified Code!

* cleanup

* fix formatting

* Reduce content padding a bit

* some stylesheet cleanup

* fix action button sizing

* Remove action button height completely

---------

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/modals/NameChangeModal/NameChangeModal.tsx

@@ -4,6 +4,7 @@ import { Input, Button, Select, Form } from 'antd';
 import { MessageType } from '../../../interfaces/socket-events';
 import WebsocketService from '../../../services/websocket-service';
 import { websocketServiceAtom, currentUserAtom } from '../../stores/ClientConfigStore';
+import styles from './NameChangeModal.module.scss';
 
 const { Option } = Select;
 
@@ -70,7 +71,7 @@ export const NameChangeModal: FC = () => {
   return (
     <div>
       Your chat display name is what people see when you send chat messages.
-      <Form onSubmitCapture={handleNameChange} style={{ paddingTop: '8px' }}>
+      <Form onSubmitCapture={handleNameChange} className={styles.form}>
         <Input.Search
           enterButton={saveButton}
           id="name-change-field"
@@ -81,13 +82,15 @@ export const NameChangeModal: FC = () => {
           maxLength={30}
           showCount
           defaultValue={displayName}
+          className={styles.inputGroup}
         />
       </Form>
-      <Form.Item label="Your Color" style={{ paddingTop: '8px', zIndex: 1000, marginBottom: 0 }}>
+      <Form.Item label="Your Color" className={styles.colorChange}>
         <Select
           style={{ width: 120 }}
           onChange={handleColorChange}
           defaultValue={displayColor.toString()}
+          className={styles.colorDropdown}
         >
           {colorOptions.map(e => (
             <Option key={e.toString()} title={e}>