LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Added icons and formatted with prettier

Browse Source
This commit is contained in:
t1enne 2022-05-22 14:27:06 +02:00
parent 0ddeb5dfb8
commit 6a0d0970d6
3 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/action-buttons/ActionButton.tsx
View File

@ -8,7 +8,9 @@ interface Props {
action: ExternalAction; action: ExternalAction;
} }
export default function ActionButton({action: { url, title, description, icon, openExternally }}: Props) { export default function ActionButton({
action: { url, title, description, icon, openExternally },
}: Props) {
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
const buttonClicked = () => { const buttonClicked = () => {
@ -21,11 +23,7 @@ export default function ActionButton({action: { url, title, description, icon, o
return ( return (
<> <>
<Button <Button type="primary" className={`${s.button}`} onClick={buttonClicked}>
type="primary"
className={`${s.button}`}
onClick={buttonClicked}
>
<img src={icon} className={`${s.icon}`} alt={description} /> <img src={icon} className={`${s.icon}`} alt={description} />
{title} {title}
</Button> </Button>

7
web/components/chat/ChatTextField/ChatTextField.module.scss
View File

@ -22,11 +22,16 @@
.emojiButton { .emojiButton {
border: none; border: none;
margin-right: 5px; background: none;
cursor: pointer;
padding: 0 1rem;
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
svg {
fill: var(--color-owncast-gray-300);
}
} }
.submitButtonWrapper { .submitButtonWrapper {

17
web/components/chat/ChatTextField/ChatTextField.tsx
View File

@ -1,4 +1,4 @@
import { SmileOutlined } from '@ant-design/icons'; import { SendOutlined, SmileOutlined } from '@ant-design/icons';
import { Button, Popover } from 'antd'; import { Button, Popover } from 'antd';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
@ -103,8 +103,6 @@ export default function ChatTextField(props: Props) {
const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom); const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
const [editor] = useState(() => withImages(withReact(createEditor()))); const [editor] = useState(() => withImages(withReact(createEditor())));
const size = 'small';
const sendMessage = () => { const sendMessage = () => {
if (!websocketService) { if (!websocketService) {
console.log('websocketService is not defined'); console.log('websocketService is not defined');
@ -157,19 +155,18 @@ export default function ChatTextField(props: Props) {
style={{ width: '100%' }} style={{ width: '100%' }}
/> />
</Slate> </Slate>
<Button <button
type="button"
className={s.emojiButton} className={s.emojiButton}
type="default" title="Emoji picker button"
ghost
title="Emoji"
onClick={() => setShowEmojis(!showEmojis)} onClick={() => setShowEmojis(!showEmojis)}
> >
<SmileOutlined /> <SmileOutlined />
</Button> </button>
</div> </div>
<div className={s.submitButtonWrapper}> <div className={s.submitButtonWrapper}>
<Button size={size} type="primary" onClick={sendMessage}> <Button size="middle" type="primary" icon={<SendOutlined />} onClick={sendMessage}>
Submit Send
</Button> </Button>
</div> </div>
<Popover <Popover