DEVPROD-8669: Move shared styles to lib (#565)

apps/parsley/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import { Global } from "@emotion/react";
 import { Decorator } from "@storybook/react";
-import { globalStyles } from "../src/components/styles/GlobalStyles";
+import { globalStyles } from "components/styles";
 import { LogContextProvider } from "../src/context/LogContext";
 import WithToastContext from "@evg-ui/lib/test_utils/toast-decorator";
 

apps/parsley/src/components/Breadcrumbs/index.tsx

@@ -2,9 +2,9 @@ import { Fragment, ReactNode } from "react";
 import styled from "@emotion/styled";
 import { palette } from "@leafygreen-ui/palette";
 import Tooltip from "@leafygreen-ui/tooltip";
+import { StyledLink, StyledRouterLink } from "@evg-ui/lib/components/styles";
 import { size } from "@evg-ui/lib/constants/tokens";
 import Icon from "components/Icon";
-import { StyledLink, StyledRouterLink } from "components/styles";
 import { trimStringFromMiddle } from "utils/string";
 
 const { gray } = palette;

apps/parsley/src/components/NavBar/UploadLink/index.tsx

@@ -2,9 +2,9 @@ import { useCallback, useState } from "react";
 import { css } from "@emotion/react";
 import ConfirmationModal from "@leafygreen-ui/confirmation-modal";
 import { useLocation, useNavigate } from "react-router-dom";
+import { StyledRouterLink } from "@evg-ui/lib/components/styles";
 import { zIndex } from "@evg-ui/lib/constants/tokens";
 import { useLogDropAnalytics } from "analytics";
-import { StyledRouterLink } from "components/styles";
 import routes from "constants/routes";
 import { SentryBreadcrumb, leaveBreadcrumb } from "utils/errorReporting";
 

apps/parsley/src/components/NavBar/index.tsx

@@ -3,12 +3,12 @@ import styled from "@emotion/styled";
 import Button from "@leafygreen-ui/button";
 import IconButton from "@leafygreen-ui/icon-button";
 import { palette } from "@leafygreen-ui/palette";
+import { StyledLink } from "@evg-ui/lib/components/styles";
 import { size } from "@evg-ui/lib/constants/tokens";
 import DetailsMenu from "components/DetailsMenu";
 import Icon from "components/Icon";
 import Search from "components/Search";
 import ShortcutModal from "components/ShortcutModal";
-import { StyledLink } from "components/styles";
 import { docsURL } from "constants/externalLinks";
 import { navbarHeight } from "constants/tokens";
 import { useAuthContext } from "context/auth";

apps/parsley/src/components/Popconfirm/index.tsx

@@ -2,8 +2,8 @@ import { useRef, useState } from "react";
 import styled from "@emotion/styled";
 import Button from "@leafygreen-ui/button";
 import Tooltip, { TooltipProps } from "@leafygreen-ui/tooltip";
+import { wordBreakCss } from "@evg-ui/lib/components/styles";
 import { size, zIndex } from "@evg-ui/lib/constants/tokens";
-import { wordBreakCss } from "components/styles";
 import { useOnClickOutside } from "hooks";
 
 type PopconfirmProps = TooltipProps & {

apps/parsley/src/components/SubHeader/EvergreenTaskSubHeader.tsx

@@ -2,11 +2,11 @@ import { useQuery } from "@apollo/client";
 import { InlineCode } from "@leafygreen-ui/typography";
 import TaskStatusBadge from "@evg-ui/lib/components/Badge/TaskStatusBadge";
 import TestStatusBadge from "@evg-ui/lib/components/Badge/TestStatusBadge";
+import { StyledLink } from "@evg-ui/lib/components/styles";
 import { TaskStatus } from "@evg-ui/lib/types/task";
 import { usePreferencesAnalytics } from "analytics";
 import Breadcrumbs from "components/Breadcrumbs";
 import Icon from "components/Icon";
-import { StyledLink } from "components/styles";
 import { LogTypes } from "constants/enums";
 import { getEvergreenTaskURL } from "constants/externalURLTemplates";
 import {

apps/parsley/src/components/styles/GlobalStyles.tsx

@@ -1,43 +1,30 @@
 import { Global, css } from "@emotion/react";
-import fontStyles from "components/styles/fonts";
-
-const resetStyles = css`
-  /* Reset styles */
-  *,
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-`;
+import {
+  bodyStyles,
+  fontStyles,
+  resetStyles,
+} from "@evg-ui/lib/components/styles";
 
 export const globalStyles = css`
+  ${fontStyles}
   ${resetStyles}
   background-color: white;
+
   body {
-    font-family: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial,
-      sans-serif;
-    font-size: 13px;
-    margin: 0;
+    ${bodyStyles}
+
+    /* Increase default tab size to make it easier to read logs. */
     tab-size: 4;
 
-    /* Prevent scroll bounce behavior */
+    /* Prevent scroll bounce behavior. */
     overscroll-behavior-y: none;
     overscroll-behavior-x: none;
 
-    /* Hides scroll bar on webkit browsers preventing it from using up page width */
+    /* Hide scroll bar on webkit browsers to prevent it from using up page width. */
     ::-webkit-scrollbar {
       display: none;
     }
   }
 `;
 
-const GlobalStyles = () => (
-  <Global
-    styles={css`
-      ${fontStyles}
-      ${globalStyles}
-    `}
-  />
-);
-
-export default GlobalStyles;
+export const GlobalStyles = () => <Global styles={globalStyles} />;

apps/parsley/src/components/styles/index.ts

@@ -1,7 +1,3 @@
-import GlobalStyles from "./GlobalStyles";
-
 export * from "./Layout";
-export * from "./Link";
-export * from "./Typography";
 export * from "./sectionHeader";
-export { GlobalStyles };
+export * from "./GlobalStyles";

apps/spruce/.storybook/preview.tsx

@@ -1,19 +1,11 @@
 import { Global, css } from "@emotion/react";
 import { Decorator } from "@storybook/react";
-import {
-  overrideStyles,
-  resetStyles,
-} from "../src/components/styles/GlobalStyles";
+import { globalStyles } from "components/styles";
 
 export const decorators: Decorator[] = [
   (Story: () => JSX.Element) => (
     <>
-      <Global
-        styles={css`
-          ${resetStyles}
-          ${overrideStyles}
-        `}
-      />
+      <Global styles={globalStyles} />
       <Story />
     </>
   ),

apps/spruce/src/App.tsx

@@ -7,7 +7,7 @@ import {
 } from "react-router-dom";
 import { Content } from "components/Content";
 import { ErrorBoundary } from "components/ErrorHandling";
-import { GlobalStyles } from "components/styles/GlobalStyles";
+import { GlobalStyles } from "components/styles";
 import { routes } from "constants/routes";
 import { ContextProviders } from "context/Providers";
 import GQLWrapper from "gql/GQLWrapper";

apps/spruce/src/components/Banners/GithubUsernameBanner.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@apollo/client";
 import Banner from "@leafygreen-ui/banner";
-import { StyledRouterLink } from "components/styles";
+import { StyledRouterLink } from "@evg-ui/lib/components/styles";
 import { getPreferencesRoute, PreferencesTabRoutes } from "constants/routes";
 import { UserSettingsQuery } from "gql/generated/types";
 import { USER_SETTINGS } from "gql/queries";

apps/spruce/src/components/Banners/TaskSchedulingWarningBanner.tsx

@@ -1,5 +1,5 @@
 import Banner from "@leafygreen-ui/banner";
-import { StyledLink } from "components/styles";
+import { StyledLink } from "@evg-ui/lib/components/styles";
 import { taskSchedulingLimitsDocumentationUrl } from "constants/externalResources";
 
 interface TaskSchedulingWarningBannerProps {

apps/spruce/src/components/Breadcrumbs/__snapshots__/Breadcrumbs_Default.storyshot

@@ -6,7 +6,7 @@
       class="leafygreen-ui-cssveg"
     >
       <a
-        class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-16e7rxl"
+        class="lg-ui-0001 css-r79zk7-overrideStyles leafygreen-ui-16e7rxl"
         href="/commits/spruce"
       >
         <span>

apps/spruce/src/components/Breadcrumbs/index.tsx

@@ -2,9 +2,9 @@ import { Fragment } from "react";
 import styled from "@emotion/styled";
 import { palette } from "@leafygreen-ui/palette";
 import Tooltip from "@leafygreen-ui/tooltip";
+import { StyledRouterLink } from "@evg-ui/lib/components/styles";
 import { size } from "@evg-ui/lib/constants/tokens";
 import Icon from "components/Icon";
-import { StyledRouterLink } from "components/styles";
 import { trimStringFromMiddle } from "utils/string";
 
 const { gray } = palette;

apps/spruce/src/components/CodeChangesTable/index.tsx

@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import { useLeafyGreenTable } from "@leafygreen-ui/table";
+import { WordBreak, StyledLink } from "@evg-ui/lib/components/styles";
 import { FileDiffText } from "components/CodeChangesBadge";
-import { StyledLink, WordBreak } from "components/styles";
 import { BaseTable } from "components/Table/BaseTable";
 import { FileDiffsFragment } from "gql/generated/types";
 

apps/spruce/src/components/CommitChartLabel/index.tsx

@@ -2,9 +2,9 @@ import styled from "@emotion/styled";
 import { palette } from "@leafygreen-ui/palette";
 import { Body, BodyProps, InlineCode } from "@leafygreen-ui/typography";
 import { Link } from "react-router-dom";
+import { StyledRouterLink } from "@evg-ui/lib/components/styles";
 import { size, zIndex } from "@evg-ui/lib/constants/tokens";
 import ExpandedText from "components/ExpandedText";
-import { StyledRouterLink } from "components/styles";
 import { getVersionRoute, getTriggerRoute } from "constants/routes";
 import { UpstreamProjectFragment, GitTag } from "gql/generated/types";
 import { useSpruceConfig, useDateFormat } from "hooks";

apps/spruce/src/components/Feedback/index.tsx

@@ -1,8 +1,8 @@
 import IconButton from "@leafygreen-ui/icon-button";
 import { palette } from "@leafygreen-ui/palette";
 import Tooltip from "@leafygreen-ui/tooltip";
+import { StyledLink } from "@evg-ui/lib/components/styles";
 import Icon from "components/Icon";
-import { StyledLink } from "components/styles";
 import {
   getJiraBugUrl,
   getJiraImprovementUrl,

apps/spruce/src/components/HistoryTable/Cell/__snapshots__/Cell_ColumnHeaderCellStory.storyshot

@@ -4,7 +4,7 @@
     data-cy="header-cell"
   >
     <a
-      class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-1kmxc53"
+      class="lg-ui-0001 css-r79zk7-overrideStyles leafygreen-ui-1kmxc53"
       href="https://spruce.mongodb.com"
     >
       <span>

apps/spruce/src/components/HistoryTable/Cell/index.tsx

@@ -4,9 +4,10 @@ import Tooltip from "@leafygreen-ui/tooltip";
 import { Skeleton } from "antd";
 import { Link } from "react-router-dom";
 import ConditionalWrapper from "@evg-ui/lib/components/ConditionalWrapper";
+import { StyledRouterLink } from "@evg-ui/lib/components/styles";
 import { size } from "@evg-ui/lib/constants/tokens";
 import { TaskStatus } from "@evg-ui/lib/types/task";
-import { inactiveElementStyle, StyledRouterLink } from "components/styles";
+import { inactiveElementStyle } from "components/styles";
 import { getTaskRoute } from "constants/routes";
 import { COLUMN_LABEL_WIDTH, ROW_LABEL_WIDTH } from "../constants";
 import { HistoryTableIcon } from "../HistoryTableIcon";

apps/spruce/src/components/MetadataCard.tsx

@@ -3,8 +3,9 @@ import styled from "@emotion/styled";
 import { PolymorphicAs } from "@leafygreen-ui/polymorphic";
 import { Body, BodyProps } from "@leafygreen-ui/typography";
 import { Skeleton } from "antd";
+import { wordBreakCss } from "@evg-ui/lib/components/styles";
 import { ErrorWrapper } from "components/ErrorWrapper";
-import { SiderCard, wordBreakCss } from "components/styles";
+import { SiderCard } from "components/styles";
 import { Divider } from "components/styles/divider";
 
 interface Props {

apps/spruce/src/components/PatchesPage/ListArea/PatchCard/__snapshots__/PatchCard_ProjectPatchCard.storyshot

@@ -7,7 +7,7 @@
       class="css-17a1idw-Center-Left e1v2go1e4"
     >
       <a
-        class="lg-ui-0001 e1v2go1e2 css-1rriyg1-StyledLink-DescriptionLink leafygreen-ui-16e7rxl"
+        class="lg-ui-0001 e1v2go1e2 css-qpsgxp-overrideStyles-DescriptionLink leafygreen-ui-16e7rxl"
         data-cy="patch-card-patch-link"
         href="/version/667b2f7f7a878200076f23d1/tasks"
       >
@@ -23,7 +23,7 @@
         by
 
         <a
-          class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-16e7rxl"
+          class="lg-ui-0001 css-r79zk7-overrideStyles leafygreen-ui-16e7rxl"
           data-cy="user-patches-link"
           href="/user/mohamed.khelif/patches"
         >

apps/spruce/src/components/PatchesPage/ListArea/PatchCard/__snapshots__/PatchCard_UserPatchCard.storyshot

@@ -7,7 +7,7 @@
       class="css-17a1idw-Center-Left e1v2go1e4"
     >
       <a
-        class="lg-ui-0001 e1v2go1e2 css-1rriyg1-StyledLink-DescriptionLink leafygreen-ui-16e7rxl"
+        class="lg-ui-0001 e1v2go1e2 css-qpsgxp-overrideStyles-DescriptionLink leafygreen-ui-16e7rxl"
         data-cy="patch-card-patch-link"
         href="/version/667b2f7f7a878200076f23d1/tasks"
       >
@@ -23,7 +23,7 @@
         on
 
         <a
-          class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-16e7rxl"
+          class="lg-ui-0001 css-r79zk7-overrideStyles leafygreen-ui-16e7rxl"
           data-cy="project-patches-link"
           href="/project/evergreen-ui/patches"
         >

apps/spruce/src/components/PatchesPage/ListArea/PatchCard/index.tsx

@@ -1,12 +1,12 @@
 import styled from "@emotion/styled";
 import Badge from "@leafygreen-ui/badge";
 import { palette } from "@leafygreen-ui/palette";
+import { StyledRouterLink } from "@evg-ui/lib/components/styles";
 import { fontSize, size } from "@evg-ui/lib/constants/tokens";
 import { Unpacked } from "@evg-ui/lib/types/utils";
 import { useUserPatchesAnalytics, useProjectPatchesAnalytics } from "analytics";
 import { GroupedTaskStatusBadge } from "components/GroupedTaskStatusBadge";
 import { PatchStatusBadge } from "components/PatchStatusBadge";
-import { StyledRouterLink } from "components/styles";
 import { unlinkedPRUsers } from "constants/patch";
 import { Requester } from "constants/requesters";
 import {