diff options
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductComparisonModal.tsx | 83 |
1 files changed, 53 insertions, 30 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx index 260b6713..b5676ac8 100644 --- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx +++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx @@ -523,7 +523,8 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant <InputGroup size="sm"> <AutoCompleteInput variant="outline" - fontSize="xs" + // fontSize="xs" + fontSize={{ base: '16px', md: 'sm' }} // fix font size mobile borderRadius="md" placeholder="Cari Varian..." value={product.inputValue} @@ -640,6 +641,7 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant <InputLeftElement pointerEvents="none"><Icon as={Search} color="gray.300" /></InputLeftElement> <Input placeholder="Cari Produk..." borderRadius="md" + fontSize={{ base: '16px', md: 'sm' }} // fix font size mobile value={activeSearchSlot === index ? searchQuery : ''} onFocus={() => { setActiveSearchSlot(index); setSearchQuery(''); }} onChange={(e) => setSearchQuery(e.target.value)} @@ -780,30 +782,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 +1006,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) }} |