refactor(App.jsx): improve layout and styling for enhanced user interaction

src/App.jsx

@@ -485,9 +485,10 @@ const App = () => {
       minH="100vh" 
       w="100%" 
       display="flex" 
+      flexDirection="column"
       alignItems="center" 
       justifyContent="center"
-      bg="black"
+      bg="#000000"
       overflow="hidden"
       position="relative"
     >
@@ -498,104 +499,102 @@ const App = () => {
         left={0}
         right={0}
         bottom={0}
-        opacity={0.02}
-        backgroundImage="radial-gradient(circle at 1px 1px, #666666 1px, transparent 0)"
+        opacity={0.03}
+        backgroundImage="radial-gradient(circle at 1px 1px, #aaaaaa 1px, transparent 0)"
         backgroundSize="40px 40px"
         pointerEvents="none"
       />
       
-      {/* Single container with everything */}
-      <Box 
-        maxW={{ base: "90%", md: "450px" }}
+      <VStack 
+        spacing={4}
+        maxW={{ base: "95%", md: "500px" }}
         w="full"
-        backdropFilter="blur(25px)"
-        bg="rgba(28, 28, 30, 0.75)"
-        borderRadius="2xl"
-        borderWidth="1px"
-        borderColor="rgba(255, 255, 255, 0.08)"
-        boxShadow="0 20px 40px rgba(0, 0, 0, 0.4)"
-        overflow="hidden"
-        position="relative"
       >
-        {/* Title and Main Area */}
-        <VStack spacing={0} w="full">
-          <Box 
-            w="full" 
-            pt={8} 
-            pb={4} 
-            px={6}
-            textAlign="center"
-          >
-            <Heading 
-              as="h1" 
-              size="lg" 
-              color="white"
-              fontWeight="semibold"
-              letterSpacing="tight"
-            >
-              Glif LoRA Autocaption
-            </Heading>
-          </Box>
-          
+        {/* Title */}
+        <Heading 
+          as="h1" 
+          size="2xl" 
+          color="#ffffff"
+          textAlign="center"
+          fontWeight="semibold"
+          letterSpacing="-1px"
+          mb={2}
+        >
+          Glif LoRA Autocaption
+        </Heading>
+        
+        {/* Main minimalistic drop box container */}
+        <Box 
+          w="full"
+          backdropFilter="blur(20px)"
+          bg="rgba(30, 30, 30, 0.65)"
+          borderRadius="2xl"
+          borderWidth="1px"
+          borderColor="rgba(255, 255, 255, 0.1)"
+          boxShadow="0 10px 30px 0 rgba(0, 0, 0, 0.4)"
+          overflow="hidden"
+          position="relative"
+        >
           {/* Main Drop Area */}
           <Box
             w="full"
+            h="200px"
             display="flex"
             alignItems="center"
             justifyContent="center"
             cursor="pointer"
             transition="all 0.3s"
             onClick={() => fileInputRef.current?.click()}
-            px={6}
-            pb={6}
+            p={6}
+            borderBottomWidth={isApiKeyOpen || uploadedImages.length > 0 ? "1px" : "0px"}
+            borderBottomColor="rgba(255, 255, 255, 0.05)"
+            _hover={{ 
+              bg: "rgba(40, 40, 40, 0.4)",
+            }}
           >
-            <Box
-              w="full"
-              h="160px"
-              borderWidth="1px"
-              borderRadius="xl"
-              borderStyle="dashed"
-              borderColor="rgba(255, 255, 255, 0.2)"
-              display="flex"
-              alignItems="center"
-              justifyContent="center"
-              bg="rgba(20, 20, 20, 0.3)"
-              transition="all 0.3s"
-              _hover={{ 
-                bg: "rgba(30, 30, 30, 0.5)",
-                borderColor: "rgba(255, 255, 255, 0.3)",
-                transform: "translateY(-1px)"
-              }}
-            >
-              <VStack spacing={3}>
-                <Text color="#e0e0e0" fontSize="md">Drop images here or click to browse</Text>
-                <Button
-                  size="sm"
-                  bg="rgba(255, 255, 255, 0.08)"
-                  color="white"
-                  fontWeight="medium"
-                  _hover={{ bg: "rgba(255, 255, 255, 0.15)" }}
-                  _active={{ bg: "rgba(255, 255, 255, 0.1)" }}
-                  disabled={processing}
-                >
-                  Select Files
-                </Button>
-              </VStack>
-              <input
-                type="file"
-                multiple
-                accept="image/*"
-                onChange={handleFileChange}
-                style={{ display: 'none' }}
-                ref={fileInputRef}
-              />
-            </Box>
+            <VStack spacing={4}>
+              <Box
+                borderWidth="1px"
+                borderRadius="lg"
+                borderStyle="dashed"
+                borderColor="rgba(255, 255, 255, 0.2)"
+                p={6}
+                bg="rgba(20, 20, 20, 0.4)"
+                transition="all 0.3s"
+                _hover={{ 
+                  borderColor: "rgba(255, 255, 255, 0.3)",
+                  transform: "scale(1.02)"
+                }}
+              >
+                <VStack spacing={3}>
+                  <Text color="#e0e0e0" fontSize="md">Drop images here or click to browse</Text>
+                  <Button
+                    size="sm"
+                    bg="rgba(255, 255, 255, 0.08)"
+                    color="white"
+                    fontWeight="medium"
+                    _hover={{ bg: "rgba(255, 255, 255, 0.15)" }}
+                    _active={{ bg: "rgba(255, 255, 255, 0.1)" }}
+                    disabled={processing}
+                  >
+                    Select Files
+                  </Button>
+                </VStack>
+              </Box>
+            </VStack>
+            <input
+              type="file"
+              multiple
+              accept="image/*"
+              onChange={handleFileChange}
+              style={{ display: 'none' }}
+              ref={fileInputRef}
+            />
           </Box>
-          
-          {/* Settings icon */}
+
+          {/* Toggle button for advanced settings */}
           <Box position="absolute" right={4} bottom={4}>
             <IconButton
-              aria-label="Settings"
               size="sm"
               variant="ghost"
               color="rgba(255, 255, 255, 0.5)"
@@ -605,14 +604,14 @@ const App = () => {
               borderRadius="full"
             />
           </Box>
-
+          
           {/* Advanced settings panel - collapsible */}
-          <Collapse in={isApiKeyOpen} animateOpacity style={{ width: '100%' }}>
+          <Collapse in={isApiKeyOpen} animateOpacity>
             <Box 
               p={5}
-              bg="rgba(24, 24, 26, 0.8)"
-              borderTopWidth="1px"
-              borderTopColor="rgba(255, 255, 255, 0.05)"
+              bg="rgba(20, 20, 20, 0.5)"
+              borderBottomWidth="1px"
+              borderBottomColor="rgba(255, 255, 255, 0.05)"
             >
               <VStack spacing={4} align="stretch">
                 <FormControl>
@@ -652,7 +651,7 @@ const App = () => {
                       onChange={handleCustomGlifInputChange}
                       bg="rgba(30, 30, 30, 0.7)"
                       borderColor="rgba(255, 255, 255, 0.1)"
-                      _hover={{ borderColor: "rgba(255, 255, 255, 0.2)" }}
+                      _hover={{ borderColor: "rgba(255, 255, 255, 2.2)" }}
                       _focus={{ borderColor: "rgba(255, 255, 255, 0.3)", boxShadow: "none" }}
                     />
                     <InputRightElement width="4.5rem">
@@ -703,10 +702,9 @@ const App = () => {
             <Box 
               px={5} 
               py={4} 
-              bg="rgba(22, 22, 24, 0.8)"
-              w="full"
-              borderTopWidth="1px"
-              borderTopColor="rgba(255, 255, 255, 0.05)"
+              bg="rgba(20, 20, 20, 0.5)"
+              borderBottomWidth="1px"
+              borderBottomColor="rgba(255, 255, 255, 0.05)"
             >
               <Flex justify="center" gap={4} wrap="wrap">
                 <Button
@@ -763,7 +761,7 @@ const App = () => {
 
           {/* Images Section */}
           {uploadedImages.length > 0 && (
-            <Box w="full" borderTopWidth={isImagesOpen ? "1px" : "0px"} borderTopColor="rgba(255, 255, 255, 0.05)">
+            <Box>
               <Flex 
                 justify="space-between" 
                 align="center" 
@@ -771,6 +769,8 @@ const App = () => {
                 cursor="pointer"
                 py={3}
                 px={5}
+                borderBottomWidth={isImagesOpen ? "1px" : "0px"}
+                borderBottomColor="rgba(255, 255, 255, 0.05)"
                 _hover={{ bg: "rgba(255, 255, 255, 0.03)" }}
               >
                 <Text fontWeight="medium" color="#e0e0e0">Uploaded Images ({uploadedImages.length})</Text>
@@ -920,12 +920,12 @@ const App = () => {
               </Collapse>
             </Box>
           )}
-          
-          <Text fontSize="xs" color="gray.500" textAlign="center" py={2}>
-            Glif LoRA Autocaption • {new Date().getFullYear()}
-          </Text>
-        </VStack>
-      </Box>
+        </Box>
+        
+        <Text fontSize="xs" color="gray.500" textAlign="center">
+          Glif LoRA Autocaption • {new Date().getFullYear()}
+        </Text>
+      </VStack>
     </Box>
   );
 };