From 49efb3955f1746cb6a451dd71143e79b7fb3f7a9 Mon Sep 17 00:00:00 2001
From: Charles Wahome <thewahome.cw@gmail.com>
Date: Fri, 8 May 2020 01:19:43 +0300
Subject: [PATCH] Fix: Misaligned sidebar elements (#530)

---
 .../sidebar/sample-queries/SampleQueries.tsx  | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
index 7731de902..946c25950 100644
--- a/src/app/views/sidebar/sample-queries/SampleQueries.tsx
+++ b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -1,7 +1,7 @@
 import {
-  DetailsList, DetailsListLayoutMode, DetailsRow, getId,
-  IColumn, IconButton, MessageBar, MessageBarType, SearchBox,
-  Selection, SelectionMode, Spinner, SpinnerSize, styled, TooltipHost
+  DetailsList, DetailsListLayoutMode, DetailsRow, FontSizes,
+  FontWeights, getId, GroupHeader, IColumn, IconButton,
+  MessageBar, MessageBarType, SearchBox, Selection, SelectionMode, Spinner, SpinnerSize, styled, TooltipHost
 } from 'office-ui-fabric-react';
 import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -208,27 +208,28 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
   };
 
   public renderGroupHeader = (props: any): any => {
-    const classes = classNames(this.props);
+    const onToggleSelectGroup = () => {
+      props.onToggleCollapse(props.group);
+    };
 
     return (
-      <div aria-label={props.group!.name} onClick={this.onToggleCollapse(props)}>
-        <div className={classes.groupHeaderRow}>
-          <IconButton
-            className={`${classes.pullLeft} ${classes.groupHeaderRowIcon}`}
-            iconProps={{ iconName: props.group!.isCollapsed ? 'ChevronRightSmall' : 'ChevronDownSmall' }}
-            title={props.group!.isCollapsed ?
-              `Expand ${props.group!.name}` : `Collapse ${props.group!.name}`}
-            ariaLabel='expand collapse group'
-            onClick={() => this.onToggleCollapse(props)}
-          />
-          <div className={classes.groupTitle}>
-            <span>{props.group!.name}</span>
-            <span className={classes.headerCount}>({props.group!.count})</span>
-          </div>
-        </div>
-      </div>
+      <GroupHeader
+        compact={true}
+        styles={{
+          check: { display: 'none' },
+          title: {
+          fontSize: FontSizes.medium,
+          fontWeight: FontWeights.semibold
+        },
+        expand: {
+          fontSize: FontSizes.small,
+          }
+        }}
+        {...props}
+        onToggleSelectGroup={onToggleSelectGroup}
+      />
     );
-  };
+  }
 
   private renderDetailsHeader() {
     return (