aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-18 21:19:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update button hover style

Browse Source
This commit is contained in:
Steven 2023-07-17 21:14:57 +08:00
parent 21ff8ba797
commit 15ffd0738c
2 changed files with 56 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
web/src/components/AnalyticsDialog.tsx
View File

@ -32,22 +32,16 @@ const AnalyticsDialog: React.FC<Props> = (props: Props) => {
{analytics ? ( {analytics ? (
<> <>
<p className="w-full py-1 px-2">Top Sources</p> <p className="w-full py-1 px-2">Top Sources</p>
<div className="mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg"> <div className="w-full mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
<table className="min-w-full divide-y divide-gray-300"> <div className="w-full divide-y divide-gray-300">
<thead> <div className="w-full flex flex-row justify-between items-center">
<tr> <span className="py-1 px-2 text-left font-semibold text-sm text-gray-500">Source</span>
<th scope="col" className="py-1 px-2 text-left font-semibold text-sm text-gray-500"> <span className="py-1 pr-2 text-right font-semibold text-sm text-gray-500">Visitors</span>
Source </div>
</th> <div className="w-full divide-y divide-gray-200">
<th scope="col" className="py-1 pr-2 text-right font-semibold text-sm text-gray-500">
Visitors
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{analytics.referenceData.map((reference) => ( {analytics.referenceData.map((reference) => (
<tr key={reference.name}> <div key={reference.name} className="w-full flex flex-row justify-between items-center">
<td className="whitespace-nowrap py-2 px-2 text-sm text-gray-900"> <span className="whitespace-nowrap py-2 px-2 text-sm truncate text-gray-900">
{reference.name ? ( {reference.name ? (
<a className="hover:underline hover:text-blue-600" href={reference.name} target="_blank"> <a className="hover:underline hover:text-blue-600" href={reference.name} target="_blank">
{reference.name} {reference.name}
@ -55,28 +49,17 @@ const AnalyticsDialog: React.FC<Props> = (props: Props) => {
) : ( ) : (
"Direct" "Direct"
)} )}
</td> </span>
<td className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right">{reference.count}</td> <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{reference.count}</span>
</tr> </div>
))} ))}
</tbody> </div>
</table> </div>
</div> </div>
<div className="w-full mt-4 py-1 px-2 flex flex-row justify-between items-center"> <div className="w-full mt-4 py-1 px-2 flex flex-row justify-between items-center">
<span>Devices</span> <span>Devices</span>
<div> <div>
<button
className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
selectedDeviceTab === "os"
? "border-blue-600 text-blue-600"
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
}`}
onClick={() => setSelectedDeviceTab("os")}
>
OS
</button>
<span className="text-gray-200 font-mono mx-1">/</span>
<button <button
className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${ className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
selectedDeviceTab === "browser" selectedDeviceTab === "browser"
@ -87,52 +70,51 @@ const AnalyticsDialog: React.FC<Props> = (props: Props) => {
> >
Browser Browser
</button> </button>
<span className="text-gray-200 font-mono mx-1">/</span>
<button
className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
selectedDeviceTab === "os"
? "border-blue-600 text-blue-600"
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
}`}
onClick={() => setSelectedDeviceTab("os")}
>
OS
</button>
</div> </div>
</div> </div>
<div className="mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg"> <div className="w-full mt-1 overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
{selectedDeviceTab === "os" ? ( {selectedDeviceTab === "browser" ? (
<table className="min-w-full divide-y divide-gray-300"> <div className="w-full divide-y divide-gray-300">
<thead> <div className="w-full flex flex-row justify-between items-center">
<tr> <span className="py-2 px-2 text-left text-sm font-semibold text-gray-500">Browsers</span>
<th scope="col" className="py-2 px-2 text-left text-sm font-semibold text-gray-500"> <span className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">Visitors</span>
Operating system </div>
</th> <div className="w-full divide-y divide-gray-200">
<th scope="col" className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">
Visitors
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{analytics.deviceData.map((reference) => (
<tr key={reference.name}>
<td className="whitespace-nowrap py-2 px-2 text-sm text-gray-900">{reference.name || "Unknown"}</td>
<td className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right">{reference.count}</td>
</tr>
))}
</tbody>
</table>
) : (
<table className="min-w-full divide-y divide-gray-300">
<thead>
<tr>
<th scope="col" className="py-2 px-2 text-left text-sm font-semibold text-gray-500">
Browsers
</th>
<th scope="col" className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">
Visitors
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200">
{analytics.browserData.map((reference) => ( {analytics.browserData.map((reference) => (
<tr key={reference.name}> <div key={reference.name} className="w-full flex flex-row justify-between items-center">
<td className="whitespace-nowrap py-2 px-2 text-sm text-gray-900">{reference.name || "Unknown"}</td> <span className="whitespace-nowrap py-2 px-2 text-sm text-gray-900 truncate">{reference.name || "Unknown"}</span>
<td className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right">{reference.count}</td> <span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{reference.count}</span>
</tr> </div>
))} ))}
</tbody> </div>
</table> </div>
) : (
<div className="w-full divide-y divide-gray-300">
<div className="w-full flex flex-row justify-between items-center">
<span className="py-2 px-2 text-left text-sm font-semibold text-gray-500">Operating system</span>
<span className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">Visitors</span>
</div>
<div className="w-full divide-y divide-gray-200">
{analytics.deviceData.map((device) => (
<div key={device.name} className="w-full flex flex-row justify-between items-center">
<span className="whitespace-nowrap py-2 px-2 text-sm text-gray-900 truncate">{device.name || "Unknown"}</span>
<span className="whitespace-nowrap py-2 pr-2 text-sm text-gray-500 text-right shrink-0">{device.count}</span>
</div>
))}
</div>
</div>
)} )}
</div> </div>
</> </>

4
web/src/components/ShortcutView.tsx
View File

@ -81,7 +81,7 @@ const ShortcutView = (props: Props) => {
</a> </a>
<Tooltip title="Copy" variant="solid" placement="top" arrow> <Tooltip title="Copy" variant="solid" placement="top" arrow>
<button <button
className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600" className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
onClick={() => handleCopyButtonClick()} onClick={() => handleCopyButtonClick()}
> >
<Icon.Clipboard className="w-4 h-auto mx-auto" /> <Icon.Clipboard className="w-4 h-auto mx-auto" />
@ -89,7 +89,7 @@ const ShortcutView = (props: Props) => {
</Tooltip> </Tooltip>
<Tooltip title="QR Code" variant="solid" placement="top" arrow> <Tooltip title="QR Code" variant="solid" placement="top" arrow>
<button <button
className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-full text-gray-500 hover:bg-gray-100 hover:shadow hover:text-blue-600" className="hidden group-hover:block ml-1 w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow"
onClick={() => setShowQRCodeDialog(true)} onClick={() => setShowQRCodeDialog(true)}
> >
<Icon.QrCode className="w-4 h-auto mx-auto" /> <Icon.QrCode className="w-4 h-auto mx-auto" />