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

[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

View File

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

View File

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