Skip to content

Commit 2df87de

Browse files
BoostedMooseBoostedMoose
committed
Modal styling
1 parent 1521a45 commit 2df87de

File tree

5 files changed

+84
-56
lines changed

5 files changed

+84
-56
lines changed

‎frontend/public/assets/svg/buttons/settings.svg

+4-7
Loading

‎frontend/src/app/Splash.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Container = styled.div.withConfig({
1919
shouldForwardProp: (prop) => !['fadeOutAnimation', 'fadeDuration'].includes(prop)
2020
})`
2121
position: absolute;
22-
z-index: 4;
22+
z-index: 5;
2323
top: 0;
2424
left: 0;
2525

‎frontend/src/app/components/Modal.tsx

+72-39
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,94 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import ReactDOM from 'react-dom';
3-
import styled, { useTheme } from 'styled-components';
3+
import styled from 'styled-components';
44
import { Typography } from '../../theme/styles/Typography';
55
import { Button } from '../../theme/styles/Inputs';
66

7+
const Overlay = styled.div`
8+
position: fixed;
9+
top: 0;
10+
left: 0;
11+
width: 100%;
12+
height: 100%;
13+
background-color: rgba(0, 0, 0, 0.5);
14+
backdrop-filter: blur(10px);
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
z-index: 4;
719
8-
20+
opacity: ${({ $visible }) => ($visible ? 1 : 0)};
21+
transition: opacity 0.3s ease-in-out;
22+
`;
923

1024
const Content = styled.div`
11-
position: fixed;
12-
top: 0;
13-
left: 0;
14-
width: 100%;
15-
height: 100%;
16-
background-color: rgba(0, 0, 0, 0.75);
17-
display: flex;
18-
flex-direction: column;
19-
justify-content: center;
20-
align-items: center;
21-
z-index: 1000;
22-
textSize: 3rem;
23-
color:'#DBDBDB';
24-
gap: 10px;
25-
`
25+
background: #151515;
26+
padding: 20px;
27+
border-radius: 10px;
28+
text-align: center;
29+
color: none;
30+
white-space: pre-line;
31+
32+
min-width: 300px;
33+
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
justify-content: center;
38+
39+
opacity: ${({ $visible }) => ($visible ? 1 : 0)};
40+
transform: ${({ $visible }) => ($visible ? 'scale(1)' : 'scale(0.9)')};
41+
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
42+
`;
2643

2744
const Exit = styled.button`
2845
position: absolute;
29-
top: 50px;
30-
right: 30px;
46+
top: -30px;
47+
right: -30px;
3148
border: none;
32-
background: none;
33-
font-size: 25px;
49+
border-radius: 25px;
50+
width: 25px;
51+
height: 25px;
52+
background: #151515;
53+
font-size: 10px;
54+
font-weight: bold;
3455
cursor: pointer;
3556
color: #DBDBDB;
36-
`
57+
`;
3758

3859
const Modal = ({ isOpen, onClose, title, body, button, action }) => {
39-
const Body1 = Typography.Body1
40-
const Title = Typography.Title
60+
const Body1 = Typography.Body1;
61+
const Display2 = Typography.Display2;
62+
const [visible, setVisible] = useState(false);
63+
const [shouldRender, setShouldRender] = useState(isOpen);
4164

42-
if (!isOpen) return null; // Don't render the modal if it's not open
65+
useEffect(() => {
66+
if (isOpen) {
67+
setShouldRender(true);
68+
setTimeout(() => setVisible(true), 10); // Ensure transition triggers
69+
} else {
70+
setVisible(false);
71+
setTimeout(() => setShouldRender(false), 300); // Delay unmounting until fade-out finishes
72+
}
73+
}, [isOpen]);
74+
75+
if (!shouldRender) return null; // Prevent render when modal is fully closed
4376

4477
return ReactDOM.createPortal(
45-
<Content>
46-
<Title> {title} </Title>
47-
<Body1>{body} </Body1>
48-
{action ?
49-
<Button style={{width: '300px', background: '#151515'}} onClick={action}>
50-
{button}
51-
</Button> : <></>}
52-
<Exit onClick={onClose}>
53-
X
54-
</Exit>
55-
</Content>,
56-
document.getElementById('root') // The modal renders in this DOM element
78+
<Overlay $visible={visible}>
79+
<Content $visible={visible}>
80+
<Display2>{title}</Display2>
81+
<Body1>{body}</Body1>
82+
{action ? (
83+
<Button style={{ width: '300px', background: '#101010' }} onClick={action}>
84+
{button}
85+
</Button>
86+
) : null}
87+
<Exit onClick={onClose}>X</Exit>
88+
</Content>
89+
</Overlay>,
90+
document.getElementById('root')
5791
);
5892
};
5993

60-
6194
export default Modal;

‎frontend/src/app/pages/settings/Settings.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ const Settings = () => {
202202
function systemTask(request) {
203203

204204
if (['quit', 'reboot', 'restart'].includes(request)) {
205-
openModal("Exiting...", "", null, null)
205+
openModal("Exiting...", "Please wait while the app is closing.", null, null)
206206
setTimeout(() => {
207207
console.log('exiting')
208208
sysChannel.emit("systemTask", request);
@@ -234,9 +234,9 @@ const Settings = () => {
234234

235235

236236
if (latestVersion === app.system.version)
237-
openModal("No Updates available.", "", null, null)
237+
openModal("No Updates available.", "Check back again later :)", null, null)
238238
else {
239-
openModal( "New update available!", `Current: ${app.system.version} | Latest: ${latestVersion}`, "UPDATE NOW", () => systemTask('update'))
239+
openModal( "New update available!", `Current: ${app.system.version} \n\n Latest: ${latestVersion}`, "UPDATE NOW", () => systemTask('update'))
240240
}
241241
} catch (error) {
242242
openModal("Error checking for updates:", error, null, null)
@@ -347,7 +347,7 @@ const Settings = () => {
347347

348348
const handleBinding = (key, setting) => {
349349
//console.log(key, setting)
350-
openModal("Press a Key or ESC.", "", null, null)
350+
openModal(`${app.settings[key][setting].label}`, "Press a key to assign or ESC to abort.", null, null)
351351

352352
// Define the key press handler
353353
const handleKeyPress = (event) => {

‎frontend/src/cardata/Cardata.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,7 @@ function Cardata() {
6666
useEffect(() => {
6767
const startShutdownTimer = () => {
6868
shutdownTimer.current = setTimeout(() => {
69-
70-
sysChannel.emit("systemTask", "shutdown");
71-
// Add logic to actually shut down the system if needed
69+
//sysChannel.emit("systemTask", "shutdown");
7270
}, 10000);
7371
};
7472

@@ -80,7 +78,7 @@ function Cardata() {
8078
state.system.modal.visible = true;
8179
state.system.modal.title = "Ignition Off.";
8280
state.system.modal.body =
83-
"System will shut down in 10 seconds to prevent battery drain. Click to dismiss for 5 minutes.";
81+
"System will shut down in 10 seconds to prevent battery drain. \n Click to dismiss for 5 minutes.";
8482
state.system.modal.button = "DISMISS";
8583
state.system.modal.action = () => {
8684
if (shutdownTimer.current) clearTimeout(shutdownTimer.current); // Cancel shutdown timer
@@ -91,7 +89,7 @@ function Cardata() {
9189
state.system.modal.visible = true;
9290
});
9391
startShutdownTimer(); // Restart 10-second timer when modal appears again
94-
}, 5000); // 5 minutes
92+
}, 5 * 60 * 1000); // 5 minutes
9593

9694
// Hide modal after clicking dismiss
9795
app.update((state) => {

0 commit comments

Comments
 (0)