Design tweaks (#22886)

(cherry picked from commit 8ba75e77)

public/app/features/explore/RichHistory/RichHistoryCard.test.tsx

@@ -71,9 +71,9 @@ describe('RichHistoryCard', () => {
     const wrapper = setup();
     const wrapper = setup();
     expect(wrapper.find({ 'aria-label': 'Data source name' }).text()).toEqual('Test datasource');
     expect(wrapper.find({ 'aria-label': 'Data source name' }).text()).toEqual('Test datasource');
   });
   });
-  it('should render "Not linked to existing data source" if removed data source', () => {
+  it('should render "Data source does not exist anymore" if removed data source', () => {
     const wrapper = setup({ isRemoved: true });
     const wrapper = setup({ isRemoved: true });
-    expect(wrapper.find({ 'aria-label': 'Data source name' }).text()).toEqual('Not linked to existing data source');
+    expect(wrapper.find({ 'aria-label': 'Data source name' }).text()).toEqual('Data source does not exist anymore');
   });
   });
 
 
   describe('commenting', () => {
   describe('commenting', () => {

public/app/features/explore/RichHistory/RichHistoryCard.tsx

@@ -35,7 +35,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
       : theme.colors.white
       : theme.colors.white
     : isRemoved
     : isRemoved
     ? theme.colors.gray15
     ? theme.colors.gray15
-    : theme.colors.dark7;
+    : theme.colors.gray05;
   const cardBoxShadow = theme.isLight ? `0px 2px 2px ${borderColor}` : `0px 2px 4px black`;
   const cardBoxShadow = theme.isLight ? `0px 2px 2px ${borderColor}` : `0px 2px 4px black`;
 
 
   return {
   return {
@@ -46,7 +46,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
       margin: ${theme.spacing.sm} 0;
       margin: ${theme.spacing.sm} 0;
       box-shadow: ${cardBoxShadow};
       box-shadow: ${cardBoxShadow};
       background-color: ${cardColor};
       background-color: ${cardColor};
-      border-radius: ${theme.border.radius};
+      border-radius: ${theme.border.radius.sm};
       .starred {
       .starred {
         color: ${theme.colors.orange};
         color: ${theme.colors.orange};
       }
       }
@@ -71,7 +71,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
       display: flex;
       display: flex;
       align-items: center;
       align-items: center;
       font-size: ${theme.typography.size.sm};
       font-size: ${theme.typography.size.sm};
-      font-weight: ${theme.typography.weight.bold};
+      font-weight: ${theme.typography.weight.semibold};
     `,
     `,
     queryActionButtons: css`
     queryActionButtons: css`
       max-width: ${rigtColumnContentWidth};
       max-width: ${rigtColumnContentWidth};
@@ -84,7 +84,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
       }
       }
     `,
     `,
     queryContainer: css`
     queryContainer: css`
-      font-weight: ${theme.typography.weight.bold};
+      font-weight: ${theme.typography.weight.semibold};
       width: calc(100% - ${rigtColumnWidth});
       width: calc(100% - ${rigtColumnWidth});
     `,
     `,
     queryRow: css`
     queryRow: css`
@@ -236,7 +236,7 @@ export function RichHistoryCard(props: Props) {
         <div className={styles.datasourceContainer}>
         <div className={styles.datasourceContainer}>
           <img src={dsImg} aria-label="Data source icon" />
           <img src={dsImg} aria-label="Data source icon" />
           <div aria-label="Data source name">
           <div aria-label="Data source name">
-            {isRemoved ? 'Not linked to existing data source' : query.datasourceName}
+            {isRemoved ? 'Data source does not exist anymore' : query.datasourceName}
           </div>
           </div>
         </div>
         </div>
         {queryActionButtons}
         {queryActionButtons}