Improve site UI (#21)

* Remove virtual scroll container * Increase description font size * Add clear button to search bar
nrfconnect · Nov 2, 2023 · 0752df9 · 0752df9
1 parent 2c585b2
commit 0752df9
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 22 deletions.
diff --git a/site/src/app/AppBlock.tsx b/site/src/app/AppBlock.tsx
@@ -78,7 +78,7 @@ function AppBlock({ app, setShowingAppId }: Props): JSX.Element {
                 <TagList app={app} />
             </div>
 
-            <p className="text-sm">{app.description}</p>
+            <p>{app.description}</p>
 
             <div className="flex flex-wrap items-center gap-2">
                 <VSCodeButton app={app} />

diff --git a/site/src/app/AppList.tsx b/site/src/app/AppList.tsx
@@ -17,23 +17,17 @@ function AppList({ apps, filters, setShowingAppId }: Props): JSX.Element {
     const filteredApps = filterApps(apps, filters);
 
     return (
-        <ul className="mx-4 mb-4 flex h-full flex-col items-center justify-between gap-3 overflow-y-scroll md:mb-0 md:gap-5 md:p-0 lg:mx-0">
-            <div className="flex w-full flex-col items-center justify-between gap-3">
-                {filteredApps.map((app) => (
-                    <AppBlock key={app.id} app={app} setShowingAppId={setShowingAppId} />
-                ))}
+        <div className="flex w-full flex-col items-center justify-between gap-3 p-3 lg:p-0">
+            {filteredApps.map((app) => (
+                <AppBlock key={app.id} app={app} setShowingAppId={setShowingAppId} />
+            ))}
 
-                {!filteredApps.length && (
-                    <p className="mt-10 flex-grow text-center text-xl text-gray-500">
-                        No results found.
-                    </p>
-                )}
-            </div>
-
-            <li className="text-center font-thin text-gray-400 md:mb-5">
-                Copyright &copy; {new Date().getFullYear()} Nordic Semiconductor
-            </li>
-        </ul>
+            {!filteredApps.length && (
+                <p className="mt-10 flex-grow text-center text-xl text-gray-500">
+                    No results found.
+                </p>
+            )}
+        </div>
     );
 }
 

diff --git a/site/src/app/Header.tsx b/site/src/app/Header.tsx
@@ -96,11 +96,12 @@ function Header(props: Props): JSX.Element {
 
                     <div className="absolute bottom-0 flex w-full justify-center">
                         <input
-                            type="text"
+                            type="search"
                             placeholder="Filter applications..."
                             value={props.filters.textSearch}
                             onChange={handleTextSearchChange}
-                            className="relative top-5 mx-4 h-14 w-full max-w-5xl p-3 pl-3 drop-shadow-md lg:mx-0 lg:w-2/3"
+                            aria-label="Filter applications"
+                            className="relative top-5 mx-4 h-14 w-full max-w-5xl p-3 pl-3 drop-shadow-md lg:mx-0 lg:w-2/3 outline-none"
                         />
                     </div>
                 </div>

diff --git a/site/src/app/Root.tsx b/site/src/app/Root.tsx
@@ -55,17 +55,21 @@ function Root(props: Props) {
     );
 
     return (
-        <main className="flex h-full flex-col gap-4 text-gray-600 md:gap-10" id="root">
+        <main className="text-gray-600" id="root">
             <Dialog ref={dialogRef}>
                 {showingApp && <InstructionsDialog app={showingApp} close={onDialogClose} />}
                 {showingAboutDialog && <AboutDialog close={onDialogClose} />}
             </Dialog>
+
             <Header
                 filters={filters}
                 dispatchFilters={dispatchFilters}
                 showAboutDialog={showAboutDialog}
             />
-            <AppList apps={props.apps} filters={filters} setShowingAppId={setShowingAppId} />
+
+            <div className="md:mt-7 lg:mt-10 pb-0 lg:pb-10">
+                <AppList apps={props.apps} filters={filters} setShowingAppId={setShowingAppId} />
+            </div>
         </main>
     );
 }

diff --git a/site/src/app/layout.tsx b/site/src/app/layout.tsx
@@ -18,7 +18,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <html lang="en">
-            <body className="overflow-hidden bg-gray-50">{children}</body>
+            <body className="overflow-x-hidden bg-gray-50">{children}</body>
         </html>
     );
 }