From 8c8ecef1ca21befb76c2ef9da0ffbfe6abc02e98 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 25 May 2023 09:38:19 +0100
Subject: [PATCH] [v10.0.x] DataSourcePicker: Design tweak proposal (#68819)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DataSourcePicker: Design tweak proposal (#68747)

* DataSourcePicker: Design tweak proposal

* Revert unrelated change

* Remove unrelated change

* Fixed spacing of logo

(cherry picked from commit 2f6d538044ad12b60ce286e44baea6e1f8f59759)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../components/picker/DataSourceCard.tsx       | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/public/app/features/datasources/components/picker/DataSourceCard.tsx b/public/app/features/datasources/components/picker/DataSourceCard.tsx
index aecbba54eb5..0aa14d799b6 100644
--- a/public/app/features/datasources/components/picker/DataSourceCard.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceCard.tsx
@@ -23,15 +23,15 @@ export function DataSourceCard({ ds, onClick, selected, description, ...htmlProp
     >
       <Card.Heading className={styles.heading}>
         <div className={styles.headingContent}>
-          <span className={styles.name}>{ds.name}</span>
-          <span className={styles.separator}>|</span>
+          <span className={styles.name}>
+            {ds.name} {ds.isDefault ? <TagList tags={['default']} /> : null}
+          </span>
           <small className={styles.type}>{description || ds.meta.name}</small>
         </div>
       </Card.Heading>
       <Card.Figure className={styles.logo}>
         <img src={ds.meta.info.logos.small} alt={`${ds.meta.name} Logo`} />
       </Card.Figure>
-      <Card.Tags>{ds.isDefault ? <TagList tags={['default']} /> : null}</Card.Tags>
     </Card>
   );
 }
@@ -46,7 +46,7 @@ function getStyles(theme: GrafanaTheme2) {
       // Move to list component
       margin-bottom: 0;
       border-radius: 0;
-      padding: ${theme.spacing(1.5)};
+      padding: ${theme.spacing(1)};
     `,
     heading: css`
       width: 100%;
@@ -62,26 +62,32 @@ function getStyles(theme: GrafanaTheme2) {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      display: flex;
+      justify-content: space-between;
     `,
     logo: css`
       width: 32px;
       height: 32px;
-      padding-right: ${theme.spacing(1.5)};
+      padding: ${theme.spacing(0, 1)};
       display: flex;
       align-items: center;
 
       > img {
         max-height: 100%;
-        min-width: 32px;
+        min-width: 24px;
       }
     `,
     name: css`
       color: ${theme.colors.text.primary};
+      display: flex;
+      gap: ${theme.spacing(2)};
     `,
     type: css`
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      display: flex;
+      align-items: center;
     `,
     separator: css`
       margin: 0 ${theme.spacing(1)};