diff --git a/cypress/e2e/login/widgets.cy.js b/cypress/e2e/login/widgets.cy.js index 98e89040..d1ade204 100644 --- a/cypress/e2e/login/widgets.cy.js +++ b/cypress/e2e/login/widgets.cy.js @@ -39,7 +39,7 @@ describe( Cypress.Commands.add('checkValidation', (widgetName) => { cy.contains(widgetName).click() cy.contains('Create widget').click() - cy.get('.text-red-500').should('exist') + cy.get('.text-scarlet-700').should('exist') cy.contains('Go back').click() }) Cypress.Commands.add('createwidget', (name) => { diff --git a/cypress/support/commands.js b/cypress/support/commands.js index c71284b1..8572e8cd 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -91,7 +91,7 @@ Cypress.Commands.add('middlestuff', (_translationwp) => { Cypress.Commands.add('checkValidation', (widgetName) => { cy.contains(widgetName).click() cy.contains('Create widget').click() - cy.get('.text-red-500').should('exist') + cy.get('.text-scarlet-700').should('exist') cy.contains('Go back').click() }) diff --git a/src/assets/customColors.js b/src/assets/customColors.js new file mode 100644 index 00000000..2812cd54 --- /dev/null +++ b/src/assets/customColors.js @@ -0,0 +1,77 @@ +Object.defineProperty(exports, '__esModule', { + value: true, +}) +Object.defineProperty(exports, 'default', { + enumerable: true, + get() { + return _default + }, +}) + +const _default = { + scarlet: { + 50: '#fff0f1', + 100: '#ffdcdf', + 200: '#ffc0c6', + 300: '#ff949e', + 400: '#ff5665', + 500: '#ff2236', + 600: '#ff0219', + 700: '#d80013', + 800: '#b40212', + 900: '#920a16', + 950: '#510007', + }, + blumine: { + 50: '#f0f9fb', + 100: '#daeef3', + 200: '#badee7', + 300: '#89c5d7', + 400: '#52a3be', + 500: '#3787a3', + 600: '#306d8a', + 700: '#2d5b72', + 800: '#2c4c5e', + 900: '#284151', + 950: '#162936', + }, + jade: { + 50: '#effaf6', + 100: '#d9f2e6', + 200: '#b6e4d1', + 300: '#86cfb5', + 400: '#53b494', + 500: '#2c876d', + 600: '#227962', + 700: '#1b6150', + 800: '#184d40', + 900: '#144036', + 950: '#0a241f', + }, + ochre: { + 50: '#fcf9ee', + 100: '#f5edd0', + 200: '#ebd99c', + 300: '#e1c268', + 400: '#daad45', + 500: '#d1912f', + 600: '#c37829', + 700: '#995424', + 800: '#7e4322', + 900: '#68381f', + 950: '#3b1c0d', + }, + charcoal: { + 50: '#f5f5f6', + 100: '#e6e6e7', + 200: '#cfd0d2', + 300: '#aeafb2', + 400: '#85868b', + 500: '#6a6b70', + 600: '#5a5b60', + 700: '#4d4d51', + 800: '#434347', + 900: '#313133', + 950: '#252527', + }, +} diff --git a/src/assets/customColorsConfig.js b/src/assets/customColorsConfig.js new file mode 100644 index 00000000..a4ba6638 --- /dev/null +++ b/src/assets/customColorsConfig.js @@ -0,0 +1,4 @@ +const customColors = require('./customColors') +module.exports = ( + customColors.__esModule ? customColors : { default: customColors } +).default diff --git a/src/assets/main.css b/src/assets/main.css index 3cab82c3..a4cba16b 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -8,10 +8,10 @@ /* Changes to wysiwyg classes need to be mirrored in the function passed to the editor e.g.`frontend/app_v2/src/components/Form/WysiwygField.js` */ @layer base { .wysiwyg h2 { - @apply border-b border-gray-500 font-bold my-6 py-5 text-2xl text-primary; + @apply border-b border-charcoal-500 font-bold my-6 py-5 text-2xl text-blumine-800; } .wysiwyg h3 { - @apply font-bold my-4 text-xl text-primary; + @apply font-bold my-4 text-xl text-blumine-800; } .wysiwyg ol { @apply list-decimal; @@ -25,7 +25,7 @@ } /* These component rules can be over-ridden using utility classes. -For example over-ride the colour of the btn-contained backgound using bg-secondary */ +For example over-ride the colour of the btn-contained backgound using bg-scarlet-800 */ @layer components { .ql-video { @apply w-full h-96; @@ -34,10 +34,10 @@ For example over-ride the colour of the btn-contained backgound using bg-seconda @apply text-blue-600 visited:text-purple-600 underline underline-offset-2; } .btn-contained { - @apply rounded-lg shadow-sm py-2 px-4 inline-flex justify-center items-center space-x-2 text-sm font-medium bg-primary border border-transparent text-white hover:opacity-80 active:opacity-100; + @apply rounded-lg shadow-sm py-2 px-4 inline-flex justify-center items-center space-x-2 text-sm font-medium bg-blumine-800 border border-transparent text-white hover:opacity-80 active:opacity-100; } .btn-outlined { - @apply rounded-lg shadow-sm py-2 px-4 inline-flex justify-center items-center space-x-2 text-sm font-medium bg-white border border-primary text-primary hover:bg-gray-50 active:bg-white; + @apply rounded-lg shadow-sm py-2 px-4 inline-flex justify-center items-center space-x-2 text-sm font-medium bg-white border border-blumine-800 text-blumine-800 hover:bg-charcoal-50 active:bg-white; } .btn-icon { @apply fill-current h-5 w-5; diff --git a/src/common/utils/stringHelpers.js b/src/common/utils/stringHelpers.js index 3a67716f..2e79f23d 100644 --- a/src/common/utils/stringHelpers.js +++ b/src/common/utils/stringHelpers.js @@ -140,7 +140,8 @@ export const getPresentationPropertiesForType = (type) => { singular: 'word', plural: 'words', slug: 'words', - color: 'word', + color: 'word-color-500', + textColor: 'word-color-700', } case TYPE_PHRASE: return { @@ -148,7 +149,8 @@ export const getPresentationPropertiesForType = (type) => { singular: 'phrase', plural: 'phrases', slug: 'phrases', - color: 'phrase', + color: 'phrase-color-600', + textColor: 'phrase-color-800', } case TYPE_SONG: return { @@ -156,7 +158,8 @@ export const getPresentationPropertiesForType = (type) => { singular: 'song', plural: 'songs', slug: 'songs', - color: 'song', + color: 'song-color-800', + textColor: 'song-color-900', } case TYPE_STORY: return { @@ -164,7 +167,8 @@ export const getPresentationPropertiesForType = (type) => { singular: 'story', plural: 'stories', slug: 'stories', - color: 'story', + color: 'story-color-700', + textColor: 'story-color-900', } case TYPE_DICTIONARY: return { @@ -172,7 +176,8 @@ export const getPresentationPropertiesForType = (type) => { singular: 'word / phrase', plural: 'words and phrases', slug: 'dictionary', - color: 'word', + color: 'word-color-500', + textColor: 'word-color-700', } case TYPE_MEDIA: return { @@ -180,7 +185,8 @@ export const getPresentationPropertiesForType = (type) => { singular: 'media', plural: 'media', slug: 'search', - color: 'primary', + color: 'charcoal-500', + textColor: 'charcoal-900', } case TYPE_AUDIO: return { @@ -188,7 +194,8 @@ export const getPresentationPropertiesForType = (type) => { singular: 'audio', plural: 'audio', slug: 'audio', - color: 'primary', + color: 'charcoal-500', + textColor: 'charcoal-900', } case TYPE_IMAGE: return { @@ -196,7 +203,8 @@ export const getPresentationPropertiesForType = (type) => { singular: 'image', plural: 'images', slug: 'image', - color: 'primary', + color: 'charcoal-500', + textColor: 'charcoal-900', } case TYPE_VIDEO: return { @@ -204,7 +212,8 @@ export const getPresentationPropertiesForType = (type) => { singular: 'video', plural: 'videos', slug: 'video', - color: 'primary', + color: 'charcoal-500', + textColor: 'charcoal-900', } case TYPE_ENTRY: default: @@ -213,7 +222,8 @@ export const getPresentationPropertiesForType = (type) => { singular: 'language entry', plural: 'language entries', slug: 'search', - color: 'fv-charcoal', + color: 'charcoal-500', + textColor: 'charcoal-900', } } } diff --git a/src/components/AboutFV/AboutFV.js b/src/components/AboutFV/AboutFV.js index f264d69d..ff9523a9 100644 --- a/src/components/AboutFV/AboutFV.js +++ b/src/components/AboutFV/AboutFV.js @@ -10,11 +10,8 @@ function AboutFV() { data-testid="AboutFirstVoices" >
- -
+ +

FirstVoices.com is an online space for communities to share and promote their language, oral culture and linguistic history. diff --git a/src/components/Actions/Copy.js b/src/components/Actions/Copy.js index 49d734f0..a126df10 100644 --- a/src/components/Actions/Copy.js +++ b/src/components/Actions/Copy.js @@ -30,12 +30,12 @@ function Copy({ type="button" id="CopyAction" aria-label="Copy to clipboard" - className="relative inline-flex items-center text-sm font-medium text-fv-charcoal hover:text-black group" + className="relative inline-flex items-center text-sm font-medium text-charcoal-900 hover:text-black group" onClick={() => copyToClipboard({ text: docTitle, confirmationCallback })} > {getIcon('Copy', `fill-current ${iconStyling}`)} {hoverTooltip ? ( -

+
Copy
) : null} @@ -55,7 +55,7 @@ function Copy({ id={`copy-message-${docId}`} className={confirmation ? '' : 'hidden'} > -
+
Copied
diff --git a/src/components/Actions/QrcodeButton.js b/src/components/Actions/QrcodeButton.js index 07856375..04f1a26c 100644 --- a/src/components/Actions/QrcodeButton.js +++ b/src/components/Actions/QrcodeButton.js @@ -43,10 +43,10 @@ function QrcodeButton({ id="ShareModalContent" className="inline-block text-center align-bottom space-y-5 bg-white rounded-lg p-6 lg:p-8 overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-sm sm:w-full" > -

+

This {entry?.type} is visible to {entry?.visibility} only!

-

+

QR Codes can only be generated for public content.

diff --git a/src/components/Actions/QrcodeModalContent.js b/src/components/Actions/QrcodeModalContent.js index 9f9f655e..5ac57ee5 100644 --- a/src/components/Actions/QrcodeModalContent.js +++ b/src/components/Actions/QrcodeModalContent.js @@ -17,7 +17,7 @@ function QrcodeModalContent({ closeHandler, url }) { id="QrcodeModalContent" className="inline-block align-bottom space-y-5 bg-white rounded-lg p-6 lg:p-8 overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-sm sm:w-full" > -

+

QR Code:

@@ -26,7 +26,7 @@ function QrcodeModalContent({ closeHandler, url }) { )}
@@ -39,24 +37,25 @@ function AlertBannerPresentation({ alertType, handleClose, message }) { ) case ERROR: return ( -
+
- {getIcon('TimesCircleSolid', 'h-5 w-5 fill-current text-red-400')} + {getIcon('TimesCircleSolid', 'btn-icon text-scarlet-700')}
-

{message}

+

{message}

{handleClose && ( )}
@@ -66,27 +65,25 @@ function AlertBannerPresentation({ alertType, handleClose, message }) { ) case WARNING: return ( -
+
- {getIcon( - 'ExclamationTriangleSolid', - 'h-5 w-5 fill-current text-yellow-400', - )} + {getIcon('ExclamationTriangleSolid', 'btn-icon text-ochre-500')}
-

{message}

+

{message}

{handleClose && ( )}
@@ -96,24 +93,25 @@ function AlertBannerPresentation({ alertType, handleClose, message }) { ) case INFO: return ( -
+
- {getIcon('InfoCircleSolid', 'h-5 w-5 fill-current text-blue-400')} + {getIcon('InfoCircleSolid', 'btn-icon text-blumine-500')}
-

{message}

+

{message}

{handleClose && ( )}
@@ -124,24 +122,25 @@ function AlertBannerPresentation({ alertType, handleClose, message }) { case NEUTRAL: default: return ( -
+
- {getIcon('InfoCircleSolid', 'h-5 w-5 fill-current text-primary')} + {getIcon('InfoCircleSolid', 'btn-icon text-charcoal-500')}
-

{message}

+

{message}

{handleClose && ( )}
diff --git a/src/components/Alphabet/AlphabetPlaceholder.js b/src/components/Alphabet/AlphabetPlaceholder.js index 94a3a313..b5319437 100644 --- a/src/components/Alphabet/AlphabetPlaceholder.js +++ b/src/components/Alphabet/AlphabetPlaceholder.js @@ -8,115 +8,115 @@ function AlphabetPlaceholder() {
-
+
- +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +   - +  
-
+
 
diff --git a/src/components/Alphabet/AlphabetPresentation.js b/src/components/Alphabet/AlphabetPresentation.js index 23854fbe..77ba7a87 100644 --- a/src/components/Alphabet/AlphabetPresentation.js +++ b/src/components/Alphabet/AlphabetPresentation.js @@ -21,9 +21,9 @@ function AlphabetPresentation({ data-testid="AlphabetPresentation" >
- + {links && ( -
+
    {links.map(({ url, title }) => (
  • @@ -37,7 +37,7 @@ function AlphabetPresentation({ {characters?.map(({ title, id }) => ( Please select a character
diff --git a/src/components/Alphabet/AlphabetPresentationSelected.js b/src/components/Alphabet/AlphabetPresentationSelected.js index f1045a22..3802d0c9 100644 --- a/src/components/Alphabet/AlphabetPresentationSelected.js +++ b/src/components/Alphabet/AlphabetPresentationSelected.js @@ -33,16 +33,7 @@ function AlphabetPresentationSelected({ <>

{title} {relatedAudio?.length > 0 && ( @@ -55,7 +46,7 @@ function AlphabetPresentationSelected({ {title ? ( 0 && (
-

+

Example words

{entriesToDisplay?.map((word, index) => { - const zebraStripe = index % 2 === 0 ? 'bg-gray-100' : '' + const zebraStripe = index % 2 === 0 ? 'bg-charcoal-50' : '' return (
{word?.title} @@ -120,7 +111,7 @@ function AlphabetPresentationSelected({ )} {generalNote?.length > 0 && (
-

+

Notes

{generalNote}

@@ -166,7 +157,7 @@ function AlphabetPresentationSelected({ {/* content */}
{/* header */} -
+

{title}

-
+
{characters?.map(({ title, id }) => ( @@ -44,7 +44,7 @@ function AlphabetPresentationWidget({ text-2xl ${ selectedData?.title === title - ? 'bg-primary text-white' + ? 'bg-blumine-800 text-white' : '' } `} @@ -60,7 +60,7 @@ function AlphabetPresentationWidget({ {selectedData?.id?.length < 0 ? (
Please select a character
diff --git a/src/components/AppNavBar/AppNavBarPresentation.js b/src/components/AppNavBar/AppNavBarPresentation.js index cdd364da..57dca170 100644 --- a/src/components/AppNavBar/AppNavBarPresentation.js +++ b/src/components/AppNavBar/AppNavBarPresentation.js @@ -45,11 +45,11 @@ function AppNavBarPresentation({ isHome = false, login, logout }) { }, [location, setMobileLandingNavbarOpen]) const menuItemStyling = - 'h-8 xl:h-10 group p-1 inline-flex items-center text-base xl:text-lg font-medium text-white hover:text-gray-300' + 'h-8 xl:h-10 group p-1 inline-flex items-center text-base xl:text-lg font-medium text-white hover:text-charcoal-200' const menuItemLabelStyling = 'ml-1 xl:ml-3 xl:mr-2 whitespace-nowrap' const mobileMenuItemStyling = - 'w-full py-3 px-1 text-fv-charcoal flex items-center rounded focus:ring-2' + 'w-full py-3 px-1 text-charcoal-900 flex items-center rounded focus:ring-2' const mobileMenuItemLabelStyling = 'ml-3 font-medium' const createMobileMenuLink = ({ title, iconName, link }) => ( @@ -65,7 +65,7 @@ function AppNavBarPresentation({ isHome = false, login, logout }) {

-

{tile.description}

+

+ {tile.description} +

{/* Audio */} {entry?.relatedAudio?.length > 0 && ( -
+
{entry?.relatedAudio?.map((audioObject) => ( printBtn()} > {getIcon('Print', 'fill-current w-8 h-auto')} @@ -64,7 +64,7 @@ function DictionaryGridPresentation({
))}
-
+
@@ -48,11 +48,13 @@ function Stepper({ steps, onClickCallback }) { aria-current="step" > - - {`0${stepIdx + 1}`} + + {`0${ + stepIdx + 1 + }`} - + {step.title} @@ -64,13 +66,13 @@ function Stepper({ steps, onClickCallback }) { className={buttonClass} > - - {`0${ + + {`0${ stepIdx + 1 }`} - + {step.title} @@ -83,7 +85,7 @@ function Stepper({ steps, onClickCallback }) { className="absolute top-0 right-0 hidden h-full w-5 md:block" aria-hidden="true" > - {getIcon('ArrowDivider', 'h-full w-full text-gray-300')} + {getIcon('ArrowDivider', 'h-full w-full text-charcoal-200')}
) : null} diff --git a/src/components/Form/SubmitButtons.js b/src/components/Form/SubmitButtons.js index ae2c38d8..93552034 100644 --- a/src/components/Form/SubmitButtons.js +++ b/src/components/Form/SubmitButtons.js @@ -29,7 +29,7 @@ function SubmitButtons({ data-testid="form-submit" type="button" onClick={onSubmitClick} - className="btn-contained bg-secondary" + className="btn-contained bg-scarlet-800" > {submitIcon && getIcon(submitIcon, 'btn-icon')} {submitLabel} diff --git a/src/components/Form/TextAreaField.js b/src/components/Form/TextAreaField.js index f4873afe..84d4f815 100644 --- a/src/components/Form/TextAreaField.js +++ b/src/components/Form/TextAreaField.js @@ -23,7 +23,7 @@ function TextAreaField({ name={nameId} {...register(nameId)} rows={rows} - className="shadow-sm focus:ring-secondary focus:border-secondary block w-full border border-gray-300 rounded-lg" + className="shadow-sm focus:ring-scarlet-800 focus:border-scarlet-800 block w-full border border-charcoal-200 rounded-lg" defaultValue={defaultValue} /> diff --git a/src/components/Form/TextArrayField.js b/src/components/Form/TextArrayField.js index 4461ca05..7c9b17fc 100644 --- a/src/components/Form/TextArrayField.js +++ b/src/components/Form/TextArrayField.js @@ -38,15 +38,15 @@ function TextArrayField({
    {fields.map((item, index) => (
  • -
    +
    - + Delete {label.slice(0, -1)}
    {errors?.[nameId]?.[index] && ( -
    +
    {convertJsonToReadableString( errors?.[nameId]?.[index]?.text?.message, )} @@ -79,17 +79,17 @@ function TextArrayField({
    ) : (
    -
    +
    {errors?.[nameId]?.[fields?.length] && ( -
    +
    {convertJsonToReadableString( errors?.[nameId]?.[fields?.length]?.text?.message, )} diff --git a/src/components/Form/TextField.js b/src/components/Form/TextField.js index e1f9b1ce..ecd85b80 100644 --- a/src/components/Form/TextField.js +++ b/src/components/Form/TextField.js @@ -32,7 +32,7 @@ function TextField({ onKeyDown={handleKeyDown} className={`${ disabled ? 'opacity-50' : '' - } block w-full border border-gray-300 rounded-lg shadow-sm py-4 px-3 focus:outline-none focus:ring-secondary focus:border-secondary`} + } block w-full border border-charcoal-200 rounded-lg shadow-sm py-4 px-3 focus:outline-none focus:ring-scarlet-800 focus:border-scarlet-800`} /> diff --git a/src/components/Form/TextTranslationArrayField.js b/src/components/Form/TextTranslationArrayField.js index 4f425aa3..832bba00 100644 --- a/src/components/Form/TextTranslationArrayField.js +++ b/src/components/Form/TextTranslationArrayField.js @@ -33,18 +33,18 @@ function TextTranslationArrayField({