fix(ui): refactored styles into base.less (#20869)

* fix(ui): refactored styles into base.less

* fixed figure styles

* fixed input line-height

* fixed icon alignment in BannerSummary

* fixed alignment of icon in BannerSummary

* replaced custom component with AlertLink

* fixed test + updated AlertLink to support data-test-id

Co-authored-by: Robin Rendle <robin@erskinedesign.com>

docs-ui/less/sentry.less

@@ -5,17 +5,6 @@ body {
   background: transparent;
 }
 
-html {
-  box-sizing: border-box;
-  /* font-size: 14px; */
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
 .section {
   margin-bottom: 32px;
 }

src/sentry/static/sentry/app/components/alertLink.tsx

@@ -13,6 +13,7 @@ type Priority = 'info' | 'warning' | 'success' | 'error' | 'muted';
 type LinkProps = React.ComponentPropsWithoutRef<typeof Link>;
 
 type OtherProps = {
+  ['data-test-id']?: string;
   icon?: string | React.ReactNode;
   onClick?: (e: React.MouseEvent) => void;
 };
@@ -50,10 +51,12 @@ class AlertLink extends React.Component<Props> {
       openInNewTab,
       to,
       href,
+      ['data-test-id']: dataTestId,
     } = this.props;
 
     return (
       <StyledLink
+        data-test-id={dataTestId}
         to={to}
         href={href}
         onClick={onClick}

src/sentry/static/sentry/app/components/events/styles.tsx

@@ -57,7 +57,7 @@ export const BannerSummary = styled('p')`
     flex-shrink: 0;
     flex-grow: 0;
     margin-right: ${space(1)};
-    margin-top: ${space(0.5)};
+    margin-top: 2px;
   }
 
   & > span {

src/sentry/static/sentry/app/components/modals/inviteMembersModal/index.tsx

@@ -7,7 +7,7 @@ import {MEMBER_ROLES} from 'app/constants';
 import {ModalRenderProps} from 'app/actionCreators/modal';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 import {uniqueId} from 'app/utils/guid';
-import {IconCheckmark, IconWarning, IconAdd, IconMail} from 'app/icons';
+import {IconCheckmark, IconWarning, IconAdd} from 'app/icons';
 import Button from 'app/components/button';
 import HookOrDefault from 'app/components/hookOrDefault';
 import QuestionTooltip from 'app/components/questionTooltip';
@@ -315,7 +315,6 @@ class InviteMembersModal extends AsyncComponent<Props, State> {
     const hookRenderer: InviteModalRenderFunc = ({sendInvites, canSend, headerInfo}) => (
       <React.Fragment>
         <Heading>
-          <IconMail size="lg" />
           {t('Invite New Members')}
           {!this.willInvite && (
             <QuestionTooltip

src/sentry/static/sentry/app/styles/text.tsx

@@ -26,15 +26,6 @@ const textStyles = () => css`
     }
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.2;
-  }
-
   p,
   ul,
   ol,
@@ -42,30 +33,6 @@ const textStyles = () => css`
     line-height: 1.5;
   }
 
-  h1 {
-    font-size: 3.2rem;
-  }
-
-  h2 {
-    font-size: 2.8rem;
-  }
-
-  h3 {
-    font-size: 2.4rem;
-  }
-
-  h4 {
-    font-size: 2rem;
-  }
-
-  h5 {
-    font-size: 1.6rem;
-  }
-
-  h6 {
-    font-size: 1.4rem;
-  }
-
   pre {
     word-break: break-all;
     white-space: pre-wrap;

src/sentry/static/sentry/app/views/settings/organizationMembers/organizationMembersWrapper.tsx

@@ -4,18 +4,16 @@ import {RouteComponentProps} from 'react-router/lib/Router';
 
 import {openInviteMembersModal} from 'app/actionCreators/modal';
 import {Organization, Member} from 'app/types';
-import {Panel} from 'app/components/panels';
 import {t} from 'app/locale';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 import AsyncView from 'app/views/asyncView';
 import Badge from 'app/components/badge';
-import Button from 'app/components/button';
 import {IconMail} from 'app/icons';
 import ListLink from 'app/components/links/listLink';
+import AlertLink from 'app/components/alertLink';
 import NavTabs from 'app/components/navTabs';
 import routeTitleGen from 'app/utils/routeTitle';
 import SettingsPageHeader from 'app/views/settings/components/settingsPageHeader';
-import space from 'app/styles/space';
 import withOrganization from 'app/utils/withOrganization';
 
 type Props = {
@@ -110,21 +108,14 @@ class OrganizationMembersWrapper extends AsyncView<Props, State> {
       <React.Fragment>
         <SettingsPageHeader title="Members" />
 
-        <StyledPanel>
-          <IconMail size="lg" />
-          <TextContainer>
-            <Heading>{t('Invite new members')}</Heading>
-            <SubText>
-              {t('Invite new members by email to join your organization')}
-            </SubText>
-          </TextContainer>
-          <Button
-            priority="primary"
-            onClick={() => openInviteMembersModal({source: 'members_settings'})}
-          >
-            {t('Invite Members')}
-          </Button>
-        </StyledPanel>
+        <AlertLink
+          data-test-id="email-invite"
+          icon={<IconMail />}
+          priority="info"
+          onClick={() => openInviteMembersModal({source: 'members_settings'})}
+        >
+          {t('Invite new members by email to join your organization')}
+        </AlertLink>
 
         {this.showNavTabs && (
           <NavTabs underlined>
@@ -168,33 +159,6 @@ class OrganizationMembersWrapper extends AsyncView<Props, State> {
   }
 }
 
-const StyledPanel = styled(Panel)`
-  padding: 18px;
-  margin-top: -14px;
-  margin-bottom: 40px;
-  display: grid;
-  grid-template-columns: max-content auto max-content;
-  grid-gap: ${space(3)};
-  align-content: center;
-`;
-
-const TextContainer = styled('div')`
-  display: inline-grid;
-  grid-gap: ${space(1)};
-`;
-
-const Heading = styled('h1')`
-  margin: 0;
-  font-weight: 400;
-  font-size: ${p => p.theme.fontSizeExtraLarge};
-`;
-
-const SubText = styled('p')`
-  margin: 0;
-  color: ${p => p.theme.gray600};
-  font-size: 15px;
-`;
-
 const StyledBadge = styled(Badge)`
   margin-left: -12px;
 

src/sentry/static/sentry/less/includes/bootstrap/normalize.less → src/sentry/static/sentry/less/base.less

@@ -1,4 +1,148 @@
-// stylelint-disable
+* {
+  box-sizing: border-box;
+}
+
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  font-size: 10px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100%;
+}
+
+body {
+  font-family: @font-family-base;
+  margin: 0;
+  font-size: 16px;
+  line-height: 24px;
+  color: @gray-darker;
+  background: @white-dark;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+  min-height: 100vh;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 20px;
+  line-height: 1.2;
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 3.2rem;
+}
+
+h2 {
+  font-size: 2.8rem;
+}
+
+h3 {
+  font-size: 2.4rem;
+}
+
+h4 {
+  font-size: 2rem;
+}
+
+h5 {
+  font-size: 1.6rem;
+}
+
+h6 {
+  font-size: 1.4rem;
+}
+
+ul,
+ol {
+  margin-top: 0;
+  padding: 0 0 0 20px;
+
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+}
+
+p,
+ul,
+ol,
+blockquote {
+  padding-top: 0;
+  margin-top: 0;
+  line-height: 1.5;
+}
+
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+//
+// Scaffolding
+// --------------------------------------------------
+
+// Reset the box-sizing
+//
+// Heads up! This reset may cause conflicts with some third-party widgets.
+// For recommendations on resolving such conflicts, see
+// https://getbootstrap.com/docs/3.4/getting-started/#third-box-sizing
+
+// Reset fonts for relevant elements
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+// Links
+
+a {
+  color: @link-color;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: @link-hover-color;
+    text-decoration: @link-hover-decoration;
+  }
+
+  &:focus {
+    .tab-focus();
+  }
+}
+
+// Figures
+//
+// We reset this here because previously Normalize had no `figure` margins. This
+// ensures we don't break anyone's use of the element.
+
+figure {
+  margin: 0;
+}
+
+// Images
+
+img {
+  vertical-align: middle;
+}
 
 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 
@@ -8,20 +152,10 @@
 //    without disabling user zoom.
 //
 
-html {
-  font-family: sans-serif; // 1
-  -ms-text-size-adjust: 100%; // 2
-  -webkit-text-size-adjust: 100%; // 2
-}
-
 //
 // Remove default margin.
 //
 
-body {
-  margin: 0;
-}
-
 // HTML5 display definitions
 // ==========================================================================
 
@@ -202,14 +336,6 @@ svg:not(:root) {
 // Grouping content
 // ==========================================================================
 
-//
-// Address margin not present in IE 8/9 and Safari.
-//
-
-figure {
-  margin: 1em 40px;
-}
-
 //
 // Address differences between Firefox and other browsers.
 //
@@ -293,9 +419,9 @@ select {
 //
 
 button,
-html input[type="button"], // 1
-input[type="reset"],
-input[type="submit"] {
+  html input[type="button"], // 1
+  input[type="reset"],
+  input[type="submit"] {
   -webkit-appearance: button; // 2
   cursor: pointer; // 3
 }
@@ -319,15 +445,6 @@ input::-moz-focus-inner {
   padding: 0;
 }
 
-//
-// Address Firefox 4+ setting `line-height` on `input` using `!important` in
-// the UA stylesheet.
-//
-
-input {
-  line-height: normal;
-}
-
 //
 // It's recommended that you don't attempt to style these elements.
 // Firefox's implementation doesn't respect box-sizing, padding, or width.

src/sentry/static/sentry/less/includes/bootstrap.less

@@ -3,7 +3,6 @@
 @import './bootstrap/buttons.less';
 @import './bootstrap/button-groups.less';
 @import './bootstrap/dropdowns.less';
-@import './bootstrap/normalize.less';
 @import './bootstrap/navs.less';
 @import './bootstrap/print.less';
 @import './bootstrap/type.less';

src/sentry/static/sentry/less/includes/bootstrap/bootstrap.less

@@ -9,7 +9,6 @@
 @import 'mixins.less';
 
 // Reset and dependencies
-@import 'normalize.less';
 @import 'print.less';
 @import 'glyphicons.less';
 

src/sentry/static/sentry/less/includes/bootstrap/scaffolding.less

@@ -1,77 +1,3 @@
-//
-// Scaffolding
-// --------------------------------------------------
-
-// Reset the box-sizing
-//
-// Heads up! This reset may cause conflicts with some third-party widgets.
-// For recommendations on resolving such conflicts, see
-// https://getbootstrap.com/docs/3.4/getting-started/#third-box-sizing
-* {
-  .box-sizing(border-box);
-}
-*:before,
-*:after {
-  .box-sizing(border-box);
-}
-
-// Body reset
-
-html {
-  font-size: 10px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-body {
-  font-family: @font-family-base;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  color: @text-color;
-  background-color: @body-bg;
-}
-
-// Reset fonts for relevant elements
-input,
-button,
-select,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-// Links
-
-a {
-  color: @link-color;
-  text-decoration: none;
-
-  &:hover,
-  &:focus {
-    color: @link-hover-color;
-    text-decoration: @link-hover-decoration;
-  }
-
-  &:focus {
-    .tab-focus();
-  }
-}
-
-// Figures
-//
-// We reset this here because previously Normalize had no `figure` margins. This
-// ensures we don't break anyone's use of the element.
-
-figure {
-  margin: 0;
-}
-
-// Images
-
-img {
-  vertical-align: middle;
-}
-
 // Responsive images (ensure images don't scale beyond their parents)
 .img-responsive {
   .img-responsive();