Chat name & color modal (#2347)

* Improve name & color change modal design

* Resend user info after color change

That way the name change dialog shows the correct
color when opening it the next time

* Name change modal: allow overflow of color picker

* Allow submitting form only if button is enabled

* Prettified Code!

* Make button & text input same height

Co-authored-by: xarantolus <xarantolus@users.noreply.github.com>

core/chat/events.go

@@ -114,6 +114,10 @@ func (s *Server) userColorChanged(eventData chatClientEvent) {
 	if err := user.ChangeUserColor(eventData.client.User.ID, receivedEvent.NewColor); err != nil {
 		log.Errorln("error changing user display color", err)
 	}
+
+	// Resend client's user info with new color, otherwise the name change dialog would still show the old color
+	eventData.client.User.DisplayColor = receivedEvent.NewColor
+	eventData.client.sendConnectedClientInfo()
 }
 
 func (s *Server) userMessageSent(eventData chatClientEvent) {

web/components/modals/NameChangeModal/NameChangeModal.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, FC, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { Input, Button, Select } from 'antd';
+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';
@@ -32,7 +32,12 @@ export const NameChangeModal: FC = () => {
 
   const { displayName, displayColor } = currentUser;
 
+  const saveEnabled = () =>
+    newName !== displayName && newName !== '' && websocketService?.isConnected();
+
   const handleNameChange = () => {
+    if (!saveEnabled()) return;
+
     const nameChange = {
       type: MessageType.NAME_CHANGE,
       newName,
@@ -40,8 +45,6 @@ export const NameChangeModal: FC = () => {
     websocketService.send(nameChange);
   };
 
-  const saveEnabled = newName !== displayName && newName !== '' && websocketService?.isConnected();
-
   const handleColorChange = (color: string) => {
     const colorChange = {
       type: MessageType.COLOR_CHANGE,
@@ -53,29 +56,32 @@ export const NameChangeModal: FC = () => {
   const maxColor = 8; // 0...n
   const colorOptions = [...Array(maxColor)].map((e, i) => i);
 
+  const saveButton = (
+    <Button type="primary" onClick={handleNameChange} disabled={!saveEnabled()}>
+      Change name
+    </Button>
+  );
+
   return (
     <div>
-      Your chat display name is what people see when you send chat messages. Other information can
+      Your chat display name is what people see when you send chat messages.
-      go here to mention auth, and stuff.
+      <Form onSubmitCapture={handleNameChange} style={{ paddingTop: '8px' }}>
-      <Input
+        <Input.Search
-        id="name-change-field"
+          enterButton={saveButton}
-        value={newName}
+          id="name-change-field"
-        onChange={e => setNewName(e.target.value)}
+          value={newName}
-        placeholder="Your chat display name"
+          onChange={e => setNewName(e.target.value)}
-        maxLength={30}
+          placeholder="Your chat display name"
-        showCount
+          maxLength={30}
-        defaultValue={displayName}
+          showCount
-      />
+          defaultValue={displayName}
-      <Button id="name-change-submit" disabled={!saveEnabled} onClick={handleNameChange}>
+        />
-        Change name
+      </Form>
-      </Button>
+      <Form.Item label="Your Color" style={{ paddingTop: '8px', zIndex: 1000, marginBottom: 0 }}>
-      <div>
-        Your Color
         <Select
           style={{ width: 120 }}
           onChange={handleColorChange}
           defaultValue={displayColor.toString()}
-          getPopupContainer={triggerNode => triggerNode.parentElement}
         >
           {colorOptions.map(e => (
             <Option key={e.toString()} title={e}>
@@ -83,7 +89,9 @@ export const NameChangeModal: FC = () => {
             </Option>
           ))}
         </Select>
-      </div>
+      </Form.Item>
+      You can also authenticate an IndieAuth or Fediverse account via the &quot;Authenticate&quot;
+      menu.
     </div>
   );
 };

web/components/ui/Modal/Modal.tsx

@@ -58,7 +58,7 @@ export const Modal: FC<ModalProps> = ({
       afterClose={afterClose}
       bodyStyle={modalStyle}
       width={width}
-      zIndex={9999}
+      zIndex={999}
       footer={null}
       centered
       destroyOnClose

web/styles/ant-overrides.scss

@@ -130,7 +130,7 @@ DROPDOWN
 }
 
 .ant-input-affix-wrapper {
-  padding: 2px 5px;
+  padding: 4px 5px;
   background-color: var(--theme-color-components-form-field-background);
 }