chore: tweak dialog styles

This commit is contained in:
Steven 2023-12-10 15:47:01 +08:00
parent e7d2bd0be6
commit 5f69ab67df
7 changed files with 10 additions and 10 deletions

View File

@ -45,7 +45,7 @@ const Alert: React.FC<Props> = (props: Props) => {
return ( return (
<Modal open={true}> <Modal open={true}>
<ModalDialog> <ModalDialog>
<div className="flex flex-row justify-between items-center w-80 mb-4"> <div className="flex flex-row justify-between items-center w-80">
<span className="text-lg font-medium">{title}</span> <span className="text-lg font-medium">{title}</span>
<Button variant="plain" onClick={handleCloseBtnClick}> <Button variant="plain" onClick={handleCloseBtnClick}>
<Icon.X className="w-5 h-auto text-gray-600" /> <Icon.X className="w-5 h-auto text-gray-600" />

View File

@ -62,7 +62,7 @@ const ChangePasswordDialog: React.FC<Props> = (props: Props) => {
return ( return (
<Modal open={true}> <Modal open={true}>
<ModalDialog> <ModalDialog>
<div className="flex flex-row justify-between items-center w-80 mb-4"> <div className="flex flex-row justify-between items-center w-80">
<span className="text-lg font-medium">Change Password</span> <span className="text-lg font-medium">Change Password</span>
<Button variant="plain" onClick={handleCloseBtnClick}> <Button variant="plain" onClick={handleCloseBtnClick}>
<Icon.X className="w-5 h-auto text-gray-600" /> <Icon.X className="w-5 h-auto text-gray-600" />

View File

@ -87,7 +87,7 @@ const CreateAccessTokenDialog: React.FC<Props> = (props: Props) => {
return ( return (
<Modal open={true}> <Modal open={true}>
<ModalDialog> <ModalDialog>
<div className="flex flex-row justify-between items-center w-80 sm:w-96 mb-4"> <div className="flex flex-row justify-between items-center w-80">
<span className="text-lg font-medium">Create Access Token</span> <span className="text-lg font-medium">Create Access Token</span>
<Button variant="plain" onClick={onClose}> <Button variant="plain" onClick={onClose}>
<Icon.X className="w-5 h-auto text-gray-600" /> <Icon.X className="w-5 h-auto text-gray-600" />

View File

@ -125,7 +125,7 @@ const CreateUserDialog: React.FC<Props> = (props: Props) => {
return ( return (
<Modal open={true}> <Modal open={true}>
<ModalDialog> <ModalDialog>
<div className="flex flex-row justify-between items-center w-80 sm:w-96 mb-4"> <div className="flex flex-row justify-between items-center w-80 sm:w-96">
<span className="text-lg font-medium">{isCreating ? "Create User" : "Edit User"}</span> <span className="text-lg font-medium">{isCreating ? "Create User" : "Edit User"}</span>
<Button variant="plain" onClick={onClose}> <Button variant="plain" onClick={onClose}>
<Icon.X className="w-5 h-auto text-gray-600" /> <Icon.X className="w-5 h-auto text-gray-600" />

View File

@ -58,7 +58,7 @@ const EditUserinfoDialog: React.FC<Props> = (props: Props) => {
return ( return (
<Modal open={true}> <Modal open={true}>
<ModalDialog> <ModalDialog>
<div className="flex flex-row justify-between items-center w-80 mb-4"> <div className="flex flex-row justify-between items-center w-80">
<span className="text-lg font-medium">Edit Userinfo</span> <span className="text-lg font-medium">Edit Userinfo</span>
<Button variant="plain" onClick={handleCloseBtnClick}> <Button variant="plain" onClick={handleCloseBtnClick}>
<Icon.X className="w-5 h-auto text-gray-600" /> <Icon.X className="w-5 h-auto text-gray-600" />

View File

@ -39,7 +39,7 @@ const GenerateQRCodeDialog: React.FC<Props> = (props: Props) => {
return ( return (
<Modal open={true}> <Modal open={true}>
<ModalDialog> <ModalDialog>
<div className="flex flex-row justify-between items-center w-64 mb-4"> <div className="flex flex-row justify-between items-center w-64">
<span className="text-lg font-medium">QR Code</span> <span className="text-lg font-medium">QR Code</span>
<Button variant="plain" onClick={handleCloseBtnClick}> <Button variant="plain" onClick={handleCloseBtnClick}>
<Icon.X className="w-5 h-auto text-gray-600" /> <Icon.X className="w-5 h-auto text-gray-600" />

View File

@ -111,19 +111,19 @@ const ShortcutCard = (props: Props) => {
arrow arrow
> >
<div <div
className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-500 text-xs" className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })} onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
> >
<VisibilityIcon className="w-3 h-auto mr-0.5 opacity-70" visibility={shortcut.visibility} /> <VisibilityIcon className="w-4 h-auto mr-1 opacity-70" visibility={shortcut.visibility} />
{t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)} {t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)}
</div> </div>
</Tooltip> </Tooltip>
<Tooltip title="View count" variant="solid" placement="top" arrow> <Tooltip title="View count" variant="solid" placement="top" arrow>
<Link <Link
to={`/shortcut/${shortcut.id}#analytics`} to={`/shortcut/${shortcut.id}#analytics`}
className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-500 text-xs" className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
> >
<Icon.BarChart2 className="w-3 h-auto mr-0.5 opacity-70" /> <Icon.BarChart2 className="w-4 h-auto mr-1 opacity-70" />
{t("shortcut.visits", { count: shortcut.viewCount })} {t("shortcut.visits", { count: shortcut.viewCount })}
</Link> </Link>
</Tooltip> </Tooltip>