Update homepage official collection display (#17404)

frontend/src/metabase/components/CollectionItem.jsx

@@ -24,7 +24,7 @@ const CollectionItem = ({ collection, event }) => {
     <ItemLink to={collection.getUrl()} data-metabase-event={event}>
       <Card hoverable>
         <CardContent>
-          <IconContainer>
+          <IconContainer color={icon.color}>
             <CollectionIcon name={icon.name} />
           </IconContainer>
           <h4 className="overflow-hidden">

frontend/src/metabase/components/CollectionItem.styled.js

@@ -22,7 +22,7 @@ export const IconContainer = styled.div`
   flex-shrink: 0;
   height: 42px;
   width: 42px;
-  background-color: ${color("bg-dark")};
+  background-color: ${props => color(props.color || "bg-dark")};
   margin-right: ${space(1)};
   border-radius: 6px;
 `;