fix some dom warnings

spacebarchat · Sep 3, 2023 · 840e9a0 · 840e9a0
1 parent 76222c5
commit 840e9a0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git a/src/components/messaging/ChatHeader.tsx b/src/components/messaging/ChatHeader.tsx
@@ -17,12 +17,8 @@ const IconButton = styled.button`
 	}
 `;
 
-interface CustomIconProps {
-	active?: boolean;
-}
-
-const CustomIcon = styled(Icon)<CustomIconProps>`
-	color: ${(props) => (props.active ? "#ffffff" : "var(--text-secondary)")};
+const CustomIcon = styled(Icon)<{ $active?: boolean }>`
+	color: ${(props) => (props.$active ? "#ffffff" : "var(--text-secondary)")};
 
 	&:hover {
 		color: var(--text);
@@ -113,7 +109,7 @@ function ActionItem({ icon, active, ariaLabel, tooltip }: ActionItemProps) {
 						logger.debug("click");
 					}}
 				>
-					<CustomIcon icon={icon} size="24px" aria-label={ariaLabel} active={active} />
+					<CustomIcon $active={active} icon={icon} size="24px" aria-label={ariaLabel} />
 				</IconButton>
 			</IconWrapper>
 		</Tooltip>

diff --git a/src/components/messaging/MessageInput.tsx b/src/components/messaging/MessageInput.tsx
@@ -51,14 +51,14 @@ const UploadActionWrapper = styled.div`
 	padding: 0 12px;
 `;
 
-const StyledEditable = styled(Editable)<{ canSendMessages?: boolean; canUpload?: boolean }>`
+const StyledEditable = styled(Editable)<{ $canSendMessages?: boolean; $canUpload?: boolean }>`
 	width: 100%;
 	outline: none;
 	word-break: break-word;
-	padding: 12px 16px 12px ${({ canUpload }) => (canUpload ? "0" : "16px")};
+	padding: 12px 16px 12px ${({ $canUpload }) => ($canUpload ? "0" : "16px")};
 	overflow-y: auto;
 	max-height: 50vh;
-	cursor: ${({ canSendMessages }) => (!canSendMessages ? "not-allowed" : "text")};
+	cursor: ${({ $canSendMessages }) => (!$canSendMessages ? "not-allowed" : "text")};
 `;
 
 const CustomIcon = styled(Icon)`
@@ -256,8 +256,8 @@ function MessageInput(props: Props) {
 						)}
 						<Slate editor={editor} initialValue={initialEditorValue} onChange={onChange}>
 							<StyledEditable
-								canSendMessages={canSendMessages}
-								canUpload={canUpload}
+								$canSendMessages={canSendMessages}
+								$canUpload={canUpload}
 								onKeyDown={onKeyDown}
 								value={content}
 								placeholder={