diff --git a/src/common/component/Send/EmojiPicker.js b/src/common/component/Send/EmojiPicker.js index 19272067..da98769d 100644 --- a/src/common/component/Send/EmojiPicker.js +++ b/src/common/component/Send/EmojiPicker.js @@ -1,6 +1,7 @@ import { useState } from "react"; import Tippy from "@tippyjs/react"; import styled from "styled-components"; +import Tooltip from "../../component/Tooltip"; import { useKey } from "rooks"; const StyledBtn = styled.button` outline: none; @@ -38,18 +39,20 @@ export default function EmojiPicker({ selectEmoji }) { selectEmoji(emoji.native); }; return ( - } - > - - - - + + } + > + + + + + ); } diff --git a/src/common/component/Send/Toolbar.js b/src/common/component/Send/Toolbar.js index 63b44884..96c07470 100644 --- a/src/common/component/Send/Toolbar.js +++ b/src/common/component/Send/Toolbar.js @@ -1,5 +1,7 @@ import { useState, useRef } from "react"; import styled from "styled-components"; +import Tooltip from "../../component/Tooltip"; + import UploadModal from "../../component/UploadModal"; import AddIcon from "../../../assets/icons/add.solid.svg"; import MarkdownIcon from "../../../assets/icons/markdown.svg"; @@ -23,7 +25,7 @@ const Styled = styled.div` position: relative; width: 24px; height: 24px; - input { + label { opacity: 0; cursor: pointer; position: absolute; @@ -31,6 +33,9 @@ const Styled = styled.div` top: 0; width: 100%; height: 100%; + input { + display: none; + } } } `; @@ -59,19 +64,26 @@ export default function Toolbar({ toggleMode, mode, to, context }) { )}
- -
-
- - + + +
+ +
+ + +
+
); diff --git a/src/common/component/Tooltip.js b/src/common/component/Tooltip.js index d02e4cf5..dc86a96c 100644 --- a/src/common/component/Tooltip.js +++ b/src/common/component/Tooltip.js @@ -37,7 +37,12 @@ const StyledTip = styled.div` transform: translate3d(-50%, -50%, 0) rotate(45deg); } `; -export default function Tooltip({ tip = "", placement = "right", children }) { +export default function Tooltip({ + tip = "", + placement = "right", + children, + ...rest +}) { return ( {tip}} + {...rest} > {children}