feat(docs): update code

bigcommerce · May 3, 2022 · 413821c · 413821c
1 parent b54b079
commit 413821c
Showing 1 changed file with 14 additions and 13 deletions.
diff --git a/packages/docs/components/ColorCards/ColorCard.tsx b/packages/docs/components/ColorCards/ColorCard.tsx
@@ -7,7 +7,7 @@ import { ColorDetails } from './availableColors';
 const StyledColor = styled(Flex)`
   height: ${({ theme }) => theme.helpers.remCalc(160)};
   width: ${({ theme }) => theme.helpers.remCalc(184)};
-  border-radius: 4px;
+  border-radius: ${({ theme }) => theme.borderRadius.normal};
 `;
 
 interface ColorCardProps {
@@ -16,8 +16,9 @@ interface ColorCardProps {
 
 const ColorCard: React.FC<ColorCardProps> = ({ colorCard }) => {
   const { colors } = useContext(ThemeContext);
-  const hasDescription = colorCard.description;
-  const hasHexagesimalColor = colors[colorCard.name].startsWith('#');
+  const { description } = colorCard;
+  const colorValue = colors[colorCard.name];
+  const hasHexColor = colorValue.startsWith('#');
   const hasSecondaryTextColor = colorCard.secondaryTextColor !== undefined;
 
   const renderContrast = () => {
@@ -44,29 +45,29 @@ const ColorCard: React.FC<ColorCardProps> = ({ colorCard }) => {
   return (
     <StyledColor
       backgroundColor={colorCard.name}
-      justifyContent={hasHexagesimalColor ? 'space-between' : 'baseline'}
-      flexDirection={'column'}
+      justifyContent={hasHexColor ? 'space-between' : 'baseline'}
+      flexDirection="column"
       border="box"
     >
       <Text margin="small" color={colorCard.textColor} bold>
         {getColorLabel(colorCard.name)}
       </Text>
 
-      {hasDescription && (
-        <Small color={colorCard.textColor} margin={'small'}>
-          {colorCard.description?.text}{' '}
-          {colorCard.description?.href && (
-            <Link href={colorCard?.description.href} target="_blank">
+      {description && (
+        <Small color={colorCard.textColor} margin="small">
+          {description?.text}{' '}
+          {description?.href && (
+            <Link href={description.href} target="_blank">
               <Small color="inherit">Read more</Small>
             </Link>
           )}
         </Small>
       )}
 
-      {hasHexagesimalColor && (
-        <Flex margin="small" justifyContent={'space-between'} flexWrap={'wrap'}>
+      {hasHexColor && (
+        <Flex margin="small" justifyContent="space-between" flexWrap="wrap">
           <Text margin="none" color={colorCard.textColor}>
-            {colors[colorCard.name]}
+            {colorValue}
           </Text>
 
           {renderContrast()}