(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol. margin.at
extension web atproto comments
99
fork

Configure Feed

Select the types of activity you want to include in your feed.

minimal ui change in search

scanash00 27e450e7 4f62fb8a

+42 -28
+42 -28
web/src/views/core/Search.tsx
··· 183 183 } 184 184 title="Margin only" 185 185 className={clsx( 186 - "flex items-center justify-center w-7 h-7 rounded-md transition-all group", 186 + "relative flex items-center justify-center w-7 h-7 rounded-md transition-all group", 187 187 platform === "margin" 188 188 ? "bg-white dark:bg-surface-700 shadow-sm" 189 189 : "hover:bg-surface-100 dark:hover:bg-surface-700/50", ··· 196 196 className="w-4 h-4 transition-all" 197 197 /> 198 198 ) : ( 199 - <div 200 - className="w-4 h-4 bg-surface-400 dark:bg-surface-500 group-hover:bg-surface-600 dark:group-hover:bg-surface-300 transition-colors" 201 - style={{ 202 - maskImage: "url(/logo.svg)", 203 - WebkitMaskImage: "url(/logo.svg)", 204 - maskSize: "contain", 205 - WebkitMaskSize: "contain", 206 - maskRepeat: "no-repeat", 207 - WebkitMaskRepeat: "no-repeat", 208 - maskPosition: "center", 209 - WebkitMaskPosition: "center", 210 - }} 211 - /> 199 + <> 200 + <img 201 + src="/logo.svg" 202 + alt="Margin" 203 + className="w-4 h-4 transition-all opacity-0 group-hover:opacity-100 absolute" 204 + /> 205 + <div 206 + className="w-4 h-4 bg-surface-400 dark:bg-surface-500 group-hover:opacity-0 transition-all" 207 + style={{ 208 + maskImage: "url(/logo.svg)", 209 + WebkitMaskImage: "url(/logo.svg)", 210 + maskSize: "contain", 211 + WebkitMaskSize: "contain", 212 + maskRepeat: "no-repeat", 213 + WebkitMaskRepeat: "no-repeat", 214 + maskPosition: "center", 215 + WebkitMaskPosition: "center", 216 + }} 217 + /> 218 + </> 212 219 )} 213 220 </button> 214 221 <button ··· 217 224 } 218 225 title="Semble only" 219 226 className={clsx( 220 - "flex items-center justify-center w-7 h-7 rounded-md transition-all group", 227 + "relative flex items-center justify-center w-7 h-7 rounded-md transition-all group", 221 228 platform === "semble" 222 229 ? "bg-white dark:bg-surface-700 shadow-sm" 223 230 : "hover:bg-surface-100 dark:hover:bg-surface-700/50", ··· 230 237 className="w-4 h-4 transition-all" 231 238 /> 232 239 ) : ( 233 - <div 234 - className="w-4 h-4 bg-surface-400 dark:bg-surface-500 group-hover:bg-surface-600 dark:group-hover:bg-surface-300 transition-colors" 235 - style={{ 236 - maskImage: "url(/semble-logo.svg)", 237 - WebkitMaskImage: "url(/semble-logo.svg)", 238 - maskSize: "contain", 239 - WebkitMaskSize: "contain", 240 - maskRepeat: "no-repeat", 241 - WebkitMaskRepeat: "no-repeat", 242 - maskPosition: "center", 243 - WebkitMaskPosition: "center", 244 - }} 245 - /> 240 + <> 241 + <img 242 + src="/semble-logo.svg" 243 + alt="Semble" 244 + className="w-4 h-4 transition-all opacity-0 group-hover:opacity-100 absolute" 245 + /> 246 + <div 247 + className="w-4 h-4 bg-surface-400 dark:bg-surface-500 group-hover:opacity-0 transition-all" 248 + style={{ 249 + maskImage: "url(/semble-logo.svg)", 250 + WebkitMaskImage: "url(/semble-logo.svg)", 251 + maskSize: "contain", 252 + WebkitMaskSize: "contain", 253 + maskRepeat: "no-repeat", 254 + WebkitMaskRepeat: "no-repeat", 255 + maskPosition: "center", 256 + WebkitMaskPosition: "center", 257 + }} 258 + /> 259 + </> 246 260 )} 247 261 </button> 248 262 </div>