fix: lineItem options style refactored

Author: berardomate

components/composite/OrderSummary/LineItemTypes/index.tsx

@@ -3,7 +3,7 @@ import {
   LineItemImage,
   LineItemName,
   LineItemAmount,
-  LineItemOptions,
+  LineItemOption,
   LineItemType,
 } from "@commercelayer/react-components"
 import React from "react"
@@ -14,8 +14,8 @@ import {
   LineItemQty,
   LineItemTitle,
   LineItemWrapper,
-  StyledLineItemOption,
   StyledLineItemSkuCode,
+  StyledLineItemOptions,
 } from "./styled"
 
 interface Props {
@@ -41,9 +41,9 @@ export const LineItemTypes: React.FC<Props> = ({ type }) => {
             <LineItemName className="font-bold" />
             <LineItemAmount className="pl-2 text-lg font-extrabold" />
           </LineItemTitle>
-          <LineItemOptions showAll showName={false}>
-            <StyledLineItemOption />
-          </LineItemOptions>
+          <StyledLineItemOptions showAll showName={true} className="options">
+            <LineItemOption />
+          </StyledLineItemOptions>
           <LineItemQty>
             <QuantityWithPrice />
           </LineItemQty>

components/composite/OrderSummary/LineItemTypes/styled.tsx

@@ -1,4 +1,4 @@
-import { LineItemCode, LineItemOption } from "@commercelayer/react-components"
+import { LineItemCode, LineItemOptions } from "@commercelayer/react-components"
 import styled from "styled-components"
 import tw from "twin.macro"
 
@@ -12,24 +12,29 @@ export const LineItemTitle = styled.div`
   ${tw`flex justify-between text-black`}
 `
 export const LineItemQty = styled.div`
-  ${tw`text-xs mt-1 bg-gray-200 max-w-max py-1 px-2.5 rounded-full tracking-wider text-gray-400 font-bold`}
+  ${tw`text-xs mt-2 bg-gray-200 max-w-max py-1 px-2.5 rounded-full tracking-wider text-gray-400 font-bold`}
 `
 export const StyledLineItemSkuCode = styled(LineItemCode)`
-  ${tw`text-xxs uppercase text-gray-400 font-bold`}
+  ${tw`text-xxs uppercase text-gray-400 font-bold mb-1`}
 `
-export const StyledLineItemOption = styled(LineItemOption)`
-  ${tw`text-gray-400 text-xs flex font-medium capitalize pl-5 mt-1.5 bg-no-repeat bg-16`}
-  span {
-    ${tw`font-bold text-gray-500 ml-1 line-clamp-3 md:line-clamp-6`}
+export const StyledLineItemOptions = styled(LineItemOptions)`
+  h6 {
+    ${tw`font-bold text-xs text-gray-600 mt-2 bg-no-repeat bg-16 pl-5`}
+    background-image: url("data:image/svg+xml;utf8;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTUgdy01IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuMjkzIDUuMjkzYTEgMSAwIDAxMS40MTQgMGw0IDRhMSAxIDAgMDEwIDEuNDE0bC00IDRhMSAxIDAgMDEtMS40MTQtMS40MTRMMTIuNTg2IDExSDVhMSAxIDAgMTEwLTJoNy41ODZsLTIuMjkzLTIuMjkzYTEgMSAwIDAxMC0xLjQxNHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgLz4KPC9zdmc+");
   }
 
-  &:not(span) {
-    ${tw`font-medium`}
-  }
+  li {
+    ${tw`text-gray-400 text-xs flex font-medium capitalize pl-5 pt-1 bg-no-repeat bg-16`}
+    span {
+      ${tw`font-bold text-gray-500 ml-1 line-clamp-3 md:line-clamp-6`}
+    }
 
-  &:last-of-type {
-    ${tw`mb-1.5`}
-  }
+    &:not(span) {
+      ${tw`font-medium`}
+    }
 
-  background-image: url("data:image/svg+xml;utf8;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTUgdy01IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTAuMjkzIDUuMjkzYTEgMSAwIDAxMS40MTQgMGw0IDRhMSAxIDAgMDEwIDEuNDE0bC00IDRhMSAxIDAgMDEtMS40MTQtMS40MTRMMTIuNTg2IDExSDVhMSAxIDAgMTEwLTJoNy41ODZsLTIuMjkzLTIuMjkzYTEgMSAwIDAxMC0xLjQxNHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgLz4KPC9zdmc+");
+    &:last-of-type {
+      ${tw`mb-2`}
+    }
+  }
 `