Add some design for the save button.

Author: nedtwigg

src/components/PopupRoot.tsx

@@ -209,12 +209,13 @@ export function PopupRoot({ drafts }: PopupRootProps) {
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-200">
-
             {filteredDrafts.length === 0 && (
               <tr>
                 <td colSpan={2}>
                   {drafts.length === 0 && <EmptyState />}
-                  {drafts.length > 0 && <NoMatchesState onClearFilters={clearFilters} />}
+                  {drafts.length > 0 && (
+                    <NoMatchesState onClearFilters={clearFilters} />
+                  )}
                 </td>
               </tr>
             )}
@@ -233,7 +234,7 @@ export function PopupRoot({ drafts }: PopupRootProps) {
       </div>
 
       {/* Footer shelf */}
-      <div className="border-t border-gray-300 bg-gray-50 px-3 py-2 text-xs text-gray-600">
+      <div className="border-gray-300 border-t bg-gray-50 px-3 py-2 text-gray-600 text-xs">
         <div className="flex items-center justify-between">
           <div>
             built with 🤖 by{" "}

src/components/design.tsx

@@ -7,6 +7,7 @@ import {
   MailCheck,
   MessageSquareDashed,
   Monitor,
+  Save,
   Settings,
   TextSelect,
   Trash2,
@@ -21,6 +22,7 @@ export const typeIcons = {
   image: Image,
   link: Link,
   open: Monitor,
+  save: Save,
   sent: MailCheck,
   settings: Settings,
   text: TextSelect,
@@ -37,6 +39,7 @@ export const typeColors = {
   image: "bg-purple-50 text-purple-700",
   link: "bg-blue-50 text-blue-700",
   open: "bg-cyan-50 text-cyan-700",
+  save: "bg-indigo-50 text-indigo-700",
   sent: "bg-green-50 text-green-700",
   settings: "bg-gray-50 text-gray-700",
   text: "bg-gray-50 text-gray-700",