multipleof4/ntfy
1
0
Fork 0
mirror of https://github.com/multipleof4/ntfy.git synced 2026-10-16 08:27:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make chips look better

Browse Source
This commit is contained in:
binwiederhier
2026-06-12 23:22:37 -04:00
parent 1215e99098
commit ca58b885cb
1 changed files with 58 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/Account.jsx
+58 -53
View File
@@ -2,6 +2,7 @@ import * as React from "react";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { import {
Alert, Alert,
Box,
CardActions, CardActions,
CardContent, CardContent,
Chip, Chip,
@@ -463,43 +464,45 @@ const Emails = () => {
return ( return (
<Pref labelId={labelId} alignTop title={t("account_basics_emails_title")} description={t("account_basics_emails_description")}> <Pref labelId={labelId} alignTop title={t("account_basics_emails_title")} description={t("account_basics_emails_description")}>
<div aria-labelledby={labelId}> <div aria-labelledby={labelId}>
{verifiedEmails.map((email) => ( <Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 0.75 }}>
<Chip {verifiedEmails.map((email) => (
key={email.address} <Chip
icon={email.primary ? <StarIcon /> : undefined} key={email.address}
label={ icon={email.primary ? <StarIcon /> : undefined}
<Tooltip label={
title={email.primary ? t("account_basics_emails_chip_actions_primary") : t("account_basics_emails_chip_actions_verified")} <Tooltip
> title={email.primary ? t("account_basics_emails_chip_actions_primary") : t("account_basics_emails_chip_actions_verified")}
<span>{email.address}</span> >
</Tooltip> <span>{email.address}</span>
} </Tooltip>
variant="outlined" }
onClick={(ev) => openMenu(ev, email)} variant="outlined"
onDelete={() => handleDelete(email.address)} onClick={(ev) => openMenu(ev, email)}
sx={email.primary ? { "& .MuiChip-icon": { color: "#fbc02d" } } : undefined} onDelete={() => handleDelete(email.address)}
/> sx={email.primary ? { "& .MuiChip-icon": { color: "#fbc02d" } } : undefined}
))} />
{pendingEmails.map((email) => ( ))}
<Chip {pendingEmails.map((email) => (
key={email.address} <Chip
label={ key={email.address}
<Tooltip title={t("account_basics_emails_chip_actions_unverified")}> label={
<span> <Tooltip title={t("account_basics_emails_chip_actions_unverified")}>
{email.address} <em>({t("account_basics_emails_unverified")})</em> <span>
</span> {email.address} <em>({t("account_basics_emails_unverified")})</em>
</Tooltip> </span>
} </Tooltip>
variant="outlined" }
onClick={(ev) => openMenu(ev, email)} variant="outlined"
onDelete={() => handleDelete(email.address)} onClick={(ev) => openMenu(ev, email)}
sx={{ opacity: 0.7 }} onDelete={() => handleDelete(email.address)}
/> sx={{ opacity: 0.7 }}
))} />
{verifiedEmails.length === 0 && pendingEmails.length === 0 && <em>{t("account_basics_emails_no_emails_yet")}</em>} ))}
<IconButton onClick={handleDialogOpen} aria-label={t("account_basics_emails_dialog_title")}> {verifiedEmails.length === 0 && pendingEmails.length === 0 && <em>{t("account_basics_emails_no_emails_yet")}</em>}
<AddIcon /> <IconButton onClick={handleDialogOpen} aria-label={t("account_basics_emails_dialog_title")}>
</IconButton> <AddIcon />
</IconButton>
</Box>
{showNoEmailWarning && ( {showNoEmailWarning && (
<Alert severity="warning" sx={{ mt: 1 }}> <Alert severity="warning" sx={{ mt: 1 }}>
{t("account_basics_emails_no_recovery_warning")} {t("account_basics_emails_no_recovery_warning")}
@@ -680,22 +683,24 @@ const PhoneNumbers = () => {
return ( return (
<Pref labelId={labelId} title={t("account_basics_phone_numbers_title")} description={t("account_basics_phone_numbers_description")}> <Pref labelId={labelId} title={t("account_basics_phone_numbers_title")} description={t("account_basics_phone_numbers_description")}>
<div aria-labelledby={labelId}> <div aria-labelledby={labelId}>
{account?.phone_numbers?.map((phoneNumber) => ( <Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 0.75 }}>
<Chip {account?.phone_numbers?.map((phoneNumber) => (
label={ <Chip
<Tooltip title={t("common_copy_to_clipboard")}> label={
<span>{phoneNumber}</span> <Tooltip title={t("common_copy_to_clipboard")}>
</Tooltip> <span>{phoneNumber}</span>
} </Tooltip>
variant="outlined" }
onClick={() => handleCopy(phoneNumber)} variant="outlined"
onDelete={() => handleDelete(phoneNumber)} onClick={() => handleCopy(phoneNumber)}
/> onDelete={() => handleDelete(phoneNumber)}
))} />
{!account?.phone_numbers && <em>{t("account_basics_phone_numbers_no_phone_numbers_yet")}</em>} ))}
<IconButton onClick={handleDialogOpen}> {!account?.phone_numbers && <em>{t("account_basics_phone_numbers_no_phone_numbers_yet")}</em>}
<AddIcon /> <IconButton onClick={handleDialogOpen}>
</IconButton> <AddIcon />
</IconButton>
</Box>
</div> </div>
<AddPhoneNumberDialog key={`addPhoneNumberDialog${dialogKey}`} open={dialogOpen} onClose={handleDialogClose} /> <AddPhoneNumberDialog key={`addPhoneNumberDialog${dialogKey}`} open={dialogOpen} onClose={handleDialogClose} />
<Portal> <Portal>