diff options
Diffstat (limited to 'src-migrate/modules/product-detail/components/ProductComparisonModal.tsx')
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductComparisonModal.tsx | 106 |
1 files changed, 74 insertions, 32 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx index 260b6713..5dd3f175 100644 --- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx +++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx @@ -523,8 +523,11 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant <InputGroup size="sm"> <AutoCompleteInput variant="outline" - fontSize="xs" - borderRadius="md" + fontSize="sm" + _focus={{ + fontSize: {base: '16px', md: 'sm'}, + borderColor: 'red.500', + }}borderRadius="md" placeholder="Cari Varian..." value={product.inputValue} onChange={(e) => handleInputChange(index, e.target.value)} @@ -639,7 +642,25 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant <InputGroup size="sm"> <InputLeftElement pointerEvents="none"><Icon as={Search} color="gray.300" /></InputLeftElement> <Input - placeholder="Cari Produk..." borderRadius="md" + placeholder="Cari Produk..." + borderRadius="md" + fontSize="16px" + sx={{ + base: { + transform: "scale(0.875)", // Kecilkan visual jadi setara 14px (sm) + transformOrigin: "left center", + width: "114.29%", // Kompensasi lebar + marginBottom: "-2px", + marginRight: "-14.29%" + }, + md: { + fontSize: "sm", // Di Desktop pakai ukuran asli (14px) + transform: "none", + width: "100%", + marginBottom: "0", + marginRight: "0" + } + }} value={activeSearchSlot === index ? searchQuery : ''} onFocus={() => { setActiveSearchSlot(index); setSearchQuery(''); }} onChange={(e) => setSearchQuery(e.target.value)} @@ -780,30 +801,42 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant ) : ( <Box fontSize="12px" - fontWeight="semibold" color="gray.800" w="100%" textAlign="center" sx={{ - '& ul, & ol': { - textAlign: 'center', - paddingLeft: '1.2rem', - listStylePosition: 'outside', - margin: 0, - width: '100%' + 'ul, ol': { + textAlign: 'left', + listStylePosition: 'outside !important', + paddingLeft: '1.2em !important', + marginLeft: '0 !important', + marginTop: '0.5em !important', + marginBottom: '1em !important' }, - '& li': { - textAlign: 'center', - marginBottom: '4px', - fontWeight: 'normal' + 'ul': { listStyleType: 'disc !important' }, + 'ol': { listStyleType: 'decimal !important' }, + + // 2. ITEM LIST (LI) + 'li': { + textAlign: 'left', + marginBottom: '4px !important', + paddingLeft: '0.2em !important', + lineHeight: '1.5 !important', + fontWeight: 'normal !important' }, - '& strong': { - display: 'block', - marginBottom: '2px' + + 'strong, b': { + display: 'block !important', + fontWeight: '700 !important', + marginBottom: '0px !important', + marginTop: '4px !important', + color: '#1a202c', + textAlign: 'left' }, - '& p': { - textAlign: 'center', - margin: 0 + + 'p': { + margin: '0 !important', + padding: '0 !important' } }} dangerouslySetInnerHTML={{ __html: renderSpecValue(val) }} @@ -992,24 +1025,33 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant w="100%" sx={{ '& ul, & ol': { - textAlign: 'center', - paddingLeft: '1.2rem', - listStylePosition: 'outside', - margin: 0, - width: '100%' + textAlign: 'left', // List Wajib Rata Kiri + listStylePosition: 'outside !important', + paddingLeft: '1.2em !important', + marginLeft: '0 !important', + marginTop: '0.5em !important', + marginBottom: '1em !important' }, + 'ul': { listStyleType: 'disc !important' }, + 'ol': { listStyleType: 'decimal !important' }, '& li': { - textAlign: 'center', - marginBottom: '4px', - fontWeight: 'normal' + textAlign: 'left', + marginBottom: '4px !important', + paddingLeft: '0.2em !important', + lineHeight: '1.5 !important', + fontWeight: 'normal !important' }, '& strong': { - display: 'block', - marginBottom: '2px' + display: 'block !important', + fontWeight: '700 !important', + marginBottom: '0px !important', + marginTop: '4px !important', + color: '#1a202c', + textAlign: 'left' }, '& p': { - textAlign: 'center', - margin: 0 + margin: '0 !important', + padding: '0 !important' } }} dangerouslySetInnerHTML={{ __html: renderSpecValue(val) }} |