Skip to content

Commit

Permalink
refactor: #1178 Clean up un-used styles, remove SASS and move styles …
Browse files Browse the repository at this point in the history 
…to component (#2540)
  • Loading branch information
Trường An committed Sep 1, 2020
1 parent c435095 commit 6c52ad4
Show file tree
Hide file tree
Showing 87 changed files with 500 additions and 565 deletions.
2 changes: 1 addition & 1 deletion packages/marketplace/linaria.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ module.exports = {
evaluate: true,
displayName: false,
// converts camelCase classNames to kebab-case-for-friendly-css
classNameSlug: (_hash, title) => dashify(title),
classNameSlug: (hash, title) => `${hash}-${dashify(title)}`,
}
25 changes: 25 additions & 0 deletions packages/marketplace/src/components/pages/app-detail/__styles__/app-permission-content.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { css } from 'linaria'

export const permissionBlock = css`
margin-bottom: 15px;
`

export const installButtonContainer = css`
display: flex;
`

export const installButton = css`
margin: 0 1rem;
width: 100%;
&:last-child {
margin: 0 0 0 1rem;
}
`

export const permissionList = css`
padding: 0 2rem 2rem 2rem;
`

export const permissionListItem = css`
list-style-type: circle;
`
74 changes: 74 additions & 0 deletions packages/marketplace/src/components/pages/app-detail/__styles__/standalone-app-detail.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { css } from 'linaria'
import * as colors from '@/core/__styles__/colors'
import { forMobileOnly, forTabletAndBelow } from '@/core/__styles__/screen-size'
import { forIeOnly } from '@/core/__styles__/browser'

export const preview = css`
position: relative;
top: 2px;
`

export const check = css`
position: relative;
top: 2px;
left: 2px;
color: ${colors.reapitGreen};
`

export const tag = css`
display: inline-block;
padding: 0.5rem 1rem;
background: ${colors.greyLight};
margin: 0.5rem 0.5rem 0 0;
`

export const container = css`
height: 100%;
margin-bottom: auto;
${forMobileOnly} {
display: flex;
flex-direction: column-reverse;
}
${forIeOnly} {
min-width: 1024px;
}
`

export const containerHeader = css`
display: flex;
align-items: center;
flex-direction: column;
`

export const appIconContainer = css`
width: 96px;
height: auto;
margin: 0 auto;
`

export const headerContent = css`
display: flex;
flex-direction: column;
padding: 1rem;
align-items: center;
text-align: center;
`

export const containerOuterHeader = css`
${forTabletAndBelow} {
flex-direction: column;
}
`

export const buttonGroup = css`
display: flex;
flex-direction: column;
${forMobileOnly} {
> button {
width: 50%;
}
flex-direction: row;
}
`
27 changes: 27 additions & 0 deletions ...e/src/components/pages/app-detail/client/__tests__/__snapshots__/app-detail.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ exports[`AppDetail should match a snapshot 1`] = `
>
<AppDetail>
<Component
className=""
dataTest="client-app-detail-container"
>
<div
Expand Down Expand Up @@ -88,6 +89,7 @@ exports[`AppDetail should match a snapshot 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -97,6 +99,7 @@ exports[`AppDetail should match a snapshot 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -126,6 +129,7 @@ exports[`AppDetail should match a snapshot 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -135,6 +139,7 @@ exports[`AppDetail should match a snapshot 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -203,6 +208,7 @@ exports[`AppDetail should match a snapshot 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -212,6 +218,7 @@ exports[`AppDetail should match a snapshot 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -241,6 +248,7 @@ exports[`AppDetail should match a snapshot 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -250,6 +258,7 @@ exports[`AppDetail should match a snapshot 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -508,6 +517,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
>
<AppDetail>
<Component
className=""
dataTest="client-app-detail-container"
>
<div
Expand Down Expand Up @@ -539,6 +549,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -548,6 +559,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -577,6 +589,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -586,6 +599,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -654,6 +668,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -663,6 +678,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -692,6 +708,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -701,6 +718,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -959,6 +977,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
>
<AppDetail>
<Component
className=""
dataTest="client-app-detail-container"
>
<div
Expand Down Expand Up @@ -990,6 +1009,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -999,6 +1019,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -1028,6 +1049,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -1037,6 +1059,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -1105,6 +1128,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -1114,6 +1138,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down Expand Up @@ -1143,6 +1168,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -1152,6 +1178,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[Function]}
Expand Down
8 changes: 8 additions & 0 deletions ...ts/pages/app-detail/client/__tests__/__snapshots__/app-install-confirmation.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -115,6 +116,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[MockFunction]}
Expand Down Expand Up @@ -144,6 +146,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -153,6 +156,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[MockFunction]}
Expand Down Expand Up @@ -325,6 +329,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
className="flex"
>
<Unknown
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -334,6 +339,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
Confirm
</Unknown>
<Unknown
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[MockFunction]}
Expand Down Expand Up @@ -531,6 +537,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
className="flex"
>
<Component
className=""
dataTest="agree-btn"
loading={false}
onClick={[Function]}
Expand All @@ -548,6 +555,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
</button>
</Component>
<Component
className=""
dataTest="disagree-btn"
disabled={false}
onClick={[MockFunction]}
Expand Down
Loading

0 comments on commit 6c52ad4

Please sign in to comment.