Merge pull request #6 from srdarkseer/dev

design: updated new design for popup
srdarkseer · Apr 15, 2024 · e2f134d · e2f134d
2 parents 3025936 + 5483b94
commit e2f134d
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 33 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-3xl min-h-[75vh]  translate-x-[-50%] translate-y-[-50%] gap-4 bg-white dark:bg-pine px-20 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-4xl min-h-[75vh]  translate-x-[-50%] translate-y-[-50%] gap-4 bg-white dark:bg-pine px-20 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%] ",
         className
       )}
       {...props}

diff --git a/src/views/Landing/components/PopUpModal.tsx b/src/views/Landing/components/PopUpModal.tsx
@@ -122,36 +122,81 @@ const PopUpModal = ({ isOpen }: { isOpen: boolean }) => {
                   <div className="absolute top-10">Create Data</div>
                 </DialogTitle>
               </DialogHeader>
-              <div className="space-y-6 px-6 pb-12 pt-8 bg-hunterGreen rounded-lg">
+              <div className="space-y-6 px-6 pb-12 pt-8 bg-hunterGreen rounded-lg mt-10">
                 <div className="space-y-2">
                   <Label>Data Type</Label>
-                  <Select onValueChange={setDataType}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select Data Type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectItem value="regular">Regular</SelectItem>
-                        <SelectItem value="timeseries">Timeseries</SelectItem>
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
+                  <div className="grid grid-cols-12 gap-3">
+                    <div className="col-span-8">
+                      <Select onValueChange={setDataType}>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select Data Type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectItem value="regular">Regular</SelectItem>
+                            <SelectItem value="timeseries">
+                              Timeseries
+                            </SelectItem>
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="col-span-4">
+                      <p className="text-white text-sm">
+                        Data type is the type of data <br /> -ex. Regular
+                      </p>
+                    </div>
+                  </div>
                 </div>
 
                 <div className="space-y-2">
                   <Label htmlFor="file">CSV file</Label>
-                  <Input ref={fileInputRef} id="file" type="file" />
+
+                  <div className="grid grid-cols-12 gap-3">
+                    <div className="col-span-8">
+                      <Input ref={fileInputRef} id="file" type="file" />
+                    </div>
+
+                    <div className="col-span-4">
+                      <p className="text-white text-sm">
+                        CSV file - ex. Name, ID
+                      </p>
+                    </div>
+                  </div>
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="num_rows">Rows Number</Label>
-                  <Input
-                    id="num_rows"
-                    type="number"
-                    placeholder="Enter number of rows"
-                    value={numRows}
-                    onChange={(e) => setNumRows(e.target.value)}
-                  />
+                  <Label htmlFor="num_rows">Number of Rows</Label>
+                  <div className="grid grid-cols-12 gap-3">
+                    <div className="col-span-8">
+                      <Input
+                        id="num_rows"
+                        type="number"
+                        placeholder="Enter number of rows"
+                        value={numRows}
+                        onChange={(e) => setNumRows(e.target.value)}
+                      />
+                    </div>
+
+                    <div className="col-span-4">
+                      <p className="text-white text-sm">
+                        Number of rows - how many rows in output field?
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="pt-20">
+                    <Button
+                      onClick={handleSubmit}
+                      variant="default"
+                      type="button"
+                      size="lg"
+                      className="w-60 px-44"
+                    >
+                      Generate
+                    </Button>
+                  </div>
                 </div>
                 {/* <div>
                   <Label htmlFor="batch_size">Batch Size</Label>
@@ -164,17 +209,9 @@ const PopUpModal = ({ isOpen }: { isOpen: boolean }) => {
                   />
                 </div> */}
               </div>
-              <DialogFooter className="pt-20">
-                <Button
-                  onClick={handleSubmit}
-                  variant="default"
-                  type="button"
-                  size="default"
-                  className="w-full"
-                >
-                  Generate
-                </Button>
-              </DialogFooter>
+              {/* <DialogFooter className="pt-20">
+                
+              </DialogFooter> */}
             </div>
           )}