style(ResultContainer.module.scss): change border radius of key and v…

…alue classes feat(ResultContainer.tsx): replace key-value pairs with badges in RepoMetadata component
sourcegraph · Apr 13, 2023 · a60c085 · a60c085
1 parent 590452b
commit a60c085
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/client/branded/src/search-ui/components/ResultContainer.module.scss b/client/branded/src/search-ui/components/ResultContainer.module.scss
@@ -65,17 +65,12 @@
     font-size: 0.75rem;
 
     &-key {
-        padding: 0.075rem 0.2rem 0.075rem 0.375rem;
-        border-radius: 3px 0 0 3px;
-        color: var(--body-bg);
-        background-color: var(--text-muted);
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
     }
 
     &-value {
-        font-size: 0.75rem;
-        padding: 0.075rem 0.375rem 0.075rem 0.2rem;
-        border-radius: 0 3px 3px 0;
-        color: var(--body-color);
-        background-color: var(--secondary);
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
     }
 }
diff --git a/client/branded/src/search-ui/components/ResultContainer.tsx b/client/branded/src/search-ui/components/ResultContainer.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import classNames from 'classnames'
 
 import { SearchMatch } from '@sourcegraph/shared/src/search/stream'
-import { ForwardReferenceExoticComponent } from '@sourcegraph/wildcard'
+import { Badge, ForwardReferenceExoticComponent } from '@sourcegraph/wildcard'
 
 import { formatRepositoryStarCount } from '../util/stars'
 
@@ -47,8 +47,12 @@ const RepoMetadata: React.FunctionComponent<{ keyValuePairs?: Record<string, str
         <div className={classNames(styles.repoMetadata, className, 'd-flex align-items-center flex-wrap')}>
             {Object.entries(keyValuePairs).map(([key, value]) => (
                 <span className="d-flex align-items-center justify-content-center" key={`${key}:${value}`}>
-                    <span className={styles.repoMetadataKey}>{key}</span>
-                    <span className={styles.repoMetadataValue}>{value}</span>
+                    <Badge variant="info" className={styles.repoMetadataKey}>
+                        {key}
+                    </Badge>
+                    <Badge variant="secondary" className={styles.repoMetadataValue}>
+                        {value}
+                    </Badge>
                 </span>
             ))}
         </div>