Use new icons on notifications screen (#4299) · ansxor.ca/witchsky.app@455937d

+1

assets/icons/personPlus_filled_stroke2_corner0_rounded.svg

···

··· 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H15a3 3 0 1 1 0-6c0-.824.332-1.571.87-2.113C14.739 12.32 13.435 12 12 12Zm6 2a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

+4

src/components/icons/Person.tsx

··· 15 export const PersonPlus_Stroke2_Corner0_Rounded = createSinglePathSVG({ 16 path: 'M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM5.678 19c.71-2.909 3.092-5 6.322-5 .621 0 1.206.077 1.748.218a1 1 0 1 0 .504-1.936A8.931 8.931 0 0 0 12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H11a1 1 0 1 0 0-2H5.678ZM18 14a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z', 17 })

··· 15 export const PersonPlus_Stroke2_Corner0_Rounded = createSinglePathSVG({ 16 path: 'M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM5.678 19c.71-2.909 3.092-5 6.322-5 .621 0 1.206.077 1.748.218a1 1 0 1 0 .504-1.936A8.931 8.931 0 0 0 12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H11a1 1 0 1 0 0-2H5.678ZM18 14a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z', 17 }) 18 + 19 + export const PersonPlus_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({ 20 + path: 'M7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H15a3 3 0 1 1 0-6c0-.824.332-1.571.87-2.113C14.739 12.32 13.435 12 12 12Zm6 2a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z', 21 + })

+1 -1

src/components/icons/common.ts

··· 1 import {StyleSheet, TextProps} from 'react-native' 2 - import type {SvgProps, PathProps} from 'react-native-svg' 3 4 import {tokens} from '#/alf' 5

··· 1 import {StyleSheet, TextProps} from 'react-native' 2 + import type {PathProps, SvgProps} from 'react-native-svg' 3 4 import {tokens} from '#/alf' 5

-634

src/lib/icons.tsx

··· 2 import {StyleProp, TextStyle, ViewStyle} from 'react-native' 3 import Svg, {Ellipse, Line, Path, Rect} from 'react-native-svg' 4 5 - export function GridIcon({ 6 - style, 7 - solid, 8 - }: { 9 - style?: StyleProp<ViewStyle> 10 - solid?: boolean 11 - }) { 12 - const DIM = 4 13 - const ARC = 2 14 - return ( 15 - <Svg width="24" height="24" style={style}> 16 - <Path 17 - d={`M4,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`} 18 - strokeWidth={2} 19 - stroke="#000" 20 - fill={solid ? '#000' : undefined} 21 - /> 22 - <Path 23 - d={`M16,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`} 24 - strokeWidth={2} 25 - stroke="#000" 26 - fill={solid ? '#000' : undefined} 27 - /> 28 - <Path 29 - d={`M4,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`} 30 - strokeWidth={2} 31 - stroke="#000" 32 - fill={solid ? '#000' : undefined} 33 - /> 34 - <Path 35 - d={`M16,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`} 36 - strokeWidth={2} 37 - stroke="#000" 38 - fill={solid ? '#000' : undefined} 39 - /> 40 - </Svg> 41 - ) 42 - } 43 - export function GridIconSolid({style}: {style?: StyleProp<ViewStyle>}) { 44 - return <GridIcon style={style} solid /> 45 - } 46 - 47 - export function HomeIcon({ 48 - style, 49 - size, 50 - strokeWidth = 4, 51 - }: { 52 - style?: StyleProp<ViewStyle> 53 - size?: string | number 54 - strokeWidth?: number 55 - }) { 56 - return ( 57 - <Svg 58 - viewBox="0 0 48 48" 59 - width={size || 24} 60 - height={size || 24} 61 - stroke="currentColor" 62 - fill="none" 63 - style={style}> 64 - <Path 65 - strokeWidth={strokeWidth} 66 - d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z" 67 - /> 68 - </Svg> 69 - ) 70 - } 71 - 72 - export function HomeIconSolid({ 73 - style, 74 - size, 75 - strokeWidth = 4, 76 - }: { 77 - style?: StyleProp<ViewStyle> 78 - size?: string | number 79 - strokeWidth?: number 80 - }) { 81 - return ( 82 - <Svg 83 - viewBox="0 0 48 48" 84 - width={size || 24} 85 - height={size || 24} 86 - stroke="currentColor" 87 - style={style}> 88 - <Path 89 - fill="currentColor" 90 - strokeWidth={strokeWidth} 91 - d="m 23.951,2 c -0.32,0.011 -0.628,0.124 -0.879,0.322 L 8.859,13.52 C 7.055,14.941 6,17.114 6,19.41 V 38.5 C 6,39.864 7.136,41 8.5,41 h 8 c 1.364,0 2.5,-1.136 2.5,-2.5 v -12 C 19,26.205 19.205,26 19.5,26 h 9 c 0.295,0 0.5,0.205 0.5,0.5 v 12 c 0,1.364 1.136,2.5 2.5,2.5 h 8 C 40.864,41 42,39.864 42,38.5 V 19.41 c 0,-2.296 -1.055,-4.469 -2.859,-5.89 L 24.928,2.322 C 24.65,2.103 24.304,1.989 23.951,2 Z" 92 - /> 93 - </Svg> 94 - ) 95 - } 96 - 97 // Copyright (c) 2020 Refactoring UI Inc. 98 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 99 export function MagnifyingGlassIcon({ ··· 147 ) 148 } 149 150 - export function MagnifyingGlassIcon2Solid({ 151 - style, 152 - size, 153 - strokeWidth = 2, 154 - }: { 155 - style?: StyleProp<ViewStyle> 156 - size?: string | number 157 - strokeWidth?: number 158 - }) { 159 - return ( 160 - <Svg 161 - fill="none" 162 - viewBox="0 0 24 24" 163 - strokeWidth={strokeWidth} 164 - stroke="currentColor" 165 - width={size || 24} 166 - height={size || 24} 167 - style={style}> 168 - <Ellipse 169 - cx="12" 170 - cy="10.5" 171 - rx="6.5" 172 - ry="6.5" 173 - stroke="none" 174 - fill="currentColor" 175 - /> 176 - <Ellipse cx="12" cy="10.5" rx="9" ry="9" /> 177 - <Line x1="18.5" y1="17" x2="22" y2="20.5" strokeLinecap="round" /> 178 - </Svg> 179 - ) 180 - } 181 - 182 - // https://github.com/Remix-Design/RemixIcon/blob/master/License 183 - export function BellIcon({ 184 - style, 185 - size, 186 - strokeWidth = 1.5, 187 - }: { 188 - style?: StyleProp<ViewStyle> 189 - size?: string | number 190 - strokeWidth?: number 191 - }) { 192 - return ( 193 - <Svg 194 - fill="none" 195 - viewBox="0 0 24 24" 196 - width={size || 24} 197 - height={size || 24} 198 - strokeWidth={strokeWidth} 199 - stroke="currentColor" 200 - style={style}> 201 - <Path d="M 11.642 2 H 12.442 A 8.6 8.55 0 0 1 21.042 10.55 V 18.1 A 1 1 0 0 1 20.042 19.1 H 4.042 A 1 1 0 0 1 3.042 18.1 V 10.55 A 8.6 8.55 0 0 1 11.642 2 Z" /> 202 - <Line x1="9" y1="22" x2="15" y2="22" /> 203 - </Svg> 204 - ) 205 - } 206 - 207 - // https://github.com/Remix-Design/RemixIcon/blob/master/License 208 - export function BellIconSolid({ 209 - style, 210 - size, 211 - strokeWidth = 1.5, 212 - }: { 213 - style?: StyleProp<ViewStyle> 214 - size?: string | number 215 - strokeWidth?: number 216 - }) { 217 - return ( 218 - <Svg 219 - viewBox="0 0 24 24" 220 - width={size || 24} 221 - height={size || 24} 222 - strokeWidth={strokeWidth} 223 - stroke="currentColor" 224 - style={style}> 225 - <Path 226 - d="M 11.642 2 H 12.442 A 8.6 8.55 0 0 1 21.042 10.55 V 18.1 A 1 1 0 0 1 20.042 19.1 H 4.042 A 1 1 0 0 1 3.042 18.1 V 10.55 A 8.6 8.55 0 0 1 11.642 2 Z" 227 - fill="currentColor" 228 - /> 229 - <Line x1="9" y1="22" x2="15" y2="22" /> 230 - </Svg> 231 - ) 232 - } 233 - 234 export function CogIcon({ 235 style, 236 size, ··· 263 ) 264 } 265 266 - export function CogIconSolid({ 267 - style, 268 - size, 269 - strokeWidth = 1.5, 270 - }: { 271 - style?: StyleProp<ViewStyle> 272 - size?: string | number 273 - strokeWidth: number 274 - }) { 275 - return ( 276 - <Svg 277 - fill="none" 278 - viewBox="0 0 24 24" 279 - width={size || 32} 280 - height={size || 32} 281 - strokeWidth={strokeWidth} 282 - stroke="currentColor" 283 - style={style}> 284 - <Path 285 - strokeLinecap="round" 286 - strokeLinejoin="round" 287 - d="M 9.594 3.94 C 9.684 3.398 10.154 3 10.704 3 L 13.297 3 C 13.847 3 14.317 3.398 14.407 3.94 L 14.62 5.221 C 14.683 5.595 14.933 5.907 15.265 6.091 C 15.339 6.131 15.412 6.174 15.485 6.218 C 15.809 6.414 16.205 6.475 16.56 6.342 L 17.777 5.886 C 18.292 5.692 18.872 5.9 19.147 6.376 L 20.443 8.623 C 20.718 9.099 20.608 9.705 20.183 10.054 L 19.18 10.881 C 18.887 11.121 18.742 11.494 18.749 11.873 C 18.751 11.958 18.751 12.043 18.749 12.128 C 18.742 12.506 18.887 12.878 19.179 13.118 L 20.184 13.946 C 20.608 14.296 20.718 14.9 20.444 15.376 L 19.146 17.623 C 18.871 18.099 18.292 18.307 17.777 18.114 L 16.56 17.658 C 16.205 17.525 15.81 17.586 15.484 17.782 C 15.412 17.826 15.338 17.869 15.264 17.91 C 14.933 18.093 14.683 18.405 14.62 18.779 L 14.407 20.059 C 14.317 20.602 13.847 21 13.297 21 L 10.703 21 C 10.153 21 9.683 20.602 9.593 20.06 L 9.38 18.779 C 9.318 18.405 9.068 18.093 8.736 17.909 C 8.662 17.868 8.589 17.826 8.516 17.782 C 8.191 17.586 7.796 17.525 7.44 17.658 L 6.223 18.114 C 5.708 18.307 5.129 18.1 4.854 17.624 L 3.557 15.377 C 3.282 14.901 3.392 14.295 3.817 13.946 L 4.821 13.119 C 5.113 12.879 5.258 12.506 5.251 12.127 C 5.249 12.042 5.249 11.957 5.251 11.872 C 5.258 11.494 5.113 11.122 4.821 10.882 L 3.817 10.054 C 3.393 9.705 3.283 9.1 3.557 8.624 L 4.854 6.377 C 5.129 5.9 5.709 5.692 6.224 5.886 L 7.44 6.342 C 7.796 6.475 8.191 6.414 8.516 6.218 C 8.588 6.174 8.662 6.131 8.736 6.09 C 9.068 5.907 9.318 5.595 9.38 5.221 Z M 13.5 9.402 C 11.5 8.247 9 9.691 9 12 C 9 13.072 9.572 14.062 10.5 14.598 C 12.5 15.753 15 14.309 15 12 C 15 10.928 14.428 9.938 13.5 9.402 Z" 288 - fill="currentColor" 289 - /> 290 - </Svg> 291 - ) 292 - } 293 - 294 - // Copyright (c) 2020 Refactoring UI Inc. 295 - // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 296 - export function MoonIcon({ 297 - style, 298 - size, 299 - strokeWidth = 1.5, 300 - }: { 301 - style?: StyleProp<ViewStyle> 302 - size?: string | number 303 - strokeWidth?: number 304 - }) { 305 - return ( 306 - <Svg 307 - fill="none" 308 - viewBox="0 0 24 24" 309 - width={size || 32} 310 - height={size || 32} 311 - strokeWidth={strokeWidth} 312 - stroke="currentColor" 313 - style={style}> 314 - <Path 315 - strokeLinecap="round" 316 - strokeLinejoin="round" 317 - d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" 318 - /> 319 - </Svg> 320 - ) 321 - } 322 - 323 - // Copyright (c) 2020 Refactoring UI Inc. 324 - // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 325 - export function SunIcon({ 326 - style, 327 - size, 328 - strokeWidth = 1.5, 329 - }: { 330 - style?: StyleProp<ViewStyle> 331 - size?: string | number 332 - strokeWidth?: number 333 - }) { 334 - return ( 335 - <Svg 336 - fill="none" 337 - viewBox="0 0 24 24" 338 - width={size || 32} 339 - height={size || 32} 340 - strokeWidth={strokeWidth} 341 - stroke="currentColor" 342 - style={style}> 343 - <Path 344 - d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" 345 - strokeLinecap="round" 346 - strokeLinejoin="round" 347 - /> 348 - </Svg> 349 - ) 350 - } 351 - 352 - // Copyright (c) 2020 Refactoring UI Inc. 353 - // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 354 - export function UserIcon({ 355 - style, 356 - size, 357 - strokeWidth = 1.5, 358 - }: { 359 - style?: StyleProp<ViewStyle> 360 - size?: string | number 361 - strokeWidth?: number 362 - }) { 363 - return ( 364 - <Svg 365 - fill="none" 366 - viewBox="0 0 24 24" 367 - width={size || 32} 368 - height={size || 32} 369 - strokeWidth={strokeWidth} 370 - stroke="currentColor" 371 - style={style}> 372 - <Path 373 - strokeLinecap="round" 374 - strokeLinejoin="round" 375 - d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" 376 - /> 377 - </Svg> 378 - ) 379 - } 380 - 381 - export function UserIconSolid({ 382 - style, 383 - size, 384 - strokeWidth = 1.5, 385 - }: { 386 - style?: StyleProp<ViewStyle> 387 - size?: string | number 388 - strokeWidth?: number 389 - }) { 390 - return ( 391 - <Svg 392 - fill="none" 393 - viewBox="0 0 24 24" 394 - width={size || 32} 395 - height={size || 32} 396 - strokeWidth={strokeWidth} 397 - stroke="currentColor" 398 - style={style}> 399 - <Path 400 - strokeLinecap="round" 401 - strokeLinejoin="round" 402 - fill="currentColor" 403 - d="M 15 9.75 C 15 12.059 12.5 13.503 10.5 12.348 C 9.572 11.812 9 10.822 9 9.75 C 9 7.441 11.5 5.997 13.5 7.152 C 14.428 7.688 15 8.678 15 9.75 Z" 404 - /> 405 - <Path 406 - strokeLinecap="round" 407 - strokeLinejoin="round" 408 - fill="currentColor" 409 - d="M 17.982 18.725 C 16.565 16.849 14.35 15.748 12 15.75 C 9.65 15.748 7.435 16.849 6.018 18.725 M 17.981 18.725 C 16.335 20.193 14.206 21.003 12 21 C 9.794 21.003 7.664 20.193 6.018 18.725" 410 - /> 411 - <Path 412 - strokeLinecap="round" 413 - strokeLinejoin="round" 414 - d="M 17.981 18.725 C 23.158 14.12 21.409 5.639 14.833 3.458 C 8.257 1.277 1.786 7.033 3.185 13.818 C 3.576 15.716 4.57 17.437 6.018 18.725 M 17.981 18.725 C 16.335 20.193 14.206 21.003 12 21 C 9.794 21.003 7.664 20.193 6.018 18.725" 415 - /> 416 - </Svg> 417 - ) 418 - } 419 - 420 // Copyright (c) 2020 Refactoring UI Inc. 421 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 422 export function UserGroupIcon({ ··· 444 ) 445 } 446 447 - export function RepostIcon({ 448 - style, 449 - size = 24, 450 - strokeWidth = 1.5, 451 - }: { 452 - style?: StyleProp<TextStyle> 453 - size?: string | number 454 - strokeWidth: number 455 - }) { 456 - return ( 457 - <Svg viewBox="0 0 24 24" width={size} height={size} style={style}> 458 - <Path 459 - stroke="currentColor" 460 - strokeWidth={strokeWidth} 461 - strokeLinejoin="round" 462 - fill="none" 463 - d="M 14.437 18.081 L 5.475 18.095 C 4.7 18.095 4.072 17.467 4.072 16.692 L 4.082 6.65 L 1.22 10.854 M 4.082 6.65 L 7.006 10.854 M 9.859 6.65 L 18.625 6.654 C 19.4 6.654 20.028 7.282 20.028 8.057 L 20.031 18.081 L 17.167 13.646 M 20.031 18.081 L 22.866 13.646" 464 - /> 465 - </Svg> 466 - ) 467 - } 468 - 469 - // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. 470 - export function HeartIcon({ 471 - style, 472 - size = 24, 473 - strokeWidth = 1.5, 474 - }: { 475 - style?: StyleProp<TextStyle> 476 - size?: string | number 477 - strokeWidth: number 478 - }) { 479 - return ( 480 - <Svg viewBox="0 0 24 24" width={size} height={size} style={style}> 481 - <Path 482 - strokeWidth={strokeWidth} 483 - stroke="currentColor" 484 - fill="none" 485 - d="M 3.859 13.537 L 10.918 20.127 C 11.211 20.4 11.598 20.552 12 20.552 C 12.402 20.552 12.789 20.4 13.082 20.127 L 20.141 13.537 C 21.328 12.431 22 10.88 22 9.259 L 22 9.033 C 22 6.302 20.027 3.974 17.336 3.525 C 15.555 3.228 13.742 3.81 12.469 5.084 L 12 5.552 L 11.531 5.084 C 10.258 3.81 8.445 3.228 6.664 3.525 C 3.973 3.974 2 6.302 2 9.033 L 2 9.259 C 2 10.88 2.672 12.431 3.859 13.537 Z" 486 - /> 487 - </Svg> 488 - ) 489 - } 490 - 491 - // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. 492 - export function HeartIconSolid({ 493 - style, 494 - size = 24, 495 - }: { 496 - style?: StyleProp<TextStyle> 497 - size?: string | number 498 - }) { 499 - return ( 500 - <Svg viewBox="0 0 24 24" width={size} height={size} style={style}> 501 - <Path 502 - fill="currentColor" 503 - stroke="currentColor" 504 - strokeWidth={1} 505 - d="M 3.859 13.537 L 10.918 20.127 C 11.211 20.4 11.598 20.552 12 20.552 C 12.402 20.552 12.789 20.4 13.082 20.127 L 20.141 13.537 C 21.328 12.431 22 10.88 22 9.259 L 22 9.033 C 22 6.302 20.027 3.974 17.336 3.525 C 15.555 3.228 13.742 3.81 12.469 5.084 L 12 5.552 L 11.531 5.084 C 10.258 3.81 8.445 3.228 6.664 3.525 C 3.973 3.974 2 6.302 2 9.033 L 2 9.259 C 2 10.88 2.672 12.431 3.859 13.537 Z" 506 - /> 507 - </Svg> 508 - ) 509 - } 510 - 511 - export function UpIcon({ 512 - style, 513 - size, 514 - strokeWidth = 1.3, 515 - }: { 516 - style?: StyleProp<ViewStyle> 517 - size?: string | number 518 - strokeWidth: number 519 - }) { 520 - return ( 521 - <Svg 522 - viewBox="0 0 14 14" 523 - width={size || 24} 524 - height={size || 24} 525 - style={style}> 526 - <Path 527 - strokeWidth={strokeWidth} 528 - stroke="currentColor" 529 - strokeLinecap="round" 530 - strokeLinejoin="round" 531 - d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z" 532 - /> 533 - </Svg> 534 - ) 535 - } 536 - 537 - export function UpIconSolid({ 538 - style, 539 - size, 540 - }: { 541 - style?: StyleProp<ViewStyle> 542 - size?: string | number 543 - }) { 544 - return ( 545 - <Svg 546 - viewBox="0 0 14 14" 547 - width={size || 24} 548 - height={size || 24} 549 - style={style}> 550 - <Path 551 - strokeWidth={1.3} 552 - stroke="currentColor" 553 - fill="currentColor" 554 - strokeLinecap="round" 555 - strokeLinejoin="round" 556 - d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z" 557 - /> 558 - </Svg> 559 - ) 560 - } 561 - 562 - export function DownIcon({ 563 - style, 564 - size, 565 - }: { 566 - style?: StyleProp<ViewStyle> 567 - size?: string | number 568 - }) { 569 - return ( 570 - <Svg 571 - viewBox="0 0 14 14" 572 - width={size || 24} 573 - height={size || 24} 574 - style={style}> 575 - <Path 576 - strokeWidth={1.3} 577 - stroke="currentColor" 578 - strokeLinecap="round" 579 - strokeLinejoin="round" 580 - d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z" 581 - /> 582 - </Svg> 583 - ) 584 - } 585 - 586 - export function DownIconSolid({ 587 - style, 588 - size, 589 - }: { 590 - style?: StyleProp<ViewStyle> 591 - size?: string | number 592 - }) { 593 - return ( 594 - <Svg 595 - viewBox="0 0 14 14" 596 - width={size || 24} 597 - height={size || 24} 598 - style={style}> 599 - <Path 600 - strokeWidth={1.3} 601 - stroke="currentColor" 602 - fill="currentColor" 603 - strokeLinecap="round" 604 - strokeLinejoin="round" 605 - d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z" 606 - /> 607 - </Svg> 608 - ) 609 - } 610 - 611 - // Copyright (c) 2020 Refactoring UI Inc. 612 - // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 613 - export function CommentBottomArrow({ 614 - style, 615 - size, 616 - strokeWidth = 1.3, 617 - }: { 618 - style?: StyleProp<TextStyle> 619 - size?: string | number 620 - strokeWidth?: number 621 - }) { 622 - let color = 'currentColor' 623 - if ( 624 - style && 625 - typeof style === 'object' && 626 - 'color' in style && 627 - typeof style.color === 'string' 628 - ) { 629 - color = style.color 630 - } 631 - return ( 632 - <Svg 633 - fill="none" 634 - viewBox="0 0 24 24" 635 - strokeWidth={strokeWidth || 2.5} 636 - stroke={color} 637 - width={size || 24} 638 - height={size || 24} 639 - style={style}> 640 - <Path 641 - strokeLinecap="round" 642 - strokeLinejoin="round" 643 - d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" 644 - /> 645 - </Svg> 646 - ) 647 - } 648 - 649 export function SquareIcon({ 650 style, 651 size, ··· 715 ) 716 } 717 718 - export function ComposeIcon({ 719 - style, 720 - size, 721 - strokeWidth = 1.5, 722 - }: { 723 - style?: StyleProp<TextStyle> 724 - size?: string | number 725 - strokeWidth?: number 726 - }) { 727 - return ( 728 - <Svg 729 - fill="none" 730 - viewBox="0 0 24 24" 731 - strokeWidth={strokeWidth} 732 - stroke="currentColor" 733 - width={size || 24} 734 - height={size || 24} 735 - style={style}> 736 - <Path 737 - strokeLinecap="round" 738 - strokeLinejoin="round" 739 - d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" 740 - /> 741 - </Svg> 742 - ) 743 - } 744 - 745 export function ComposeIcon2({ 746 style, 747 size, ··· 778 x2="21" 779 y2="3" 780 strokeWidth={strokeWidth * 1.5} 781 - /> 782 - </Svg> 783 - ) 784 - } 785 - 786 - export function SquarePlusIcon({ 787 - style, 788 - size, 789 - strokeWidth = 1.5, 790 - }: { 791 - style?: StyleProp<TextStyle> 792 - size?: string | number 793 - strokeWidth?: number 794 - }) { 795 - return ( 796 - <Svg 797 - viewBox="0 0 24 24" 798 - strokeWidth={strokeWidth} 799 - stroke="currentColor" 800 - width={size || 24} 801 - height={size || 24} 802 - style={style}> 803 - <Line 804 - strokeLinecap="round" 805 - strokeLinejoin="round" 806 - x1="12" 807 - y1="5.5" 808 - x2="12" 809 - y2="18.5" 810 - strokeWidth={strokeWidth * 1.5} 811 - /> 812 - <Line 813 - strokeLinecap="round" 814 - strokeLinejoin="round" 815 - x1="5.5" 816 - y1="12" 817 - x2="18.5" 818 - y2="12" 819 - strokeWidth={strokeWidth * 1.5} 820 - /> 821 - <Rect 822 - strokeWidth={strokeWidth} 823 - x="4" 824 - y="4" 825 - width="16" 826 - height="16" 827 - rx="4" 828 - ry="4" 829 /> 830 </Svg> 831 ) ··· 947 </Svg> 948 ) 949 } 950 - 951 - export function ListIcon({ 952 - style, 953 - size, 954 - strokeWidth = 1.5, 955 - }: { 956 - style?: StyleProp<TextStyle> 957 - size?: string | number 958 - strokeWidth?: number 959 - }) { 960 - return ( 961 - <Svg 962 - fill="none" 963 - viewBox="0 0 24 24" 964 - strokeWidth={strokeWidth || 1.5} 965 - stroke="currentColor" 966 - width={size} 967 - height={size} 968 - style={style}> 969 - <Path 970 - strokeLinecap="round" 971 - strokeLinejoin="round" 972 - d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" 973 - /> 974 - </Svg> 975 - ) 976 - }

··· 2 import {StyleProp, TextStyle, ViewStyle} from 'react-native' 3 import Svg, {Ellipse, Line, Path, Rect} from 'react-native-svg' 4 5 // Copyright (c) 2020 Refactoring UI Inc. 6 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 7 export function MagnifyingGlassIcon({ ··· 55 ) 56 } 57 58 export function CogIcon({ 59 style, 60 size, ··· 87 ) 88 } 89 90 // Copyright (c) 2020 Refactoring UI Inc. 91 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE 92 export function UserGroupIcon({ ··· 114 ) 115 } 116 117 export function SquareIcon({ 118 style, 119 size, ··· 183 ) 184 } 185 186 export function ComposeIcon2({ 187 style, 188 size, ··· 219 x2="21" 220 y2="3" 221 strokeWidth={strokeWidth * 1.5} 222 /> 223 </Svg> 224 ) ··· 340 </Svg> 341 ) 342 }

+9 -9

src/view/com/notifications/Feed.tsx

··· 8 import {msg} from '@lingui/macro' 9 import {useLingui} from '@lingui/react' 10 11 import {usePalette} from '#/lib/hooks/usePalette' 12 import {cleanError} from '#/lib/strings/errors' 13 import {logger} from '#/logger' 14 import {useModerationOpts} from '#/state/preferences/moderation-opts' 15 import {useNotificationFeedQuery} from '#/state/queries/notifications/feed' 16 import {useUnreadNotificationsApi} from '#/state/queries/notifications/unread' 17 - import {s} from 'lib/styles' 18 - import {EmptyState} from '../util/EmptyState' 19 - import {ErrorMessage} from '../util/error/ErrorMessage' 20 - import {List, ListRef} from '../util/List' 21 - import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' 22 - import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' 23 - import {CenteredView} from '../util/Views' 24 import {FeedItem} from './FeedItem' 25 import hairlineWidth = StyleSheet.hairlineWidth 26 - import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' 27 - import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 28 29 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} 30 const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}

··· 8 import {msg} from '@lingui/macro' 9 import {useLingui} from '@lingui/react' 10 11 + import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' 12 import {usePalette} from '#/lib/hooks/usePalette' 13 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 14 import {cleanError} from '#/lib/strings/errors' 15 + import {s} from '#/lib/styles' 16 import {logger} from '#/logger' 17 import {useModerationOpts} from '#/state/preferences/moderation-opts' 18 import {useNotificationFeedQuery} from '#/state/queries/notifications/feed' 19 import {useUnreadNotificationsApi} from '#/state/queries/notifications/unread' 20 + import {EmptyState} from '#/view/com/util/EmptyState' 21 + import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' 22 + import {List, ListRef} from '#/view/com/util/List' 23 + import {NotificationFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 24 + import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn' 25 + import {CenteredView} from '#/view/com/util/Views' 26 import {FeedItem} from './FeedItem' 27 import hairlineWidth = StyleSheet.hairlineWidth 28 29 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} 30 const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}

+27 -38

src/view/com/notifications/FeedItem.tsx

··· 17 ModerationOpts, 18 } from '@atproto/api' 19 import {AtUri} from '@atproto/api' 20 - import { 21 - FontAwesomeIcon, 22 - FontAwesomeIconStyle, 23 - Props, 24 - } from '@fortawesome/react-native-fontawesome' 25 import {msg, plural, Trans} from '@lingui/macro' 26 import {useLingui} from '@lingui/react' 27 import {useQueryClient} from '@tanstack/react-query' ··· 29 import {FeedNotification} from '#/state/queries/notifications/feed' 30 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' 31 import {usePalette} from 'lib/hooks/usePalette' 32 - import {HeartIconSolid} from 'lib/icons' 33 import {makeProfileLink} from 'lib/routes/links' 34 import {sanitizeDisplayName} from 'lib/strings/display-names' 35 import {sanitizeHandle} from 'lib/strings/handles' ··· 37 import {colors, s} from 'lib/styles' 38 import {isWeb} from 'platform/detection' 39 import {precacheProfile} from 'state/queries/profile' 40 import {Link as NewLink} from '#/components/Link' 41 import {ProfileHoverCard} from '#/components/ProfileHoverCard' 42 import {FeedSourceCard} from '../feeds/FeedSourceCard' ··· 47 import {Text} from '../util/text/Text' 48 import {TimeElapsed} from '../util/TimeElapsed' 49 import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar' 50 import hairlineWidth = StyleSheet.hairlineWidth 51 52 const MAX_AUTHORS = 5 ··· 71 const queryClient = useQueryClient() 72 const pal = usePalette('default') 73 const {_} = useLingui() 74 const [isAuthorsExpanded, setAuthorsExpanded] = useState<boolean>(false) 75 const itemHref = useMemo(() => { 76 if (item.type === 'post-like' || item.type === 'repost') { ··· 150 } 151 152 let action = '' 153 - let icon: Props['icon'] | 'HeartIconSolid' 154 - let iconStyle: Props['style'] = [] 155 if (item.type === 'post-like') { 156 action = _(msg`liked your post`) 157 - icon = 'HeartIconSolid' 158 - iconStyle = [ 159 - s.likeColor as FontAwesomeIconStyle, 160 - {position: 'relative', top: -4}, 161 - ] 162 } else if (item.type === 'repost') { 163 action = _(msg`reposted your post`) 164 - icon = 'retweet' 165 - iconStyle = [s.green3 as FontAwesomeIconStyle] 166 } else if (item.type === 'follow') { 167 action = _(msg`followed you`) 168 - icon = 'user-plus' 169 - iconStyle = [s.blue3 as FontAwesomeIconStyle] 170 } else if (item.type === 'feedgen-like') { 171 action = _(msg`liked your custom feed`) 172 - icon = 'HeartIconSolid' 173 - iconStyle = [ 174 - s.likeColor as FontAwesomeIconStyle, 175 - {position: 'relative', top: -4}, 176 - ] 177 } else { 178 return null 179 } ··· 200 item.type === 'repost' 201 } 202 onBeforePress={onBeforePress}> 203 - <View style={styles.layoutIcon}> 204 {/* TODO: Prevent conditional rendering and move toward composable 205 notifications for clearer accessibility labeling */} 206 - {icon === 'HeartIconSolid' ? ( 207 - <HeartIconSolid size={28} style={[styles.icon, ...iconStyle]} /> 208 - ) : ( 209 - <FontAwesomeIcon 210 - icon={icon} 211 - size={24} 212 - style={[styles.icon, ...iconStyle]} 213 - /> 214 - )} 215 </View> 216 <View style={styles.layoutContent}> 217 <ExpandListPressable ··· 322 accessibilityHint={_( 323 msg`Collapses list of users for a given notification`, 324 )}> 325 - <FontAwesomeIcon 326 - icon="angle-up" 327 - size={18} 328 style={[styles.expandedAuthorsCloseBtnIcon, pal.text]} 329 /> 330 <Text type="sm-medium" style={pal.text}> ··· 369 +{authors.length - MAX_AUTHORS} 370 </Text> 371 ) : undefined} 372 - <FontAwesomeIcon 373 - icon="angle-down" 374 - size={18} 375 style={[styles.expandedAuthorsCloseBtnIcon, pal.textLight]} 376 /> 377 </View>

··· 17 ModerationOpts, 18 } from '@atproto/api' 19 import {AtUri} from '@atproto/api' 20 import {msg, plural, Trans} from '@lingui/macro' 21 import {useLingui} from '@lingui/react' 22 import {useQueryClient} from '@tanstack/react-query' ··· 24 import {FeedNotification} from '#/state/queries/notifications/feed' 25 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' 26 import {usePalette} from 'lib/hooks/usePalette' 27 import {makeProfileLink} from 'lib/routes/links' 28 import {sanitizeDisplayName} from 'lib/strings/display-names' 29 import {sanitizeHandle} from 'lib/strings/handles' ··· 31 import {colors, s} from 'lib/styles' 32 import {isWeb} from 'platform/detection' 33 import {precacheProfile} from 'state/queries/profile' 34 + import {atoms as a, useTheme} from '#/alf' 35 + import { 36 + ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon, 37 + ChevronTop_Stroke2_Corner0_Rounded as ChevronUpIcon, 38 + } from '#/components/icons/Chevron' 39 + import {Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled} from '#/components/icons/Heart2' 40 + import {PersonPlus_Filled_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person' 41 + import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost' 42 import {Link as NewLink} from '#/components/Link' 43 import {ProfileHoverCard} from '#/components/ProfileHoverCard' 44 import {FeedSourceCard} from '../feeds/FeedSourceCard' ··· 49 import {Text} from '../util/text/Text' 50 import {TimeElapsed} from '../util/TimeElapsed' 51 import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar' 52 + 53 import hairlineWidth = StyleSheet.hairlineWidth 54 55 const MAX_AUTHORS = 5 ··· 74 const queryClient = useQueryClient() 75 const pal = usePalette('default') 76 const {_} = useLingui() 77 + const t = useTheme() 78 const [isAuthorsExpanded, setAuthorsExpanded] = useState<boolean>(false) 79 const itemHref = useMemo(() => { 80 if (item.type === 'post-like' || item.type === 'repost') { ··· 154 } 155 156 let action = '' 157 + let icon = ( 158 + <HeartIconFilled 159 + size="xl" 160 + style={[ 161 + s.likeColor, 162 + // {position: 'relative', top: -4} 163 + ]} 164 + /> 165 + ) 166 if (item.type === 'post-like') { 167 action = _(msg`liked your post`) 168 } else if (item.type === 'repost') { 169 action = _(msg`reposted your post`) 170 + icon = <RepostIcon size="xl" style={{color: t.palette.positive_600}} /> 171 } else if (item.type === 'follow') { 172 action = _(msg`followed you`) 173 + icon = <PersonPlusIcon size="xl" style={{color: t.palette.primary_500}} /> 174 } else if (item.type === 'feedgen-like') { 175 action = _(msg`liked your custom feed`) 176 } else { 177 return null 178 } ··· 199 item.type === 'repost' 200 } 201 onBeforePress={onBeforePress}> 202 + <View style={[styles.layoutIcon, a.pr_sm]}> 203 {/* TODO: Prevent conditional rendering and move toward composable 204 notifications for clearer accessibility labeling */} 205 + {icon} 206 </View> 207 <View style={styles.layoutContent}> 208 <ExpandListPressable ··· 313 accessibilityHint={_( 314 msg`Collapses list of users for a given notification`, 315 )}> 316 + <ChevronUpIcon 317 + size="md" 318 style={[styles.expandedAuthorsCloseBtnIcon, pal.text]} 319 /> 320 <Text type="sm-medium" style={pal.text}> ··· 359 +{authors.length - MAX_AUTHORS} 360 </Text> 361 ) : undefined} 362 + <ChevronDownIcon 363 + size="md" 364 style={[styles.expandedAuthorsCloseBtnIcon, pal.textLight]} 365 /> 366 </View>

+10 -8

src/view/com/util/LoadingPlaceholder.tsx

··· 8 } from 'react-native' 9 10 import {usePalette} from 'lib/hooks/usePalette' 11 - import {HeartIconSolid} from 'lib/icons' 12 import {s} from 'lib/styles' 13 import {useTheme} from 'lib/ThemeContext' 14 - import {useTheme as useTheme_NEW} from '#/alf' 15 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble' 16 - import {Heart2_Stroke2_Corner0_Rounded as HeartIconOutline} from '#/components/icons/Heart2' 17 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost' 18 import hairlineWidth = StyleSheet.hairlineWidth 19 ··· 139 const pal = usePalette('default') 140 return ( 141 <View style={[styles.notification, pal.view, style]}> 142 - <View style={{paddingLeft: 30, paddingRight: 10}}> 143 - <HeartIconSolid 144 - style={{color: pal.colors.backgroundLight} as ViewStyle} 145 - size={30} 146 /> 147 </View> 148 <View style={{flex: 1}}> 149 - <View style={[s.flexRow, s.mb10]}> 150 <LoadingPlaceholder 151 width={30} 152 height={30}

··· 8 } from 'react-native' 9 10 import {usePalette} from 'lib/hooks/usePalette' 11 import {s} from 'lib/styles' 12 import {useTheme} from 'lib/ThemeContext' 13 + import {atoms as a, useTheme as useTheme_NEW} from '#/alf' 14 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble' 15 + import { 16 + Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled, 17 + Heart2_Stroke2_Corner0_Rounded as HeartIconOutline, 18 + } from '#/components/icons/Heart2' 19 import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost' 20 import hairlineWidth = StyleSheet.hairlineWidth 21 ··· 141 const pal = usePalette('default') 142 return ( 143 <View style={[styles.notification, pal.view, style]}> 144 + <View style={[{width: 70}, a.align_end, a.pr_sm, a.pt_2xs]}> 145 + <HeartIconFilled 146 + size="xl" 147 + style={{color: pal.colors.backgroundLight}} 148 /> 149 </View> 150 <View style={{flex: 1}}> 151 + <View style={[a.flex_row, s.mb10]}> 152 <LoadingPlaceholder 153 width={30} 154 height={30}