Add box-shadow, reduce padding on mobile.

This commit is contained in:
symant233
2022-11-29 18:58:49 +08:00
parent 0684f04546
commit bfb2db73b5
7 changed files with 10 additions and 10 deletions
+1 -1
View File
@@ -76,7 +76,7 @@ const FolderGridLayout = ({
const getItemPath = (name: string) => `${path === '/' ? '' : path}/${encodeURIComponent(name)}`
return (
<div className="rounded bg-white dark:bg-gray-900 dark:text-gray-100">
<div className="rounded bg-white dark:bg-gray-900 dark:text-gray-100 shadow-sm">
<div className="flex items-center border-b border-gray-900/10 px-3 text-xs font-bold uppercase tracking-widest text-gray-600 dark:border-gray-500/30 dark:text-gray-400">
<div className="flex-1">{t('{{count}} item(s)', { count: folderChildren.length })}</div>
<div className="flex p-1.5 text-gray-700 dark:text-gray-400">
+1 -1
View File
@@ -53,7 +53,7 @@ const FolderListLayout = ({
const getItemPath = (name: string) => `${path === '/' ? '' : path}/${encodeURIComponent(name)}`
return (
<div className="rounded bg-white dark:bg-gray-900 dark:text-gray-100">
<div className="rounded bg-white dark:bg-gray-900 dark:text-gray-100 shadow-sm">
<div className="grid grid-cols-12 items-center space-x-2 border-b border-gray-900/10 px-3 dark:border-gray-500/30">
<div className="col-span-12 py-2 text-xs font-bold uppercase tracking-widest text-gray-600 dark:text-gray-300 md:col-span-6">
{t('Name')}
+1 -1
View File
@@ -120,7 +120,7 @@ const Navbar = () => {
{tokenPresent && (
<button
className="flex items-center space-x-2 p-2 hover:opacity-80 dark:text-white"
className="flex items-center space-x-2 hover:opacity-80 dark:text-white"
onClick={() => setIsOpen(true)}
>
<span className="hidden text-sm font-medium md:inline-block">{t('Logout')}</span>
+1 -1
View File
@@ -19,7 +19,7 @@ const SwitchLayout = () => {
return (
<div className="relative w-24 flex-shrink-0 text-sm text-gray-600 dark:text-gray-300 md:w-28">
<Listbox value={preferredLayout} onChange={setPreferredLayout}>
<Listbox.Button className="relative w-full cursor-pointer rounded pl-2">
<Listbox.Button className="relative w-full cursor-pointer rounded pl-4">
<span className="pointer-events-none flex items-center">
<FontAwesomeIcon className="mr-2 h-3 w-3" icon={preferredLayout.icon} />
<span>
+2 -2
View File
@@ -1,10 +1,10 @@
export function PreviewContainer({ children }): JSX.Element {
return <div className="rounded bg-white p-3 dark:bg-gray-900 dark:text-white">{children}</div>
return <div className="rounded bg-white p-3 dark:bg-gray-900 dark:text-white shadow-sm">{children}</div>
}
export function DownloadBtnContainer({ children }): JSX.Element {
return (
<div className="sticky bottom-0 left-0 right-0 z-10 rounded border-t border-gray-900/10 bg-white bg-opacity-80 p-2 backdrop-blur-md dark:border-gray-500/30 dark:bg-gray-900">
<div className="sticky bottom-0 left-0 right-0 z-10 rounded border-t border-gray-900/10 bg-white bg-opacity-80 p-2 backdrop-blur-md dark:border-gray-500/30 dark:bg-gray-900 shadow-sm">
{children}
</div>
)
+2 -2
View File
@@ -20,8 +20,8 @@ export default function Folders() {
<main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">
<Navbar />
<div className="mx-auto w-full max-w-5xl p-4">
<nav className="mb-4 flex items-center justify-between space-x-3 pl-1">
<div className="mx-auto w-full max-w-5xl sm:p-4 py-4">
<nav className="mb-4 flex items-center justify-between space-x-3 sm:pl-1 sm:px-0 px-4">
<Breadcrumb query={query} />
<SwitchLayout />
</nav>
+2 -2
View File
@@ -17,8 +17,8 @@ export default function Home() {
<main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">
<Navbar />
<div className="mx-auto w-full max-w-5xl p-4">
<nav className="mb-4 flex items-center justify-between pl-1">
<div className="mx-auto w-full max-w-5xl sm:p-4 py-4">
<nav className="mb-4 flex items-center justify-between sm:pl-1 sm:px-0 px-4">
<Breadcrumb />
<SwitchLayout />
</nav>