mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-16 12:10:28 +03:00
Implement Profile Viewer (#130)
* Implement Profile Viewer Fixes #111 * Make user avatar in chat clickable * design progress * Refactored code * progress * Updated chip comp Signed-off-by: Ajay Bura <ajbura@gmail.com> * Refactored ProfileViewer comp Signed-off-by: Ajay Bura <ajbura@gmail.com> * Added msg functionality in ProfileViewer Signed-off-by: Ajay Bura <ajbura@gmail.com> * Added Ignore functionality in ProfileViewer Signed-off-by: Ajay Bura <ajbura@gmail.com> * Fixed Ignore btn bug Signed-off-by: Ajay Bura <ajbura@gmail.com> * Refectored ProfileViewer comp Signed-off-by: Ajay Bura <ajbura@gmail.com> Co-authored-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
parent
8d95fd0ca0
commit
fa10a67811
17 changed files with 425 additions and 32 deletions
|
|
@ -7,13 +7,14 @@ import RawIcon from '../system-icons/RawIcon';
|
|||
|
||||
function Chip({
|
||||
iconSrc, iconColor, text, children,
|
||||
onClick,
|
||||
}) {
|
||||
return (
|
||||
<div className="chip">
|
||||
{iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="small" />}
|
||||
{(text != null && text !== '') && <Text variant="b2">{text}</Text>}
|
||||
<button className="chip" type="button" onClick={onClick}>
|
||||
{iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="extra-small" />}
|
||||
{(text != null && text !== '') && <Text variant="b3">{text}</Text>}
|
||||
{children}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -22,6 +23,7 @@ Chip.propTypes = {
|
|||
iconColor: PropTypes.string,
|
||||
text: PropTypes.string,
|
||||
children: PropTypes.element,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
Chip.defaultProps = {
|
||||
|
|
@ -29,6 +31,7 @@ Chip.defaultProps = {
|
|||
iconColor: null,
|
||||
text: null,
|
||||
children: null,
|
||||
onClick: null,
|
||||
};
|
||||
|
||||
export default Chip;
|
||||
|
|
|
|||
|
|
@ -7,13 +7,27 @@
|
|||
|
||||
background: var(--bg-surface-low);
|
||||
border-radius: var(--bo-radius);
|
||||
border: 1px solid var(--bg-surface-border);
|
||||
box-shadow: var(--bs-surface-border);
|
||||
cursor: pointer;
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
}
|
||||
|
||||
& > .text {
|
||||
flex: 1;
|
||||
color: var(--tc-surface-high);
|
||||
}
|
||||
|
||||
& > .ic-raw {
|
||||
margin-right: var(--sp-extra-tight);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: var(--sp-ultra-tight);
|
||||
[dir=rtl] & {
|
||||
margin-right: 0;
|
||||
margin-left: var(--sp-extra-tight);
|
||||
margin-left: var(--sp-ultra-tight);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue