fix: search layout padding + slate background

ntua-unit-of-control-and-informatics · May 20, 2024 · 5370fc2 · 5370fc2
1 parent ffb18a6
commit 5370fc2
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 15 deletions.
diff --git a/src/app/dashboard/components/SearchBar.tsx b/src/app/dashboard/components/SearchBar.tsx
@@ -10,13 +10,13 @@ export default function SearchBar() {
         Search
       </label>
       <div className="relative">
-        <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
+        <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none">
           <MagnifyingGlassIcon className="size-6 text-gray-400" />
         </div>
         <input
           type="search"
           id="default-search"
-          className="block w-full h-full p-4 ps-12 text-gray-900 outline-none dark:placeholder-gray-400 dark:text-white"
+          className="block w-full h-full p-4 ps-10 text-gray-900 outline-none dark:placeholder-gray-400 dark:text-white"
           placeholder="Search..."
           required
         />

diff --git a/src/app/dashboard/components/UserAvatar.tsx b/src/app/dashboard/components/UserAvatar.tsx
@@ -21,7 +21,7 @@ export default function UserAvatar({ session }: { session: Session | null }) {
   return (
     <Menu as="div" className="relative inline-block">
       <div>
-        <MenuButton className="inline-flex  items-center w-full justify-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold text-gray-900">
+        <MenuButton className="inline-flex  items-center w-full justify-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold">
           {session?.user?.image ? (
             <Image
               alt="user avatar"
@@ -59,8 +59,8 @@ export default function UserAvatar({ session }: { session: Session | null }) {
                   href="#"
                   className={classNames(
                     focus
-                      ? 'bg-gray-100 text-gray-900  dark:bg-gray-900 dark:text-gray-100'
-                      : 'text-gray-700 dark:text-gray-100',
+                      ? 'bg-gray-100 text-gray-900  dark:bg-slate-800 dark:text-slate-400'
+                      : 'text-gray-700 dark:text-slate-400',
                     'block px-4 py-2 text-sm',
                   )}
                 >
@@ -74,8 +74,8 @@ export default function UserAvatar({ session }: { session: Session | null }) {
                   href="#"
                   className={classNames(
                     focus
-                      ? 'bg-gray-100 text-gray-900  dark:bg-gray-900 dark:text-gray-100'
-                      : 'text-gray-700 dark:text-gray-100',
+                      ? 'bg-gray-100 text-gray-900  dark:bg-slate-800 dark:text-slate-400'
+                      : 'text-gray-700 dark:text-slate-400',
                     'block px-4 py-2 text-sm',
                   )}
                 >
@@ -89,8 +89,8 @@ export default function UserAvatar({ session }: { session: Session | null }) {
                   href="#"
                   className={classNames(
                     focus
-                      ? 'bg-gray-100 text-gray-900  dark:bg-gray-900 dark:text-gray-100'
-                      : 'text-gray-700 dark:text-gray-100',
+                      ? 'bg-gray-100 text-gray-900  dark:bg-slate-800 dark:text-slate-400'
+                      : 'text-gray-700 dark:text-slate-400',
                     'block px-4 py-2 text-sm',
                   )}
                 >
@@ -105,8 +105,8 @@ export default function UserAvatar({ session }: { session: Session | null }) {
                     type="submit"
                     className={classNames(
                       focus
-                        ? 'bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100'
-                        : 'text-gray-700 dark:text-gray-100',
+                        ? 'bg-gray-100 text-gray-900 dark:bg-slate-800 dark:text-slate-400'
+                        : 'text-gray-700 dark:text-slate-400',
                       'block w-full px-4 py-2 text-left text-sm',
                     )}
                   >

diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
@@ -15,7 +15,7 @@ export default async function Dashboard({
       <Sidebar session={session} />
       <div className="h-screen sm:ml-72">
         <TopBar session={session} />
-        <main>{children}</main>
+        <main className="p-8">{children}</main>
       </div>
     </>
   );

diff --git a/src/app/dashboard/models/page.tsx b/src/app/dashboard/models/page.tsx
@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 
 export default function Dashboard() {
   return (
-    <div style={{ padding: '20px' }}>
+    <div>
       <h1>Hello from models</h1>
     </div>
   );

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 
 export default function Dashboard() {
   return (
-    <div style={{ padding: '20px' }}>
+    <div>
       <h1>Welcome to Your Dashboard!</h1>
       <br />
       <p>Get started by exploring the different sections of our dashboard:</p>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -17,7 +17,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${inter.className} bg-white dark:bg-gray-600 dark:text-gray-100`}
+        className={`${inter.className} bg-white dark:bg-slate-800 dark:text-slate-400`}
       >
         {children}
       </body>