diff --git a/src/components/dialogs/ConflictDialog.tsx b/src/components/dialogs/ConflictDialog.tsx new file mode 100644 index 0000000..20e9d1b --- /dev/null +++ b/src/components/dialogs/ConflictDialog.tsx @@ -0,0 +1,77 @@ +import React from 'react' +import { + Dialog, + DialogHeader, + DialogBody, + DialogFooter, + DialogActions, +} from '@/components/dialogs' +import { Button } from '@/components/buttons' +import { Icon, warning } from '@/components/icons' + +export interface ConflictDialogProps { + visible: boolean + gameTitle: string + conflictType: 'cream-to-proton' | 'smoke-to-native' + onConfirm: () => void +} + +/** + * Conflict Dialog component + * Shows when incompatible unlocker files are detected after platform switch + */ +const ConflictDialog: React.FC = ({ + visible, + gameTitle, + conflictType, + onConfirm, +}) => { + const getConflictMessage = () => { + if (conflictType === 'cream-to-proton') { + return { + title: 'CreamLinux unlocker detected, but game is set to Proton', + bodyPrefix: 'It looks like you previously installed CreamLinux while ', + bodySuffix: ' was running natively. Steam is now configured to run it with Proton, so CreamLinux files will be removed automatically.', + } + } else { + return { + title: 'SmokeAPI unlocker detected, but game is set to Native', + bodyPrefix: 'It looks like you previously installed SmokeAPI while ', + bodySuffix: ' was running with Proton. Steam is now configured to run it natively, so SmokeAPI files will be removed automatically.', + } + } + } + + const message = getConflictMessage() + + return ( + + +
+ +

{message.title}

+
+
+ + +
+

+ {message.bodyPrefix} + {gameTitle} + {message.bodySuffix} +

+
+
+ + + + + + +
+ ) +} + +export default ConflictDialog \ No newline at end of file diff --git a/src/components/dialogs/ReminderDialog.tsx b/src/components/dialogs/ReminderDialog.tsx new file mode 100644 index 0000000..728dc79 --- /dev/null +++ b/src/components/dialogs/ReminderDialog.tsx @@ -0,0 +1,56 @@ +import React from 'react' +import { + Dialog, + DialogHeader, + DialogBody, + DialogFooter, + DialogActions, +} from '@/components/dialogs' +import { Button } from '@/components/buttons' +import { Icon, info } from '@/components/icons' + +export interface ReminderDialogProps { + visible: boolean + onClose: () => void +} + +/** + * Reminder Dialog component + * Reminds users to remove Steam launch options after removing CreamLinux + */ +const ReminderDialog: React.FC = ({ visible, onClose }) => { + return ( + + +
+ +

Reminder

+
+
+ + +
+

+ If you added a Steam launch option for CreamLinux, remember to remove it in Steam: +

+
    +
  1. Right-click the game in Steam
  2. +
  3. Select "Properties"
  4. +
  5. Go to "Launch Options"
  6. +
  7. Remove the CreamLinux command
  8. +
+
+
+ + + + + + +
+ ) +} + +export default ReminderDialog \ No newline at end of file diff --git a/src/styles/components/dialogs/_conflict_dialog.scss b/src/styles/components/dialogs/_conflict_dialog.scss new file mode 100644 index 0000000..f4be843 --- /dev/null +++ b/src/styles/components/dialogs/_conflict_dialog.scss @@ -0,0 +1,88 @@ +@use '../../themes/index' as *; +@use '../../abstracts/index' as *; + +/* + Conflict Dialog Styles + Used for platform conflict detection dialogs +*/ + +.conflict-dialog-header { + display: flex; + align-items: center; + gap: 0.75rem; + + h3 { + margin: 0; + flex: 1; + font-size: 1.1rem; + color: var(--text-primary); + } + + svg { + color: var(--warning); + flex-shrink: 0; + } +} + +.conflict-dialog-body { + p { + margin-bottom: 1rem; + color: var(--text-secondary); + line-height: 1.5; + + &:last-of-type { + margin-bottom: 0; + } + + strong { + color: var(--text-primary); + font-weight: var(--bold); + } + } +} + +/* + Reminder Dialog Styles + Used for Steam launch option reminders +*/ + +.reminder-dialog-header { + display: flex; + align-items: center; + gap: 0.75rem; + + h3 { + margin: 0; + flex: 1; + font-size: 1.1rem; + color: var(--text-primary); + } + + svg { + color: var(--info); + flex-shrink: 0; + } +} + +.reminder-dialog-body { + p { + margin-bottom: 1rem; + color: var(--text-secondary); + line-height: 1.5; + } + + .reminder-steps { + margin: 1rem 0 0 1.5rem; + padding: 0; + color: var(--text-secondary); + line-height: 1.6; + + li { + margin-bottom: 0.5rem; + + &:last-child { + margin-bottom: 0; + } + } + } +} diff --git a/src/styles/components/dialogs/_index.scss b/src/styles/components/dialogs/_index.scss index d0b8be2..b318bec 100644 --- a/src/styles/components/dialogs/_index.scss +++ b/src/styles/components/dialogs/_index.scss @@ -3,3 +3,4 @@ @forward './progress_dialog'; @forward './settings_dialog'; @forward './smokeapi_settings_dialog'; +@forward './conflict_dialog';