+5 -15

app/(home-pages)/discover/PubListing.tsx

reviewed

··· 37 37 px-3 py-3 selected-outline 38 38 hover:outline-accent-contrast hover:border-accent-contrast 39 39 relative overflow-hidden`} 40 40 + style={{ 41 41 + backgroundImage: `url(${backgroundImage})`, 42 42 + backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat", 43 43 + backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`, 44 44 + }} 40 45 > 41 41 - {backgroundImage && ( 42 42 - <img 43 43 - src={backgroundImage} 44 44 - alt="" 45 45 - loading="lazy" 46 46 - fetchPriority="low" 47 47 - className="absolute inset-0 pointer-events-none" 48 48 - style={{ 49 49 - width: backgroundImageRepeat ? `${backgroundImageSize}px` : "100%", 50 50 - height: backgroundImageRepeat ? "auto" : "100%", 51 51 - objectFit: backgroundImageRepeat ? "none" : "cover", 52 52 - objectPosition: "center", 53 53 - }} 54 54 - /> 55 55 - )} 56 46 <div 57 47 className={`flex w-full flex-col justify-center text-center max-h-48 pt-4 pb-3 px-3 rounded-lg relative z-10 ${props.resizeHeight ? "" : "sm:h-48 h-full"} ${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] " : ""}`} 58 48 >

+1 -1

app/(home-pages)/discover/SortedPublicationList.tsx

reviewed

··· 81 81 <div className="relative"> 82 82 <button 83 83 onClick={props.onClick} 84 84 - className={`text-sm bg-accent-1 text-accent-2 rounded-md px-[8px] py-0.5 border ${props.selected ? "border-accent-contrast font-bold" : "border-border-light"}`} 84 84 + className={`text-sm rounded-md px-[8px] font-bold py-0.5 border ${props.selected ? "border-accent-contrast bg-accent-1 text-accent-2 " : "bg-bg-page text-accent-contrast border-accent-contrast"}`} 85 85 > 86 86 {props.children} 87 87 </button>

+4 -2

components/ActionBar/Publications.tsx

reviewed

··· 102 102 let iconSizeClassName = `${props.small ? "w-4 h-4" : props.large ? "w-12 h-12" : "w-6 h-6"} rounded-full`; 103 103 104 104 return props.record.icon ? ( 105 105 - <div className={`${iconSizeClassName} ${props.className} relative overflow-hidden`}> 105 105 + <div 106 106 + className={`${iconSizeClassName} ${props.className} relative overflow-hidden`} 107 107 + > 106 108 <img 107 109 src={`/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]}`} 108 110 alt={`${props.record.name} icon`} ··· 116 118 <div 117 119 className={`${props.small ? "text-xs" : props.large ? "text-2xl" : "text-sm"} font-bold absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-accent-2`} 118 120 > 119 119 - {props.record?.name.slice(0, 1)} 121 121 + {props.record?.name.slice(0, 1).toUpperCase()} 120 122 </div> 121 123 </div> 122 124 );