this repo has no description
0
fork

Configure Feed

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

Differentiate clickable vs static toasts

+21 -11
+18 -8
src/app.css
··· 1219 1219 1220 1220 /* SHINY PILL */ 1221 1221 1222 - .shiny-pill { 1222 + :is(.shiny-pill, :root .toastify.shiny-pill) { 1223 + pointer-events: auto; 1223 1224 color: var(--button-text-color); 1224 1225 text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color); 1225 1226 background-color: var(--button-bg-color); 1226 1227 background-image: linear-gradient( 1227 1228 160deg, 1228 1229 rgba(255, 255, 255, 0.5), 1229 - rgba(255, 255, 255, 0) 50% 1230 + rgba(0, 0, 0, 0.1) 1230 1231 ); 1231 1232 box-shadow: 0 3px 8px -1px var(--drop-shadow-color), 1232 1233 0 10px 36px -4px var(--button-bg-blur-color), 1233 1234 inset var(--hairline-width) var(--hairline-width) rgba(255, 255, 255, 0.5); 1235 + transition: filter 0.3s; 1236 + } 1237 + :is(.shiny-pill, :root .toastify.shiny-pill):hover { 1238 + filter: brightness(1.2); 1239 + } 1240 + :is(.shiny-pill, :root .toastify.shiny-pill):active { 1241 + transition: none; 1242 + filter: brightness(0.9); 1234 1243 } 1235 1244 1236 1245 /* TOAST */ 1237 1246 1238 1247 :root .toastify { 1248 + user-select: none; 1239 1249 padding: 8px 16px; 1240 1250 border-radius: 999px; 1251 + pointer-events: none; 1252 + color: var(--button-text-color); 1253 + text-shadow: 0 calc(var(--hairline-width) * -1) var(--drop-shadow-color); 1254 + background-color: var(--button-bg-blur-color); 1255 + background-image: none; 1256 + backdrop-filter: blur(16px); 1241 1257 } 1242 1258 .toastify-bottom { 1243 1259 margin-bottom: env(safe-area-inset-bottom); 1244 - } 1245 - :root .toastify:hover { 1246 - filter: brightness(1.2); 1247 - } 1248 - :root .toastify:active { 1249 - filter: brightness(0.8); 1250 1260 } 1251 1261 1252 1262 /* AVATARS STACK */
+3 -3
src/utils/show-toast.js
··· 4 4 if (typeof props === 'string') { 5 5 props = { text: props }; 6 6 } 7 - const { onClick = () => {}, delay, ...rest } = props; 7 + const { onClick, delay, ...rest } = props; 8 8 const toast = Toastify({ 9 - className: 'shiny-pill', 9 + className: `${onClick || props.destination ? 'shiny-pill' : ''}`, 10 10 gravity: 'bottom', 11 11 position: 'center', 12 12 ...rest, 13 13 onClick: () => { 14 - onClick(toast); // Pass in the object itself! 14 + onClick?.(toast); // Pass in the object itself! 15 15 }, 16 16 }); 17 17 if (delay) {