add font styling to text file

dagster-io · Mar 12, 2024 · a13447b · a13447b
1 parent e30c186
commit a13447b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 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
@@ -82,6 +82,12 @@ export const CaptionSubtitle = styled(Text)`
   line-height: 16px;
 `;
 
+export const CaptionBolded = styled(Text)`
+  font-family: ${FontFamily.default};
+  font-size: 12px;
+  font-weight: 900;
+`;
+
 export const Code = styled(Text)`
   background-color: ${Colors.backgroundBlue()};
   border-radius: 2px;

diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/AssetSearch.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/AssetSearch.tsx
@@ -107,7 +107,7 @@ export const AssetSearch = () => {
     return (queryString: string) => {
       if (!firstSearchTrace.current && isFirstSearch.current) {
         isFirstSearch.current = false;
-        const trace = createTrace('SearchDialog:FirstSearch');
+        const trace = createTrace('AssetSearch:FirstSearch');
         firstSearchTrace.current = trace;
         trace.startTrace();
       }

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
@@ -1,4 +1,12 @@
-import {Box, Colors, Icon, IconName, StyledTag} from '@dagster-io/ui-components';
+import {
+  Box,
+  Caption,
+  CaptionBolded,
+  Colors,
+  Icon,
+  IconName,
+  StyledTag,
+} from '@dagster-io/ui-components';
 import Fuse from 'fuse.js';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
@@ -95,16 +103,16 @@ function buildSearchLabel(result: Fuse.FuseResult<SearchResult>): JSX.Element[]
   let parsedString = '';
   mergedIndices.forEach((indices) => {
     const stringBeforeMatch = result.item.label.slice(parsedString.length, indices[0]);
-    labelComponents.push(<SearchResultLabel>{stringBeforeMatch}</SearchResultLabel>);
+    labelComponents.push(<Caption>{stringBeforeMatch}</Caption>);
     parsedString += stringBeforeMatch;
 
     const match = result.item.label.slice(indices[0], indices[1] + 1);
-    labelComponents.push(<SearchResultBoldedLabel>{match}</SearchResultBoldedLabel>);
+    labelComponents.push(<CaptionBolded>{match}</CaptionBolded>);
     parsedString += match;
   });
 
   const stringAfterMatch = result.item.label.substring(parsedString.length);
-  labelComponents.push(<SearchResultLabel>{stringAfterMatch}</SearchResultLabel>);
+  labelComponents.push(<Caption>{stringAfterMatch}</Caption>);
   parsedString += stringAfterMatch;
 
   return labelComponents;
@@ -146,7 +154,7 @@ const SearchResultItem = React.memo(({isHighlight, onClickResult, result}: ItemP
               color={isHighlight ? Colors.textDefault() : Colors.textLight()}
             />
             {isAssetFilterSearchResultType(item.type) && (
-              <SearchResultLabel>{assetFilterPrefixString(item.type)}:&nbsp;</SearchResultLabel>
+              <Caption>{assetFilterPrefixString(item.type)}:&nbsp;</Caption>
             )}
             {labelComponents.map((component) => component)}
           </StyledTag>
@@ -238,14 +246,6 @@ const MatchingFiltersHeader = styled.li`
   font-weight: 500;
 `;
 
-const SearchResultBoldedLabel = styled.span`
-  font-weight: 800;
-`;
-
-const SearchResultLabel = styled.span`
-  font-weight: 300;
-`;
-
 const Item = styled.li<HighlightableTextProps>`
   align-items: center;
   background-color: ${({isHighlight}) =>