From f78b9c1ca9648eb10b010e526d9b9db09648b154 Mon Sep 17 00:00:00 2001 From: TheCatLady <52870424+TheCatLady@users.noreply.github.com> Date: Tue, 27 Apr 2021 11:23:36 -0400 Subject: [PATCH] fix(css): don't target button globally (#1510) * fix(css): don't target button globally * fix(css): revert toast change --- src/components/Layout/SearchInput/index.tsx | 2 +- src/components/RequestBlock/index.tsx | 4 ---- src/components/Settings/CopyButton.tsx | 2 +- src/components/Settings/SettingsMain.tsx | 2 +- src/components/Settings/SettingsPlex.tsx | 2 +- src/components/Settings/SettingsServices.tsx | 4 ++-- src/components/Toast/index.tsx | 2 +- src/styles/globals.css | 15 ++++++++++++--- tailwind.config.js | 15 +-------------- 9 files changed, 20 insertions(+), 28 deletions(-) diff --git a/src/components/Layout/SearchInput/index.tsx b/src/components/Layout/SearchInput/index.tsx index cdb5a04f3..9042ef45c 100644 --- a/src/components/Layout/SearchInput/index.tsx +++ b/src/components/Layout/SearchInput/index.tsx @@ -41,7 +41,7 @@ const SearchInput: React.FC = () => { className="absolute inset-y-0 p-1 m-auto text-gray-400 transition border-none outline-none right-2 h-7 w-7 focus:outline-none focus:border-none hover:text-white" onClick={() => clear()} > - + )} diff --git a/src/components/RequestBlock/index.tsx b/src/components/RequestBlock/index.tsx index 146d42cf5..e5d74c831 100644 --- a/src/components/RequestBlock/index.tsx +++ b/src/components/RequestBlock/index.tsx @@ -97,7 +97,6 @@ const RequestBlock: React.FC = ({ request, onUpdate }) => { <> diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx index 3acca8e89..10d0b8ac5 100644 --- a/src/components/Settings/SettingsMain.tsx +++ b/src/components/Settings/SettingsMain.tsx @@ -203,7 +203,7 @@ const SettingsMain: React.FC = () => { e.preventDefault(); regenerate(); }} - className="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 rounded-r-md hover:bg-indigo-500 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700" + className="input-action" > diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx index 5b3fbd391..b0e660e6d 100644 --- a/src/components/Settings/SettingsPlex.tsx +++ b/src/components/Settings/SettingsPlex.tsx @@ -431,7 +431,7 @@ const SettingsPlex: React.FC = ({ onComplete }) => { e.preventDefault(); refreshPresetServers(); }} - className="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 rounded-r-md hover:bg-indigo-500 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700" + className="input-action" > = ({ onClick={() => onEdit()} className="relative inline-flex items-center justify-center flex-1 w-0 py-4 -mr-px text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out border border-transparent rounded-bl-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10" > - + {intl.formatMessage(globalMessages.edit)} @@ -148,7 +148,7 @@ const ServerInstance: React.FC = ({ onClick={() => onDelete()} className="relative inline-flex items-center justify-center flex-1 w-0 py-4 text-sm font-medium leading-5 text-gray-200 transition duration-150 ease-in-out border border-transparent rounded-br-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10" > - + {intl.formatMessage(globalMessages.delete)} diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx index 1583b2e1a..a93c699fe 100644 --- a/src/components/Toast/index.tsx +++ b/src/components/Toast/index.tsx @@ -50,7 +50,7 @@ const Toast: React.FC = ({ onClick={() => onDismiss()} className="inline-flex text-gray-400 transition duration-150 ease-in-out focus:outline-none focus:text-gray-500" > - + diff --git a/src/styles/globals.css b/src/styles/globals.css index d9af7db5a..8b5214d10 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -278,18 +278,27 @@ select.rounded-r-only { } input.short { - width: 4.875rem; + @apply w-20; } select.short { @apply w-min; } -button svg, -.button-md svg { +button.input-action { + @apply relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md; +} + +.button-md svg, +button.input-action svg, +.plex-button svg { @apply w-5 h-5 mr-2 last:mr-0; } +.button-md svg { + @apply last:w-4 last:h-4; +} + .button-sm svg { @apply w-4 h-4 mr-1.5 last:w-5 last:h-5 last:mr-0; } diff --git a/tailwind.config.js b/tailwind.config.js index 6a51b14d0..511f59532 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,4 @@ -/* eslint-disable */ +// eslint-disable-next-line @typescript-eslint/no-var-requires const defaultTheme = require('tailwindcss/defaultTheme'); module.exports = { @@ -59,19 +59,6 @@ module.exports = { }), }, }, - variants: { - cursor: ['disabled'], - width: ['first', 'last', 'responsive'], - height: ['first', 'last', 'responsive'], - padding: ['first', 'last', 'responsive'], - borderWidth: ['first', 'last'], - margin: ['first', 'last', 'responsive'], - boxShadow: ['group-focus', 'responsive'], - opacity: ['disabled', 'hover', 'group-hover'], - ringColor: ['focus', 'focus-within', 'hover', 'active'], - scale: ['hover', 'focus', 'group-hover'], - zIndex: ['hover', 'responsive'], - }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'),