tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat/adds dark mode and evolves admin ui

Browse Source 
* feat: builds color palette for light and dark mode, removes all conflicting rgba sass

* chore: replaces colors with css vars

* chore: adapts blur-bg to be more performant and stable

* chore: getting ready for dark mode

* chore: removes unused file

* chore: reverts input bg

* chore: reverses selection in dark mode

* feat: builds theme toggler

* feat: adds auto mode for theme

* feat: establishes light / dark css pattern, updates account and list

* chore: migrates more views to gutter component

* chore: adapts global, adjusts popups

* chore: finishes retrofitting views

* feat: moves to medium instead of semi-bold for headlines

* feat: introduces new font for rte

* feat: updates rich text styles

* feat: styles react select in dark mode

* chore: styles datepicker, misc refinements

* chore: updates style of UploadCard

* chore: fixes code styles

* chore: styles PerPage

* chore: improves styling of column / where selector

* feat: improves field errors in dark mode

* chore: styles built-in rich text elements

* chore: improves styling of rte elements

* chore: tweaks
This commit is contained in:
James Mikrut
2022-07-13 10:36:25 -07:00
committed by GitHub
parent cac5266c79
commit b9f9f15d77
165 changed files with 1486 additions and 761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/elements.ts
View File

@@ -2,3 +2,4 @@ export { default as Button } from '../dist/admin/components/elements/Button';
export { default as Card } from '../dist/admin/components/elements/Card';
export { default as Eyebrow } from '../dist/admin/components/elements/Eyebrow';
export { default as Nav } from '../dist/admin/components/elements/Nav';
export { default as Gutter } from '../dist/admin/components/elements/Gutter';

2
demo/client/components/DemoUIField/Cell.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
const DemoUIFieldCell: React.FC = () => (
<p>Demo UI Field Cell</p>
<p style={{ margin: 0 }}>Demo UI Field Cell</p>
);
export default DemoUIFieldCell;

23
demo/client/components/views/CustomDefault/index.tsx
View File

@@ -9,10 +9,11 @@ import Eyebrow from '../../../../../src/admin/components/elements/Eyebrow';
import { AdminView } from '../../../../../src/config/types';
import { useStepNav } from '../../../../../src/admin/components/elements/StepNav';
import Meta from '../../../../../src/admin/components/utilities/Meta';
import { Gutter } from '../../../../../src/admin/components/elements/Gutter';
// In your projects, you can import as follows:
// import { DefaultTemplate } from 'payload/components/templates';
// import { Button, Eyebrow } from 'payload/components/elements';
// import { Button, Eyebrow, Gutter } from 'payload/components/elements';
// import { AdminView } from 'payload/config';
// import { useStepNav } from 'payload/components/hooks';
// import { Meta } from 'payload/components/utilities';
@@ -48,15 +49,17 @@ const CustomDefaultRoute: AdminView = ({ user, canAccessAdmin }) => {
keywords="Custom React Components, Payload, CMS"
/>
<Eyebrow />
<h1>Custom Route</h1>
<p>Here is a custom route that was added in the Payload config. It uses the Default Template, so the sidebar is rendered.</p>
<Button
el="link"
to={`${adminRoute}`}
buttonStyle="secondary"
>
Go to Dashboard
</Button>
<Gutter>
<h1>Custom Route</h1>
<p>Here is a custom route that was added in the Payload config. It uses the Default Template, so the sidebar is rendered.</p>
<Button
el="link"
to={`${adminRoute}`}
buttonStyle="secondary"
>
Go to Dashboard
</Button>
</Gutter>
</DefaultTemplate>
);
};

3
demo/collections/Localized.ts
View File

@@ -21,9 +21,6 @@ const RichTextBlock: Block = {
name: 'content',
localized: true,
type: 'richText',
admin: {
hideGutter: true,
},
},
],
};

2
demo/custom-index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE HTML>
<html>
<html data-theme="dark">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

BIN
src/admin/assets/fonts/SuisseIntl-Light.woff
View File

Binary file not shown.

BIN
src/admin/assets/fonts/SuisseIntl-Light.woff2
View File

Binary file not shown.

BIN
src/admin/assets/fonts/SuisseIntl-Medium.woff Normal file
View File

Binary file not shown.

BIN
src/admin/assets/fonts/SuisseIntl-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
src/admin/assets/fonts/SuisseIntl-Thin.woff
View File

Binary file not shown.

BIN
src/admin/assets/fonts/SuisseIntl-Thin.woff2
View File

Binary file not shown.

BIN
src/admin/assets/fonts/merriweather-v30-latin-700.woff Normal file
View File

Binary file not shown.

BIN
src/admin/assets/fonts/merriweather-v30-latin-700.woff2 Normal file
View File

Binary file not shown.

BIN
src/admin/assets/fonts/merriweather-v30-latin-700italic.woff Normal file
View File

Binary file not shown.

BIN
src/admin/assets/fonts/merriweather-v30-latin-700italic.woff2 Normal file
View File

Binary file not shown.

BIN
src/admin/assets/fonts/merriweather-v30-latin-italic.woff Normal file
View File

Binary file not shown.

BIN
src/admin/assets/fonts/merriweather-v30-latin-italic.woff2 Normal file
View File

Binary file not shown.

BIN
src/admin/assets/fonts/merriweather-v30-latin-regular.woff Normal file
View File

Binary file not shown.

BIN
src/admin/assets/fonts/merriweather-v30-latin-regular.woff2 Normal file
View File

Binary file not shown.

25
src/admin/components/elements/Banner/index.scss
View File

@@ -5,8 +5,8 @@
line-height: base(1);
border: 0;
vertical-align: middle;
background: rgba($color-dark-gray, .1);
color: $color-dark-gray;
background: var(--theme-elevation-900);
color: var(--theme-elevation-800);
border-radius: $style-radius-s;
padding: base(.5);
margin-bottom: $baseline;
@@ -18,6 +18,7 @@
&--has-icon {
display: flex;
svg {
display: block;
}
@@ -26,44 +27,44 @@
&--type-default {
&.button--has-action {
&:hover {
background: darken($color-dark-gray, .15);
background: var(--theme-elevation-900);
}
&:active {
background: darken($color-dark-gray, .2);
background: var(--theme-elevation-950);
}
}
}
&--type-error {
background: rgba($color-red, .1);
color: $color-red;
background: var(--color-error-100);
color: var(--color-error-500);
svg {
@include color-svg($color-red);
@include color-svg(var(--color-error-500));
}
&.button--has-action {
&:hover {
background: rgba($color-red, .15);
background: var(--color-error-200);
}
&:active {
background: rgba($color-red, .2);
background: var(--color-error-300);
}
}
}
&--type-success {
background: $color-green;
background: var(--color-success-500);
&.button--has-action {
&:hover {
background: rgba($color-green, .15);
background: var(--color-success-200);
}
&:active {
background: rgba($color-green, .2);
background: var(--color-success-200);
}
}
}

43
src/admin/components/elements/Button/index.scss
View File

@@ -56,7 +56,8 @@
line-height: base(1);
}
span, svg {
span,
svg {
vertical-align: top;
}
@@ -69,20 +70,20 @@
}
&--style-primary {
background-color: $color-dark-gray;
color: white;
background-color: var(--theme-elevation-800);
color: var(--theme-elevation-0);
&.btn--disabled {
background-color: rgba($color-dark-gray, .6);
background-color: var(--theme-elevation-400);
}
&:not(.btn--disabled) {
&:hover {
background: lighten($color-dark-gray, 5%);
background: var(--theme-elevation-750);
}
&:active {
background: lighten($color-dark-gray, 10%);
background: var(--theme-elevation-700);
}
}
@@ -94,26 +95,26 @@
}
&--style-secondary {
$base-box-shadow: inset 0 0 0 $style-stroke-width $color-dark-gray;
$hover-box-shadow: inset 0 0 0 $style-stroke-width lighten($color-dark-gray, 5%);
$base-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
$hover-box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-700);
box-shadow: $base-box-shadow;
color: $color-dark-gray;
color: var(--theme-elevation-800);
background: none;
&:hover {
background: rgba($color-dark-gray, .02);
background: var(--theme-elevation-100);
box-shadow: $hover-box-shadow;
}
&:active {
background: lighten($color-light-gray, 7%);
background: var(--theme-elevation-200);
}
&.btn--disabled {
color: rgba($color-dark-gray, .6);
color: var(--theme-elevation-400);
background: none;
box-shadow: inset 0 0 0 $style-stroke-width rgba($color-dark-gray, .4);
box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-400);
}
&:focus {
@@ -148,7 +149,7 @@
&.btn--style-primary {
.icon {
@include color-svg(white);
@include color-svg(var(--theme-elevation-0));
}
}
}
@@ -159,7 +160,7 @@
}
&--style-light-gray {
box-shadow: inset 0 0 0 $style-stroke-width $color-dark-gray;
box-shadow: inset 0 0 0 $style-stroke-width var(--theme-elevation-800);
}
&--icon-position-left {
@@ -191,15 +192,15 @@
&:hover {
.btn__icon {
@include color-svg(white);
background: $color-dark-gray;
@include color-svg(var(--theme-elevation-0));
background: var(--theme-elevation-800);
}
}
&:focus {
.btn__icon {
@include color-svg($color-dark-gray);
background: $color-light-gray;
@include color-svg(var(--theme-elevation-800));
background: var(--theme-elevation-150);
}
outline: none;
@@ -207,8 +208,8 @@
&:active {
.btn__icon {
@include color-svg(white);
background: lighten($color-dark-gray, 10%);
@include color-svg(var(--theme-elevation-0));
background: var(--theme-elevation-700);
}
}
}

4
src/admin/components/elements/Card/index.scss
View File

@@ -1,7 +1,7 @@
@import '../../../scss/styles';
.card {
background: $color-background-gray;
background: var(--theme-elevation-50);
padding: base(1.25) $baseline;
position: relative;
@@ -26,7 +26,7 @@
cursor: pointer;
&:hover {
background: darken($color-background-gray, 3%);
background: var(--theme-elevation-100);
}
}

2
src/admin/components/elements/ColumnSelector/index.scss
View File

@@ -1,7 +1,7 @@
@import '../../../scss/styles.scss';
.column-selector {
background: $color-background-gray;
background: var(--theme-elevation-50);
padding: base(1) base(1) base(.5);
.pill {

141
src/admin/components/elements/DatePicker/index.scss
View File

@@ -3,7 +3,6 @@
$cal-icon-width: 18px;
.date-time-picker {
position: relative;
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
.react-datepicker__time-container {
@@ -11,19 +10,35 @@ $cal-icon-width: 18px;
}
&__icon-wrap {
display: flex;
column-gap: 10px;
position: absolute;
right: base(.75);
top: base(.625);
z-index: 2;
position: relative;
z-index: 1;
}
.icon {
pointer-events: none;
width: $cal-icon-width;
height: auto;
@include color-svg($color-dark-gray);
}
.icon--calendar,
&__clear-button {
position: absolute;
}
.icon--calendar,
.icon--x {
@include color-svg(var(--theme-elevation-800));
height: auto;
}
&__clear-button {
top: base(.5);
right: base(2);
}
.icon--calendar {
top: base(.625);
right: base(.75);
width: $cal-icon-width;
pointer-events: none;
}
.icon--x {
width: base(1);
}
&__clear-button {
@@ -49,7 +64,7 @@ $cal-icon-width: 18px;
&-popper,
&__time-container,
&__time-box {
width: 100%;
width: base(6);
}
&__time-container {
@@ -78,19 +93,19 @@ $cal-icon-width: 18px;
&--has-error {
.react-datepicker__input-container input {
background-color: lighten($color-red, 20%);
background-color: var(--color-error-200);
}
}
.react-datepicker {
@include shadow-sm;
background: white;
@include shadow-lg;
background: var(--theme-input-bg);
display: inline-flex;
border: 1px solid $color-light-gray;
border: none;
font-family: $font-body;
font-weight: 100;
border-radius: 0;
border: none;
color: var(--theme-elevation-800);
&__header {
padding-top: 0;
@@ -98,11 +113,11 @@ $cal-icon-width: 18px;
text-align: center;
border-radius: 0;
border: none;
background-color: white;
background-color: var(--theme-input-bg);
&--time {
padding: 10px 0;
border-bottom: 1px solid $color-light-gray;
border-bottom: 1px solid var(--theme-elevation-150);
font-weight: 600;
}
}
@@ -125,70 +140,89 @@ $cal-icon-width: 18px;
top: 15px;
&--next {
border-left-color: $color-gray;
border-left-color: var(--theme-elevation-400);
&:focus {
border-left-color: darken($color-gray, 30%);
outline:none;
border-left-color: var(--theme-elevation-500);
outline: none;
}
}
&--previous {
border-right-color: $color-gray;
border-right-color: var(--theme-elevation-400);
&:focus {
border-right-color: darken($color-gray, 30%);
outline:none;
border-right-color: var(--theme-elevation-500);
outline: none;
}
}
}
&__current-month,
&__header,
&-year-header,
&__day-name,
&__day,
&__time-name,
&-time__header {
color: var(--theme-elevation-1000);
}
&__current-month {
padding: 10px 0;
font-weight: 600;
}
&__month-container {
border-right: 1px solid $color-light-gray;
border-right: 1px solid var(--theme-elevation-150);
}
&__time {
background: none;
}
&__time-container {
border-left: none;
}
&__day-names {
background-color: $color-light-gray;
background-color: var(--theme-elevation-100);
}
&__day {
box-shadow: inset 0px 0px 0px 1px $color-light-gray, 0px 0px 0px 1px $color-light-gray;
box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
font-size: base(.55);
&:hover {
background: var(--theme-elevation-100);
}
&:focus {
outline: 0;
background: $color-gray;
background: var(--theme-elevation-400);
}
&--selected {
font-weight: 600;
font-weight: bold;
&:focus {
background-color: $color-light-gray;
background-color: var(--theme-elevation-150);
}
}
&--keyboard-selected {
color: white;
font-weight: 600;
color: var(--theme-elevation-0);
font-weight: bold;
&:focus {
background-color: $color-light-gray;
box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
background-color: var(--theme-elevation-150);
box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-800), 0px 0px 0px 1px var(--theme-elevation-800);
}
}
&--today {
font-weight: 600;
font-weight: bold;
}
}
@@ -202,27 +236,39 @@ $cal-icon-width: 18px;
.react-datepicker-popper {
z-index: 10;
border: 1px solid $color-light-gray;
border: none;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
background-color: $color-light-gray;
color: $color-dark-gray;
box-shadow: none;
background-color: var(--theme-elevation-150);
font-weight: bold;
color: var(--theme-elevation-800);
border-radius: 0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range {
box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
background-color: $color-light-gray;
color: $color-dark-gray;
.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range {
box-shadow: none;
background-color: var(--theme-elevation-150);
color: var(--theme-elevation-800);
font-weight: bold;
border-radius: 0;
}
.react-datepicker__day:hover, .react-datepicker__month-text:hover {
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
background: var(--theme-elevation-100);
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover {
border-radius: 0;
}
@@ -233,7 +279,6 @@ $cal-icon-width: 18px;
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
line-height: 20px;
font-size: base(.5);
font-weight: 500;
}
@include small-break {

5
src/admin/components/elements/DeleteDocument/index.scss
View File

@@ -6,6 +6,11 @@
align-items: center;
height: 100%;
&__template {
z-index: 1;
position: relative;
}
&__toggle {
@extend %btn-reset;
}

2
src/admin/components/elements/DeleteDocument/index.tsx
View File

@@ -91,7 +91,7 @@ const DeleteDocument: React.FC<Props> = (props) => {
slug={modalSlug}
className={baseClass}
>
<MinimalTemplate>
<MinimalTemplate className={`${baseClass}__template`}>
<h1>Confirm deletion</h1>
<p>
You are about to delete the

16
src/admin/components/elements/Eyebrow/index.scss
View File

@@ -6,14 +6,18 @@
top: 0;
z-index: $z-nav;
padding: base(1.5) 0;
display: flex;
align-items: center;
justify-content: space-between;
&__wrap {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
@include mid-break {
padding: 0 0 $baseline;
margin: 0;
position: static;
padding: base(1) 0;
position: relative;
display: block;
}
}

7
src/admin/components/elements/Eyebrow/index.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import StepNav from '../StepNav';
import { Props } from './types';
import { Gutter } from '../Gutter';
import './index.scss';
@@ -8,8 +9,10 @@ const baseClass = 'eyebrow';
const Eyebrow: React.FC<Props> = ({ actions }) => (
<div className={baseClass}>
<StepNav />
{actions}
<Gutter className={`${baseClass}__wrap`}>
<StepNav />
{actions}
</Gutter>
</div>
);

8
src/admin/components/elements/FileDetails/index.scss
View File

@@ -1,12 +1,12 @@
@import '../../../scss/styles.scss';
.file-details {
background-color: $color-background-gray;
background-color: var(--theme-elevation-100);
header {
display: flex;
align-items: flex-start;
border-bottom: $style-stroke-width-m solid white;
border-bottom: 1px solid var(--theme-elevation-0);
}
&__remove {
@@ -53,7 +53,7 @@
}
&__size-label {
color: $color-gray;
color: var(--theme-elevation-400);
}
@include large-break {
@@ -89,7 +89,7 @@
}
&__main-detail {
border-top: $style-stroke-width-m solid white;
border-top: $style-stroke-width-m solid var(--theme-elevation-0);
order: 3;
width: 100%;
}

5
src/admin/components/elements/GenerateConfirmation/index.scss
View File

@@ -6,6 +6,11 @@
align-items: center;
height: 100%;
&__template {
position: relative;
z-index: 1;
}
.btn {
margin-right: $baseline;
}

2
src/admin/components/elements/GenerateConfirmation/index.tsx
View File

@@ -41,7 +41,7 @@ const GenerateConfirmation: React.FC<Props> = (props) => {
slug={modalSlug}
className={baseClass}
>
<MinimalTemplate>
<MinimalTemplate className={`${baseClass}__template`}>
<h1>Confirm Generation</h1>
<p>
Generating a new API key will

19
src/admin/components/elements/Gutter/index.scss Normal file
View File

@@ -0,0 +1,19 @@
@import '../../../scss/styles.scss';
.gutter {
&--left {
padding-left: var(--gutter-h);
}
&--right {
padding-right: var(--gutter-h);
}
&--negative-left {
margin-left: calc(-1 * var(--gutter-h));
}
&--negative-right {
margin-right: calc(-1 * var(--gutter-h));
}
}

46
src/admin/components/elements/Gutter/index.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React, { forwardRef, Ref } from 'react';
import './index.scss';
type Props = {
left?: boolean
right?: boolean
negativeLeft?: boolean
negativeRight?: boolean
className?: string
children: React.ReactNode
ref?: Ref<HTMLDivElement>
}
const baseClass = 'gutter';
export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
const {
left = true,
right = true,
negativeLeft = false,
negativeRight = false,
className,
children,
} = props;
const shouldPadLeft = left && !negativeLeft;
const shouldPadRight = right && !negativeRight;
return (
<div
ref={ref}
className={[
shouldPadLeft && `${baseClass}--left`,
shouldPadRight && `${baseClass}--right`,
negativeLeft && `${baseClass}--negative-left`,
negativeRight && `${baseClass}--negative-right`,
className,
].filter(Boolean).join(' ')}
>
{children}
</div>
);
});
Gutter.displayName = 'Gutter';

4
src/admin/components/elements/IDLabel/index.scss
View File

@@ -3,8 +3,8 @@
.id-label {
font-size: base(.75);
font-weight: normal;
color: $color-gray;
background: $color-background-gray;
color: var(--theme-elevation-400);
background: var(--theme-elevation-100);
padding: base(.25) base(.5);
border-radius: $style-radius-m;
display: inline-flex;

2
src/admin/components/elements/Loading/index.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
const Loading: React.FC = () => <div>Loading</div>;
const Loading: React.FC = () => <div />;
export default Loading;

3
src/admin/components/elements/Localizer/index.scss
View File

@@ -4,6 +4,7 @@
position: relative;
button {
color: currentColor;
padding: base(.25) 0;
font-size: 1rem;
line-height: base(1);
@@ -23,7 +24,7 @@
}
span {
color: $color-gray;
color: var(--theme-elevation-400);
}
ul {

19
src/admin/components/elements/Nav/index.scss
View File

@@ -8,13 +8,15 @@
height: 100vh;
width: base(9);
overflow: hidden;
border-right: 1px solid var(--theme-elevation-100);
header {
width: 100%;
display: flex;
margin-bottom: base(1.5);
a, button {
a,
button {
display: block;
padding: 0;
@@ -35,7 +37,8 @@
visibility: hidden;
cursor: pointer;
&:active, &:focus {
&:active,
&:focus {
outline: none;
}
}
@@ -58,14 +61,14 @@
}
&__label {
color: $color-gray;
color: var(--theme-elevation-400);
}
&__controls {
margin-top: auto;
margin-bottom: 0;
> * {
>* {
margin-top: base(1);
}
}
@@ -126,8 +129,8 @@
}
@include mid-break {
background: rgba($color-background-gray, .8);
backdrop-filter: saturate(180%) blur(5px);
@include blur-bg;
position: fixed;
width: 100%;
height: base(3);
z-index: $z-modal;
@@ -141,7 +144,9 @@
header,
&__wrap {
padding: $baseline;
position: relative;
z-index: 1;
padding: $baseline var(--gutter-h);
}
header {

4
src/admin/components/elements/Paginator/ClickableArrow/index.scss
View File

@@ -11,8 +11,8 @@
&--is-disabled {
cursor: default;
.icon .stroke{
stroke: $color-gray;
.icon .stroke {
stroke: var(--theme-elevation-400);
}
}
}

10
src/admin/components/elements/Paginator/index.scss
View File

@@ -8,8 +8,8 @@
cursor: pointer;
&--is-current {
background: $color-background-gray;
color: $color-gray;
background: var(--theme-elevation-100);
color: var(--theme-elevation-400);
cursor: default;
}
@@ -28,11 +28,11 @@
align-content: center;
outline: 0;
padding: base(.5);
color: $color-dark-gray;
color: var(--theme-elevation-800);
line-height: base(1);
&:hover:not(.clickable-arrow--is-disabled) {
background: $color-background-gray;
background: var(--theme-elevation-100);
}
}
@@ -43,6 +43,6 @@
&__separator {
align-self: center;
color: $color-gray;
color: var(--theme-elevation-400);
}
}

3
src/admin/components/elements/PerPage/index.scss
View File

@@ -15,7 +15,6 @@
&__button {
@extend %btn-reset;
color: white;
cursor: pointer;
text-align: left;
width: 100%;
@@ -29,7 +28,7 @@
font-weight: bold;
svg {
@include color-svg(white);
@include color-svg(var(--theme-elevation-1000));
margin-left: base(-.25);
margin-right: base(-.125);
transform: rotate(-90deg);

1
src/admin/components/elements/PerPage/index.tsx
View File

@@ -26,7 +26,6 @@ const PerPage: React.FC<Props> = ({ limits = defaultLimits, limit, handleChange,
return (
<div className={baseClass}>
<Popup
color="dark"
horizontalAlign="right"
button={(
<strong>

33
src/admin/components/elements/Pill/index.scss
View File

@@ -6,8 +6,8 @@
border: 0;
display: inline-flex;
vertical-align: middle;
background: $color-light-gray;
color: $color-dark-gray;
background: var(--theme-elevation-150);
color: var(--theme-elevation-800);
border-radius: $style-radius-s;
padding: 0 base(.25);
padding-left: base(.0875 + .25);
@@ -38,14 +38,15 @@
}
&--style-white {
background: white;
background: var(--theme-elevation-0);
&.pill--has-action {
&:hover {
background: lighten($color-light-gray, 3%);
background: var(--theme-elevation-100);
}
&:active {
background: lighten($color-light-gray, 5%);
background: var(--theme-elevation-100);
}
}
}
@@ -53,43 +54,43 @@
&--style-light {
&.pill--has-action {
&:hover {
background: lighten($color-light-gray, 3%);
background: var(--theme-elevation-100);
}
&:active {
background: lighten($color-light-gray, 5%);
background: var(--theme-elevation-100);
}
}
}
&--style-light-gray {
background: $color-background-gray;
color: $color-dark-gray;
background: var(--theme-elevation-100);
color: var(--theme-elevation-800);
}
&--style-warning {
background: $color-yellow;
background: var(--color-warning-500);
}
&--style-success {
background: $color-green;
background: var(--color-success-500);
}
&--style-dark {
background: $color-dark-gray;
color: white;
background: var(--theme-elevation-800);
color: var(--theme-elevation-0);
svg {
@include color-svg(white);
@include color-svg(var(--theme-elevation-0));
}
&.pill--has-action {
&:hover {
background: lighten($color-dark-gray, 3%);
background: var(--theme-elevation-750);
}
&:active {
background: lighten($color-dark-gray, 5%);
background: var(--theme-elevation-700);
}
}
}

27
src/admin/components/elements/Popup/index.scss
View File

@@ -5,7 +5,7 @@
&__content {
position: absolute;
background: white;
background: var(--theme-input-bg);
opacity: 0;
visibility: hidden;
z-index: $z-modal;
@@ -16,7 +16,7 @@
position: absolute;
top: calc(100% - 1px);
border: 12px solid transparent;
border-top-color: white;
border-top-color: var(--theme-input-bg);
}
}
@@ -73,7 +73,7 @@
&:after {
border: 12px solid transparent;
border-top-color: white;
border-top-color: var(--theme-input-bg);
}
}
@@ -109,11 +109,11 @@
&--h-align-center {
.popup__content {
left: 50%;
transform: translateX(-50%);
transform: translateX(-0%);
&:after {
left: 50%;
transform: translateX(-50%);
transform: translateX(-0%);
}
}
}
@@ -147,14 +147,14 @@
top: unset;
bottom: calc(100% - 1px);
border-top-color: transparent !important;
border-bottom-color: white;
border-bottom-color: var(--theme-input-bg);
}
}
&.popup--color-dark {
.popup__content {
&:after {
border-bottom-color: $color-dark-gray;
border-bottom-color: var(--theme-elevation-800);
}
}
}
@@ -166,11 +166,11 @@
&--color-dark {
.popup__content {
background: $color-dark-gray;
color: white;
background: var(--theme-elevation-800);
color: var(--theme-input-bg);
&:after {
border-top-color: $color-dark-gray;
border-top-color: var(--theme-elevation-800);
}
}
}
@@ -187,8 +187,9 @@
}
@include mid-break {
&__scroll,
&--size-large .popup__scroll{
&--size-large .popup__scroll {
padding: base(.75);
padding-right: calc(var(--scrollbar-width) + #{base(.75)});
}
@@ -206,11 +207,11 @@
&--h-align-center {
.popup__content {
left: 50%;
transform: translateX(-50%);
transform: translateX(-0%);
&:after {
left: 50%;
transform: translateX(-50%);
transform: translateX(-0%);
}
}
}

28
src/admin/components/elements/ReactSelect/index.scss
View File

@@ -12,7 +12,7 @@ div.react-select {
padding: base(.25) 0;
min-height: base(1.5);
> * {
>* {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
@@ -43,6 +43,8 @@ div.react-select {
}
.rs__input {
color: var(--theme-elevation-1000);
input {
font-family: $font-body;
width: 100% !important;
@@ -52,11 +54,12 @@ div.react-select {
.rs__menu {
z-index: 2;
border-radius: 0;
@include inputShadowActive;
@include shadow-lg;
background: var(--theme-input-bg);
}
.rs__group-heading {
color: $color-dark-gray;
color: var(--theme-elevation-800);
padding-left: base(.5);
margin-bottom: base(.25);
}
@@ -65,21 +68,25 @@ div.react-select {
font-family: $font-body;
font-size: $baseline-body-size;
padding: base(.375) base(.75);
color: $color-dark-gray;
color: var(--theme-elevation-800);
&--is-focused {
background-color: rgba($color-dark-gray, .1);
background-color: var(--theme-elevation-100);
}
&--is-selected {
background-color: rgba($color-dark-gray, .5);
background-color: var(--theme-elevation-300);
}
}
.rs__single-value {
color: currentColor;
}
.rs__multi-value {
padding: 0;
background: transparent;
border: $style-stroke-width-s solid $color-dark-gray;
border: $style-stroke-width-s solid var(--theme-elevation-800);
line-height: calc(#{$baseline} - #{$style-stroke-width-s * 2});
margin: base(.25) base(.5) base(.25) 0;
}
@@ -87,6 +94,7 @@ div.react-select {
.rs__multi-value__label {
padding: 0 base(.125) 0 base(.25);
max-width: 150px;
color: currentColor;
}
.rs__multi-value__remove {
@@ -94,14 +102,14 @@ div.react-select {
cursor: pointer;
&:hover {
color: $color-dark-gray;
background: rgba($color-red, .25);
color: var(--theme-elevation-800);
background: var(--color-error-150);
}
}
&--error {
div.rs__control {
background-color: lighten($color-red, 20%);
background-color: var(--color-error-200);
}
}
}

5
src/admin/components/elements/SortComplex/index.scss
View File

@@ -1,7 +1,7 @@
@import '../../../scss/styles.scss';
.sort-complex {
background: $color-background-gray;
background: var(--theme-elevation-100);
padding: base(0.5);
display: flex;
@@ -17,8 +17,9 @@
padding: 0 base(0.5);
flex-grow: 1;
}
&__label {
color: $color-gray;
color: var(--theme-elevation-400);
margin: base(0.5) 0;
}

5
src/admin/components/elements/Status/index.scss
View File

@@ -27,4 +27,9 @@
margin-right: $baseline;
}
}
&__modal-template {
position: relative;
z-index: 1;
}
}

4
src/admin/components/elements/Status/index.tsx
View File

@@ -114,7 +114,7 @@ const Status: React.FC<Props> = () => {
slug={unPublishModalSlug}
className={`${baseClass}__modal`}
>
<MinimalTemplate>
<MinimalTemplate className={`${baseClass}__modal-template`}>
<h1>Confirm unpublish</h1>
<p>You are about to unpublish this document. Are you sure?</p>
<Button
@@ -147,7 +147,7 @@ const Status: React.FC<Props> = () => {
slug={revertModalSlug}
className={`${baseClass}__modal`}
>
<MinimalTemplate>
<MinimalTemplate className={`${baseClass}__modal-template`}>
<h1>Confirm revert to saved</h1>
<p>You are about to revert this document&apos;s changes to its published state. Are you sure?</p>
<Button

6
src/admin/components/elements/StepNav/index.scss
View File

@@ -35,10 +35,4 @@
overflow: hidden;
white-space: nowrap;
}
@include mid-break {
> *:first-child {
padding-left: $baseline;
}
}
}

11
src/admin/components/elements/Table/index.scss
View File

@@ -6,7 +6,7 @@
max-width: 100%;
thead {
color: $color-gray;
color: var(--theme-elevation-400);
th {
font-weight: normal;
@@ -14,7 +14,8 @@
}
}
th, td {
th,
td {
padding: base(.75);
min-width: 150px;
}
@@ -22,13 +23,15 @@
tbody {
tr {
&:nth-child(odd) {
background: $color-background-gray;
background: var(--theme-elevation-50);
}
}
}
@include mid-break {
th, td {
th,
td {
max-width: 70vw;
}
}

18
src/admin/components/elements/Tooltip/index.scss
View File

@@ -1,18 +1,18 @@
@import '../../../scss/styles.scss';
.tooltip {
background-color: $color-dark-gray;
position: absolute;
z-index: 2;
background-color: var(--theme-elevation-800);
position: absolute;
z-index: 2;
bottom: 100%;
left: 50%;
transform: translate3d(-50%, -20%, 0);
padding: base(.2) base(.4);
color: white;
line-height: base(.75);
font-weight: normal;
white-space: nowrap;
border-radius: 2px;
color: var(--theme-elevation-0);
line-height: base(.75);
font-weight: normal;
white-space: nowrap;
border-radius: 2px;
span {
position: absolute;
@@ -22,6 +22,6 @@
height: 0;
width: 0;
border: 10px solid transparent;
border-top-color: $color-dark-gray;
border-top-color: var(--theme-elevation-800);
}
}

2
src/admin/components/elements/UploadCard/index.scss
View File

@@ -2,7 +2,7 @@
.upload-card {
@include shadow;
background: white;
background: var(--theme-input-bg);
max-width: base(9);
margin-bottom: base(.5);

6
src/admin/components/elements/WhereBuilder/Condition/Relationship/index.scss
View File

@@ -2,10 +2,10 @@
.condition-value-relationship {
&__error-loading {
border: 1px solid $color-red;
border: 1px solid var(--color-error-500);
min-height: base(2);
padding: base(.5) base(.75);
background-color: $color-red;
color: white;
background-color: var(--color-error-500);
color: var(--theme-elevation-0);
}
}

2
src/admin/components/elements/WhereBuilder/index.scss
View File

@@ -1,7 +1,7 @@
@import '../../../scss/styles.scss';
.where-builder {
background: $color-background-gray;
background: var(--theme-elevation-50);
padding: base(.5) $baseline $baseline;
&__label {

2
src/admin/components/forms/DraggableSection/PositionPanel/index.scss
View File

@@ -14,7 +14,7 @@
&__current-position {
text-align: center;
color: $color-gray;
color: var(--theme-elevation-400);
}
padding-right: base(.5);

4
src/admin/components/forms/DraggableSection/SectionTitle/index.scss
View File

@@ -7,7 +7,7 @@
&__input {
flex-grow: 1;
color: $color-dark-gray;
color: var(--theme-elevation-800);
background-color: transparent;
font-family: $font-body;
font-weight: 600;
@@ -18,7 +18,7 @@
border: none;
&:hover {
box-shadow: inset 0px -2px 0px -1px $color-light-gray;
box-shadow: inset 0px -2px 0px -1px var(--theme-elevation-150);
}
&:hover,

18
src/admin/components/forms/DraggableSection/index.scss
View File

@@ -18,7 +18,6 @@
}
&__section-header {
@include blur-bg(white);
display: flex;
position: sticky;
top: $top-header-offset;
@@ -33,7 +32,7 @@
transform: rotate(.5turn);
.btn__icon {
background-color: white;
background-color: var(--theme-elevation-0);
}
&--is-collapsed {
@@ -46,8 +45,8 @@
flex-grow: 1;
}
&.is-hovered > div {
> .field-type-gutter {
&.is-hovered>div {
>.field-type-gutter {
&.actions {
.field-type-gutter__content {
@@ -60,8 +59,9 @@
box-shadow: none;
}
}
.field-type-gutter__content-container {
box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
box-shadow: #{$style-stroke-width-m} 0px 0px 0px var(--theme-elevation-800);
}
.position-panel__move-forward,
@@ -76,18 +76,18 @@
}
.position-panel__current-position {
color: $color-dark-gray;
color: var(--theme-elevation-800);
}
}
.toggle-collapse {
@include color-svg(white);
@include color-svg(var(--theme-elevation-0));
.btn__icon {
background-color: $color-gray;
background-color: var(--theme-elevation-400);
&:hover {
background-color: $color-dark-gray;
background-color: var(--theme-elevation-800);
}
}
}

5
src/admin/components/forms/Error/index.scss
View File

@@ -6,10 +6,9 @@
left: auto;
right: base(.5);
transform: none;
background-color: $color-red;
background-color: var(--color-error-500);
span {
border-top-color: $color-red;
border-top-color: var(--color-error-500);
}
}

2
src/admin/components/forms/FieldDescription/index.scss
View File

@@ -4,5 +4,5 @@
display: flex;
padding-top: base(.25);
padding-bottom: base(.25);
color: $color-gray;
color: var(--theme-elevation-400);
}

8
src/admin/components/forms/FieldTypeGutter/index.scss
View File

@@ -4,7 +4,7 @@ $controls-top-adjustment: base(.1);
@mixin nestedStickyOffsets ($loopCount, $currentCount: 0) {
.field-type {
@if $loopCount > $currentCount {
@if $loopCount >$currentCount {
.field-type-gutter--v-align-sticky .field-type-gutter__content {
top: calc(#{$top-header-offset} + (#{base(2.75)} * #{$currentCount}));
}
@@ -53,7 +53,7 @@ $controls-top-adjustment: base(.1);
padding-right: $style-stroke-width-s;
position: relative;
min-height: 100%;
box-shadow: #{$style-stroke-width-s} 0px 0px 0px $color-light-gray;
box-shadow: #{$style-stroke-width-s} 0px 0px 0px var(--theme-elevation-150);
}
&__content {
@@ -66,7 +66,9 @@ $controls-top-adjustment: base(.1);
&--negative-gutter {
&.field-type-gutter--left {
position: absolute;
top: 0; right: 100%; bottom: 0;
top: 0;
right: 100%;
bottom: 0;
}
}

4
src/admin/components/forms/Label/index.scss
View File

@@ -3,10 +3,10 @@
label.field-label {
display: flex;
padding-bottom: base(.25);
color: $color-dark-gray;
color: var(--theme-elevation-800);
.required {
color: $color-red;
color: var(--color-error-500);
margin-left: base(.25);
margin-right: auto;
}

6
src/admin/components/forms/field-types/Array/index.scss
View File

@@ -20,11 +20,11 @@
margin-left: base(0);
.btn {
color: $color-gray;
color: var(--theme-elevation-400);
margin: 0;
&:hover {
color: $color-dark-gray;
color: var(--theme-elevation-800);
}
}
}
@@ -34,7 +34,7 @@
}
.section__content {
> div > div {
>div>div {
width: 100%;
}
}

4
src/admin/components/forms/field-types/Blocks/BlockSelector/BlockSelection/index.scss
View File

@@ -12,12 +12,14 @@
border-radius: 0;
box-shadow: 0;
border: 0;
color: currentColor;
&:hover {
background-color: $color-background-gray;
background-color: var(--theme-elevation-100);
}
&__image {
svg,
img {
max-width: 100%;

6
src/admin/components/forms/field-types/Blocks/index.scss
View File

@@ -19,11 +19,11 @@
&__add-button-wrap {
.btn {
color: $color-gray;
color: var(--theme-elevation-400);
margin: 0;
&:hover {
color: $color-dark-gray;
color: var(--theme-elevation-800);
}
}
}
@@ -33,7 +33,7 @@
}
.section__content {
> div > div {
>div>div {
width: 100%;
}
}

4
src/admin/components/forms/field-types/Checkbox/index.scss
View File

@@ -67,11 +67,11 @@
&--read-only {
.checkbox__label {
color: $color-gray;
color: var(--theme-elevation-400);
}
.checkbox__input {
background-color: lighten($color-light-gray, 5%);
background-color: var(--theme-elevation-100);
}
}
}

4
src/admin/components/forms/field-types/Code/Code.tsx
View File

@@ -88,8 +88,8 @@ const Code: React.FC<Props> = (props) => {
highlight={highlighter}
padding={25}
style={{
backgroundColor: '#333333',
color: 'white',
backgroundColor: 'var(--color-base-850)',
color: 'var(--color-base-0)',
fontFamily: '"Consolas", "Monaco", monospace',
fontSize: 12,
pointerEvents: readOnly ? 'none' : 'auto',

8
src/admin/components/forms/field-types/Code/index.scss
View File

@@ -6,7 +6,7 @@
&.error {
textarea {
border: 1px solid $color-red !important;
border: 1px solid var(--color-error-500) !important;
}
}
}
@@ -47,13 +47,13 @@ pre[class*="language-"] {
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #1d1f21;
background: var(--color-base-100);
}
/* Inline code */
:not(pre) > code[class*="language-"] {
:not(pre)>code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
}

18
src/admin/components/forms/field-types/ConfirmPassword/index.scss
View File

@@ -1,16 +1,16 @@
@import '../../../../scss/styles.scss';
.field-type.confirm-password {
position: relative;
position: relative;
margin-bottom: $baseline;
input {
@include formInput;
}
input {
@include formInput;
}
&.error {
input {
background-color: lighten($color-red, 20%);
}
}
&.error {
input {
background-color: var(--color-error-200);
}
}
}

2
src/admin/components/forms/field-types/DateTime/index.scss
View File

@@ -9,7 +9,7 @@
&--has-error {
.react-datepicker__input-container input {
background-color: lighten($color-red, 20%);
background-color: var(--color-error-200);
}
}
}

16
src/admin/components/forms/field-types/Email/index.scss
View File

@@ -4,13 +4,13 @@
margin-bottom: $baseline;
position: relative;
input {
@include formInput;
}
input {
@include formInput;
}
&.error {
input {
background-color: lighten($color-red, 20%);
}
}
&.error {
input {
background-color: var(--color-error-200);
}
}
}

2
src/admin/components/forms/field-types/Group/index.scss
View File

@@ -16,7 +16,7 @@
&:hover {
.field-type-gutter__content-container {
box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
box-shadow: #{$style-stroke-width-m} 0px 0px 0px var(--theme-elevation-800);
}
}

18
src/admin/components/forms/field-types/Number/index.scss
View File

@@ -1,16 +1,16 @@
@import '../../../../scss/styles.scss';
.field-type.number {
position: relative;
position: relative;
margin-bottom: $baseline;
input {
@include formInput;
}
input {
@include formInput;
}
&.error {
input {
background-color: lighten($color-red, 20%);
}
}
&.error {
input {
background-color: var(--color-error-200);
}
}
}

18
src/admin/components/forms/field-types/Password/index.scss
View File

@@ -1,16 +1,16 @@
@import '../../../../scss/styles.scss';
.field-type.password {
position: relative;
position: relative;
margin-bottom: $baseline;
input {
@include formInput;
}
input {
@include formInput;
}
&.error {
input {
background-color: lighten($color-red, 20%);
}
}
&.error {
input {
background-color: var(--color-error-200);
}
}
}

18
src/admin/components/forms/field-types/Point/index.scss
View File

@@ -1,7 +1,7 @@
@import '../../../../scss/styles.scss';
.point {
position: relative;
position: relative;
margin-bottom: $baseline;
&__wrap {
@@ -18,13 +18,13 @@
}
}
input {
@include formInput;
}
input {
@include formInput;
}
&.error {
input {
background-color: lighten($color-red, 20%);
}
}
&.error {
input {
background-color: var(--color-error-200);
}
}
}

112
src/admin/components/forms/field-types/RadioGroup/Input.tsx Normal file
View File

@@ -0,0 +1,112 @@
import React from 'react';
import Error from '../../Error';
import Label from '../../Label';
import FieldDescription from '../../FieldDescription';
import RadioInput from './RadioInput';
import { optionIsObject, RadioField } from '../../../../../fields/config/types';
import { Description } from '../../FieldDescription/types';
import { OnChange } from './types';
import './index.scss';
const baseClass = 'radio-group';
export type RadioGroupInputProps = Omit<RadioField, 'type'> & {
showError?: boolean
errorMessage?: string
readOnly?: boolean
path?: string
required?: boolean
layout?: 'horizontal' | 'vertical'
description?: Description
onChange?: OnChange
value?: string
placeholder?: string
style?: React.CSSProperties
className?: string
width?: string
}
const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
const {
name,
path: pathFromProps,
required,
label,
readOnly,
layout = 'horizontal',
style,
className,
width,
description,
onChange,
value,
showError,
errorMessage,
options,
} = props;
const path = pathFromProps || name;
const classes = [
'field-type',
baseClass,
className,
`${baseClass}--layout-${layout}`,
showError && 'error',
readOnly && `${baseClass}--read-only`,
].filter(Boolean).join(' ');
return (
<div
className={classes}
style={{
...style,
width,
}}
>
<div className={`${baseClass}__error-wrap`}>
<Error
showError={showError}
message={errorMessage}
/>
</div>
<Label
htmlFor={path}
label={label}
required={required}
/>
<ul className={`${baseClass}--group`}>
{options.map((option) => {
let optionValue = '';
if (optionIsObject(option)) {
optionValue = option.value;
} else {
optionValue = option;
}
const isSelected = String(optionValue) === String(value);
return (
<li key={`${path} - ${optionValue}`}>
<RadioInput
path={path}
isSelected={isSelected}
option={optionIsObject(option) ? option : { label: option, value: option }}
onChange={readOnly ? undefined : onChange}
/>
</li>
);
})}
</ul>
<FieldDescription
value={value}
description={description}
/>
</div>
);
};
export default RadioGroupInput;

8
src/admin/components/forms/field-types/RadioGroup/RadioInput/index.scss
View File

@@ -23,10 +23,10 @@
content: ' ';
display: block;
border-radius: 100%;
background-color: $color-dark-gray;
background-color: var(--theme-elevation-800);
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 base(.1875) white;
box-shadow: inset 0 0 0 base(.1875) var(--theme-elevation-0);
opacity: 0;
}
}
@@ -64,13 +64,13 @@
cursor: default;
&__label {
color: $color-dark-gray;
color: var(--theme-elevation-800);
}
&--is-selected {
.radio-input__styled-radio {
&:before {
background-color: $color-dark-gray;
background-color: var(--theme-elevation-800);
}
}
}

4
src/admin/components/forms/field-types/RadioGroup/RadioInput/types.ts
View File

@@ -1,9 +1,11 @@
import { OnChange } from '../types';
export type Props = {
isSelected: boolean
option: {
label: string
value: string
}
onChange: (val: string) => void
onChange: OnChange
path: string
}

85
src/admin/components/forms/field-types/RadioGroup/index.tsx
View File

@@ -1,18 +1,9 @@
import React, { useCallback } from 'react';
import useField from '../../useField';
import withCondition from '../../withCondition';
import Error from '../../Error';
import Label from '../../Label';
import FieldDescription from '../../FieldDescription';
import RadioInput from './RadioInput';
import { radio } from '../../../../../fields/validations';
import { optionIsObject } from '../../../../../fields/config/types';
import { Props } from './types';
import './index.scss';
const baseClass = 'radio-group';
import RadioGroupInput from './Input';
const RadioGroup: React.FC<Props> = (props) => {
const {
@@ -44,69 +35,29 @@ const RadioGroup: React.FC<Props> = (props) => {
showError,
errorMessage,
setValue,
} = useField({
} = useField<string>({
path,
validate: memoizedValidate,
condition,
});
const classes = [
'field-type',
baseClass,
className,
`${baseClass}--layout-${layout}`,
showError && 'error',
readOnly && `${baseClass}--read-only`,
].filter(Boolean).join(' ');
return (
<div
className={classes}
style={{
...style,
width,
}}
>
<div className={`${baseClass}__error-wrap`}>
<Error
showError={showError}
message={errorMessage}
/>
</div>
<Label
htmlFor={path}
label={label}
required={required}
/>
<ul className={`${baseClass}--group`}>
{options.map((option) => {
let optionValue = '';
if (optionIsObject(option)) {
optionValue = option.value;
} else {
optionValue = option;
}
const isSelected = String(optionValue) === String(value);
return (
<li key={`${path} - ${optionValue}`}>
<RadioInput
path={path}
isSelected={isSelected}
option={optionIsObject(option) ? option : { label: option, value: option }}
onChange={readOnly ? undefined : setValue}
/>
</li>
);
})}
</ul>
<FieldDescription
value={value}
description={description}
/>
</div>
<RadioGroupInput
path={path}
name={name}
onChange={readOnly ? undefined : setValue}
value={value}
showError={showError}
errorMessage={errorMessage}
required={required}
label={label}
layout={layout}
style={style}
className={className}
width={width}
description={description}
options={options}
/>
);
};

2
src/admin/components/forms/field-types/RadioGroup/types.ts
View File

@@ -3,3 +3,5 @@ import { RadioField } from '../../../../../fields/config/types';
export type Props = Omit<RadioField, 'type'> & {
path?: string
}
export type OnChange<T = string> = (value: T) => void;

8
src/admin/components/forms/field-types/Relationship/index.scss
View File

@@ -6,17 +6,17 @@
}
.relationship__error-loading {
border: 1px solid $color-red;
border: 1px solid var(--color-error-500);
min-height: base(2);
padding: base(.5) base(.75);
background-color: $color-red;
color: white;
background-color: var(--color-error-500);
color: var(--theme-elevation-0);
}
.relationship--read-only {
div.react-select {
div.rs__control {
background: lighten($color-light-gray, 5%);
background: var(--theme-elevation-100);
}
}
}

69
src/admin/components/forms/field-types/RichText/RichText.tsx
View File

@@ -14,7 +14,6 @@ import toggleLeaf from './leaves/toggle';
import hotkeys from './hotkeys';
import enablePlugins from './enablePlugins';
import defaultValue from '../../../../../fields/richText/defaultValue';
import FieldTypeGutter from '../../FieldTypeGutter';
import FieldDescription from '../../FieldDescription';
import withHTML from './plugins/withHTML';
import { Props, BlurSelectionEditor } from './types';
@@ -56,7 +55,6 @@ const RichText: React.FC<Props> = (props) => {
width,
placeholder,
description,
hideGutter,
condition,
} = {},
} = props;
@@ -206,7 +204,6 @@ const RichText: React.FC<Props> = (props) => {
}}
>
<div className={`${baseClass}__wrap`}>
{!hideGutter && (<FieldTypeGutter />)}
<Error
showError={showError}
message={errorMessage}
@@ -227,44 +224,46 @@ const RichText: React.FC<Props> = (props) => {
>
<div className={`${baseClass}__wrapper`}>
<div className={`${baseClass}__toolbar`}>
{elements.map((element, i) => {
let elementName: string;
if (typeof element === 'object' && element?.name) elementName = element.name;
if (typeof element === 'string') elementName = element;
<div className={`${baseClass}__toolbar-wrap`}>
{elements.map((element, i) => {
let elementName: string;
if (typeof element === 'object' && element?.name) elementName = element.name;
if (typeof element === 'string') elementName = element;
const elementType = enabledElements[elementName];
const Button = elementType?.Button;
const elementType = enabledElements[elementName];
const Button = elementType?.Button;
if (Button) {
return (
<Button
key={i}
path={path}
/>
);
}
if (Button) {
return (
<Button
key={i}
path={path}
/>
);
}
return null;
})}
{leaves.map((leaf, i) => {
let leafName: string;
if (typeof leaf === 'object' && leaf?.name) leafName = leaf.name;
if (typeof leaf === 'string') leafName = leaf;
return null;
})}
{leaves.map((leaf, i) => {
let leafName: string;
if (typeof leaf === 'object' && leaf?.name) leafName = leaf.name;
if (typeof leaf === 'string') leafName = leaf;
const leafType = enabledLeaves[leafName];
const Button = leafType?.Button;
const leafType = enabledLeaves[leafName];
const Button = leafType?.Button;
if (Button) {
return (
<Button
key={i}
path={path}
/>
);
}
if (Button) {
return (
<Button
key={i}
path={path}
/>
);
}
return null;
})}
return null;
})}
</div>
</div>
<div
className={`${baseClass}__editor`}

11
src/admin/components/forms/field-types/RichText/elements/link/index.scss
View File

@@ -23,6 +23,7 @@
.rich-text-link__button {
@extend %btn-reset;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
color: inherit;
@@ -51,7 +52,7 @@
transform: translateY(-50%);
svg {
@include color-svg(white);
@include color-svg(var(--theme-elevation-0));
transform: rotate(-90deg);
}
}
@@ -61,15 +62,15 @@
padding-right: base(1.75);
min-width: base(12);
width: 100%;
background: rgba($color-background-gray, .1);
background: var(--theme-elevation-100);
border: 0;
color: white;
color: var(--theme-elevation-1000);
}
.rich-text-link__new-tab {
svg {
@include color-svg(white);
background-color: rgba(white, .1);
@include color-svg(var(--theme-elevation-0));
background: var(--theme-elevation-750);
margin-right: base(.5);
}

4
src/admin/components/forms/field-types/RichText/elements/link/index.tsx
View File

@@ -10,11 +10,13 @@ import Check from '../../../../../icons/Check';
import Error from '../../../../Error';
import './index.scss';
import { useTheme } from '../../../../../utilities/Theme';
const baseClass = 'rich-text-link';
const Link = ({ attributes, children, element, editorRef }) => {
const editor = useSlate();
const { theme } = useTheme();
const [error, setError] = useState(false);
const [open, setOpen] = useState(element.url === undefined);
@@ -45,7 +47,7 @@ const Link = ({ attributes, children, element, editorRef }) => {
initActive={element.url === undefined}
buttonType="none"
size="small"
color="dark"
color={theme === 'dark' ? 'light' : 'dark'}
horizontalAlign="center"
forceOpen={open}
onToggleOpen={handleToggleOpen}

8
src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.scss
View File

@@ -6,13 +6,15 @@
}
&__modal {
@include blur-bg;
display: flex;
align-items: center;
height: 100%;
}
&.payload__modal-item--enterDone {
@include blur-bg;
}
&__modal-template {
position: relative;
z-index: 1;
}
&__header {

2
src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.tsx
View File

@@ -84,7 +84,7 @@ const RelationshipButton: React.FC<{path: string}> = ({ path }) => {
slug={modalSlug}
className={`${baseClass}__modal`}
>
<MinimalTemplate>
<MinimalTemplate className={`${baseClass}__modal-template`}>
<header className={`${baseClass}__header`}>
<h3>Add Relationship</h3>
<Button

5
src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss
View File

@@ -1,12 +1,15 @@
@import '../../../../../../../scss/styles.scss';
.rich-text-relationship {
@extend %body;
@include inputShadow;
padding: base(.5);
display: flex;
align-items: flex-start;
background: $color-background-gray;
background: var(--theme-elevation-50);
max-width: base(15);
margin-bottom: base(.5);
font-family: var(--font-body);
svg {
width: base(1.25);

8
src/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.scss
View File

@@ -8,6 +8,8 @@
.template-minimal {
padding-top: base(4);
align-items: flex-start;
position: relative;
z-index: 1;
}
&__header {
@@ -28,12 +30,14 @@
display: none;
}
}
.rich-text__toolbar {
margin-bottom: 0;
}
.rich-text__editor {
background-color: white;
border: 1px solid $color-light-gray;
background-color: var(--theme-elevation-0);
border: 1px solid var(--theme-elevation-150);
border-top: none;
min-height: base(5);
padding: base(.35) base(.5);

12
src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
View File

@@ -1,11 +1,14 @@
@import '../../../../../../../scss/styles.scss';
.rich-text-upload {
@extend %body;
@include inputShadow;
max-width: base(15);
display: flex;
align-items: center;
background: white;
background: var(--theme-elevation-50);
position: relative;
font-family: var(--font-body);
&__card {
@include soft-shadow-bottom;
@@ -24,12 +27,13 @@
position: relative;
overflow: hidden;
img, svg {
img,
svg {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
background-color: $color-dark-gray;
background-color: var(--theme-elevation-800);
}
}
@@ -66,7 +70,7 @@
&__bottomRow {
padding: base(.5);
border-top: 1px solid $color-background-gray;
border-top: 1px solid var(--theme-elevation-100);
}
h5 {

2
src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
View File

@@ -128,7 +128,7 @@ const Element = ({ attributes, children, element, path, fieldProps }) => {
</div>
<div className={`${baseClass}__bottomRow`}>
<h5>{upload?.filename}</h5>
<strong>{upload?.filename}</strong>
</div>
</div>
{children}

2
src/admin/components/forms/field-types/RichText/elements/upload/addSwapModals.scss
View File

@@ -8,6 +8,8 @@
.template-minimal {
padding-top: base(4);
align-items: flex-start;
position: relative;
z-index: 1;
}
&__header {

76
src/admin/components/forms/field-types/RichText/index.scss
View File

@@ -5,18 +5,38 @@
display: flex;
&__toolbar {
@include blur-bg(white);
@include blur-bg(var(--theme-elevation-0));
margin-bottom: $baseline;
border: $style-stroke-width-s solid var(--theme-elevation-150);
position: sticky;
z-index: 2;
top: base(4);
}
&__toolbar-wrap {
padding: base(.25);
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin-bottom: $baseline;
border: $style-stroke-width-s solid $color-light-gray;
padding: base(.25);
position: sticky;
top: base(5);
position: relative;
z-index: 1;
&:after {
content: ' ';
opacity: .8;
position: absolute;
top: calc(100% + 1px);
background: linear-gradient(var(--theme-elevation-0), transparent);
display: block;
left: -1px;
right: -1px;
height: base(1);
}
}
&__editor {
font-family: var(--font-serif);
font-size: base(.625);
[data-slate-node=element] {
margin-bottom: base(0.25);
@@ -25,8 +45,40 @@
h1,
h2,
h3,
h4 {
margin-bottom: base(.5);
h4,
h5,
h6 {
font-family: var(--font-body);
}
h1[data-slate-node=element] {
font-size: base(1.5);
margin: base(1) 0 base(.5);
}
h2[data-slate-node=element] {
font-size: base(1.25);
margin: base(1) 0 base(.5);
}
h3[data-slate-node=element] {
font-size: base(1.125);
margin: base(.75) 0 base(.5);
}
h4[data-slate-node=element] {
font-size: base(1);
margin: base(.5) 0 base(.5);
}
h5[data-slate-node=element] {
font-size: base(.875);
margin: base(.25) 0 base(.25);
}
h6[data-slate-node=element] {
font-size: base(.75);
margin: base(.25) 0 base(.25);
}
}
@@ -45,7 +97,7 @@
&--read-only {
.rich-text__editor {
background-color: $color-light-gray;
background-color: var(--theme-elevation-150);
padding: base(.5);
}
}
@@ -55,18 +107,18 @@
padding: base(0.25);
svg {
@include color-svg($color-dark-gray);
@include color-svg(var(--theme-elevation-800));
width: base(0.75);
height: base(0.75);
}
&:hover {
background-color: $color-background-gray;
background-color: var(--theme-elevation-100);
}
&__button--active,
&__button--active:hover {
background-color: $color-light-gray;
background-color: var(--theme-elevation-150);
}
}
}

2
src/admin/components/forms/field-types/Select/index.scss
View File

@@ -8,7 +8,7 @@
.select--read-only {
div.react-select {
div.rs__control {
background: lighten($color-light-gray, 5%);
background: var(--theme-elevation-100);
}
}
}

18
src/admin/components/forms/field-types/Text/index.scss
View File

@@ -1,16 +1,16 @@
@import '../../../../scss/styles.scss';
.field-type.text {
position: relative;
position: relative;
margin-bottom: $baseline;
input {
@include formInput;
}
input {
@include formInput;
}
&.error {
input {
background-color: lighten($color-red, 20%);
}
}
&.error {
input {
background-color: var(--color-error-200);
}
}
}

2
src/admin/components/forms/field-types/Textarea/index.scss
View File

@@ -12,7 +12,7 @@
&.error {
textarea {
background-color: lighten($color-red, 20%);
background-color: var(--color-error-200);
}
}
}

2
src/admin/components/forms/field-types/Upload/Add/index.scss
View File

@@ -8,6 +8,8 @@
.template-minimal {
padding-top: base(6);
align-items: flex-start;
position: relative;
z-index: 1;
}
&__header {

2
src/admin/components/forms/field-types/Upload/SelectExisting/index.scss
View File

@@ -8,6 +8,8 @@
.template-minimal {
padding-top: base(6);
align-items: flex-start;
position: relative;
z-index: 1;
}
&__header {

4
src/admin/components/forms/field-types/Upload/index.scss
View File

@@ -1,14 +1,14 @@
@import '../../../../scss/styles';
.upload {
position: relative;
position: relative;
margin-bottom: $baseline;
min-width: base(15);
&__wrap {
display: flex;
padding: base(1.5) base(1.5) $baseline;
background: $color-background-gray;
background: var(--theme-elevation-100);
.btn {
margin: 0 $baseline base(.5) 0;

19
src/admin/components/graphics/Account/index.tsx
View File

@@ -1,26 +1,39 @@
import React from 'react';
const css = `
.graphic-account .circle1 {
fill: var(--theme-elevation-100);
}
.graphic-account .circle2, .graphic-account path {
fill: var(--theme-elevation-300);
}
`;
const Account: React.FC = () => (
<svg
className="graphic-account"
width="25"
height="25"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 25 25"
>
<style>
{css}
</style>
<circle
fill="#c4c4c4"
className="circle1"
cx="12.5"
cy="12.5"
r="11.5"
/>
<circle
fill="#fff"
className="circle2"
cx="12.5"
cy="10.73"
r="3.98"
/>
<path
fill="#fff"
d="M12.5,24a11.44,11.44,0,0,0,7.66-2.94c-.5-2.71-3.73-4.8-7.66-4.8s-7.16,2.09-7.66,4.8A11.44,11.44,0,0,0,12.5,24Z"
/>
</svg>

12
src/admin/components/graphics/Icon/index.tsx
View File

@@ -2,20 +2,28 @@ import React from 'react';
import { useConfig } from '../../utilities/Config';
import RenderCustomComponent from '../../utilities/RenderCustomComponent';
const css = `
.graphic-icon path {
fill: var(--theme-elevation-1000);
}
`;
const PayloadIcon: React.FC = () => (
<svg
width="25"
height="25"
viewBox="0 0 25 25"
xmlns="http://www.w3.org/2000/svg"
className="graphic-icon"
>
<style>
{css}
</style>
<path
d="M11.5293 0L23 6.90096V19.9978L14.3608 25V11.9032L2.88452 5.00777L11.5293 0Z"
fill="#333333"
/>
<path
d="M10.6559 24.2727V14.0518L2 19.0651L10.6559 24.2727Z"
fill="#333333"
/>
</svg>
);

20
src/admin/components/graphics/Logo/index.tsx
View File

@@ -2,6 +2,12 @@ import React from 'react';
import { useConfig } from '../../utilities/Config';
import RenderCustomComponent from '../../utilities/RenderCustomComponent';
const css = `
.graphic-logo path {
fill: var(--theme-elevation-1000);
}
`;
const PayloadLogo: React.FC = () => (
<svg
width="180"
@@ -9,43 +15,37 @@ const PayloadLogo: React.FC = () => (
viewBox="0 0 180 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="logo"
className="graphic-logo"
>
<style>
{css}
</style>
<path
d="M65.922 13.8685C71.1075 13.8685 77.0257 14.6014 77.0257 22.2185C77.0257 28.6587 71.8736 30.2243 66.0664 30.2243H62.2689V39.0961H57.2944V13.8685H65.922ZM62.2689 17.7659V26.3602H66.3773C69.4752 26.3602 71.9069 25.594 71.9069 22.2518C71.9069 18.1101 68.7424 17.7659 66.022 17.7659H62.2689Z"
fill="#333333"
/>
<path
d="M84.3209 39.5514C80.7344 39.5514 77.5698 37.4639 77.5698 34.0884C77.5698 29.6358 82.5443 28.3145 89.8949 27.4706V27.1264C89.8949 24.2394 88.3626 23.2623 86.3084 23.2623C84.2542 23.2623 82.7219 24.2394 82.622 26.2936H78.1361C78.4803 22.6072 81.7226 19.8867 86.4861 19.8867C91.1163 19.8867 94.7028 21.7633 94.7028 28.1035C94.7028 28.692 94.6362 31.2014 94.6362 32.9114C94.6362 35.865 94.8472 37.5416 95.1914 39.1073H90.7721C90.6278 38.5188 90.4945 37.6083 90.4279 36.7089C89.0844 38.6853 87.1412 39.5514 84.3209 39.5514ZM90.0282 30.5463C84.6651 31.1015 82.511 31.7344 82.511 33.8219C82.511 35.1766 83.588 36.298 85.7532 36.298C88.7512 36.298 90.0393 34.5547 90.0393 31.4901V30.5463H90.0282Z"
fill="#333333"
/>
<path
d="M97.2899 45.1921V41.5057H99.0998C100.699 41.5057 101.432 41.539 102.231 39.5514L102.442 39.0295L95.269 20.3753H100.521L104.763 33.8774L109.115 20.3753H113.99L107.139 38.541C104.951 44.3593 103.974 45.1921 99.3108 45.1921H97.2899Z"
fill="#333333"
/>
<path
d="M120.263 39.1073H115.456V13.8685H120.263V39.1073Z"
fill="#333333"
/>
<path
d="M122.406 29.7801C122.406 23.2067 126.826 19.9645 131.7 19.9645C136.575 19.9645 140.994 23.2067 140.994 29.7801C140.994 36.3535 136.575 39.5625 131.7 39.5625C126.826 39.5514 122.406 36.3535 122.406 29.7801ZM127.281 29.7801C127.281 33.6775 128.913 35.7984 131.7 35.7984C134.487 35.7984 136.119 33.6775 136.119 29.7801C136.119 25.8494 134.487 23.7286 131.7 23.7286C128.913 23.7286 127.281 25.8383 127.281 29.7801Z"
fill="#333333"
/>
<path
d="M149.167 39.5514C145.58 39.5514 142.416 37.4639 142.416 34.0884C142.416 29.6358 147.39 28.3145 154.741 27.4706V27.1264C154.741 24.2394 153.208 23.2623 151.154 23.2623C149.1 23.2623 147.568 24.2394 147.468 26.2936H142.982C143.326 22.6072 146.568 19.8867 151.332 19.8867C155.962 19.8867 159.549 21.7633 159.549 28.1035C159.549 28.692 159.482 31.2014 159.482 32.9114C159.482 35.865 159.693 37.5416 160.037 39.1073H155.618C155.473 38.5188 155.34 37.6083 155.274 36.7089C153.941 38.6853 151.987 39.5514 149.167 39.5514ZM154.874 30.5463C149.511 31.1015 147.357 31.7344 147.357 33.8219C147.357 35.1766 148.434 36.298 150.599 36.298C153.597 36.298 154.885 34.5547 154.885 31.4901V30.5463H154.874Z"
fill="#333333"
/>
<path
d="M175.06 39.1073V36.7422C173.872 38.7964 171.618 39.5625 169.664 39.5625C165.067 39.5625 161.625 35.7317 161.625 29.7468C161.625 23.8619 165 19.9645 169.664 19.9645C172.029 19.9645 174.05 21.0415 175.06 22.7848V13.8796H179.868V39.1073H175.06ZM175.238 29.7357C175.238 25.9716 173.494 23.6398 170.852 23.6398C168.242 23.6398 166.677 26.1159 166.677 29.7691C166.677 33.4222 168.242 35.865 170.852 35.865C173.494 35.865 175.238 33.5665 175.238 29.7357Z"
fill="#333333"
/>
<path
d="M19.1531 0L42.049 13.8019V39.9956L24.8049 50V23.8064L1.89795 10.0155L19.1531 0Z"
fill="#333333"
/>
<path
d="M17.4097 48.5454V28.1035L0.132324 38.1301L17.4097 48.5454Z"
fill="#333333"
/>
</svg>
);

2
src/admin/components/icons/Calendar/index.scss
View File

@@ -5,7 +5,7 @@
width: $baseline;
.stroke {
stroke: $color-dark-gray;
stroke: var(--theme-elevation-800);
stroke-width: $style-stroke-width-s;
}
}

Some files were not shown because too many files have changed in this diff Show More