feat: override the uppy css to change the default height

tumavideo · Jan 17, 2024 · d9c61cb · d9c61cb
1 parent aaf8d08
commit d9c61cb
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 24 deletions.
diff --git a/app/profile/referral-section.tsx b/app/profile/referral-section.tsx
@@ -142,8 +142,8 @@ export default function ReferralSection({
 
   return data ? (
     <div className="px-8 mb-4">
-      <h6 className="block text-xl font-semibold leading-6 text-gray-900">
-      Share, it’s all just a click away 💡
+      <h6 className="text-base block md:text-xl font-semibold leading-6 text-gray-900">
+        Share, it’s all just a click away 💡
       </h6>
       <div
         className={`icons mt-4 flex justify-${

diff --git a/app/profile/update-profile-form.tsx b/app/profile/update-profile-form.tsx
@@ -292,11 +292,13 @@ export default function UpdateProfileForm({ user }: { user: User }) {
               <p className="text-xs leading-5 text-gray-600 mb-4">
                 PDF, DOCX up to 10MB
               </p>
-              <UploadResume
-                id={id}
-                removeFile={removeFile}
-                addFile={setResume}
-              />
+              <div className="flex justify-center">
+                <UploadResume
+                  id={id}
+                  removeFile={removeFile}
+                  addFile={setResume}
+                />
+              </div>
             </div>
           </div>
         </div>

diff --git a/app/profile/upload-resume.tsx b/app/profile/upload-resume.tsx
@@ -1,21 +1,24 @@
 "use client";
 
 /* eslint-disable */
+import { showToast } from "@/utils/toast";
 import Uppy from "@uppy/core";
-import { Dashboard } from "@uppy/react";
-import Tus from "@uppy/tus";
-
 import "@uppy/core/dist/style.css";
 import "@uppy/dashboard/dist/style.css";
 import "@uppy/drag-drop/dist/style.css";
 import "@uppy/file-input/dist/style.css";
 import "@uppy/progress-bar/dist/style.css";
+import { Dashboard } from "@uppy/react";
+import Tus from "@uppy/tus";
 import { useMemo } from "react";
-import { showToast } from "@/utils/toast";
-
 export default function UploadResume({ id, removeFile, addFile }) {
   const uppy = useMemo(() => {
     const uppyInstance = new Uppy({
+      locale: {
+        strings: {
+          dropPasteFiles: "Upload your resume, %{browseFiles}",
+        },
+      },
       autoProceed: true,
       allowMultipleUploadBatches: false,
       debug: true,
@@ -63,17 +66,16 @@ export default function UploadResume({ id, removeFile, addFile }) {
 
     uppyInstance.on("complete", async (result) => {
       console.log("Resume from the result", result);
-      if(result.successful){
-      showToast(
-        "Upload complete!",
-        `We’ve uploaded these files: ${result.successful[0].name}`
-      );
-    }
-    else {
+      if (result.successful) {
+        showToast(
+          "Upload complete!",
+          `We’ve uploaded these files: ${result.successful[0].name}`
+        );
+      } else {
         showToast(
           "Upload failed!",
-          `Failed to upload files: ${result.successful[0].name}`
-          ,"error"
+          `Failed to upload files: ${result.successful[0].name}`,
+          "error"
         );
       }
     });
@@ -87,16 +89,17 @@ export default function UploadResume({ id, removeFile, addFile }) {
 
   return (
     <>
-      {uppy && (
+      <div className="h-32 w-56 md:h-80 md:w-96 relative">
+        <div className="absolute top-0 right-0 left-0 bottom-0 h-28 w-56 md:h-72 md:w-96 bg-slate-300 animate-pulse rounded-xl"></div>
         <Dashboard
-          className="uploader sm:w-86"
+          className="uploader w-56 md:w-96"
           uppy={uppy}
           showRemoveButtonAfterComplete
           doneButtonHandler={null}
           proudlyDisplayPoweredByUppy={false}
           metaFields={[{ id: "name", name: "Name", placeholder: "File name" }]}
         />
-      )}
+      </div>
     </>
   );
 }
diff --git a/app/styles/globals.css b/app/styles/globals.css
@@ -37,3 +37,25 @@
     background-position: 100% 50%;
   }
 }
+.uppy-Dashboard .uppy-Dashboard-inner {
+  height: 100% !important;
+  min-height: 120px !important;
+}
+/* Default styles for the Uppy uploader */
+@media (max-width: 767px) {
+  .uppy-Dashboard .uppy-Dashboard-inner {
+    min-height: 120px !important;
+  }
+}
+
+/* Media query for larger viewports (e.g., desktops) */
+@media (min-width: 768px) {
+  .uppy-Dashboard .uppy-Dashboard-inner {
+    width: 500px !important;
+    min-height: 320px !important;
+  }
+}
+
+.w-126 {
+  width: 500px;
+}