fix(ui) Fix pagination button borders (#18986)

Fix the missing rounded corners on the pagination button and remove the
redundant tooltip from the 'related transaction' button as it was not
adding any value.

src/sentry/static/sentry/app/views/organizationGroupDetails/eventToolbar.jsx

@@ -1,7 +1,6 @@
 import {Link} from 'react-router';
 import PropTypes from 'prop-types';
 import React from 'react';
-import createReactClass from 'create-react-class';
 import moment from 'moment-timezone';
 import styled from '@emotion/styled';
 
@@ -15,7 +14,6 @@ import FileSize from 'app/components/fileSize';
 import SentryTypes from 'app/sentryTypes';
 import Tooltip from 'app/components/tooltip';
 import getDynamicText from 'app/utils/getDynamicText';
-import space from 'app/styles/space';
 import {transactionSummaryRouteWithQuery} from 'app/views/performance/transactionSummary/utils';
 
 const formatDateDelta = (reference, observed) => {
@@ -39,20 +37,18 @@ const formatDateDelta = (reference, observed) => {
   return results.join(', ');
 };
 
-const GroupEventToolbar = createReactClass({
-  displayName: 'GroupEventToolbar',
-
-  propTypes: {
+class GroupEventToolbar extends React.Component {
+  static propTypes = {
     orgId: PropTypes.string.isRequired,
     group: SentryTypes.Group.isRequired,
     event: SentryTypes.Event.isRequired,
     location: PropTypes.object.isRequired,
     organization: SentryTypes.Organization.isRequired,
-  },
+  };
 
   shouldComponentUpdate(nextProps) {
     return this.props.event.id !== nextProps.event.id;
-  },
+  }
 
   getDateTooltip() {
     const evt = this.props.event;
@@ -84,7 +80,7 @@ const GroupEventToolbar = createReactClass({
         )}
       </dl>
     );
-  },
+  }
 
   renderRelatedTransactionButton() {
     const {organization, event, orgId, location} = this.props;
@@ -117,13 +113,11 @@ const GroupEventToolbar = createReactClass({
     });
 
     return (
-      <div key="related-transaction">
-        <RelatedTransactionButton title={t('Related Transaction')} to={to} size="small">
-          {t('Related Transaction')}
-        </RelatedTransactionButton>
-      </div>
+      <Button key="related-transaction" to={to} size="small">
+        {t('Related Transaction')}
+      </Button>
     );
-  },
+  }
 
   render() {
     const evt = this.props.event;
@@ -134,7 +128,6 @@ const GroupEventToolbar = createReactClass({
     const baseEventsPath = `/organizations/${orgId}/issues/${groupId}/events/`;
 
     const eventNavNodes = [
-      this.renderRelatedTransactionButton(),
       <Button
         size="small"
         key="oldest"
@@ -188,9 +181,10 @@ const GroupEventToolbar = createReactClass({
 
     return (
       <div className="event-toolbar">
-        <div className="pull-right">
+        <NavigationButtons gap={1}>
+          {this.renderRelatedTransactionButton()}
           <ButtonBar merged>{eventNavNodes}</ButtonBar>
-        </div>
+        </NavigationButtons>
         <h4>
           {t('Event')}{' '}
           <Link to={`${baseEventsPath}${evt.id}/`} className="event-id">
@@ -211,11 +205,11 @@ const GroupEventToolbar = createReactClass({
         </span>
       </div>
     );
-  },
-});
+  }
+}
 
-const RelatedTransactionButton = styled(Button)`
-  margin-right: ${space(2)};
+const NavigationButtons = styled(ButtonBar)`
+  float: right;
 `;
 
 export default GroupEventToolbar;