From ff460805c0dcff5ed1a4442b348a574dbd0ea0ee Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sat, 26 Feb 2022 20:59:29 -0500 Subject: [PATCH] Update colors --- .../admin/users/UsersContainerV2.tsx | 7 +++-- .../elements/button/button.module.css | 8 ++--- .../elements/dropdown/dropdown.module.css | 4 +-- .../components/elements/inputs/Checkbox.tsx | 13 ++++++++ .../components/elements/inputs/index.ts | 2 ++ .../elements/inputs/inputs.module.css | 7 +++++ tailwind.config.js | 31 ++++--------------- 7 files changed, 38 insertions(+), 34 deletions(-) create mode 100644 resources/scripts/components/elements/inputs/Checkbox.tsx create mode 100644 resources/scripts/components/elements/inputs/index.ts create mode 100644 resources/scripts/components/elements/inputs/inputs.module.css diff --git a/resources/scripts/components/admin/users/UsersContainerV2.tsx b/resources/scripts/components/admin/users/UsersContainerV2.tsx index 537b26c44..cb1635379 100644 --- a/resources/scripts/components/admin/users/UsersContainerV2.tsx +++ b/resources/scripts/components/admin/users/UsersContainerV2.tsx @@ -13,6 +13,7 @@ import { } from '@heroicons/react/solid'; import { Button } from '@/components/elements/button/index'; import { Dialog } from '@/components/elements/dialog'; +import { Checkbox } from '@/components/elements/inputs'; const UsersContainerV2 = () => { const [ users, setUsers ] = useState([]); @@ -41,8 +42,8 @@ const UsersContainerV2 = () => { This account will be permanently deleted. - setVisible(false)}>Cancel - Delete + setVisible(false)}>Cancel + Delete @@ -58,7 +59,7 @@ const UsersContainerV2 = () => {
- +
diff --git a/resources/scripts/components/elements/button/button.module.css b/resources/scripts/components/elements/button/button.module.css index 717da280e..3931526fc 100644 --- a/resources/scripts/components/elements/button/button.module.css +++ b/resources/scripts/components/elements/button/button.module.css @@ -1,14 +1,14 @@ .button { @apply px-4 py-2 inline-flex items-center justify-center; - @apply bg-primary-500 rounded text-base font-semibold text-primary-50 transition-all duration-100; - @apply hover:bg-primary-600 active:bg-primary-600; + @apply bg-blue-600 rounded text-base font-semibold text-blue-50 transition-all duration-100; + @apply hover:bg-blue-500 active:bg-blue-500; &.square { @apply p-2; } &:focus { - @apply ring-[3px] ring-opacity-75 ring-primary-300; + @apply ring-[3px] ring-blue-500 ring-offset-2 ring-offset-neutral-700; } /* Sizing Controls */ @@ -26,5 +26,5 @@ } .danger { - @apply bg-red-500 hover:bg-red-600 active:bg-red-600 focus:ring-red-400 text-red-50; + @apply bg-red-600 hover:bg-red-500 active:bg-red-500 focus:ring-red-500 text-red-50; } diff --git a/resources/scripts/components/elements/dropdown/dropdown.module.css b/resources/scripts/components/elements/dropdown/dropdown.module.css index f4025c90c..73ed043e4 100644 --- a/resources/scripts/components/elements/dropdown/dropdown.module.css +++ b/resources/scripts/components/elements/dropdown/dropdown.module.css @@ -35,10 +35,10 @@ } &:hover, &:focus, &:focus-within { - @apply bg-primary-600 text-primary-50; + @apply bg-blue-500 text-blue-50; & svg { - @apply text-primary-50; + @apply text-blue-50; } } diff --git a/resources/scripts/components/elements/inputs/Checkbox.tsx b/resources/scripts/components/elements/inputs/Checkbox.tsx new file mode 100644 index 000000000..7e5d1e3c7 --- /dev/null +++ b/resources/scripts/components/elements/inputs/Checkbox.tsx @@ -0,0 +1,13 @@ +import React, { forwardRef } from 'react'; +import styles from './inputs.module.css'; +import classNames from 'classnames'; + +type Props = Omit, 'type'> + +export default forwardRef(({ className, ...props }, ref) => ( + +)); diff --git a/resources/scripts/components/elements/inputs/index.ts b/resources/scripts/components/elements/inputs/index.ts new file mode 100644 index 000000000..11e194edf --- /dev/null +++ b/resources/scripts/components/elements/inputs/index.ts @@ -0,0 +1,2 @@ +export { default as Checkbox } from './Checkbox'; +export { default as styles } from './inputs.module.css'; diff --git a/resources/scripts/components/elements/inputs/inputs.module.css b/resources/scripts/components/elements/inputs/inputs.module.css new file mode 100644 index 000000000..7808a8343 --- /dev/null +++ b/resources/scripts/components/elements/inputs/inputs.module.css @@ -0,0 +1,7 @@ +.checkbox { + @apply w-4 h-4 rounded-sm border-neutral-500 bg-neutral-600 text-primary-500; + + &:focus, &:active { + @apply ring-2 ring-primary-500 ring-offset-2 ring-offset-neutral-700; + } +} diff --git a/tailwind.config.js b/tailwind.config.js index 497be5282..e53495649 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,30 +11,9 @@ module.exports = { }, colors: { black: '#131a20', - primary: { - 50: '#e6f6ff', - 100: '#b8e2ff', - 200: '#7ac3fa', - 300: '#49a4f3', - 400: '#2487eb', - 500: '#0967d3', - 600: '#0550b3', - 700: '#0345a0', - 800: '#01337e', - 900: '#002057', - }, - neutral: { - 50: '#f5f7fa', - 100: '#e5e8eb', - 200: '#cad1d8', - 300: '#9aa5b1', - 400: '#7b8793', - 500: '#606d7b', - 600: '#515f6c', - 700: '#3f4d5a', - 800: '#33404d', - 900: '#1f2933', - }, + // Deprecated, prefer the use of "blue" directly here. + primary: colors.blue, + neutral: colors.neutral, cyan: colors.cyan, }, fontSize: { @@ -49,6 +28,8 @@ module.exports = { }, }, plugins: [ - require('@tailwindcss/forms'), + require('@tailwindcss/forms')({ + strategy: 'class', + }), ] };