Refine home styles (#38903)

* home row size

* use prop instead

* revert previewer

apps/design-system/registry/default/example/logs-bar-chart.tsx

@@ -14,7 +14,7 @@ export default function LogsBarChartDemo() {
   }).reverse()
 
   return (
-    <div className="w-full">
+    <div className="w-full h-64">
       <LogsBarChart data={data} />
     </div>
   )

apps/studio/components/interfaces/HomeNew/AdvisorSection.tsx

@@ -85,7 +85,7 @@ export const AdvisorSection = () => {
               return (
                 <Card
                   key={lint.cache_key}
-                  className="h-full flex flex-col items-stretch cursor-pointer"
+                  className="min-h-full flex flex-col items-stretch cursor-pointer h-64"
                   onClick={() => {
                     handleCardClick(lint)
                   }}

apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx

@@ -132,7 +132,7 @@ export function GettingStarted({ steps }: GettingStartedProps) {
           <div className="relative w-full flex-1 min-h-[100px] shrink-0 overflow-hidden">
             {activeStep.image ? (
               <Image
-                className="w-full select-none"
+                className="w-full select-none invert dark:invert-0"
                 src={activeStep.image}
                 fill
                 objectFit="cover"

apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx

@@ -344,7 +344,7 @@ export const ProjectUsageSection = () => {
       </div>
       <Row columns={[3, 2, 1]}>
         {enabledServices.map((s) => (
-          <Card key={s.key} className="mb-0 md:mb-0 h-full flex flex-col">
+          <Card key={s.key} className="mb-0 md:mb-0 h-full flex flex-col h-64">
             <CardHeader className="flex flex-row items-end justify-between gap-2 space-y-0 pb-0 border-b-0">
               <div className="flex items-center gap-2">
                 <div className="flex flex-col">
@@ -373,15 +373,19 @@ export const ProjectUsageSection = () => {
                 </div>
               </div>
             </CardHeader>
-            <CardContent className="p-6 pt-4 flex-1">
-              <Loading active={isLoading}>
+            <CardContent className="p-6 pt-4 flex-1 h-full overflow-hidden">
+              <Loading isFullHeight active={isLoading}>
                 <LogsBarChart
                   data={s.data}
-                  height="120px"
                   DateTimeFormat={datetimeFormat}
                   onBarClick={handleBarClick(s.route)}
+                  isFullHeight
                   EmptyState={
-                    <NoDataPlaceholder size="small" message="No data for selected period" />
+                    <NoDataPlaceholder
+                      size="small"
+                      message="No data for selected period"
+                      isFullHeight
+                    />
                   }
                 />
               </Loading>

apps/studio/components/ui/Charts/NoDataPlaceholder.tsx

@@ -12,6 +12,7 @@ interface NoDataPlaceholderProps {
   description?: string
   className?: string
   size: Parameters<typeof useChartSize>[0]
+  isFullHeight?: boolean
 }
 const NoDataPlaceholder = ({
   attribute,
@@ -20,17 +21,19 @@ const NoDataPlaceholder = ({
   format,
   className = '',
   size,
+  isFullHeight = false,
 }: NoDataPlaceholderProps) => {
   const { minHeight } = useChartSize(size)
 
   return (
-    <div>
+    <div className={cn(isFullHeight && 'h-full')}>
       {attribute !== undefined && (
         <ChartHeader title={attribute} format={format} highlightedValue={0} />
       )}
       <div
         className={cn(
           'border-control flex flex-grow w-full flex-col items-center justify-center space-y-2 border border-dashed text-center',
+          isFullHeight && 'h-full',
           className
         )}
         // extra 20 px for the x ticks

packages/ui-patterns/src/LogsBarChart/index.tsx

@@ -26,13 +26,13 @@ export const LogsBarChart = ({
   onBarClick,
   EmptyState,
   DateTimeFormat = 'MMM D, YYYY, hh:mma',
-  height = '80px',
+  isFullHeight = false,
 }: {
   data: LogsBarChartDatum[]
   onBarClick?: (datum: LogsBarChartDatum, tooltipData?: CategoricalChartState) => void
   EmptyState?: ReactNode
   DateTimeFormat?: string
-  height?: string
+  isFullHeight?: boolean
 }) => {
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
 
@@ -45,8 +45,12 @@ export const LogsBarChart = ({
   const endDate = dayjs(data[data?.length - 1]?.['timestamp']).format(DateTimeFormat)
 
   return (
-    <div data-testid="logs-bar-chart" className={cn('flex flex-col gap-y-3')}>
+    <div
+      data-testid="logs-bar-chart"
+      className={cn('flex flex-col gap-y-3', isFullHeight ? 'h-full' : 'h-24')}
+    >
       <ChartContainer
+        className="h-full"
         config={
           {
             error_count: {
@@ -60,7 +64,6 @@ export const LogsBarChart = ({
             },
           } satisfies ChartConfig
         }
-        style={{ height }}
       >
         <RechartBarChart
           data={data}

packages/ui/src/components/Loading/Loading.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import { Loader2 } from 'lucide-react'
-
 import styleHandler from '../../lib/theme/styleHandler'
+import { cn } from '../../lib/utils/cn'
 
 interface Props {
   children: React.ReactNode
   active: boolean
+  isFullHeight?: boolean
 }
-export default function Loading({ children, active }: Props) {
+export default function Loading({ children, active, isFullHeight = false }: Props) {
   const __styles = styleHandler('loading')
 
   let classNames = [__styles.base]
@@ -21,8 +22,8 @@ export default function Loading({ children, active }: Props) {
   let spinnerClasses = [__styles.spinner]
 
   return (
-    <div className={classNames.join(' ')}>
-      <div className={contentClasses.join(' ')}>{children}</div>
+    <div className={cn(classNames.join(' '), isFullHeight && 'h-full')}>
+      <div className={cn(contentClasses.join(' '), isFullHeight && 'h-full')}>{children}</div>
       {active && <Loader2 size={24} className={spinnerClasses.join(' ')} />}
     </div>
   )