From a60c08570873c904f406a9095f0d446c3dbbf58a Mon Sep 17 00:00:00 2001
From: Erzhan Torokulov <erzhan.torokulov@gmail.com>
Date: Thu, 13 Apr 2023 15:01:29 +0600
Subject: [PATCH] style(ResultContainer.module.scss): change border radius of
 key and value classes feat(ResultContainer.tsx): replace key-value pairs with
 badges in RepoMetadata component

---
 .../components/ResultContainer.module.scss          | 13 ++++---------
 .../src/search-ui/components/ResultContainer.tsx    | 10 +++++++---
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/client/branded/src/search-ui/components/ResultContainer.module.scss b/client/branded/src/search-ui/components/ResultContainer.module.scss
index 9d1a9a8e62262..6204d1cd75271 100644
--- 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
index 3d7c68de35042..eda11f92a5b9e 100644
--- 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>