From 40dae2568be157cc859f552f87d1ace370665add Mon Sep 17 00:00:00 2001
From: Michael Peters <michael@copium>
Date: Sat, 4 Dec 2021 06:19:08 -0600
Subject: [PATCH] fix another broken placeholder

---
 client/webapp/elements/overlay-personalize.ts | 10 +++++-----
 client/webapp/styles/general.scss             |  5 +++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/client/webapp/elements/overlay-personalize.ts b/client/webapp/elements/overlay-personalize.ts
index 7f75f48..8fc1466 100644
--- a/client/webapp/elements/overlay-personalize.ts
+++ b/client/webapp/elements/overlay-personalize.ts
@@ -71,7 +71,7 @@ export default function createPersonalizeOverlay(document: Document, q: Q, guild
 		q.$$$(element, '.button.submit').innerText = 'Submitting...';
 		let newDisplayName = q.$$$(element, '.text-input').innerText;
 
-		if (newDisplayName == connection.display_name && newAvatarBuffer == null) {
+		if (newDisplayName == connection.displayName && newAvatarBuffer == null) {
 			// nothing changed, simply close the diaolg
 			element.removeSelf();
 			setting = false;
@@ -81,12 +81,12 @@ export default function createPersonalizeOverlay(document: Document, q: Q, guild
 		q.$$$(element, '.text-input').removeAttribute('contenteditable');
 
 		let success = false;
-		if (newDisplayName != connection.display_name && newDisplayName.length == 0) {
+		if (newDisplayName != connection.displayName && newDisplayName.length == 0) {
 			LOG.warn('attempted to set empty new display name');
 			q.$$$(element, '.button.submit').innerText = 'Try Again';
 			q.$$$(element, '.error').innerText = 'New display name is empty.';
 			await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
-		} else if (newDisplayName != connection.display_name && newDisplayName.length > Globals.MAX_DISPLAY_NAME_LENGTH) {
+		} else if (newDisplayName != connection.displayName && newDisplayName.length > Globals.MAX_DISPLAY_NAME_LENGTH) {
 			LOG.warn('attempted to set too long new display name');
 			q.$$$(element, '.button.submit').innerText = 'Try Again';
 			q.$$$(element, '.error').innerText = 'New display name too long. ' + newDisplayName.length + ' > ' + Globals.MAX_DISPLAY_NAME_LENGTH;
@@ -94,10 +94,10 @@ export default function createPersonalizeOverlay(document: Document, q: Q, guild
 		} else { // new avatar buffer size is already checked above
 			// Set Display Name
 			let failed = false;
-			if (newDisplayName != connection.display_name) {
+			if (newDisplayName != connection.displayName) {
 				try {
 					await guild.requestSetDisplayName(newDisplayName);
-					connection.display_name = newDisplayName; // prevent resubmit
+					connection.displayName = newDisplayName; // prevent resubmit
 				} catch (e) {
 					LOG.error('error setting display name', e);
 					q.$$$(element, '.button.submit').innerText = 'Try Again';
diff --git a/client/webapp/styles/general.scss b/client/webapp/styles/general.scss
index 23083e3..a821664 100644
--- a/client/webapp/styles/general.scss
+++ b/client/webapp/styles/general.scss
@@ -29,6 +29,7 @@ body {
 }
 
 // https://stackoverflow.com/questions/16941360/how-to-create-a-placeholder-for-div-that-act-like-textfield
-[contenteditable=true]:empty:before{
-    content:attr(data-placeholder)
+[contenteditable=plaintext-only]:empty::before{
+    content:attr(data-placeholder);
+    cursor: text;
 }