Mirrors/responsively-app
2
0
Fork 0
mirror of https://github.com/responsively-org/responsively-app synced 2024-11-10 06:44:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #973 from responsively-org/release-notes-dislog-design

Browse source 
ui: Tweaked the color/design for the release notes dialog
This commit is contained in:
Manoj Vivek 2023-06-16 13:03:57 +05:30 committed by GitHub
commit 7587e30204
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
desktop-app/src/renderer/components/Button/index.tsx
View file

@ -6,6 +6,8 @@ interface CustomProps {
className?: string;
isActive?: boolean;
isLoading?: boolean;
isPrimary?: boolean;
isTextButton?: boolean;
disableHoverEffects?: boolean;
isActionButton?: boolean;
subtle?: boolean;
@ -15,6 +17,8 @@ const Button = ({
className = '',
isActive = false,
isLoading = false,
isPrimary = false,
isTextButton = false,
isActionButton = false,
subtle = false,
disableHoverEffects = false,
@ -38,10 +42,15 @@ const Button = ({
prevLoadingState.current = isLoading;
}, [isLoading]);
const hoverBg = subtle ? 'hover:bg-slate-200' : 'hover:bg-slate-400';
const hoverBgDark = subtle
? 'dark:hover:bg-slate-700'
: 'dark:hover:bg-slate-600';
let hoverBg = 'hover:bg-slate-400';
let hoverBgDark = 'dark:hover:bg-slate-600';
if (subtle) {
hoverBg = 'hover:bg-slate-200';
hoverBgDark = 'dark:hover:bg-slate-700';
} else if (isPrimary) {
hoverBg = 'hover:bg-slate-800';
hoverBgDark = 'dark:hover:bg-slate-100';
}
return (
<button
@ -51,11 +60,13 @@ const Button = ({
disableHoverEffects === false ? `${hoverBg} ${hoverBgDark}` : ''
} focus:outline-none`,
{
'bg-slate-400/60': isActive,
'dark:bg-slate-600/60': isActive,
'bg-slate-400/60': isActive && !isPrimary,
'dark:bg-slate-600/60': isActive && !isPrimary,
'bg-slate-600 text-white': isPrimary,
'dark:bg-slate-300 dark:text-gray-900': isPrimary,
'bg-slate-200': isActionButton,
'dark:bg-slate-700': isActionButton,
'px-2': isActionButton,
'px-2': isActionButton || isTextButton,
}
)}
type="button"

12
desktop-app/src/renderer/components/ReleaseNotes/index.tsx
View file

@ -101,7 +101,7 @@ const ReleaseNotes = () => {
</ReactMarkdown>
</div>
<div className="mt-10 flex justify-between gap-12">
<div className="flex">
<div className="flex gap-1">
<Button
onClick={() => {
window.electron.ipcRenderer.sendMessage(
@ -112,13 +112,13 @@ const ReleaseNotes = () => {
);
closeAndMarkAsRead();
}}
isActionButton
isActive
tabIndex={0}
isActionButton
isTextButton
>
Release Notes
</Button>
<Button onClick={closeAndMarkAsRead} isActionButton>
<Button onClick={closeAndMarkAsRead} isActionButton isTextButton>
Close
</Button>
</div>
@ -132,8 +132,8 @@ const ReleaseNotes = () => {
}
);
}}
isActionButton
isActive
isPrimary
isTextButton
>
Support Responsively App
</Button>