feat: styled reactions

This commit is contained in:
William Grant 2022-09-28 15:51:38 +10:00
parent 72cab10d6b
commit e25a0dc5b2
3 changed files with 7 additions and 7 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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 (