Improve look of models in Browse data (#38518)

Co-authored-by: Kyle Doherty <5248953+kdoh@users.noreply.github.com>
Co-authored-by: Luiz Arakaki <luiz.arakaki@metabase.com>

frontend/src/metabase/browse/components/BrowseModels.styled.tsx

@@ -20,15 +20,16 @@ export const ModelCard = styled(Card)`
   align-items: flex-start;
 
   border: 1px solid ${color("border")};
-  box-shadow: 0 1px 0.25rem 0 rgba(0, 0, 0, 0.06);
+
+  box-shadow: none;
   &:hover {
-    box-shadow: 0 1px 0.25rem 0 rgba(0, 0, 0, 0.14);
-    h4 {
+    h1 {
       color: ${color("brand")};
     }
   }
   transition: box-shadow 0.15s;
-  h4 {
+
+  h1 {
     transition: color 0.15s;
   }
 `;
@@ -50,8 +51,9 @@ export const MultilineEllipsified = styled(Ellipsified)`
 
 export const GridContainer = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  gap: 1.5rem 1rem;
+  margin-top: 1rem;
   width: 100%;
 
   ${breakpointMinSmall} {
@@ -65,7 +67,7 @@ export const GridContainer = styled.div`
 export const CollectionHeaderContainer = styled.div`
   grid-column: 1 / -1;
   align-items: center;
-  padding-top: 0.5rem;
+  padding-top: 1rem;
   margin-right: 1rem;
   &:not(:first-of-type) {
     border-top: 1px solid #f0f0f0;

frontend/src/metabase/browse/components/BrowseModels.tsx

 import _ from "underscore";
-import cx from "classnames";
-import { c, t } from "ttag";
+import { t } from "ttag";
 
 import type {
   Card,
@@ -19,6 +18,7 @@ import NoResults from "assets/img/no_results.svg";
 import { useSelector } from "metabase/lib/redux";
 import { getLocale } from "metabase/setup/selectors";
 import { isInstanceAnalyticsCollection } from "metabase/collections/utils";
+import { color } from "metabase/lib/colors";
 import { getCollectionName, groupModels } from "../utils";
 import { CenteredEmptyState } from "./BrowseApp.styled";
 import {
@@ -140,9 +140,6 @@ const ModelCell = ({ model, collectionHtmlId }: ModelCellProps) => {
     model.last_editor_common_name ?? model.creator_common_name;
   const timestamp = model.last_edited_at ?? model.created_at ?? "";
 
-  const noDescription = c(
-    "Indicates that a model has no description associated with it",
-  ).t`No description.`;
   return (
     <Link
       aria-labelledby={`${collectionHtmlId} ${headingId}`}
@@ -150,19 +147,14 @@ const ModelCell = ({ model, collectionHtmlId }: ModelCellProps) => {
       to={Urls.model(model as unknown as Partial<Card>)}
     >
       <ModelCard>
-        <Title order={4} className="text-wrap" lh="1rem" mb=".5rem">
+        <Box mb="auto">
+          <Icon name="model" size={20} color={color("brand")} />
+        </Box>
+        <Title lh="1rem" mb=".25rem" size="1rem">
           <MultilineEllipsified tooltipMaxWidth="20rem" id={headingId}>
             {model.name}
           </MultilineEllipsified>
         </Title>
-        <Text h="2rem" size="xs" mb="auto">
-          <MultilineEllipsified
-            tooltipMaxWidth="20rem"
-            className={cx({ "text-light": !model.description })}
-          >
-            {model.description || noDescription}{" "}
-          </MultilineEllipsified>
-        </Text>
         <LastEdited editorFullName={lastEditorFullName} timestamp={timestamp} />
       </ModelCard>
     </Link>
@@ -182,7 +174,9 @@ const CollectionHeader = ({
         <CollectionHeaderLink to={Urls.collection(collection)}>
           <Group spacing=".25rem">
             <Icon name="folder" color="text-dark" size={16} />
-            <Text weight="bold">{getCollectionName(collection)}</Text>
+            <Text weight="bold" color="text-medium">
+              {getCollectionName(collection)}
+            </Text>
           </Group>
         </CollectionHeaderLink>
       </CollectionHeaderGroup>

frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarView.tsx

@@ -102,6 +102,30 @@ function MainNavbarView({
             >
               {t`Home`}
             </PaddedSidebarLink>
+            {hasDataAccess && (
+              <>
+                <PaddedSidebarLink
+                  icon="database"
+                  url={BROWSE_URL}
+                  isSelected={nonEntityItem?.url?.startsWith(BROWSE_URL)}
+                  onClick={onItemSelect}
+                >
+                  {t`Browse data`}
+                </PaddedSidebarLink>
+                {!hasOwnDatabase && isAdmin && (
+                  <AddYourOwnDataLink
+                    icon="add"
+                    url={ADD_YOUR_OWN_DATA_URL}
+                    isSelected={nonEntityItem?.url?.startsWith(
+                      ADD_YOUR_OWN_DATA_URL,
+                    )}
+                    onClick={onItemSelect}
+                  >
+                    {t`Add your own data`}
+                  </AddYourOwnDataLink>
+                )}
+              </>
+            )}
           </ul>
         </SidebarSection>
 
@@ -130,36 +154,6 @@ function MainNavbarView({
             aria-label="collection-tree"
           />
         </SidebarSection>
-
-        {hasDataAccess && (
-          <SidebarSection>
-            <SidebarHeadingWrapper>
-              <SidebarHeading>{t`Data`}</SidebarHeading>
-            </SidebarHeadingWrapper>
-            <ul>
-              <PaddedSidebarLink
-                icon="database"
-                url={BROWSE_URL}
-                isSelected={nonEntityItem?.url?.startsWith(BROWSE_URL)}
-                onClick={onItemSelect}
-              >
-                {t`Browse data`}
-              </PaddedSidebarLink>
-              {!hasOwnDatabase && isAdmin && (
-                <AddYourOwnDataLink
-                  icon="add"
-                  url={ADD_YOUR_OWN_DATA_URL}
-                  isSelected={nonEntityItem?.url?.startsWith(
-                    ADD_YOUR_OWN_DATA_URL,
-                  )}
-                  onClick={onItemSelect}
-                >
-                  {t`Add your own data`}
-                </AddYourOwnDataLink>
-              )}
-            </ul>
-          </SidebarSection>
-        )}
       </div>
       <WhatsNewNotification />
     </SidebarContentRoot>