Tela: Perfil

Avatar do usuário, menu de configurações e botão de logout.

Bloco do usuário

Avatar circular azul com inicial do nome, nome, email e link para editar perfil.

// screens/Perfil — UserBlock
avatar: {
  width: 82, height: 82, borderRadius: 41,
  backgroundColor: colors.embarko_blue,
  alignItems: 'center', justifyContent: 'center',
},
avatarText: {
  fontSize: 32, fontFamily: Semibold, color: '#000',
},
userName: {
  fontSize: 24, fontFamily: Semibold, color: colors.white,
},
userEmail: {
  fontSize: 12, fontFamily: Medium, color: colors.white60,
},
editarLink: {
  fontSize: 12, color: colors.embarko_blue,
  textDecorationLine: 'underline',
},

Menu Rows

Card com bordas e linhas divisórias internas. Cada row: label à esquerda + chevron à direita.

// screens/Perfil — MenuCard
menuCard: {
  borderWidth: 1, borderColor: "rgba(255,255,255,0.2)",
  borderRadius: radius.md,  // 12
  overflow: 'hidden',
},
menuRow: {
  flexDirection: 'row', alignItems: 'center',
  justifyContent: 'space-between',
  paddingVertical: 14, paddingHorizontal: 16,
},
menuLabel: {
  fontSize: 16, fontFamily: Medium, color: colors.white,
},
menuDivider: {
  height: 1, backgroundColor: "rgba(255,255,255,0.08)",
  marginHorizontal: 16,
},

Botão Sair

Botão com fundo sutil. Sem ícone — só texto. Pressed state reduz opacidade.

// screens/Perfil — SairButton
<Pressable
  style={({ pressed }) => [styles.sairBtn, pressed && { opacity: 0.7 }]}
  onPress={handleLogout}
>
  <Text style={styles.sairLabel}>Sair da conta</Text>
</Pressable>

// sairBtn: { backgroundColor: colors.white10, borderRadius: radius.md, paddingVertical: 14 }
// sairLabel: { fontSize: 16, fontFamily: Semibold, color: colors.white }