design: mobile responsive

srdarkseer · Apr 16, 2024 · 670c7dc · 670c7dc
1 parent 8e8263a
commit 670c7dc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-sm sm:max-w-4xl sm:min-h-[75vh]  translate-x-[-50%] translate-y-[-50%] gap-4 bg-white dark:bg-pine sm:px-20 sm:py-12 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] ",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-sm sm:max-w-4xl min-h-[70vh] sm:min-h-[75vh]  translate-x-[-50%] translate-y-[-50%] gap-4 bg-white dark:bg-pine sm:px-20 sm:py-12 shadow-lg rounded-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] ",
         className
       )}
       {...props}

diff --git a/src/views/Landing/components/PopUpModal.tsx b/src/views/Landing/components/PopUpModal.tsx
@@ -119,7 +119,9 @@ const PopUpModal = ({ isOpen }: { isOpen: boolean }) => {
             <div className="h-full flex flex-col justify-center">
               <DialogHeader>
                 <DialogTitle>
-                  <div className="absolute top-4 left-2 sm:top-10">Create Data</div>
+                  <div className="absolute top-4 left-2 sm:top-10">
+                    Create Data
+                  </div>
                 </DialogTitle>
               </DialogHeader>
 
@@ -142,12 +144,20 @@ const PopUpModal = ({ isOpen }: { isOpen: boolean }) => {
                           </SelectGroup>
                         </SelectContent>
                       </Select>
+
+                      <p className=" p-2 block sm:hidden text-sm text-white">
+                        Data type is the type of data -ex. Regular
+                      </p>
                     </div>
 
                     <div className="space-y-2">
                       <Label htmlFor="file">CSV file</Label>
 
                       <Input ref={fileInputRef} id="file" type="file" />
+
+                      <p className=" p-2 block sm:hidden text-sm text-white">
+                        CSV file - ex. Name, ID
+                      </p>
                     </div>
 
                     <div className="space-y-2">
@@ -160,6 +170,10 @@ const PopUpModal = ({ isOpen }: { isOpen: boolean }) => {
                         value={numRows}
                         onChange={(e) => setNumRows(e.target.value)}
                       />
+
+                      <p className=" p-2 block sm:hidden text-sm text-white">
+                        Number of rows - how many rows in output field?
+                      </p>
                     </div>
 
                     {/* <div>
@@ -174,7 +188,7 @@ const PopUpModal = ({ isOpen }: { isOpen: boolean }) => {
                 </div> */}
                   </div>
 
-                  <div className="col-span-12 sm:col-span-5 border rounded-lg py-8 px-4 border-white/40 space-y-8 sm:space-y-16">
+                  <div className="hidden sm:block col-span-12 sm:col-span-5 border rounded-lg py-8 px-4 border-white/40 space-y-8 sm:space-y-16">
                     <p className="text-sm text-white">
                       Data type is the type of data <br /> -ex. Regular
                     </p>