refactor: fix history modal header & popover headers

packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx

@@ -2,6 +2,7 @@ import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobi
 import { classNames } from '@standardnotes/snjs'
 import { ReactNode } from 'react'
 import Portal from '../Portal/Portal'
+import MobileModalAction from '../Shared/MobileModalAction'
 import { useModalAnimation } from '../Shared/useModalAnimation'
 
 const DisableScroll = () => {
@@ -36,12 +37,12 @@ const MobilePopoverContent = ({
         ref={setPopoverElement}
         className="fixed top-0 left-0 z-modal flex h-full w-full flex-col bg-default pt-safe-top pb-safe-bottom"
       >
-        <div className="flex items-center justify-between border-b border-border py-2.5 px-3 text-base">
+        <div className="grid w-full grid-cols-[0.35fr_1fr_0.35fr] gap-2 border-b border-border py-1.5 px-2 text-base">
           <div />
-          <div className="font-semibold">{title}</div>
-          <button className="font-semibold text-info active:shadow-none active:outline-none" onClick={requestClose}>
+          <div className="flex items-center justify-center font-semibold">{title}</div>
+          <MobileModalAction type="primary" slot="right" action={requestClose}>
             Done
-          </button>
+          </MobileModalAction>
         </div>
         <div className={classNames('h-full overflow-y-auto', className)}>{children}</div>
       </div>