Fix homepage styling issues (#19695)

frontend/src/metabase/components/CollectionItem.jsx

@@ -22,7 +22,7 @@ const CollectionItem = ({ collection, event }) => {
   const icon = getCollectionIcon(collection);
   return (
     <ItemLink to={collection.getUrl()} data-metabase-event={event}>
-      <Card hoverable compact>
+      <Card hoverable>
         <CardContent>
           <IconContainer color={icon.color}>
             <CollectionIcon name={icon.name} tooltip={icon.tooltip} />

frontend/src/metabase/home/homepage/components/StartSection/StartSection.styled.tsx

-import { Link } from "react-router";
 import styled from "styled-components";
 import Icon from "metabase/components/Icon";
-import { color } from "metabase/lib/colors";
+import Link from "metabase/components/Link";
+import { alpha, color } from "metabase/lib/colors";
 import {
   breakpointMinMedium,
   breakpointMinSmall,
@@ -16,7 +16,6 @@ export const ListRoot = styled.div<ListRootProps>`
   grid-template-columns: repeat(1, 1fr);
   gap: 1rem;
   margin-top: ${props => (props.hasMargin ? "2.5rem" : "")};
-  overflow: hidden;
 
   ${breakpointMinSmall} {
     grid-template-columns: repeat(2, 1fr);
@@ -29,30 +28,33 @@ export const ListRoot = styled.div<ListRootProps>`
 
 export const CardRoot = styled(Link)`
   display: block;
-  padding: 1.5rem;
+  padding: 2rem;
   color: ${color("text-dark")};
   border: 1px solid ${color("border")};
   border-radius: 0.375rem;
   background-color: ${color("white")};
-  box-shadow: 0 1px 2px ${color("shadow")};
+  box-shadow: 0 7px 20px ${color("shadow")};
   overflow: hidden;
 
   &:hover {
     color: ${color("brand")};
+    box-shadow: 0 10px 22px ${alpha(color("shadow"), 0.09)};
   }
 `;
 
 export const CardIcon = styled(Icon)`
   display: block;
   color: ${color("brand")};
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1.75rem;
+  height: 1.75rem;
 `;
 
 export const CardTitle = styled.span`
   display: block;
+  margin-top: 1.875rem;
+  font-size: 1rem;
   font-weight: 700;
-  margin-top: 2.25rem;
+  line-height: 1.5rem;
   overflow: hidden;
 `;
 
@@ -99,6 +101,10 @@ export const BannerDescription = styled.div`
   margin-top: 0.5rem;
 `;
 
+export const BannerLink = styled(Link)`
+  display: block;
+`;
+
 export const BannerRoot = styled.div`
   display: flex;
   align-items: center;

frontend/src/metabase/home/homepage/components/StartSection/StartSection.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { jt, t } from "ttag";
 import Ellipsified from "metabase/components/Ellipsified";
 import ExternalLink from "metabase/components/ExternalLink";
-import Link from "metabase/components/Link";
 import { ROOT_COLLECTION } from "metabase/entities/collections";
 import Settings from "metabase/lib/settings";
 import * as Urls from "metabase/lib/urls";
@@ -13,6 +12,7 @@ import {
   BannerContent,
   BannerDescription,
   BannerIconContainer,
+  BannerLink,
   BannerModelIcon,
   BannerRoot,
   BannerTitle,
@@ -125,10 +125,9 @@ const DatabaseBanner = ({ user }: DatabaseBannerProps): JSX.Element => {
           )}.`}
         </BannerDescription>
       </BannerContent>
-      <Link
-        className="Button Button--primary"
-        to={databaseUrl}
-      >{t`Add my data`}</Link>
+      <BannerLink className="Button Button--primary" to={databaseUrl}>
+        {t`Add my data`}
+      </BannerLink>
     </BannerRoot>
   );
 };