fix: frontend bugs

Author: SharzyL

frontend/components/ErrorModal.tsx

@@ -1,6 +1,6 @@
 import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "./ui/index.js"
 import type { ModalProps } from "./ui/index.js"
-import React, { useState } from "react"
+import { useState } from "react"
 import { ErrorWithTitle } from "../utils/errors.js"
 
 export interface ErrorState {
@@ -45,7 +45,7 @@ export function useErrorModal() {
             <p>{errorState.content}</p>
           </ModalBody>
           <ModalFooter>
-            <Button color="danger" variant="light" onPress={onClose}>
+            <Button variant="solid" onPress={onClose}>
               Close
             </Button>
           </ModalFooter>

frontend/components/UploadedPanel.tsx

@@ -47,7 +47,7 @@ export function UploadedPanel({
           <div className={"min-h-[5rem] w-full relative"}>
             <CircularProgress
               aria-label={"Loading..."}
-              value={loadingProgress}
+              value={loadingProgress ?? 50}
               className={"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"}
             />
           </div>

frontend/components/ui/CircularProgress.tsx

@@ -8,26 +8,24 @@ export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivEleme
 export function CircularProgress({ value, label, className = "", ...rest }: CircularProgressProps) {
   const radius = 20
   const circumference = 2 * Math.PI * radius
-  const progress = value !== undefined ? ((100 - value) / 100) * circumference : 0
+  const progress = value !== undefined ? ((100 - value) / 100) * circumference : circumference * 0.25
 
   return (
     <div className={`inline-flex flex-col items-center gap-2 ${className}`} {...rest}>
       <svg width="48" height="48" viewBox="0 0 48 48" className="animate-spin">
         <circle cx="24" cy="24" r={radius} fill="none" stroke="currentColor" strokeWidth="4" opacity="0.25" />
-        {value !== undefined && (
-          <circle
-            cx="24"
-            cy="24"
-            r={radius}
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="4"
-            strokeDasharray={circumference}
-            strokeDashoffset={progress}
-            strokeLinecap="round"
-            transform="rotate(-90 24 24)"
-          />
-        )}
+        <circle
+          cx="24"
+          cy="24"
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="4"
+          strokeDasharray={circumference}
+          strokeDashoffset={progress}
+          strokeLinecap="round"
+          transform="rotate(-90 24 24)"
+        />
       </svg>
       {label && <span className="text-sm">{label}</span>}
     </div>

frontend/components/ui/Modal.tsx

@@ -30,7 +30,7 @@ export function Modal({ isOpen, onClose, children, ...rest }: ModalProps) {
 export function ModalContent({ children, className = "", ...rest }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={`bg-gray-900 border border-gray-800 rounded-xl shadow-xl max-w-md w-full mx-4 ${className}`}
+      className={`bg-content1 border border-divider rounded-xl shadow-xl max-w-md w-full mx-4 ${className}`}
       onClick={(e) => e.stopPropagation()}
       {...rest}
     >
@@ -41,23 +41,23 @@ export function ModalContent({ children, className = "", ...rest }: React.HTMLAt
 
 export function ModalHeader({ children, className = "", ...rest }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={`px-6 py-4 border-b border-gray-800 ${className}`} {...rest}>
+    <div className={`px-4 pt-4 pb-2 text-lg font-semibold ${className}`} {...rest}>
       {children}
     </div>
   )
 }
 
 export function ModalBody({ children, className = "", ...rest }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={`px-6 py-4 ${className}`} {...rest}>
+    <div className={`px-4 py-2 text-sm text-default-500 ${className}`} {...rest}>
       {children}
     </div>
   )
 }
 
 export function ModalFooter({ children, className = "", ...rest }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className={`px-6 py-4 border-t border-gray-800 flex justify-end gap-2 ${className}`} {...rest}>
+    <div className={`px-4 pb-4 pt-4 flex justify-end gap-2 ${className}`} {...rest}>
       {children}
     </div>
   )

frontend/pages/DisplayPaste.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import chardet from "chardet"
 import { useErrorModal } from "../components/ErrorModal.js"
 import { DisplayPasteView } from "./DisplayPasteView.js"

frontend/pages/DisplayPasteView.tsx

@@ -124,7 +124,7 @@ export function DisplayPasteView(props: DisplayPasteViewProps) {
                 <div className={showFileContent ? "" : "h-[10em]"}>
                   {showFileContent ? (
                     <>
-                      <div className="text-foreground-600 mb-2 text-small flex flex-row gap-2">
+                      <div className="text-gray-500 mb-2 text-sm flex flex-row gap-2">
                         <span>{pasteFile?.name}</span>
                         <span>{`(${formatSize(pasteFile.size)})`}</span>
                         {forceShowBinary && (