aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-07 13:42:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: add icons

Browse Source
This commit is contained in:
Steven
2023-06-23 21:16:15 +08:00
parent 9b303da4eb
commit c2c9b46705
6 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
web/src/components/Header.tsx
View File

@ -12,45 +12,44 @@ const Header: React.FC = () => {
};
return (
<>
<div className="w-full bg-amber-50">
<div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
<div className="flex flex-row justify-start items-center shrink mr-2">
<Link to="/" className="text-base font-mono font-medium cursor-pointer flex flex-row justify-start items-center">
<img src="/logo.png" className="w-8 h-auto mr-2" alt="" />
Shortify
</Link>
</div>
<div className="relative flex-shrink-0">
<Dropdown
trigger={
<button className="flex flex-row justify-end items-center cursor-pointer">
<span>{user.nickname}</span>
<Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
<div className="w-full bg-amber-50">
<div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
<div className="flex flex-row justify-start items-center shrink mr-2">
<Link to="/" className="text-base font-mono font-medium cursor-pointer flex flex-row justify-start items-center">
<img src="/logo.png" className="w-8 h-auto mr-2" alt="" />
Shortify
</Link>
</div>
<div className="relative flex-shrink-0">
<Dropdown
trigger={
<button className="flex flex-row justify-end items-center cursor-pointer">
<Icon.User className="w-5 h-auto mr-1" />
<span>{user.nickname}</span>
<Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
</button>
}
actions={
<>
<Link
to="/account"
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
>
<Icon.User className="w-4 h-auto mr-2" /> My Account
</Link>
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
onClick={() => handleSignOutButtonClick()}
>
<Icon.LogOut className="w-4 h-auto mr-2" /> Sign out
</button>
}
actions={
<>
<Link
to="/account"
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
>
<Icon.User className="w-4 h-auto mr-2" /> My Account
</Link>
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
onClick={() => handleSignOutButtonClick()}
>
<Icon.LogOut className="w-4 h-auto mr-2" /> Sign out
</button>
</>
}
actionsClassName="!w-40"
></Dropdown>
</div>
</>
}
actionsClassName="!w-40"
></Dropdown>
</div>
</div>
</>
</div>
);
};

10
web/src/components/ShortcutListView.tsx
View File

@ -67,28 +67,28 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
<div className="flex flex-row justify-end items-center space-x-2">
<Tooltip title="Copy link" variant="solid" placement="top">
<button className="cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
<Icon.Copy className="w-4 h-auto" />
<Icon.Copy className="w-5 h-auto text-gray-600" />
</button>
</Tooltip>
<Tooltip title="Go to link" variant="solid" placement="top">
<a className="cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>
<Icon.ExternalLink className="w-4 h-auto" />
<Icon.ExternalLink className="w-5 h-auto text-gray-600" />
</a>
</Tooltip>
<Dropdown
actionsClassName="!w-20"
actionsClassName="!w-24"
actions={
<>
<button
disabled={!havePermission(shortcut)}
className="w-full px-2 text-left leading-8 text-sm cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
className="w-full px-2 text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => setEditingShortcutId(shortcut.id)}
>
Edit
</button>
<button
disabled={!havePermission(shortcut)}
className="w-full px-2 text-left leading-8 text-sm cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
className="w-full px-2 text-left leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60"
onClick={() => {
handleDeleteShortcutButtonClick(shortcut);
}}

2
web/src/components/common/Dropdown.tsx
View File

@ -38,7 +38,7 @@ const Dropdown: React.FC<Props> = (props: Props) => {
trigger
) : (
<button className="flex flex-row justify-center items-center rounded text-gray-600 cursor-pointer hover:opacity-80">
<Icon.MoreVertical className="w-4 h-auto" />
<Icon.MoreVertical className="w-5 h-auto" />
</button>
)}
<div

1
web/src/pages/Home.tsx
View File

@ -49,6 +49,7 @@ const Home: React.FC = () => {
className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
onClick={() => setShowCreateShortcutDialog(true)}
>
<Icon.Link className="w-4 h-auto text-gray-500 mr-1" />
Shortcut
</button>
</>