feat: styled reactions
This commit is contained in:
parent
72cab10d6b
commit
e25a0dc5b2
|
@ -36,7 +36,7 @@ const StyledReactionOverflow = styled.button`
|
|||
margin-bottom: var(--margins-sm);
|
||||
|
||||
span {
|
||||
background-color: var(--color-received-message-background);
|
||||
background-color: var(--message-bubbles-received-background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -14,10 +14,10 @@ const StyledReaction = styled.button<{ selected: boolean; inModal: boolean; show
|
|||
justify-content: ${props => (props.showCount ? 'flex-start' : 'center')};
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--color-received-message-background);
|
||||
background-color: var(--message-bubbles-received-background-color);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: ${props => (props.selected ? 'var(--color-accent)' : 'transparent')};
|
||||
border-color: ${props => (props.selected ? 'var(--primary-color)' : 'var(--transparent-color)')};
|
||||
border-radius: 11px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 7px;
|
||||
|
|
|
@ -18,8 +18,8 @@ export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }>
|
|||
height: 72px;
|
||||
z-index: 5;
|
||||
|
||||
background-color: var(--color-received-message-background);
|
||||
color: var(--color-pill-divider-text);
|
||||
background-color: var(--message-bubbles-received-background-color);
|
||||
color: var(--message-bubbles-received-text-color);
|
||||
box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.51);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
@ -45,7 +45,7 @@ export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }>
|
|||
}};
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: var(--color-received-message-background);
|
||||
background-color: var(--message-bubbles-received-background-color);
|
||||
transform: rotate(45deg);
|
||||
border-radius: 3px;
|
||||
transform: scaleY(1.4) rotate(45deg);
|
||||
|
@ -66,7 +66,7 @@ const StyledContacts = styled.span`
|
|||
`;
|
||||
|
||||
const StyledOthers = styled.span<{ darkMode: boolean }>`
|
||||
color: ${props => (props.darkMode ? 'var(--color-accent)' : 'var(--color-text)')};
|
||||
color: ${props => (props.darkMode ? 'var(--primary-color)' : 'var(--text-primary-color)')};
|
||||
`;
|
||||
|
||||
const generateContactsString = async (
|
||||
|
|
Loading…
Reference in New Issue