Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change smallBtn background color when hover to saveBtn color #3543

Merged
merged 5 commits into from
Jun 1, 2023
Merged

Change smallBtn background color when hover to saveBtn color #3543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
94fd4c0
Change smallBtn background color when hover to saveBtn
CarolineDenis May 30, 2023
28563dc
Apply darker background for btns when hovering in light mode
CarolineDenis May 30, 2023
0f2f91c
Fix failing tests
CarolineDenis May 30, 2023
17d502a
Unify Button.Small
CarolineDenis May 30, 2023
ce78619
Update snpashots
CarolineDenis May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions specifyweb/frontend/js_src/lib/components/Atoms/__tests__/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`Button.BorderedGray renders without errors 1`] = `
<button
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
dark:text-gray-100 ring-1 ring-gray-400 shadow-sm dark:ring-0
disabled:ring-gray-400 disabled:dark:ring-neutral-500"
type="button"
Expand All @@ -18,7 +18,7 @@ exports[`Button.Danger renders without errors 1`] = `
<button
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-error hover:brightness-150 bg-[color:var(--danger-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-error hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--danger-button-color)] text-white"
type="button"
/>
</DocumentFragment>
Expand Down Expand Up @@ -55,7 +55,7 @@ exports[`Button.Info renders without errors 1`] = `
<button
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-info hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-info hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
type="button"
/>
</DocumentFragment>
Expand Down Expand Up @@ -87,7 +87,7 @@ exports[`Button.Secondary renders without errors 1`] = `
<button
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
dark:text-gray-100"
type="button"
/>
Expand All @@ -99,7 +99,7 @@ exports[`Button.Small custom variant 1`] = `
<button
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 a dialog-icon-info hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 a dialog-icon-info hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
type="button"
/>
</DocumentFragment>
Expand All @@ -110,7 +110,7 @@ exports[`Button.Small default variant 1`] = `
<button
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 button hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 button hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
dark:text-gray-100 ring-1 ring-gray-400 shadow-sm dark:ring-0
disabled:ring-gray-400 disabled:dark:ring-neutral-500"
type="button"
Expand All @@ -123,7 +123,7 @@ exports[`Button.Success renders without errors 1`] = `
<button
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-150 bg-[color:var(--success-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--success-button-color)] text-white"
type="button"
/>
</DocumentFragment>
Expand All @@ -134,7 +134,7 @@ exports[`Button.Warning renders without errors 1`] = `
<button
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-warning hover:brightness-150 bg-[color:var(--warning-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-warning hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--warning-button-color)] text-white"
type="button"
/>
</DocumentFragment>
Expand All @@ -145,7 +145,7 @@ exports[`DialogButton closes the dialog 1`] = `
<button
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
dark:text-gray-100"
type="button"
>
Expand Down
16 changes: 8 additions & 8 deletions specifyweb/frontend/js_src/lib/components/Atoms/__tests__/__snapshots__/Link.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`Link.Blue renders without errors 1`] = `
<a
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-info hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-info hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
href="#"
>
Link
Expand All @@ -18,7 +18,7 @@ exports[`Link.BorderedGray renders without errors 1`] = `
<a
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
dark:text-gray-100 ring-1 ring-gray-400 shadow-sm dark:ring-0
disabled:ring-gray-400 disabled:dark:ring-neutral-500"
href="#"
Expand Down Expand Up @@ -58,7 +58,7 @@ exports[`Link.Gray renders without errors 1`] = `
<a
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
dark:text-gray-100"
href="#"
>
Expand All @@ -72,7 +72,7 @@ exports[`Link.Green renders without errors 1`] = `
<a
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-150 bg-[color:var(--success-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--success-button-color)] text-white"
href="#"
>
Link
Expand Down Expand Up @@ -146,7 +146,7 @@ exports[`Link.Orange renders without errors 1`] = `
<a
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-warning hover:brightness-150 bg-[color:var(--warning-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-warning hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--warning-button-color)] text-white"
href="#"
>
Link
Expand All @@ -159,7 +159,7 @@ exports[`Link.Red renders without errors 1`] = `
<a
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-error hover:brightness-150 bg-[color:var(--danger-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-error hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--danger-button-color)] text-white"
href="#"
>
Link
Expand All @@ -172,7 +172,7 @@ exports[`Link.Small custom variant 1`] = `
<a
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 a dialog-icon-info hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 a dialog-icon-info hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
href="#"
/>
</DocumentFragment>
Expand All @@ -183,7 +183,7 @@ exports[`Link.Small default variant 1`] = `
<a
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 button hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 button hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
dark:text-gray-100 ring-1 ring-gray-400 shadow-sm dark:ring-0
disabled:ring-gray-400 disabled:dark:ring-neutral-500"
href="#"
Expand Down
12 changes: 6 additions & 6 deletions specifyweb/frontend/js_src/lib/components/Atoms/__tests__/__snapshots__/Submit.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports[`Submit.Blue renders without errors 1`] = `
<input
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-info hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-info hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--info-button-color)] text-white"
type="submit"
value="Submit"
/>
Expand All @@ -30,7 +30,7 @@ exports[`Submit.Gray renders without errors 1`] = `
<input
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
inline-flex items-center capitalize justify-center shadow-sm button hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
dark:text-gray-100"
type="submit"
value="Submit"
Expand All @@ -43,7 +43,7 @@ exports[`Submit.Green renders without errors 1`] = `
<input
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-150 bg-[color:var(--success-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--success-button-color)] text-white"
type="submit"
value="Submit"
/>
Expand All @@ -55,7 +55,7 @@ exports[`Submit.Orange renders without errors 1`] = `
<input
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-warning hover:brightness-150 bg-[color:var(--warning-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-warning hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--warning-button-color)] text-white"
type="submit"
value="Submit"
/>
Expand All @@ -67,7 +67,7 @@ exports[`Submit.Red renders without errors 1`] = `
<input
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-error hover:brightness-150 bg-[color:var(--danger-button-color)] text-white"
inline-flex items-center capitalize justify-center shadow-sm dialog-icon-error hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--danger-button-color)] text-white"
type="submit"
value="Submit"
/>
Expand All @@ -79,7 +79,7 @@ exports[`Submit.Small renders without errors 1`] = `
<input
class="button rounded cursor-pointer active:brightness-80 px-4 py-2
disabled:bg-gray-200 disabled:text-gray-500 dark:disabled:!bg-neutral-700 gap-2
inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 button hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
inline-flex items-center capitalize justify-center shadow-sm !py-1 !px-2 button hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
dark:text-gray-100 ring-1 ring-gray-400 shadow-sm dark:ring-0
disabled:ring-gray-400 disabled:dark:ring-neutral-500"
type="submit"
Expand Down
14 changes: 7 additions & 7 deletions specifyweb/frontend/js_src/lib/components/Atoms/className.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ export const dialogIconTriggers = {
};

const buttonClassName = 'button';
const secondaryButton = `${buttonClassName} hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
const secondaryButton = `${buttonClassName} hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-button-color)] text-gray-800 shadow-sm
dark:text-gray-100`;
const secondaryLightButton = `${buttonClassName} hover:brightness-150 bg-[color:var(--secondary-light-button-color)] text-gray-800 shadow-sm
const secondaryLightButton = `${buttonClassName} hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--secondary-light-button-color)] text-gray-800 shadow-sm
dark:text-gray-100`;
const containerBaseUnstyled = `flex flex-col gap-4 overflow-scroll
overflow-x-auto [overflow-y:overlay] [scrollbar-gutter:stable]`;
Expand Down Expand Up @@ -63,11 +63,11 @@ export const className = {
smallButton: `${niceButton} !py-1 !px-2`,
borderedGrayButton,
defaultSmallButtonVariant: `${borderedGrayButton}`,
dangerButton: `${dialogIconTriggers.error} hover:brightness-150 bg-[color:var(--danger-button-color)] text-white`,
infoButton: `${dialogIconTriggers.info} hover:brightness-150 bg-[color:var(--info-button-color)] text-white`,
warningButton: `${dialogIconTriggers.warning} hover:brightness-150 bg-[color:var(--warning-button-color)] text-white`,
successButton: `${dialogIconTriggers.success} hover:brightness-150 bg-[color:var(--success-button-color)] text-white`,
saveButton: `hover:brightness-150 text-white bg-[color:var(--save-button-color)]`,
dangerButton: `${dialogIconTriggers.error} hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--danger-button-color)] text-white`,
infoButton: `${dialogIconTriggers.info} hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--info-button-color)] text-white`,
warningButton: `${dialogIconTriggers.warning} hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--warning-button-color)] text-white`,
successButton: `${dialogIconTriggers.success} hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--success-button-color)] text-white`,
saveButton: `hover:brightness-90 dark:hover:brightness-150 text-white bg-[color:var(--save-button-color)]`,
fancyButton: `bg-gray-300 hover:bg-brand-200 dark:bg-neutral-600
hover:dark:bg-brand:400 text-gray-800 dark:text-white text-center`,
containerFull,
Expand Down