yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-26 08:52:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11524 from strapi/typography-application-page

Browse Source 
[DS] Typography Application page
This commit is contained in:
ELABBASSI Hicham 2021-11-09 18:05:56 +01:00 committed by GitHub
commit a321b9562f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js
View File

@ -5,7 +5,7 @@ import { HeaderLayout, Layout, ContentLayout } from '@strapi/design-system/Layou
import { Main } from '@strapi/design-system/Main'; import { Main } from '@strapi/design-system/Main';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Grid, GridItem } from '@strapi/design-system/Grid'; import { Grid, GridItem } from '@strapi/design-system/Grid';
import { H3, Text, TableLabel } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { Stack } from '@strapi/design-system/Stack'; import { Stack } from '@strapi/design-system/Stack';
import { Link } from '@strapi/design-system/Link'; import { Link } from '@strapi/design-system/Link';
@ -43,38 +43,38 @@ const ApplicationInfosPage = () => {
paddingLeft={6} paddingLeft={6}
> >
<Stack size={5}> <Stack size={5}>
<H3> <Typography variant="delta">
{formatMessage({ {formatMessage({
id: 'Settings.application.information', id: 'Settings.application.information',
defaultMessage: 'Information', defaultMessage: 'Information',
})} })}
</H3> </Typography>
<Grid paddingTop={1}> <Grid paddingTop={1}>
<GridItem col={6} s={12}> <GridItem col={6} s={12}>
<TableLabel textColor="neutral600"> <Typography variant="sigma" textColor="neutral600">
{formatMessage({ {formatMessage({
id: 'Settings.application.details', id: 'Settings.application.details',
defaultMessage: 'details', defaultMessage: 'details',
})} })}
</TableLabel> </Typography>
<Text as="p">v{strapiVersion}</Text> <Typography as="p">v{strapiVersion}</Typography>
</GridItem> </GridItem>
<GridItem col={6} s={12}> <GridItem col={6} s={12}>
<TableLabel textColor="neutral600"> <Typography variant="sigma" textColor="neutral600">
{formatMessage({ {formatMessage({
id: 'Settings.application.edition-title', id: 'Settings.application.edition-title',
defaultMessage: 'current plan', defaultMessage: 'current plan',
})} })}
</TableLabel> </Typography>
<Text as="p"> <Typography as="p">
{formatMessage({ {formatMessage({
id: currentPlan, id: currentPlan,
defaultMessage: `${ defaultMessage: `${
appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition' appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
}`, }`,
})} })}
</Text> </Typography>
</GridItem> </GridItem>
</Grid> </Grid>
@ -103,13 +103,13 @@ const ApplicationInfosPage = () => {
</Grid> </Grid>
<Box paddingTop={1}> <Box paddingTop={1}>
<TableLabel textColor="neutral600"> <Typography variant="sigma" textColor="neutral600">
{formatMessage({ {formatMessage({
id: 'Settings.application.node-version', id: 'Settings.application.node-version',
defaultMessage: 'node version', defaultMessage: 'node version',
})} })}
</TableLabel> </Typography>
<Text as="p">{appInfos.nodeVersion}</Text> <Typography as="p">{appInfos.nodeVersion}</Typography>
</Box> </Box>
</Stack> </Stack>
</Box> </Box>

98
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
View File

@ -43,7 +43,7 @@ describe('Application page', () => {
box-shadow: 0px 1px 4px rgba(33,33,52,0.1); box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
} }
.c23 { .c22 {
padding-top: 4px; padding-top: 4px;
} }
@ -66,33 +66,6 @@ describe('Application page', () => {
margin-top: 20px; margin-top: 20px;
} }
.c16 {
color: #666687;
font-size: 0.875rem;
line-height: 1.43;
}
.c12 {
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
color: #32324d;
}
.c18 {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #32324d;
}
.c17 {
font-weight: 600;
font-size: 0.6875rem;
line-height: 1.45;
text-transform: uppercase;
}
.c1 { .c1 {
padding-bottom: 56px; padding-bottom: 56px;
} }
@ -182,7 +155,28 @@ describe('Application page', () => {
grid-column: span 6; grid-column: span 6;
} }
.c20 { .c12 {
color: #32324d;
font-weight: 500;
font-size: 1rem;
line-height: 1.25;
}
.c16 {
color: #666687;
font-weight: 600;
font-size: 0.6875rem;
line-height: 1.45;
text-transform: uppercase;
}
.c17 {
color: #32324d;
font-size: 0.875rem;
line-height: 1.43;
}
.c19 {
color: #4945ff; color: #4945ff;
font-weight: 600; font-weight: 600;
font-size: 0.6875rem; font-size: 0.6875rem;
@ -190,11 +184,11 @@ describe('Application page', () => {
text-transform: uppercase; text-transform: uppercase;
} }
.c21 { .c20 {
padding-left: 8px; padding-left: 8px;
} }
.c19 { .c18 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
@ -210,15 +204,15 @@ describe('Application page', () => {
outline: none; outline: none;
} }
.c19 svg path { .c18 svg path {
fill: #4945ff; fill: #4945ff;
} }
.c19 svg { .c18 svg {
font-size: 0.625rem; font-size: 0.625rem;
} }
.c19:after { .c18:after {
-webkit-transition-property: all; -webkit-transition-property: all;
transition-property: all; transition-property: all;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
@ -233,11 +227,11 @@ describe('Application page', () => {
border: 2px solid transparent; border: 2px solid transparent;
} }
.c19:focus-visible { .c18:focus-visible {
outline: none; outline: none;
} }
.c19:focus-visible:after { .c18:focus-visible:after {
border-radius: 8px; border-radius: 8px;
content: ''; content: '';
position: absolute; position: absolute;
@ -248,7 +242,7 @@ describe('Application page', () => {
border: 2px solid #4945ff; border: 2px solid #4945ff;
} }
.c22 { .c21 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -315,11 +309,11 @@ describe('Application page', () => {
<div <div
class="c11" class="c11"
> >
<h3 <span
class="c12" class="c12"
> >
Information Information
</h3> </span>
<div <div
class="c13 c14" class="c13 c14"
> >
@ -330,12 +324,12 @@ describe('Application page', () => {
class="" class=""
> >
<span <span
class="c16 c17" class="c16"
> >
details details
</span> </span>
<p <p
class="c18" class="c17"
> >
v v
4.0.0 4.0.0
@ -349,12 +343,12 @@ describe('Application page', () => {
class="" class=""
> >
<span <span
class="c16 c17" class="c16"
> >
current plan current plan
</span> </span>
<p <p
class="c18" class="c17"
> >
Enterprise Edition Enterprise Edition
</p> </p>
@ -371,19 +365,19 @@ describe('Application page', () => {
class="" class=""
> >
<a <a
class="c19" class="c18"
href="https://github.com/strapi/strapi/releases/tag/v3.6.8" href="https://github.com/strapi/strapi/releases/tag/v3.6.8"
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
> >
<span <span
class="c20" class="c19"
> >
Upgrade your admin panel Upgrade your admin panel
</span> </span>
<span <span
aria-hidden="true" aria-hidden="true"
class="c21 c22" class="c20 c21"
> >
<svg <svg
fill="none" fill="none"
@ -408,19 +402,19 @@ describe('Application page', () => {
class="" class=""
> >
<a <a
class="c19" class="c18"
href="https://strapi.io/pricing-self-hosted" href="https://strapi.io/pricing-self-hosted"
rel="noreferrer noopener" rel="noreferrer noopener"
target="_blank" target="_blank"
> >
<span <span
class="c20" class="c19"
> >
See all pricing See all pricing
</span> </span>
<span <span
aria-hidden="true" aria-hidden="true"
class="c21 c22" class="c20 c21"
> >
<svg <svg
fill="none" fill="none"
@ -440,15 +434,15 @@ describe('Application page', () => {
</div> </div>
</div> </div>
<div <div
class="c23" class="c22"
> >
<span <span
class="c16 c17" class="c16"
> >
node version node version
</span> </span>
<p <p
class="c18" class="c17"
/> />
</div> </div>
</div> </div>