minor style changes to input and button hover effects

This commit is contained in:
spencerwooo
2021-12-17 15:28:11 +08:00
parent 7a77fd884d
commit c6fba24f97
4 changed files with 33 additions and 39 deletions
+24 -23
View File
@@ -25,30 +25,31 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
enter it below.
</p>
<input
className="bg-blue-50 dark:bg-gray-600 dark:text-white focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none p-2 font-mono rounded"
autoFocus
type="text"
placeholder="************"
value={token}
onChange={e => {
setToken(e.target.value)
}}
onKeyPress={e => {
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
<div className="flex items-center space-x-2">
<input
className="flex-1 border border-gray-600/10 dark:bg-gray-600 dark:text-white focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none p-2 font-mono rounded"
autoFocus
type="text"
placeholder="************"
value={token}
onChange={e => {
setToken(e.target.value)
}}
onKeyPress={e => {
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
router.reload()
}
}}
/>
<button
className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-400 px-4 py-2 text-white bg-blue-500 rounded"
onClick={() => {
router.reload()
}
}}
/>
<button
className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 inline-flex items-center justify-center px-4 py-2 space-x-2 text-white bg-blue-500 rounded"
onClick={() => {
router.reload()
}}
>
<span>Lemme in</span>
<FontAwesomeIcon icon="arrow-right" />
</button>
}}
>
<FontAwesomeIcon icon="arrow-right" />
</button>
</div>
</div>
)
}
+2 -2
View File
@@ -21,7 +21,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
}}
/>
<a
className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-400 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
href={downloadUrl}
target="_blank"
rel="noopener noreferrer"
@@ -30,7 +30,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
<span>Download</span>
</a>
<button
className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-400 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
onClick={() => {
clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
toast.success('Copied direct link to clipboard.')
+1 -1
View File
@@ -137,7 +137,7 @@ const Navbar = () => {
<div className="flex items-center justify-end mt-8">
<button
className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 inline-flex items-center justify-center px-4 py-2 mr-3 space-x-2 text-white bg-blue-500 rounded"
className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-400 inline-flex items-center justify-center px-4 py-2 mr-3 space-x-2 text-white bg-blue-500 rounded"
onClick={() => setIsOpen(false)}
>
Cancel
+6 -13
View File
@@ -28,16 +28,9 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</div>
<div className="flex flex-wrap justify-center mt-4 space-x-2">
<Toaster
toastOptions={{
style: {
background: '#316C23',
color: '#ffffff',
},
}}
/>
<Toaster />
<a
className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-400 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
href={file['@microsoft.graph.downloadUrl']}
target="_blank"
rel="noopener noreferrer"
@@ -47,7 +40,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</a>
<button
className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-400 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
onClick={() => {
clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
toast.success('Copied direct link to clipboard.')
@@ -58,7 +51,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</button>
<a
className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-gray-600 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-gray-700 rounded"
className="focus:outline-none focus:ring focus:ring-gray-300 hover:bg-gray-600 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-gray-700 rounded"
href={`iina://weblink?url=${file['@microsoft.graph.downloadUrl']}`}
target="_blank"
rel="noopener noreferrer"
@@ -67,7 +60,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
<span>IINA</span>
</a>
<a
className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-500 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-600 rounded"
className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-500 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-600 rounded"
href={`vlc://${file['@microsoft.graph.downloadUrl']}`}
target="_blank"
rel="noopener noreferrer"
@@ -76,7 +69,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
<span>VLC</span>
</a>
<a
className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-300 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-400 rounded"
className="focus:outline-none focus:ring focus:ring-yellow-100 hover:bg-yellow-400 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-400 rounded"
href={`potplayer://${file['@microsoft.graph.downloadUrl']}`}
target="_blank"
rel="noopener noreferrer"