feat: delete memories and theme issues across the app (#449)10-02-fix_ui_theme_issues_across_the_app

# Add document deletion functionality and fix UI theme issues

This PR adds the ability to delete documents and their associated memories across all content card types (Google Docs, Notes, Tweets, and Websites). Each card now includes:

- A delete button that appears on hover
- A confirmation dialog to prevent accidental deletions
- Proper event handling to avoid triggering card clicks when using delete controls

Additionally, this PR fixes various UI theme issues:

- Updates button styling in the ActionButtons component
- Improves theme consistency by replacing hardcoded colors with theme variables
- Fixes text color issues in login page components
- Ensures proper color contrast in various UI elements

The masonry layout was also improved to properly re-render when documents are removed.

2 files changed, 64 insertions, 61 deletions

diff --git a/apps/web/components/views/add-memory/action-buttons.tsx b/apps/web/components/views/add-memory/action-buttons.tsx
index fc901ba9..3f93fe17 100644
--- a/apps/web/components/views/add-memory/action-buttons.tsx
+++ b/apps/web/components/views/add-memory/action-buttons.tsx
@@ -1,67 +1,67 @@
-import { Button } from '@repo/ui/components/button';
-import { Loader2, type LucideIcon } from 'lucide-react';
-import { motion } from 'motion/react';
+import { Button } from "@repo/ui/components/button"
+import { Loader2, type LucideIcon } from "lucide-react"
+import { motion } from "motion/react"
 
 interface ActionButtonsProps {
-  onCancel: () => void;
-  onSubmit?: () => void;
-  submitText: string;
-  submitIcon?: LucideIcon;
-  isSubmitting?: boolean;
-  isSubmitDisabled?: boolean;
-  submitType?: 'button' | 'submit';
-  className?: string;
+	onCancel: () => void
+	onSubmit?: () => void
+	submitText: string
+	submitIcon?: LucideIcon
+	isSubmitting?: boolean
+	isSubmitDisabled?: boolean
+	submitType?: "button" | "submit"
+	className?: string
 }
 
 export function ActionButtons({
-  onCancel,
-  onSubmit,
-  submitText,
-  submitIcon: SubmitIcon,
-  isSubmitting = false,
-  isSubmitDisabled = false,
-  submitType = 'submit',
-  className = '',
+	onCancel,
+	onSubmit,
+	submitText,
+	submitIcon: SubmitIcon,
+	isSubmitting = false,
+	isSubmitDisabled = false,
+	submitType = "submit",
+	className = "",
 }: ActionButtonsProps) {
-  return (
-    <div className={`flex gap-3 order-1 sm:order-2 justify-end ${className}`}>
-      <Button
-        className="hover:bg-foreground/10 border-none flex-1 sm:flex-initial"
-        onClick={onCancel}
-        type="button"
-        variant="ghost"
-      >
-        Cancel
-      </Button>
+	return (
+		<div className={`flex gap-3 order-1 sm:order-2 justify-end ${className}`}>
+			<Button
+				className="hover:bg-foreground/10 border-none flex-1 sm:flex-initial"
+				onClick={onCancel}
+				type="button"
+				variant="ghost"
+			>
+				Cancel
+			</Button>
 
-      <motion.div
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
-        className="flex-1 sm:flex-initial"
-      >
-        <Button
-          className="bg-foreground hover:bg-foreground/20 border-foreground/20 w-full"
-          disabled={isSubmitting || isSubmitDisabled}
-          onClick={submitType === 'button' ? onSubmit : undefined}
-          type={submitType}
-        >
-          {isSubmitting ? (
-            <>
-              <Loader2 className="h-4 w-4 animate-spin mr-2" />
-              {submitText.includes('Add')
-                ? 'Adding...'
-                : submitText.includes('Upload')
-                  ? 'Uploading...'
-                  : 'Processing...'}
-            </>
-          ) : (
-            <>
-              {SubmitIcon && <SubmitIcon className="h-4 w-4 mr-2" />}
-              {submitText}
-            </>
-          )}
-        </Button>
-      </motion.div>
-    </div>
-  );
+			<motion.div
+				whileHover={{ scale: 1.05 }}
+				whileTap={{ scale: 0.95 }}
+				className="flex-1 sm:flex-initial"
+			>
+				<Button
+					className="w-full"
+					disabled={isSubmitting || isSubmitDisabled}
+					onClick={submitType === "button" ? onSubmit : undefined}
+					type={submitType}
+				>
+					{isSubmitting ? (
+						<>
+							<Loader2 className="h-4 w-4 animate-spin mr-2" />
+							{submitText.includes("Add")
+								? "Adding..."
+								: submitText.includes("Upload")
+									? "Uploading..."
+									: "Processing..."}
+						</>
+					) : (
+						<>
+							{SubmitIcon && <SubmitIcon className="h-4 w-4 mr-2" />}
+							{submitText}
+						</>
+					)}
+				</Button>
+			</motion.div>
+		</div>
+	)
 }
diff --git a/apps/web/components/views/add-memory/index.tsx b/apps/web/components/views/add-memory/index.tsx
index a78e7629..d9c6aef8 100644
--- a/apps/web/components/views/add-memory/index.tsx
+++ b/apps/web/components/views/add-memory/index.tsx
@@ -88,7 +88,10 @@ export function AddMemoryView({
 	const [newProjectName, setNewProjectName] = useState("")
 
 	// Check memory limits
-	const { data: memoriesCheck } = fetchMemoriesFeature(autumn, !autumn.isLoading)
+	const { data: memoriesCheck } = fetchMemoriesFeature(
+		autumn,
+		!autumn.isLoading,
+	)
 
 	const memoriesUsed = memoriesCheck?.usage ?? 0
 	const memoriesLimit = memoriesCheck?.included_usage ?? 0
@@ -757,7 +760,7 @@ export function AddMemoryView({
 												{({ state, handleChange, handleBlur }) => (
 													<>
 														<Input
-															className={`bg-black/5 border-black/10 text-black ${
+															className={`bg-black/5 border-black/10 ${
 																addContentMutation.isPending ? "opacity-50" : ""
 															}`}
 															disabled={addContentMutation.isPending}