fix: profile icon css

This commit is contained in:
Shusui MOYATANI
2024-01-04 17:46:49 +09:00
parent 541d036824
commit 8b3caffa9e
4 changed files with 7 additions and 11 deletions

View File

@@ -35,7 +35,7 @@ const Post: Component<PostProps> = (props) => {
<div class="flex w-full gap-1"> <div class="flex w-full gap-1">
<button <button
type="button" type="button"
class="author-icon h-10 w-10 shrink-0 overflow-hidden" class="author-icon h-10 w-10 shrink-0 overflow-hidden rounded"
onClick={(ev) => { onClick={(ev) => {
ev.preventDefault(); ev.preventDefault();
props.onShowProfile?.(); props.onShowProfile?.();
@@ -44,7 +44,7 @@ const Post: Component<PostProps> = (props) => {
<Show when={author()?.picture} keyed> <Show when={author()?.picture} keyed>
{(url) => ( {(url) => (
<LazyLoad> <LazyLoad>
{() => <img src={url} alt="icon" class="h-full w-full rounded object-cover" />} {() => <img src={url} alt="icon" class="h-full w-full object-cover" />}
</LazyLoad> </LazyLoad>
)} )}
</Show> </Show>

View File

@@ -44,13 +44,13 @@ const ReactionDisplay: Component<ReactionDisplayProps> = (props) => {
<EmojiDisplay reactionTypes={event().toReactionTypes()} /> <EmojiDisplay reactionTypes={event().toReactionTypes()} />
</div> </div>
<div class="notification-user flex gap-1 overflow-hidden"> <div class="notification-user flex gap-1 overflow-hidden">
<div class="author-icon h-5 w-5 shrink-0 overflow-hidden object-cover"> <div class="author-icon h-5 w-5 shrink-0 overflow-hidden rounded">
<Show when={profile()?.picture != null}> <Show when={profile()?.picture != null}>
<img <img
src={profile()?.picture} src={profile()?.picture}
alt="icon" alt="icon"
// TODO autofit // TODO autofit
class="rounded" class="h-full w-full object-cover"
/> />
</Show> </Show>
</div> </div>

View File

@@ -288,7 +288,7 @@ const EmojiConfig = () => {
<For each={Object.values(config().customEmojis)}> <For each={Object.values(config().customEmojis)}>
{({ shortcode, url }) => ( {({ shortcode, url }) => (
<li class="flex items-center gap-2"> <li class="flex items-center gap-2">
<img class="min-w-7 h-7 max-w-[128px]" src={url} alt={shortcode} /> <img class="h-7 min-w-7 max-w-[128px]" src={url} alt={shortcode} />
<div class="flex-1 truncate">{shortcode}</div> <div class="flex-1 truncate">{shortcode}</div>
<button class="h-3 w-3 shrink-0" onClick={() => removeEmoji(shortcode)}> <button class="h-3 w-3 shrink-0" onClick={() => removeEmoji(shortcode)}>
<XMark /> <XMark />

View File

@@ -287,14 +287,10 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
</Show> </Show>
<div class="mt-[-54px] flex items-end gap-4 px-4 pt-4"> <div class="mt-[-54px] flex items-end gap-4 px-4 pt-4">
<div class="flex-1 shrink-0"> <div class="flex-1 shrink-0">
<div class="h-28 w-28 rounded-lg shadow-md"> <div class="h-28 w-28 overflow-hidden rounded-lg shadow-md">
<Show when={profileQuery.isFetched && profile()?.picture} keyed> <Show when={profileQuery.isFetched && profile()?.picture} keyed>
{(pictureUrl) => ( {(pictureUrl) => (
<img <img src={pictureUrl} alt="user icon" class="h-full w-full object-cover" />
src={pictureUrl}
alt="user icon"
class="h-full w-full rounded-lg object-cover"
/>
)} )}
</Show> </Show>
</div> </div>