fix: change styling changes with notes upload box

citruscai · Jul 7, 2024 · f335458 · f335458
1 parent 1df5aa2
commit f335458
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/components/notes/CreateWorksheetForm/UploadNotesPage/NotesUploadBox.tsx b/components/notes/CreateWorksheetForm/UploadNotesPage/NotesUploadBox.tsx
@@ -88,7 +88,7 @@ const NotesUploadBox: React.FC<NotesUploadBoxProps> = ({ onUploadSuccess }) => {
         dropzoneOptions={dropZoneConfig}
         className="relative bg-background rounded-lg p-4 border border-border theme-custom"
       >
-        <FileInput className="outline-dashed outline-1 outline-border text-foreground">
+        <FileInput className=" outline-1 outline-border text-foreground">
           <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full">
             <img src="/file-upload-icon.svg" alt="File upload icon" width={40} height={32} />
             <p className="mb-1 text-sm text-muted-foreground">

diff --git a/components/notes/CreateWorksheetForm/UploadNotesPage/UploadNotesStep.tsx b/components/notes/CreateWorksheetForm/UploadNotesPage/UploadNotesStep.tsx
@@ -7,7 +7,6 @@ import IconUpload from '@/components/ui/icons/IconUpload';
 import IconPaste from '@/components/ui/icons/IconPaste';
 import IconYoutube from '@/components/ui/icons/IconYoutube';
 
-
 interface UploadNotesStepProps {
   next: () => void;
 }
@@ -29,36 +28,36 @@ const UploadNotesStep: React.FC<UploadNotesStepProps> = ({ next }) => {
 
   return (
     <div className="flex h-screen w-full items-center justify-center bg-background">
-      <div className="mx-4 flex w-full max-w-4xl flex-col rounded-xl bg-card p-6 shadow-lg md:flex-row">
-        <div className="relative flex flex-1 flex-col items-center justify-center gap-4 rounded-xl bg-muted p-6 text-center">
+      <div className="mx-8 flex w-full max-w-5xl flex-col rounded-2xl bg-card p-8 shadow-2xl md:flex-row">
+        <div className="relative flex flex-1 flex-col items-center justify-center gap-6 rounded-2xl bg-muted p-8 text-center">
           {activeTab === 'upload' && <NotesUploadBox onUploadSuccess={handleUploadSuccess} />}
           {activeTab === 'youtube' && <YoutubeLink onLinkSubmit={handleLinkSubmit} />}
           {activeTab === 'text' && <TextPaste onTextSubmit={handleTextSubmit} />}
         </div>
-        <div className="flex flex-col items-center justify-center gap-4 p-6">
+        <div className="flex flex-col items-center justify-center gap-6 p-8">
           <Button
-            variant={activeTab === 'upload' ? 'primary' : 'ghost'}
+            variant={activeTab === 'upload' ? 'default' : 'ghost'}
             onClick={() => setActiveTab('upload')}
-            className="flex w-full flex-col items-center gap-2 rounded-xl p-4 hover:bg-muted"
+            className="flex w-full flex-col items-center justify-center gap-2 rounded-xl p-6 hover:bg-muted"
           >
-            <IconUpload className="h-8 w-8" />
-            <span>Upload Document</span>
+            <IconUpload className="h-10 w-10" />
+            Upload Document
           </Button>
           <Button
-            variant={activeTab === 'youtube' ? 'primary' : 'ghost'}
+            variant={activeTab === 'youtube' ? 'default' : 'ghost'}
             onClick={() => setActiveTab('youtube')}
-            className="flex w-full flex-col items-center gap-2 rounded-xl p-4 hover:bg-muted"
+            className="flex w-full flex-col items-center justify-center gap-2 rounded-xl p-6 hover:bg-muted"
           >
-            <IconYoutube className="h-8 w-8" />
-            <span>Paste YouTube Link</span>
+            <IconYoutube className="h-10 w-10" />
+            Paste YouTube Link
           </Button>
           <Button
-            variant={activeTab === 'text' ? 'primary' : 'ghost'}
+            variant={activeTab === 'text' ? 'default' : 'ghost'}
             onClick={() => setActiveTab('text')}
-            className="flex w-full flex-col items-center gap-2 rounded-xl p-4 hover:bg-muted"
+            className="flex w-full flex-col items-center justify-center gap-2 rounded-xl p-6 hover:bg-muted"
           >
-            <IconPaste className="h-8 w-8" />
-            <span>Paste Text</span>
+            <IconPaste className="h-10 w-10" />
+            Paste Text
           </Button>
         </div>
       </div>