Padrões
Notificações
Lista de notificações por tipo: like, comentário, follow e disco em comum. Não-lidas com fundo destacado e dot lime à esquerda.
Visão geral
Notificações
Anatomia
Notificações
1
Avatar do remetente
w-9 h-9 rounded-full. Cor de fundo variável por usuário. Inicial da letra centralizada.
2
Texto da notificação
Nome do remetente em font-weight:600 color:#f5f5f5. Ação em color:#888. font-size:12px line-height:1.4.
3
Timestamp
font-size:10px color:#555. Formato relativo: "2 min atrás", "1 hora atrás", "ontem", "2 dias atrás".
4
Capa do disco
w-9 h-9 rounded-md. Presente nos tipos like, comment, common_record. Ausente em follow.
5
Indicador não-lida
Dot w-1.5 h-1.5 bg-[#C8F53C] rounded-full absoluto à esquerda. Row com bg-lime/4.
Tipos de notificação
| Tipo | Texto | Capa? | Ação extra |
|---|---|---|---|
| like | "[user] curtiu seu disco" | Sim | — |
| comment | "[user] comentou: [trecho]" | Sim | — |
| follow | "[user] começou a te seguir" | Não | Botão "Seguir" |
| common_record | "[user] também tem esse disco" | Sim | — |
Specs
| Elemento | Valor |
|---|---|
| Item padding | 10px 14px 10px 18px (18px para espaço do dot) |
| Não-lida background | rgba(200,245,60,0.04) |
| Dot não-lida | 5×5px bg:#C8F53C rounded-full position:absolute left:4px |
| Avatar tamanho | 36×36px |
| Capa tamanho | 36×36px border-radius:6px |
| Texto font-size | 12px |
| Timestamp font-size | 10px color:#555 |