chore(web): polish ui and ux

ojpbarbosa · Oct 9, 2023 · aee3989 · aee3989
1 parent b2213c1
commit aee3989
Show file tree

Hide file tree

Showing 20 changed files with 235 additions and 517 deletions.
diff --git a/web/app/components/search-form.tsx b/web/app/components/search-form.tsx
@@ -30,10 +30,10 @@ const formSchema = z.object({
   query: z
     .string()
     .min(30, {
-      message: 'Search query must be at least 30 characters long.'
+      message: 'Search query must be at least 30 characters long'
     })
     .max(200, {
-      message: 'Search query must be less than 200 characters long.'
+      message: 'Search query must be less than 200 characters long'
     })
 })
 
@@ -68,12 +68,12 @@ export default function SearchForm({ className }: { className?: string }) {
   }
 
   return (
-    <div className="flex flex-col items-center gap-y-4">
+    <div className="flex flex-col items-center gap-y-4 w-full lg:w-[45%]">
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
           className={cn(
-            'space-y-3 max-w-full flex flex-row items-end gap-x-2 justify-start',
+            'gap-y-2 w-full px-1 max-w-full flex flex-row items-end gap-x-2 justify-center align-top',
             className
           )}
         >
@@ -84,29 +84,37 @@ export default function SearchForm({ className }: { className?: string }) {
               return (
                 <FormItem className="flex flex-col w-full items-start space-y-3">
                   <FormDescription className="text-base w-full">
-                    <span className="text-primary text-xl flex flex-row gap-x-1 sm:w-full">
-                      <span className={spaceGrotesk.className}>
-                        Learn anything based on science
-                      </span>
-                      <Popover>
-                        <PopoverTrigger>
-                          <FiHelpCircle className="text-muted-foreground" />
-                        </PopoverTrigger>
-                        <PopoverContent className="dark:bg-[#202020]/40 bg-neutral-400/10 backdrop-blur-lg filter">
-                          <span>
-                            Provide a detailed search query in order to feed SciSight{`'`}s
-                            algorithm with valuable data and get relevant suggestions.
-                          </span>
-                        </PopoverContent>
-                      </Popover>
+                    <span className="text-primary text-xl flex flex-row gap-x-1 w-full">
+                      <h2
+                        className={cn(
+                          'text-xl flex flex-col 2xl:flex-row lg:flex-col md:flex-row',
+                          spaceGrotesk.className
+                        )}
+                      >
+                        Learn anything based
+                        <div className="flex flex-row align-middle items-center gap-x-1">
+                          <span className="ml-0 lg:ml-1">on science</span>
+                          <Popover>
+                            <PopoverTrigger>
+                              <FiHelpCircle className="text-muted-foreground" />
+                            </PopoverTrigger>
+                            <PopoverContent className="dark:bg-[#202020]/40 bg-neutral-400/10 backdrop-blur-lg filter ml-10 sm:ml-0">
+                              <p>
+                                Provide a detailed search query in order to feed SciSight{`'`}s
+                                algorithm with valuable data and get relevant suggestions.
+                              </p>
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+                      </h2>
                     </span>
                   </FormDescription>
-                  <FormMessage className="text-base text-[#FA00FF]/70 font-normal" />
+                  <FormMessage className="text-base mt-0 mb-2 text-[#FA00FF]/70 font-normal" />
                   <FormControl>
                     <Input
                       placeholder={searchPlaceholder}
-                      {...field}
                       className="w-full h-10 text-base flex items-center active:ring-[#6C5CC2] active:border-[#6C5CC2]"
+                      {...field}
                     />
                   </FormControl>
                 </FormItem>
@@ -125,11 +133,11 @@ export default function SearchForm({ className }: { className?: string }) {
         </form>
       </Form>
       <Badge
-        className="rounded-full text-base font-normal border-[#6C5CC2] bg-neutral-400/10 dark:bg-neutral-400/10 py-1 px-3"
+        className="rounded-full lg:rounded-md xl:rounded-full text-base sm:text-base font-normal border-[#6C5CC2] dark:bg-[#202020]/40 bg-neutral-400/10 py-1 px-3"
         variant="outline"
       >
         <span className="text-foreground">Not sure what to search?</span>
-        <Button className="text-[#6C5CC2] text-base p-0 h-0 ml-1" variant="link">
+        <Button className="text-[#6C5CC2] text-base sm:text-base p-0 h-0 ml-1" variant="link">
           <span onClick={supriseMe}>Surprise me!</span>
         </Button>
       </Badge>

diff --git a/web/app/components/slogan.tsx b/web/app/components/slogan.tsx
@@ -10,7 +10,7 @@ export default function Slogan() {
   return (
     <h1
       className={cn(
-        'text-transparent sm:p-0 p-2 sm:max-w-[28rem] max-w-[20rem] sm:min-w-[28rem] min-w-[20rem] h-[20rem] sm:mb-0 sm:w-1/4 bg-clip-text bg-gradient-to-br from-[#5CF825] via-[#0D9A9A] to-[#FA00FF] text-4xl sm:text-6xl',
+        'text-transparent sm:max-w-[28rem] p-1 w-full sm:min-w-[28rem] min-w-[20rem] h-[13rem] sm:h-[10rem] md:h-[13rem] xl:h-[20rem] sm:mb-0 sm:w-1/4 bg-clip-text bg-gradient-to-br from-[#5CF825] via-[#0D9A9A] to-[#FA00FF] text-4xl md:text-5xl 2xl:text-6xl',
         spaceGrotesk.className
       )}
     >

diff --git a/web/app/components/trending-topics.tsx b/web/app/components/trending-topics.tsx
@@ -6,7 +6,6 @@ import Link from 'next/link'
 
 import { api } from '@/library/api'
 import { Skeleton } from '@/components/ui/skeleton'
-import { Button } from '@/components/ui/button'
 
 const TRENDING_TOPICS = 5
 
@@ -22,24 +21,25 @@ export default function TrendingTopics() {
   }, [])
 
   return (
-    <div className="flex flex-col gap-y-6 sm:gap-y-2 mt-10 px-2">
+    <div className="flex flex-col gap-y-8 sm:gap-y-4">
       {trendingTopics.length > 0
         ? trendingTopics.map((topic) => (
-            <div key={topic} className="flex flex-row items-center mt-2 gap-x-2">
+            <div
+              key={topic}
+              className="flex flex-col items-start gap-y-1 sm:flex-row sm:items-center gap-x-2"
+            >
               <span className="text-2xl">
-                {Math.random() < 0.7 ? <IoMdTrendingUp /> : <IoMdTrendingDown />}
+                {Math.random() < 0.6 ? <IoMdTrendingUp /> : <IoMdTrendingDown />}
               </span>
-              <Button variant="link" className="text-base h-0 p-0" asChild>
-                <Link href={{ pathname: '/search', query: { query: topic }}} className="font-normal">
-                  {topic}
-                </Link>
-              </Button>
+              <Link href={{ pathname: '/search', query: { query: topic } }} className="font-normal">
+                {topic}
+              </Link>
             </div>
           ))
         : [...Array(TRENDING_TOPICS)].map((_, i) => (
-            <div className="flex flex-row gap-x-2 gap-y-6 sm:gap-y-0 mt-2" key={i}>
+            <div className="flex w-full flex-col sm:flex-row gap-2 sm:gap-y-0" key={i}>
               <Skeleton className="w-6 h-6 rounded-full" />
-              <Skeleton className="w-56 sm:w-[36rem] h-6 rounded-full" />
+              <Skeleton className="w-full sm:h-6 h-20 rounded-md" />
             </div>
           ))}
     </div>

diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -4,7 +4,6 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import { Analytics } from '@vercel/analytics/react'
 
-import { Toaster } from '@/components/ui/toaster'
 import Providers from './providers'
 import Icon from '@/public/favicon.ico'
 import Logo from '@/components/layout/logo'
@@ -27,7 +26,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <Actions />
           {children}
         </Providers>
-        <Toaster />
         <Analytics />
       </body>
     </html>

diff --git a/web/app/page.tsx b/web/app/page.tsx
@@ -1,15 +1,21 @@
+import { Space_Grotesk } from 'next/font/google'
+
 import Slogan from './components/slogan'
 import SearchForm from './components/search-form'
 import TrendingTopics from './components/trending-topics'
+import { cn } from '@/library/utilities'
+
+const spaceGrotesk = Space_Grotesk({ subsets: ['latin'] })
 
-export default async function Home() {
+export default function Home() {
   return (
-    <main className="h-screen flex justify-center flex-col items-center sm:mt-0 mt-16">
-      <div className="flex items-center sm:justify-center sm:flex-row flex-col gap-x-6">
+    <main className="flex w-full sm:justify-center flex-col gap-y-8 sm:gap-y-6 items-center px-10 pb-10 pt-28">
+      <div className="flex lg:w-3/4 xl:w-3/5 items-center gap-y-4 md:gap-y-6 sm:justify-between lg:flex-row flex-col gap-x-6">
         <Slogan />
         <SearchForm />
       </div>
-      <div className="w-full flex justify-center">
+      <div className="w-full lg:w-3/4 xl:w-3/5 flex flex-col justify-center gap-y-4">
+        <h1 className={cn('text-xl', spaceGrotesk.className)}>Trending queries</h1>
         <TrendingTopics />
       </div>
     </main>

diff --git a/web/app/providers.tsx b/web/app/providers.tsx
@@ -5,7 +5,7 @@ import { ThemeProvider } from 'next-themes'
 
 export default function Providers({ children }: { children: ReactNode }) {
   return (
-    <ThemeProvider attribute="class" storageKey="theme" defaultTheme="light" enableSystem>
+    <ThemeProvider attribute="class" storageKey="theme" enableSystem>
       {children}
     </ThemeProvider>
   )

diff --git a/web/app/search/components/loading.tsx b/web/app/search/components/loading.tsx
@@ -1,17 +1,24 @@
 import TextTransition, { presets } from 'react-text-transition'
 import { CgSpinner } from 'react-icons/cg'
+import { useEffect, useState } from 'react'
+import { Space_Grotesk } from 'next/font/google'
 
 import { getFieldMetadata, getContextMetadata as getContextMetadata } from '@/library/metadata'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
-import { useEffect, useState } from 'react'
+import { cn } from '@/library/utilities'
+import type { PredictedMetadata } from '@/library/api'
+
+const spaceGrotesk = Space_Grotesk({ subsets: ['latin'] })
 
 const TEXTS = ['Mapping data', 'Looking for societal benefit', 'Analyzing datasets']
 
 export default function Loading({
+  query,
   predictedQuery
 }: {
-  predictedQuery: { api: string; field: string; context: string; input: string }
+  query: string
+  predictedQuery: PredictedMetadata
 }) {
   const [index, setIndex] = useState(0)
 
@@ -27,36 +34,38 @@ export default function Loading({
   return (
     <div className="flex h-screen p-10 flex-col items-center justify-center gap-y-4">
       <CgSpinner fontSize={52} className="animate-spin -mt-20 text-primary" />
-      <h2 className="text-4xl font-bold transition-colors duration-3000">
-        <TextTransition springConfig={presets.default}>
+      <h2
+        className={cn(
+          'md:text-5xl text-4xl text-center font-semibold transition-colors duration-3000',
+          spaceGrotesk.className
+        )}
+      >
+        <TextTransition className="mt-1 mb-4 sm:mb-0" springConfig={presets.gentle}>
           {TEXTS[index % TEXTS.length]}
         </TextTransition>
       </h2>
-      <p className="text-center text-lg px-4 max-w-[28rem] mt-1">
+      <p className="text-center mt-4 sm:mt-0 text-lg max-w-[28rem] text-muted-foreground">
         Please be patient while the best resources are picked across different sources.
         <br />
       </p>
+      <Badge
+        className="text-base overflow-hidden text-center sm:max-w-[70%] lg:max-w-[45%] font-normal text-foreground bg-neutral-400/10 dark:bg-[#202020]/40 p-2"
+        variant="outline"
+      >
+        {query}
+      </Badge>
       {predictedQuery.input ? (
-        <>
-          <Badge
-            className="text-base font-normal text-foreground bg-neutral-400/10 dark:bg-[#202020]/40 p-6 md:py-1 md:px-3"
-            variant="outline"
-          >
-            {predictedQuery.input}
-          </Badge>
-          <div className="flex flex-row items-center justify-center gap-x-4">
-            {getContextMetadata(predictedQuery.context)}
-            {getFieldMetadata(predictedQuery.field)}
-          </div>
-        </>
+        <div className="flex flex-row items-center justify-center gap-x-4">
+          {getContextMetadata(predictedQuery.context)}
+          {getFieldMetadata(predictedQuery.field)}
+        </div>
       ) : (
-        <>
-          <Skeleton className="rounded-full h-8 w-96" />
+        <div className="flex flex-col gap-y-4 items-center w-full">
           <div className="flex flex-row items-center justify-center gap-x-4">
             <Skeleton className="rounded-full h-8 w-32" />
             <Skeleton className="rounded-full h-8 w-32" />
           </div>
-        </>
+        </div>
       )}
     </div>
   )