mobile nudges

supabase · Dec 4, 2023 · 4de239e · 4de239e
1 parent 46d545d
commit 4de239e
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 52 deletions.
diff --git a/website/components/layouts/Footer.tsx b/website/components/layouts/Footer.tsx
@@ -8,17 +8,16 @@ export const links = [
 ]
 
 const Footer = () => (
-  <footer
-    role="menu"
-    className="container border-t py-4 w-full px-4 flex justify-between"
-  >
-    <ul className="flex items-center gap-4 text-xs md:text-sm">
-      {links.map((link, index) => (
-        <li key={index}>
-          <Link href={link.url}>{link.title}</Link>
-        </li>
-      ))}
-    </ul>
+  <footer role="menu" className="container w-full flex justify-between">
+    <div className="border-t w-full py-4">
+      <ul className="grid md:flex items-center gap-4 text-xs md:text-sm">
+        {links.map((link, index) => (
+          <li key={index}>
+            <Link href={link.url}>{link.title}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
   </footer>
 )
 

diff --git a/website/components/layouts/Layout.tsx b/website/components/layouts/Layout.tsx
@@ -19,9 +19,7 @@ const Layout = ({
       <main
         className={cn(
           'flex flex-col flex-1 w-full mt-8',
-          containerWidth === 'md'
-            ? 'max-w-4xl 2xl:max-w-3xl px-4 mx-auto'
-            : 'px-4'
+          containerWidth === 'md' ? 'max-w-4xl 2xl:max-w-3xl mx-auto' : ''
         )}
       >
         {children}

diff --git a/website/components/layouts/Navbar.tsx b/website/components/layouts/Navbar.tsx
@@ -166,26 +166,6 @@ const Navbar = () => {
           </div>
           <div className="flex items-center gap-2 sm:gap-4 pl-4 border-l dark:border-slate-700">
             <ThemeSwitcher />
-
-            <Link
-              href="https://github.com/supabase/dbdev"
-              className="transition opacity-60 hover:opacity-100"
-            >
-              <div className="dark:text-white">
-                <svg
-                  viewBox="0 0 96 96"
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="w-4 h-4"
-                >
-                  <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </div>
-            </Link>
           </div>
         </div>
       </nav>

diff --git a/website/components/ui/Link.tsx b/website/components/ui/Link.tsx
@@ -10,7 +10,7 @@ const Link = forwardRef<ElementRef<typeof NextLink>, LinkProps>(
       <NextLink
         ref={ref}
         className={cn(
-          'text-blue-700 hover:text-blue-600 hover:underline transition duration-200',
+          'underline hover:decoration-2 transition duration-200',
           className
         )}
         {...props}

diff --git a/website/components/ui/Tabs.tsx b/website/components/ui/Tabs.tsx
@@ -40,10 +40,7 @@ const TabsContent = forwardRef<
   ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Content
-    className={cn(
-      'mt-2 rounded-md border border-slate-200 dark:border-slate-700 p-6',
-      className
-    )}
+    className={cn('mt-2 py-6 lg:pr-12', className)}
     {...props}
     ref={ref}
   />

diff --git a/website/components/ui/typography/A.tsx b/website/components/ui/typography/A.tsx
@@ -6,7 +6,7 @@ export interface AProps extends ComponentPropsWithoutRef<'a'> {}
 const A = forwardRef<HTMLAnchorElement, AProps>(
   ({ className, children, ...props }) => (
     <a
-      className={cn('tracking-tight dark:text-white line-break', className)}
+      className={cn('tracking-tight dark:text-white break-words', className)}
       {...props}
     >
       {children}

diff --git a/website/pages/[handle]/[package].tsx b/website/pages/[handle]/[package].tsx
@@ -70,8 +70,8 @@ create extension "${pkg?.package_name ?? 'Loading...'}"
             {pkg && <CopyButton getValue={() => pkg.package_name} />}
           </div>
 
-          <div className="flex items-center gap-1 text-slate-700 dark:text-slate-400">
-            <span>{pkg?.latest_version ?? '0.0.0'}</span>
+          <div className="flex items-center gap-2 text-slate-600 dark:text-slate-400 mt-4">
+            <span className="font-mono">v{pkg?.latest_version ?? '0.0.0'}</span>
             <span>&bull;</span>
             <span>
               Created {pkg ? dayjs(pkg.created_at).fromNow() : 'Loading...'}
@@ -136,7 +136,7 @@ create extension "${pkg?.package_name ?? 'Loading...'}"
 
                 <ol role="list" className="list-decimal list-inside">
                   <li className="dark:text-white">
-                    <Link href="/installer" className="dark:text-blue-400">
+                    <Link href="/installer">
                       Install the <code>dbdev</code> package manager
                     </Link>
                   </li>

diff --git a/website/pages/index.tsx b/website/pages/index.tsx
@@ -23,8 +23,8 @@ const IndexPage: NextPageWithLayout = ({}) => {
         <title>dbdev | The Database Package Manager</title>
       </Head>
 
-      <div className="mx-auto container px-6 py-16 sm:py-32 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:pt-40 lg:pb-24">
-        <div className="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
+      <div className="mx-auto container py-8 sm:py-32 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:pt-40 lg:pb-24">
+        <div className="mx-auto max-w-2xl lg:mx-0 lg:flex-auto md:text-center lg:text-left">
           <h1
             className="text-2xl font-bold -translate-y-10 sm:text-4xl md:text-6xl
             leading-tight tracking-tighter lg:leading-[1.125]"
@@ -44,19 +44,18 @@ const IndexPage: NextPageWithLayout = ({}) => {
               Trusted Language Extensions
             </a>
           </p>
-          <div className="flex flex-col sm:flex-row md:items-center mt-6 gap-4">
+          <div className="flex flex-col sm:flex-row md:items-center mt-6 gap-4 md:justify-center lg:justify-start">
             <Button variant="default" asChild>
               <Link href="/installer">Getting started</Link>
             </Button>
-            <Button asChild variant="outline">
+            <Button asChild variant="secondary">
               <a href="https://supabase.github.io/dbdev/" target="blank">
                 Documentation
               </a>
             </Button>
           </div>
         </div>
-        <div className="mt-4 lg:-mt-16 lg:flex-shrink-0">
-          {/* Getting started section */}
+        <div className="mt-4 md:mt-12 lg:-mt-16 lg:flex-shrink-0 md:text-center lg:text-left">
           <div className="relative border inline-block px-4 pt-4 pb-4 md:pb-24 rounded-md justify-end">
             <div className="inline-block">
               <div>
@@ -114,10 +113,10 @@ select dbdev.install('olirice-index_advisor');
           </div>
         </div>
       </div>
-
-      <div className="flex flex-col justify-center pb-20 container border-t">
+      <hr />
+      <div className="container flex flex-col justify-center pb-20 ">
         {/* Popular packages section */}
-        <div className="mt-8 md:mt-20 space-y-4">
+        <div className="mt-6 md:mt-20 space-y-4">
           <h2 className="text-2xl font-bold tracking-tight">
             Popular packages
           </h2>