refactor: converted sass colors for _avatar.scss

pull/2521/head
William Grant 3 years ago
parent 05bd97df3b
commit 788f78f5d0

@ -1,8 +1,4 @@
// Module: Avatar // Module: Avatar
$borderAvatarColor: unquote(
'#00000059'
); // search for references on ts TODO: make this exposed on ts
.module-avatar { .module-avatar {
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
@ -13,7 +9,7 @@ $borderAvatarColor: unquote(
img { img {
object-fit: cover; object-fit: cover;
border-radius: 50%; border-radius: 50%;
border: 1px solid $borderAvatarColor; border: 1px solid var(--color-avatar-border-color);
} }
} }

@ -21,7 +21,6 @@ const sha512FromPubkey = async (pubkey: string): Promise<string> => {
const cachedHashes = new Map<string, number>(); const cachedHashes = new Map<string, number>();
const avatarPlaceholderColors = ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a']; const avatarPlaceholderColors = ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a'];
const avatarBorderColor = '#00000059';
function useHashBasedOnPubkey(pubkey: string) { function useHashBasedOnPubkey(pubkey: string) {
const [hash, setHash] = useState<number | undefined>(undefined); const [hash, setHash] = useState<number | undefined>(undefined);
@ -89,7 +88,7 @@ export const AvatarPlaceHolder = (props: Props) => {
r={rWithoutBorder} r={rWithoutBorder}
fill="#d2d2d3" fill="#d2d2d3"
shapeRendering="geometricPrecision" shapeRendering="geometricPrecision"
stroke={avatarBorderColor} stroke={'var(--color-avatar-border-color)'}
strokeWidth="1" strokeWidth="1"
/> />
</g> </g>
@ -114,7 +113,7 @@ export const AvatarPlaceHolder = (props: Props) => {
r={rWithoutBorder} r={rWithoutBorder}
fill={bgColor} fill={bgColor}
shapeRendering="geometricPrecision" shapeRendering="geometricPrecision"
stroke={avatarBorderColor} stroke={'var(--color-avatar-border-color)'}
strokeWidth="1" strokeWidth="1"
/> />
<text <text

@ -13,6 +13,7 @@ const borderDarkThemeColor = '#ffffff0F';
// THEME INDEPEDENT COLORS // THEME INDEPEDENT COLORS
const sessionBlack = '#282829'; const sessionBlack = '#282829';
const avatarBorderColor = '#00000059';
// DARK COLORS // DARK COLORS
const darkColorAccent = accentDarkTheme; const darkColorAccent = accentDarkTheme;
@ -81,6 +82,7 @@ export const switchHtmlToDarkTheme = () => {
darkColorSentMessageBg darkColorSentMessageBg
); );
document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack); document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack);
document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--color-clickable-hovered', '--color-clickable-hovered',
darkColorClickableHovered darkColorClickableHovered
@ -229,6 +231,7 @@ export const switchHtmlToLightTheme = () => {
); );
// TODO: This might be wrong. Didn't merge correctly. // TODO: This might be wrong. Didn't merge correctly.
document.documentElement.style.setProperty('--color-sent-message-text', black); document.documentElement.style.setProperty('--color-sent-message-text', black);
document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--color-clickable-hovered', '--color-clickable-hovered',
lightColorClickableHovered lightColorClickableHovered

Loading…
Cancel
Save