feat: frontend redesign

src/components/EditLinkModal.tsx

@@ -52,44 +52,36 @@ export function EditLinkModal({ link, onClose, onSaved }: Props) {
   return (
     <Modal open={open} onClose={onClose} title="Edit link">
       {/* Short code is permanent — shown read-only so existing shares keep working. */}
-      <div className="-mt-2 mb-4 flex items-center justify-between rounded-2xl border-[1.5px] border-line bg-surface-2 px-4 py-3">
+      <div className="-mt-2 mb-4 flex items-center justify-between gap-3 rounded-xl border border-line bg-surface-2 px-4 py-3">
         <div className="min-w-0">
-          <p className="text-[11px] font-medium uppercase tracking-wide text-muted">
-            Short link
-          </p>
-          <p className="truncate font-mono text-base font-bold text-ink">
+          <p className="text-[11px] uppercase tracking-wide text-muted">Short link</p>
+          <p className="truncate font-mono text-sm font-semibold text-ink">
             {shortUrl(link.code)}
           </p>
         </div>
-        <span className="shrink-0 rounded-full border-[1.5px] border-line px-2 py-0.5 text-[10px] font-medium text-muted">
-          can't change
+        <span className="shrink-0 rounded-full border border-line px-2 py-0.5 text-[10px] text-muted">
+          permanent
         </span>
       </div>
 
-      <label className="mb-2 block text-sm font-semibold text-ink">
+      <label className="mb-1.5 block text-[13px] font-medium text-muted">
         Destination URL
       </label>
-      <div
-        className={`flex items-center gap-2 rounded-2xl border-[1.5px] bg-surface-2 px-3.5 transition-colors ${
-          error ? "border-red-400/70" : "border-line"
+      <input
+        autoFocus
+        value={draft}
+        onChange={(e) => {
+          setDraft(e.target.value);
+          if (error) setError(null);
+        }}
+        onKeyDown={(e) => e.key === "Enter" && save()}
+        spellCheck={false}
+        className={`h-11 w-full rounded-xl border bg-surface-2 px-3.5 font-mono text-sm text-ink outline-none transition-colors ${
+          error ? "border-red-400" : "border-line focus:border-[var(--ink)]"
         }`}
-      >
-        <span className="text-base opacity-50">🔗</span>
-        <input
-          autoFocus
-          value={draft}
-          onChange={(e) => {
-            setDraft(e.target.value);
-            if (error) setError(null);
-          }}
-          onKeyDown={(e) => e.key === "Enter" && save()}
-          spellCheck={false}
-          className="h-12 w-full bg-transparent font-mono text-sm text-ink outline-none"
-        />
-      </div>
+      />
       <p className="mt-2 text-xs text-muted">
-        Where <span className="font-mono text-ink">{shortUrl(link.code)}</span>{" "}
-        sends visitors — currently {prettyHost(link.longUrl)}.
+        Currently points to {prettyHost(link.longUrl)}.
       </p>
 
       <AnimatePresence>
@@ -98,7 +90,7 @@ export function EditLinkModal({ link, onClose, onSaved }: Props) {
             initial={{ opacity: 0, y: -4 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0 }}
-            className="mt-3 text-sm font-medium text-red-500"
+            className="mt-3 text-[13px] font-medium text-red-500"
           >
             {error}
           </motion.p>