Skip to content

Commit

Permalink
DEVPROD-1065: Remove antd layout (#312)
Browse files Browse the repository at this point in the history
  • Loading branch information
sophstad authored Aug 15, 2024
1 parent 9a61ec6 commit 0ab6d5a
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 140 deletions.
2 changes: 1 addition & 1 deletion .github/pull_request_template.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
DEVPROD-NNNNN
<!-- Does this PR need a 🔵Spruce or 🟢Parsley label? -->
<!-- Does this PR need a 🔵Spruce or 🟢Parsley label? Add it in the sidebar 👉 -->

### Description
<!-- add description, context, thought process, etc -->
Expand Down
10 changes: 9 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,22 @@ Check out the
[Yarn Workspaces documentation](https://classic.yarnpkg.com/lang/en/docs/workspaces/)
for more.

### Upgrades
### Dependencies

To upgrade a dependency across workspaces:

```bash
yarn upgrade-interactive [--latest] [package-name]
```

To remove all installed dependencies:

```bash
yarn clean
```

You can then rerun `yarn install`.

### Scripts

To run a script in a workspace from root:
Expand Down
33 changes: 15 additions & 18 deletions apps/spruce/src/components/styles/Layout.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
import { css } from "@emotion/react";
import styled from "@emotion/styled";
import { palette } from "@leafygreen-ui/palette";
import { H2, H2Props, Body, BodyProps } from "@leafygreen-ui/typography";
import { Layout } from "antd";
import { size, fontSize } from "constants/tokens";

const { gray, red, white } = palette;
const { Content, Sider } = Layout;

const whiteBackground = css`
background: ${white};
background-color: ${white};
`;
const { gray, red } = palette;

export const PageWrapper = styled.div`
grid-area: contents;
Expand All @@ -30,20 +22,25 @@ export const PageGrid = styled.div`
height: 100vh;
`;

/* Flexbox-based antd components to be used together */
export const PageLayout = styled(Layout)`
${whiteBackground}
export const PageLayout = styled.section<{ hasSider?: boolean }>`
display: flex;
flex: auto;
flex-direction: ${({ hasSider }) => (hasSider ? "row" : "column")};
min-height: 0;
`;
export const PageSider = styled(Sider)`
${whiteBackground}
export const PageSider = styled.aside<{ width?: number }>`
${({ width = 275 }) => `
max-width: ${width}px;
min-width: ${width}px;
width: ${width}px;
`}
`;
export const PageContent = styled(Content)`
export const PageContent = styled.main`
flex: auto;
margin-left: ${size.s};
overflow: hidden;
`;

PageSider.defaultProps = { width: 275 };

export const PageTitle = styled(H2)<H2Props>`
margin-bottom: ${size.s};
`;
Expand Down Expand Up @@ -78,7 +75,7 @@ export const ErrorMessage = styled(Body)<BodyProps>`
color: ${red.base};
`;

export const HR = styled("hr")`
export const HR = styled.hr`
background-color: ${gray.light2};
border: 0;
height: 1px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,168 +70,163 @@
</div>
</div>
<section
class="ant-layout ant-layout-has-sider css-1aoao0r-PageLayout-whiteBackground e1xf068s9"
class="css-1fnoxta-PageLayout e1xf068s9"
>
<aside
class="ant-layout-sider ant-layout-sider-dark css-1vgfpw2-PageSider-whiteBackground e1xf068s8"
style="flex: 0 0 275px; max-width: 275px; min-width: 275px; width: 275px;"
class="css-9485dj-PageSider e1xf068s8"
>
<div
class="ant-layout-sider-children"
class="css-1l8tpk-SiderCard e1am38ss0 leafygreen-ui-1ecxdul"
>
<div
class="css-1l8tpk-SiderCard e1am38ss0 leafygreen-ui-1ecxdul"
>
<div>
<p
class="css-1k03zl5-Title e1ul56zb1 leafygreen-ui-1miy0xp"
>
Patch Metadata
</p>
<hr
class="css-qqg5h5-Divider eb6szep0"
/>
</div>
<p
class="css-1spnncu-Item-wordBreakCss e1ul56zb0 leafygreen-ui-1tb6tuo"
>
Submitted by:
mohamed.khelif
</p>
<div>
<p
class="css-1spnncu-Item-wordBreakCss e1ul56zb0 leafygreen-ui-1tb6tuo"
class="css-1k03zl5-Title e1ul56zb1 leafygreen-ui-1miy0xp"
>
Submitted at:
2020-08-28T15:00:17Z
</p>
<p
class="css-1spnncu-Item-wordBreakCss e1ul56zb0 leafygreen-ui-1tb6tuo"
>
Project:

<a
class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-sv8tvj"
href="/project/spruce/patches"
>
<span>
spruce
</span>
</a>
Patch Metadata
</p>
<hr
class="css-qqg5h5-Divider eb6szep0"
/>
</div>
<div
class="css-1rkkuaq-DisableWrapper e1xdo4m90"
data-cy="build-variant-select-wrapper"
<p
class="css-1spnncu-Item-wordBreakCss e1ul56zb0 leafygreen-ui-1tb6tuo"
>
Submitted by:
mohamed.khelif
</p>
<p
class="css-1spnncu-Item-wordBreakCss e1ul56zb0 leafygreen-ui-1tb6tuo"
>
Submitted at:
2020-08-28T15:00:17Z
</p>
<p
class="css-1spnncu-Item-wordBreakCss e1ul56zb0 leafygreen-ui-1tb6tuo"
>
Project:

<a
class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-sv8tvj"
href="/project/spruce/patches"
>
<span>
spruce
</span>
</a>
</p>
</div>
<div
class="css-1rkkuaq-DisableWrapper e1xdo4m90"
data-cy="build-variant-select-wrapper"
>
<span
class="css-1etd4q7-UserSelectWrapper e1xdo4m91"
>
<span
class="css-1etd4q7-UserSelectWrapper e1xdo4m91"
<div
class="css-1ff72qn-SiderCard-StyledSiderCard e14bc6yx4 leafygreen-ui-1ecxdul"
>
<div
class="css-1ff72qn-SiderCard-StyledSiderCard e14bc6yx4 leafygreen-ui-1ecxdul"
class="css-993586-Container-cardSidePadding e14bc6yx5"
>
<div
class="css-993586-Container-cardSidePadding e14bc6yx5"
<p
class="leafygreen-ui-1miy0xp"
>
<p
class="leafygreen-ui-1miy0xp"
>
Select Build Variants and Tasks
</p>
<p
class="leafygreen-ui-110o31d"
data-lgid="lg-description"
>
Use Shift + Click to edit multiple variants simultaneously.
</p>
<hr
class="css-qqg5h5-Divider eb6szep0"
/>
</div>
Select Build Variants and Tasks
</p>
<p
class="leafygreen-ui-110o31d"
data-lgid="lg-description"
>
Use Shift + Click to edit multiple variants simultaneously.
</p>
<hr
class="css-qqg5h5-Divider eb6szep0"
/>
</div>
<div
class="css-1xp9bbh-ScrollableBuildVariantContainer e14bc6yx0"
>
<div
class="css-1xp9bbh-ScrollableBuildVariantContainer e14bc6yx0"
class="css-9u3o4h-BuildVariant-cardSidePadding e14bc6yx3"
data-cy="build-variant-list-item"
data-selected="true"
>
<div
class="css-9u3o4h-BuildVariant-cardSidePadding e14bc6yx3"
data-cy="build-variant-list-item"
data-selected="true"
class="css-xk6ynb-VariantName e14bc6yx2"
>
<div
class="css-xk6ynb-VariantName e14bc6yx2"
<p
class="leafygreen-ui-1miy0xp"
>
<p
class="leafygreen-ui-1miy0xp"
>
Ubuntu 20.04
</p>
</div>
Ubuntu 20.04
</p>
</div>
</div>
<div
class="css-yy9i1r-BuildVariant-cardSidePadding e14bc6yx3"
data-cy="build-variant-list-item"
data-selected="false"
>
<div
class="css-yy9i1r-BuildVariant-cardSidePadding e14bc6yx3"
data-cy="build-variant-list-item"
data-selected="false"
class="css-xk6ynb-VariantName e14bc6yx2"
>
<div
class="css-xk6ynb-VariantName e14bc6yx2"
<p
class="leafygreen-ui-1tb6tuo"
>
<p
class="leafygreen-ui-1tb6tuo"
>
Ubuntu 22.04
</p>
</div>
Ubuntu 22.04
</p>
</div>
</div>
</div>
</div>
<div
class="css-1ff72qn-SiderCard-StyledSiderCard e14bc6yx4 leafygreen-ui-1ecxdul"
>
<div
class="css-1ff72qn-SiderCard-StyledSiderCard e14bc6yx4 leafygreen-ui-1ecxdul"
class="css-993586-Container-cardSidePadding e14bc6yx5"
>
<div
class="css-993586-Container-cardSidePadding e14bc6yx5"
<p
class="leafygreen-ui-1miy0xp"
>
<p
class="leafygreen-ui-1miy0xp"
>
Select Downstream Tasks
</p>
<p
class="leafygreen-ui-110o31d"
data-lgid="lg-description"
>
Use Shift + Click to edit multiple variants simultaneously.
</p>
<hr
class="css-qqg5h5-Divider eb6szep0"
/>
</div>
Select Downstream Tasks
</p>
<p
class="leafygreen-ui-110o31d"
data-lgid="lg-description"
>
Use Shift + Click to edit multiple variants simultaneously.
</p>
<hr
class="css-qqg5h5-Divider eb6szep0"
/>
</div>
<div
class="css-1xp9bbh-ScrollableBuildVariantContainer e14bc6yx0"
>
<div
class="css-1xp9bbh-ScrollableBuildVariantContainer e14bc6yx0"
class="css-yy9i1r-BuildVariant-cardSidePadding e14bc6yx3"
data-cy="trigger-alias-list-item"
data-selected="false"
>
<div
class="css-yy9i1r-BuildVariant-cardSidePadding e14bc6yx3"
data-cy="trigger-alias-list-item"
data-selected="false"
class="css-xk6ynb-VariantName e14bc6yx2"
>
<div
class="css-xk6ynb-VariantName e14bc6yx2"
<p
class="leafygreen-ui-1tb6tuo"
>
<p
class="leafygreen-ui-1tb6tuo"
>
evergreen (evergreen)
</p>
</div>
evergreen (evergreen)
</p>
</div>
</div>
</div>
</span>
</div>
</div>
</span>
</div>
</aside>
<section
class="ant-layout css-1aoao0r-PageLayout-whiteBackground e1xf068s9"
class="css-1fk6utf-PageLayout e1xf068s9"
>
<main
class="ant-layout-content css-8bxtim-PageContent e1xf068s7"
class="css-7qhrew-PageContent e1xf068s7"
>
<div
class="css-1svlhkk-StyledTabs e1g8s93l0"
Expand Down

0 comments on commit 0ab6d5a

Please sign in to comment.