Added minor visual improvements

no issue

- applied typography changes to bio and date line as they were too strong
- padding and positioning of the comment input form was a bit misaligned
This commit is contained in:
Peter Zimon 2022-07-28 13:11:39 +02:00
parent 2906018b34
commit b58970f9e8
2 changed files with 3 additions and 3 deletions

View File

@ -91,7 +91,7 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
</div> :
<div>
<h4 className="text-[17px] font-sans font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4>
<div className="flex items-baseline font-sans font-semibold text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
<div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
{comment.member.bio && <div>{comment.member.bio}<span className="mx-[0.3em]">·</span></div>}
<div>{formatRelativeTime(comment.created_at)}</div>
<EditedInfo comment={comment} />

View File

@ -294,7 +294,7 @@ const Form = (props) => {
`}>
<div className="w-full relative">
<div className="pr-[1px] font-sans leading-normal dark:text-neutral-300">
<div className={`transition-[padding] duration-150 delay-100 relative w-full pl-12 ${shouldFormBeReduced && 'pl-0'} ${isFormOpen && 'pt-[64px]'}`}>
<div className={`transition-[padding] duration-150 delay-100 relative w-full pl-[52px] ${shouldFormBeReduced && 'pl-0'} ${isFormOpen && 'pt-[64px]'}`}>
<div
className={`
transition-all duration-150 delay-100
@ -355,7 +355,7 @@ const Form = (props) => {
leaveTo="opacity-0"
>
<h4 className="text-[17px] font-sans font-bold tracking-tight dark:text-[rgba(255,255,255,0.85)]">{memberName ? memberName : 'Anonymous'}</h4>
<div className="flex items-baseline font-sans font-semibold text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
<div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
{/* TODO: bio text field ready for wiring up
{memberBio ?
<div>{memberBio}</div> :