Avatar color refinements

This commit is contained in:
Peter Zimon 2022-07-07 12:58:52 +02:00
parent a142a86b5d
commit c542918dae
5 changed files with 7 additions and 7 deletions

View File

@ -56,7 +56,7 @@ const AddForm = (props) => {
<form onSubmit={submitForm} className="comment-form">
<div className="w-full">
<div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar />
<Avatar saturation={props.avatarSaturation} />
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{member.name ? member.name : 'Anonymous'}</h4>
<h6 className="text-[13px] text-neutral-400 font-sans">Now</h6>

View File

@ -25,11 +25,11 @@ class Avatar extends React.Component {
return [0,0,10];
}
const saturation = this.props.saturation ? this.props.saturation : 50;
const saturation = isNaN(this.props.saturation) ? 50 : this.props.saturation;
const hRange = [0, 360];
const lRangeTop = Math.round(saturation / (100 / 30)) + 20;
const lRangeBottom = lRangeTop - 10;
const lRangeTop = Math.round(saturation / (100 / 30)) + 30;
const lRangeBottom = lRangeTop - 20;
const lRange = [lRangeBottom, lRangeTop];
const hash = this.getHashOfString(commentMember.name);

View File

@ -62,7 +62,7 @@ const Comment = (props) => {
}
{isInReplyMode &&
<div className={`ml-14 mb-10 ${!hasReplies && 'mt-10'}`}>
<ReplyForm parent={comment} toggle={toggleReplyMode} />
<ReplyForm parent={comment} toggle={toggleReplyMode} avatarSaturation={props.avatarSaturation} />
</div>
}
</>

View File

@ -58,7 +58,7 @@ class CommentsBox extends React.Component {
{comments}
</div>
<div>
{ this.context.member ? <AddForm /> : <NotSignedInBox /> }
{ this.context.member ? <AddForm avatarSaturation={this.props.avatarSaturation} /> : <NotSignedInBox /> }
</div>
</section>
);

View File

@ -59,7 +59,7 @@ const ReplyForm = (props) => {
<form onSubmit={submitForm} className="comment-form mb-4">
<div className="w-full">
<div className="flex mb-4 space-x-4 justify-start items-center">
<Avatar />
<Avatar saturation={props.avatarSaturation} />
<div>
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{member.name}</h4>
<h6 className="text-[13px] text-neutral-400 font-sans">Now</h6>