Finish redesign ✅

wotschofsky · Dec 7, 2024 · 7352492 · 7352492
1 parent 14a2ef6
commit 7352492
Show file tree

Hide file tree

Showing 14 changed files with 122 additions and 121 deletions.
diff --git a/app/(landing)/certs/page.tsx b/app/(landing)/certs/page.tsx
@@ -23,7 +23,7 @@ const CertsLandingPage: FC = () => {
         <h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
           Find certificate history for any domain
         </h1>
-        <div className="mx-auto max-w-4xl">
+        <div className="mx-auto max-w-2xl">
           <SearchForm subpage="certs" autofocus />
         </div>
       </section>

diff --git a/app/(landing)/map/page.tsx b/app/(landing)/map/page.tsx
@@ -23,7 +23,7 @@ const MapLandingPage: FC = () => {
         <h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
           Run DNS lookups across multiple regions
         </h1>
-        <div className="mx-auto max-w-4xl">
+        <div className="mx-auto max-w-2xl">
           <SearchForm subpage="map" autofocus />
         </div>
       </section>

diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx
@@ -24,7 +24,7 @@ const MainLandingPage: FC = () => {
         <h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
           Get details about any Domain
         </h1>
-        <div className="mx-auto max-w-4xl">
+        <div className="mx-auto max-w-2xl">
           <SearchForm autofocus />
         </div>
       </section>

diff --git a/app/(landing)/subdomains/page.tsx b/app/(landing)/subdomains/page.tsx
@@ -23,7 +23,7 @@ const SubdomainsLandingPage: FC = () => {
         <h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
           Find hidden subdomains for any domain
         </h1>
-        <div className="mx-auto max-w-4xl">
+        <div className="mx-auto max-w-2xl">
           <SearchForm subpage="subdomains" autofocus />
         </div>
       </section>

diff --git a/app/(landing)/whois/page.tsx b/app/(landing)/whois/page.tsx
@@ -23,7 +23,7 @@ const WhoisLandingPage: FC = () => {
         <h1 className="mb-8 scroll-m-20 pb-2 text-center text-2xl font-semibold tracking-tight first:mt-0 sm:text-3xl">
           Find WHOIS information for any domain
         </h1>
-        <div className="mx-auto max-w-4xl">
+        <div className="mx-auto max-w-2xl">
           <SearchForm subpage="whois" autofocus />
         </div>
       </section>

diff --git a/app/_components/header.tsx b/app/_components/header.tsx
@@ -15,40 +15,41 @@ type HeaderProps = {
 
 export const Header: FC<HeaderProps> = ({ showSearch }) => (
   <header className="w-full p-4 md:px-8">
-    <div className="flex items-center justify-between">
-      <div className="flex flex-1 items-center justify-start gap-8">
-        <Logo />
-        <div className="hidden md:block">
+    <div className="flex items-center justify-between gap-4 md:gap-6">
+      <div className="flex items-center justify-start gap-8">
+        <Logo textClassName="hidden sm:inline" />
+        <div className="hidden lg:block">
           <BookmarkletLink />
         </div>
       </div>
 
       {showSearch && (
-        <div className="max-w-xl flex-1">
+        <div className="w-full max-w-lg">
           <SearchForm autofocus={false} />
         </div>
       )}
 
-      <div className="flex flex-1 items-center justify-end gap-4">
-        <Button variant="ghost" asChild>
+      <div className="flex items-center justify-end md:gap-2">
+        <Button variant="ghost" asChild className="px-2">
           <a
             href="https://github.com/sponsors/wotschofsky"
             target="_blank"
             rel="noopener"
           >
             <HeartIcon className="mr-1 h-6 w-4 text-pink-600" />
-            <span>Sponsor</span>
+            <span className="sr-only md:not-sr-only">Sponsor</span>
           </a>
         </Button>
-        <Button variant="ghost" asChild>
+        <Button variant="ghost" asChild className="px-2">
           <a
             href="https://github.com/wotschofsky/domain-digger"
             target="_blank"
             rel="noopener"
           >
             <FaGithub className="mr-1 h-6 w-4" />
-            <span>Star</span>
-            <span className="sr-only">on GitHub</span>
+            <span className="hidden md:inline">
+              Star <span className="sr-only">on GitHub</span>
+            </span>
           </a>
         </Button>
         <ThemeMenu />

diff --git a/app/_components/logo.tsx b/app/_components/logo.tsx
@@ -3,11 +3,18 @@ import type { FC } from 'react';
 
 import LogoDark from '@/assets/logo-dark.svg';
 import LogoLight from '@/assets/logo-light.svg';
+import { cn } from '@/lib/utils';
 
-export const Logo: FC = () => (
+type LogoProps = {
+  textClassName?: string;
+};
+
+export const Logo: FC<LogoProps> = ({ textClassName }) => (
   <Link className="flex items-center gap-2" href="/" aria-label="Home Page">
-    <LogoDark className="inline h-6 dark:hidden" />
-    <LogoLight className="hidden h-6 dark:inline" />
-    Domain Digger
+    <LogoDark className="inline h-6 flex-shrink-0 dark:hidden" />
+    <LogoLight className="hidden h-6 flex-shrink-0 dark:inline" />
+    <span className={cn('whitespace-nowrap', textClassName)}>
+      Domain Digger
+    </span>
   </Link>
 );
diff --git a/app/_components/search-form.tsx b/app/_components/search-form.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useDebounce } from '@uidotdev/usehooks';
-import { Loader2Icon, SearchIcon } from 'lucide-react';
+import { useDebounce, useMeasure } from '@uidotdev/usehooks';
+import { SearchIcon } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import { toASCII } from 'punycode';
@@ -18,7 +18,6 @@ import {
 import { useHotkeys } from 'react-hotkeys-hook';
 import useSWRImmutable from 'swr/immutable';
 
-import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 
@@ -140,6 +139,7 @@ export const SearchForm: FC<SearchFormProps> = (props) => {
   const [suggestionsVisible, setSuggestionsVisible] = useState(false);
   const [ipDetailsOpen, setIpDetailsOpen] = useState(false);
 
+  const [measureRef, { width: inputWidth }] = useMeasure<HTMLFormElement>();
   const inputRef = useRef<HTMLInputElement>(null);
   useHotkeys(
     isAppleDevice() ? 'meta+k' : 'ctrl+k',
@@ -297,95 +297,88 @@ export const SearchForm: FC<SearchFormProps> = (props) => {
 
   return (
     <>
-      <form className="flex gap-3" onSubmit={handleSubmit}>
-        <div className="group relative flex-[3]">
-          {domain === initialValue ? (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img
-              className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2"
-              src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(initialValue)}`}
-              alt=""
-            />
-          ) : (
-            <SearchIcon className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-zinc-500 dark:text-zinc-400" />
-          )}
-
-          <Input
-            ref={inputRef}
-            name="domain"
-            className={cn('w-full !pl-9', {
-              'focus-visible:ring-destructive [&:not(:focus-visible)]:border-destructive':
-                isInvalid,
-            })}
-            type="text"
-            required
-            autoComplete="off"
-            placeholder="Search any domain, URL, email or IP"
-            aria-label="Domain"
-            value={domain}
-            onInput={handleInput}
-            onKeyDown={handleKeyDown}
-            onFocus={handleFocus}
-            onClick={handleFocus}
-            onBlur={() => {
-              setTimeout(() => {
-                setSuggestionsVisible(false);
-              }, 100);
-            }}
-            disabled={state !== FormStates.Initial}
-            autoFocus={props.autofocus}
+      <form ref={measureRef} className="relative" onSubmit={handleSubmit}>
+        {domain === initialValue ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2"
+            src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(initialValue)}`}
+            alt=""
           />
-
-          <ClientOnly>
-            <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 select-none items-center gap-1 rounded border border-zinc-200 bg-zinc-100 px-1.5 font-mono text-[10px] font-medium opacity-100 dark:border-zinc-700 dark:bg-zinc-800 sm:flex">
-              {isAppleDevice() ? (
-                <>
-                  <span className="text-xs">⌘</span>K
-                </>
-              ) : (
-                'ctrl+k'
-              )}
-            </kbd>
-          </ClientOnly>
-
-          {suggestionsVisible && suggestions && suggestions.length > 0 && (
-            <Card className="absolute left-0 top-full h-min p-1">
-              <ul>
-                {suggestions.map((value, index) => (
-                  <li
-                    key={value}
-                    className={cn(
-                      'flex cursor-pointer items-center rounded-lg px-2 py-1 text-sm hover:bg-black/5 dark:hover:bg-white/10',
-                      {
-                        'bg-black/5 dark:bg-white/10':
-                          selectedSuggestion === index,
-                      },
-                    )}
-                    onClick={() => handleSelectSuggestion(value)}
-                  >
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img
-                      className="mr-2 inline-block h-4 w-4"
-                      src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(value)}`}
-                      alt=""
-                    />
-                    {value}
-                  </li>
-                ))}
-              </ul>
-            </Card>
-          )}
-        </div>
-        <Button
-          className="flex-[1]"
-          type="submit"
+        ) : (
+          <SearchIcon className="pointer-events-none absolute left-3 top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-zinc-500 dark:text-zinc-400" />
+        )}
+
+        <Input
+          ref={inputRef}
+          name="domain"
+          className={cn('w-full !pl-9', {
+            'focus-visible:ring-destructive [&:not(:focus-visible)]:border-destructive':
+              isInvalid,
+          })}
+          type="text"
+          required
+          autoComplete="off"
+          placeholder={
+            (inputWidth || Infinity) >= 300
+              ? 'Search any domain, URL, email or IP'
+              : 'Search'
+          }
+          aria-label="Domain"
+          enterKeyHint="go"
+          value={domain}
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
+          onFocus={handleFocus}
+          onClick={handleFocus}
+          onBlur={() => {
+            setTimeout(() => {
+              setSuggestionsVisible(false);
+            }, 100);
+          }}
           disabled={state !== FormStates.Initial}
-        >
-          {state === FormStates.Submitting && (
-            <Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
-          )}
-          Lookup
-        </Button>
+          autoFocus={props.autofocus}
+        />
+
+        <ClientOnly>
+          <kbd className="pointer-events-none absolute right-3 top-1/2 hidden h-5 -translate-y-1/2 select-none items-center gap-1 rounded border border-zinc-200 bg-zinc-100 px-1.5 font-mono text-[10px] font-medium opacity-100 dark:border-zinc-700 dark:bg-zinc-800 sm:flex">
+            {isAppleDevice() ? (
+              <>
+                <span className="text-xs">⌘</span>K
+              </>
+            ) : (
+              'ctrl+k'
+            )}
+          </kbd>
+        </ClientOnly>
+
+        {suggestionsVisible && suggestions && suggestions.length > 0 && (
+          <Card className="absolute left-0 top-full z-10 h-min p-1">
+            <ul>
+              {suggestions.map((value, index) => (
+                <li
+                  key={value}
+                  className={cn(
+                    'flex cursor-pointer items-center rounded-lg px-2 py-1 text-sm hover:bg-black/5 dark:hover:bg-white/10',
+                    {
+                      'bg-black/5 dark:bg-white/10':
+                        selectedSuggestion === index,
+                    },
+                  )}
+                  onClick={() => handleSelectSuggestion(value)}
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    className="mr-2 inline-block h-4 w-4"
+                    src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(value)}`}
+                    alt=""
+                  />
+                  {value}
+                </li>
+              ))}
+            </ul>
+          </Card>
+        )}
       </form>
 
       <IpDetailsModal

diff --git a/app/_components/theme-menu.tsx b/app/_components/theme-menu.tsx
@@ -19,8 +19,8 @@ export const ThemeMenu: FC = () => {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="sm" className="w-9 px-0">
-          <SunMediumIcon className="rotate-0 scale-100 dark:-rotate-90 dark:scale-0" />
-          <MoonIcon className="absolute rotate-90 scale-0 dark:rotate-0 dark:scale-100" />
+          <SunMediumIcon className="absolute block h-4 w-4 dark:hidden" />
+          <MoonIcon className="absolute hidden h-4 w-4 dark:block" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>

diff --git a/app/lookup/[domain]/_components/results-tabs.tsx b/app/lookup/[domain]/_components/results-tabs.tsx
@@ -68,7 +68,7 @@ export const ResultsTabs: FC<ResultsTabsProps> = ({ domain }) => {
   ]);
 
   return (
-    <div className="group mb-6 border-b border-zinc-200 text-center text-sm font-medium text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
+    <div className="group mb-6 border-b border-zinc-950/10 text-center text-sm font-medium text-zinc-500">
       <ul className="-mb-px flex flex-wrap">
         <SingleTab
           label="DNS"

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils';
 const buttonVariants = cva(
   [
     // Base
-    'relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold',
+    'relative isolate inline-flex items-center justify-center gap-x-1 rounded-lg border text-base/6 font-semibold',
     // Sizing
     'px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6',
     // Focus

diff --git a/components/ui/input.tsx b/components/ui/input.tsx
@@ -41,9 +41,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               '[&::-webkit-datetime-edit-meridiem-field]:p-0',
             ],
             // Basic layout
-            'relative block w-full appearance-none rounded-lg px-3.5 py-2.5 sm:px-3 sm:py-1.5',
+            'relative block w-full appearance-none rounded-lg px-3 py-1.5',
             // Typography
-            'text-base/6 text-zinc-950 placeholder:text-zinc-500 dark:text-white sm:text-sm/6',
+            'text-sm/6 text-zinc-950 placeholder:text-zinc-500 dark:text-white',
             // Border
             'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
             // Background color

diff --git a/components/ui/select.tsx b/components/ui/select.tsx
@@ -29,8 +29,8 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
       ref={ref}
       className={cn(
-        'relative block w-full appearance-none rounded-lg px-3.5 py-2.5 sm:px-3 sm:py-1.5',
-        'text-base/6 text-zinc-950 placeholder:text-zinc-500 dark:text-white sm:text-sm/6',
+        'relative block w-full appearance-none rounded-lg px-3 py-1.5',
+        'text-sm/6 text-zinc-950 placeholder:text-zinc-500 dark:text-white',
         'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
         'bg-transparent dark:bg-white/5',
         'focus:outline-none',