Asset catalog style tweaks/polish (#20600)

## Summary & Motivation This PR contains a bunch of small UI polish tasks for the new Asset Catalog UI <img width="1496" alt="image" src="https://github.com/dagster-io/dagster/assets/2798333/02ec1e6d-1762-4bd7-acda-b8ab41da062c"> <img width="1491" alt="image" src="https://github.com/dagster-io/dagster/assets/2798333/3dfa7a13-64c1-4fdf-87e9-9b6037e1bcd2"> ## How I Tested These Changes Loaded up the UI, reviewed with @clairelin135 this afternoon. --------- Co-authored-by: Marco Salazar <[email protected]>
dagster-io · Mar 20, 2024 · 12a7258 · 12a7258 · github-actions · Mar 20, 2024
1 parent 3de20bb
commit 12a7258
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 15 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Text.tsx
@@ -20,7 +20,7 @@ export const Title = styled(Text)`
 
 export const Heading = styled(Text)`
   font-size: 18px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 24px;
   -webkit-font-smoothing: antialiased;
 `;

diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/Color.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/Color.tsx
@@ -117,4 +117,5 @@ export {
   colorDataVizYellow as dataVizYellow,
   colorDataVizYellowAlt as dataVizYellowAlt,
   replaceAlpha,
+  colorBlueGradient as blueGradient,
 } from '../theme/color';
diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx
@@ -122,4 +122,7 @@ export enum ColorName {
   DataVizVioletAlt = 'DataVizVioletAlt',
   DataVizYellow = 'DataVizYellow',
   DataVizYellowAlt = 'DataVizYellowAlt',
+
+  //Gradients
+  BlueGradient = 'BlueGradient',
 }
diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/DarkPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/DarkPalette.tsx
@@ -127,4 +127,7 @@ export const DarkPalette = {
   [ColorName.DataVizVioletAlt]: DataVizColors.Violet100,
   [ColorName.DataVizYellow]: DataVizColors.Yellow200,
   [ColorName.DataVizYellowAlt]: DataVizColors.Yellow100,
+
+  //Gradients
+  [ColorName.BlueGradient]: `linear-gradient(${CoreColors.Gray950}, ${TranslucentColors.Blue15} 100%)`,
 };
diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/LightPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/LightPalette.tsx
@@ -127,4 +127,7 @@ export const LightPalette = {
   [ColorName.DataVizVioletAlt]: DataVizColors.Violet300,
   [ColorName.DataVizYellow]: DataVizColors.Yellow200,
   [ColorName.DataVizYellowAlt]: DataVizColors.Yellow300,
+
+  //Gradients
+  [ColorName.BlueGradient]: `linear-gradient(${CoreColors.Gray10}, ${TranslucentColors.Blue10} 100%)`,
 };
diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/TranslucentColors.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/TranslucentColors.tsx
@@ -1,4 +1,5 @@
 export const TranslucentColors = {
+  Blue10: 'rgba(79, 67, 221, 0.10)',
   Blue12: 'rgba(79, 67, 221, 0.12)',
   Blue15: 'rgba(79, 67, 221, 0.15)',
   Blue20: 'rgba(79, 67, 221, 0.20)',

diff --git a/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx b/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx
@@ -160,3 +160,4 @@ export const colorDataVizViolet = () => getColor(ColorName.DataVizViolet);
 export const colorDataVizVioletAlt = () => getColor(ColorName.DataVizVioletAlt);
 export const colorDataVizYellow = () => getColor(ColorName.DataVizYellow);
 export const colorDataVizYellowAlt = () => getColor(ColorName.DataVizYellowAlt);
+export const colorBlueGradient = () => getColor(ColorName.BlueGradient);
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.tsx
@@ -119,7 +119,7 @@ export const AssetGlobalLineageLink = () => (
 
 export const AssetGlobalLineageButton = () => (
   <AnchorButton intent="primary" icon={<Icon name="schema" />} to="/asset-groups">
-    View global asset lineage
+    View lineage
   </AnchorButton>
 );
 

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsOverview.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsOverview.tsx
@@ -22,6 +22,7 @@ import {TagIcon} from '../graph/OpTags';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {useLaunchPadHooks} from '../launchpad/LaunchpadHooksContext';
 import {AssetSearch} from '../search/AssetSearch';
+import {AnchorButton} from '../ui/AnchorButton';
 import {ReloadAllButton} from '../workspace/ReloadAllButton';
 import {buildRepoPathForHuman} from '../workspace/buildRepoAddress';
 import {repoAddressAsHumanString, repoAddressAsURLString} from '../workspace/repoAddressAsString';
@@ -287,15 +288,23 @@ export const AssetsOverview = ({viewerName}: {viewerName?: string}) => {
         right={<ReloadAllButton label="Reload definitions" />}
       />
       <Box flex={{direction: 'column'}} style={{height: '100%', overflow: 'auto'}}>
-        <Box padding={64} flex={{justifyContent: 'center', alignItems: 'center'}}>
+        <Box
+          padding={64}
+          flex={{justifyContent: 'center', alignItems: 'center'}}
+          style={{
+            background: Colors.blueGradient(),
+          }}
+        >
           <Box style={{width: '60%', minWidth: '600px'}} flex={{direction: 'column', gap: 16}}>
             <Box flex={{direction: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
               <Heading>
                 {getGreeting(timezone)}
                 {viewerFirstName ? `, ${viewerFirstName}` : ''}
               </Heading>
-              <Box flex={{direction: 'row', gap: 16, alignItems: 'center'}}>
-                <Link to="/assets">View all</Link>
+              <Box flex={{direction: 'row', alignItems: 'center', gap: 6}}>
+                <AnchorButton intent="primary" outlined to="/assets">
+                  View all assets
+                </AnchorButton>
                 <AssetGlobalLineageButton />
               </Box>
             </Box>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
@@ -308,19 +308,24 @@ interface SearchBoxProps {
 }
 
 export const SearchBox = styled.div<SearchBoxProps>`
-  border-radius: 12px;
-  box-shadow: 2px 2px 8px ${Colors.shadowDefault()};
-
+  border-radius: 8px;
   align-items: center;
-  border-bottom: ${({hasQueryString}) =>
-    hasQueryString ? `1px solid ${Colors.keylineDefault()}` : 'none'};
+  border: ${({hasQueryString}) =>
+    hasQueryString ? `1px solid ${Colors.borderHover()}` : `1px solid ${Colors.borderDefault()}`};
   display: flex;
   padding: 12px 20px 12px 12px;
+  transition: all 100ms linear;
+  background: ${Colors.backgroundDefaultHover()};
+
+  :hover {
+    border: 1px solid ${Colors.borderHover()};
+    background: ${Colors.backgroundDefault()};
+  }
 `;
 
 export const SearchInput = styled.input`
   border: none;
-  color: ${Colors.textLight()};
+  color: ${Colors.textDefault()};
   font-family: ${FontFamily.default};
   font-size: 18px;
   margin-left: 4px;
@@ -329,7 +334,7 @@ export const SearchInput = styled.input`
   background-color: transparent;
 
   &::placeholder {
-    color: ${Colors.textLighter()};
+    color: ${Colors.textDisabled()};
   }
 `;
 

diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchResults.tsx
@@ -46,6 +46,8 @@ const iconForType = (type: SearchResultType | AssetFilterSearchResultType): Icon
       return 'account_circle';
     case AssetFilterSearchResultType.AssetGroup:
       return 'asset_group';
+    case AssetFilterSearchResultType.ComputeKind:
+      return 'tag';
     default:
       return 'source';
   }
@@ -249,8 +251,8 @@ const MatchingFiltersHeader = styled.li`
 const Item = styled.li<HighlightableTextProps>`
   align-items: center;
   background-color: ${({isHighlight}) =>
-    isHighlight ? Colors.backgroundLight() : Colors.backgroundDefault()};
-  box-shadow: ${({isHighlight}) => (isHighlight ? Colors.accentLime() : 'transparent')} 4px 0 0
+    isHighlight ? Colors.backgroundLightHover() : Colors.backgroundDefault()};
+  box-shadow: ${({isHighlight}) => (isHighlight ? Colors.accentBlue() : 'transparent')} 4px 0 0
     inset;
   color: ${Colors.textLight()};
   display: flex;
@@ -260,7 +262,7 @@ const Item = styled.li<HighlightableTextProps>`
   user-select: none;
 
   &:hover {
-    background-color: ${Colors.backgroundLight()};
+    background-color: ${Colors.backgroundLighter()};
   }
 `;