Home, styles

frontend/pages/vendors/[slug]/index.js

@@ -39,7 +39,7 @@ export const getStaticProps = async ({ params: { slug } }) => {
 
 export default function VendorPage(vendor) {
   return (
-    <>
+    <Box className="vendor">
       <Flex justifyContent="space-between" direction={['column', 'column', 'row']}>
         <Heading marginY="6">{vendor.name}</Heading>
         <Image
@@ -52,18 +52,7 @@ export default function VendorPage(vendor) {
           bg="#fff"
         />
       </Flex>
-      <Box
-        dangerouslySetInnerHTML={{ __html: vendor.long_description }}
-        sx={{
-          h5: {
-            fontFamily: 'var(--chakra-fonts-heading)',
-            fontWeight: 'var(--chakra-fontWeights-bold)',
-            fontSize: 'var(--chakra-fontSizes-xl)',
-            marginTop: 'var(--chakra-space-6)',
-            marginBottom: 'var(--chakra-space-1)',
-          },
-        }}
-      ></Box>
+      <Box dangerouslySetInnerHTML={{ __html: vendor.long_description }}></Box>
 
       <SimpleGrid columns={[1, 2, 3]} spacing={10}>
         <Box>
@@ -168,6 +157,6 @@ export default function VendorPage(vendor) {
           )}
         </Box>
       </SimpleGrid>
-    </>
+    </Box>
   )
 }

frontend/pages/vendors/index.js

@@ -134,7 +134,7 @@ export default function VendorsPage({ categories }) {
   }
 
   return (
-    <>
+    <Box className="vendors">
       <Flex alignItems="center" justifyContent="space-between" direction={['column', 'row']} mb="5" gap="5">
         <Heading size="lg">Vendors</Heading>
         <Box>{isValidating && <Spinner />}</Box>
@@ -302,6 +302,6 @@ export default function VendorsPage({ categories }) {
           </HStack>
         </>
       )}
-    </>
+    </Box>
   )
 }