yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-04 11:02:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

typography integrated

Browse Source
This commit is contained in:
ronronscelestes 2021-11-15 16:39:36 +01:00
parent df7ed74804
commit 8450dd87b3
2 changed files with 46 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/plugins/users-permissions/admin/src/pages/EmailTemplates/components/EmailTable.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table'; import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden'; import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
import { Text, TableLabel } from '@strapi/design-system/Text'; import { Typography } from '@strapi/design-system/Typography';
import { IconButton } from '@strapi/design-system/IconButton'; import { IconButton } from '@strapi/design-system/IconButton';
import Pencil from '@strapi/icons/Pencil'; import Pencil from '@strapi/icons/Pencil';
import Reload from '@strapi/icons/Refresh'; import Reload from '@strapi/icons/Refresh';
@ -27,12 +27,12 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
</VisuallyHidden> </VisuallyHidden>
</Th> </Th>
<Th> <Th>
<TableLabel textColor="neutral600"> <Typography variant="sigma" textColor="neutral600">
{formatMessage({ {formatMessage({
id: getTrad('Email.template.table.name.label'), id: getTrad('Email.template.table.name.label'),
defaultMessage: 'name', defaultMessage: 'name',
})} })}
</TableLabel> </Typography>
</Th> </Th>
<Th width="1%"> <Th width="1%">
<VisuallyHidden> <VisuallyHidden>
@ -55,12 +55,12 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
/> />
</Td> </Td>
<Td> <Td>
<Text> <Typography>
{formatMessage({ {formatMessage({
id: getTrad('Email.template.reset_password'), id: getTrad('Email.template.reset_password'),
defaultMessage: 'Reset password', defaultMessage: 'Reset password',
})} })}
</Text> </Typography>
</Td> </Td>
<Td {...stopPropagation}> <Td {...stopPropagation}>
<IconButton <IconButton
@ -84,12 +84,12 @@ const EmailTable = ({ canUpdate, onEditClick }) => {
/> />
</Td> </Td>
<Td> <Td>
<Text> <Typography>
{formatMessage({ {formatMessage({
id: getTrad('Email.template.email_confirmation'), id: getTrad('Email.template.email_confirmation'),
defaultMessage: 'Email address confirmation', defaultMessage: 'Email address confirmation',
})} })}
</Text> </Typography>
</Td> </Td>
<Td {...stopPropagation}> <Td {...stopPropagation}>
<IconButton <IconButton

84
packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
View File

@ -37,7 +37,7 @@ const App = (
</QueryClientProvider> </QueryClientProvider>
); );
describe('ADMIN | Pages | Settings | Advanced Settings', () => { describe('ADMIN | Pages | Settings | Email Templates', () => {
beforeAll(() => server.listen()); beforeAll(() => server.listen());
beforeEach(() => { beforeEach(() => {
@ -65,7 +65,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
}); });
expect(container.firstChild).toMatchInlineSnapshot(` expect(container.firstChild).toMatchInlineSnapshot(`
.c24 { .c23 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -79,21 +79,21 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
outline: none; outline: none;
} }
.c24 svg { .c23 svg {
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
.c24 svg > g, .c23 svg > g,
.c24 svg path { .c23 svg path {
fill: #ffffff; fill: #ffffff;
} }
.c24[aria-disabled='true'] { .c23[aria-disabled='true'] {
pointer-events: none; pointer-events: none;
} }
.c24:after { .c23: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;
@ -108,11 +108,11 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
border: 2px solid transparent; border: 2px solid transparent;
} }
.c24:focus-visible { .c23:focus-visible {
outline: none; outline: none;
} }
.c24:focus-visible:after { .c23:focus-visible:after {
border-radius: 8px; border-radius: 8px;
content: ''; content: '';
position: absolute; position: absolute;
@ -123,7 +123,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
border: 2px solid #4945ff; border: 2px solid #4945ff;
} }
.c25 { .c24 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -141,26 +141,26 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
border: none; border: none;
} }
.c25 svg > g, .c24 svg > g,
.c25 svg path { .c24 svg path {
fill: #8e8ea9; fill: #8e8ea9;
} }
.c25:hover svg > g, .c24:hover svg > g,
.c25:hover svg path { .c24:hover svg path {
fill: #666687; fill: #666687;
} }
.c25:active svg > g, .c24:active svg > g,
.c25:active svg path { .c24:active svg path {
fill: #a5a5ba; fill: #a5a5ba;
} }
.c25[aria-disabled='true'] { .c24[aria-disabled='true'] {
background-color: #eaeaef; background-color: #eaeaef;
} }
.c25[aria-disabled='true'] svg path { .c24[aria-disabled='true'] svg path {
fill: #666687; fill: #666687;
} }
@ -217,7 +217,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
overflow-x: auto; overflow-x: auto;
} }
.c22 tr:last-of-type { .c21 tr:last-of-type {
border-bottom: none; border-bottom: none;
} }
@ -274,6 +274,20 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
height: 0.25rem; height: 0.25rem;
} }
.c20 {
color: #666687;
font-weight: 600;
font-size: 0.6875rem;
line-height: 1.45;
text-transform: uppercase;
}
.c22 {
color: #32324d;
font-size: 0.875rem;
line-height: 1.43;
}
.c18 { .c18 {
border: 0; border: 0;
-webkit-clip: rect(0 0 0 0); -webkit-clip: rect(0 0 0 0);
@ -348,26 +362,6 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
line-height: 1.5; line-height: 1.5;
} }
.c20 {
color: #666687;
font-size: 0.875rem;
line-height: 1.43;
}
.c23 {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #32324d;
}
.c21 {
font-weight: 600;
font-size: 0.6875rem;
line-height: 1.45;
text-transform: uppercase;
}
<main <main
aria-busy="false" aria-busy="false"
aria-labelledby="main-content-title" aria-labelledby="main-content-title"
@ -452,7 +446,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
class="c17" class="c17"
> >
<span <span
class="c20 c21" class="c20"
> >
name name
</span> </span>
@ -483,7 +477,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
</tr> </tr>
</thead> </thead>
<tbody <tbody
class="c22" class="c21"
> >
<tr <tr
aria-rowindex="2" aria-rowindex="2"
@ -517,7 +511,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
tabindex="-1" tabindex="-1"
> >
<span <span
class="c23" class="c22"
> >
Reset password Reset password
</span> </span>
@ -532,7 +526,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
<button <button
aria-disabled="false" aria-disabled="false"
aria-labelledby="tooltip-1" aria-labelledby="tooltip-1"
class="c24 c25" class="c23 c24"
tabindex="-1" tabindex="-1"
type="button" type="button"
> >
@ -584,7 +578,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
tabindex="-1" tabindex="-1"
> >
<span <span
class="c23" class="c22"
> >
Email address confirmation Email address confirmation
</span> </span>
@ -599,7 +593,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
<button <button
aria-disabled="false" aria-disabled="false"
aria-labelledby="tooltip-3" aria-labelledby="tooltip-3"
class="c24 c25" class="c23 c24"
tabindex="-1" tabindex="-1"
type="button" type="button"
> >