(v0.3.1-beta) Dialogue/Alert!

Made a windows like dialogue/alert box for showing the hints and all. Its not completed but i think ill add a way to open and close it in the next commit

Author: rupnil-codes

README.md

@@ -80,6 +80,7 @@ Your PC has been compromised by a group called the "HackClub". Can you regain co
 - [ ] Lock some apps (Hacked yk)
 - [ ] Stress test the terminal.
 - [ ] Add games like MC(https://classic.minecraft.net/) and sm others.
+- [ ] the grid snapping is offset from the place where icons snap when u release (Snxhit_)
 
 
 Playtesters & Contributors: Flux3tor, Snxhit_, Matthias, Nx75, Keyboard1000n17, abtheinnovator, redac1ed, TruthEntity

src/components/ProgressPanel.jsx

@@ -1,6 +1,6 @@
 import "../styles/components/ProgressPanel.css";
 
-import {Info} from "lucide-react";
+import {Info, Spotlight} from "lucide-react";
 import {useElapsedTime} from "./DateTime.jsx";
 
 export function ProgressPanel({
@@ -12,6 +12,21 @@ export function ProgressPanel({
 
     return (
         <>
+            <div className={"alert-hint-viewport"}>
+                <div className={"alert-hint-header"}>
+                    <div className={"header"}>
+                        <Spotlight />
+                        <p className={"header-text"}>HINT</p>
+                    </div>
+                    <div className={"body"}>
+                        <p className={"body-text"}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <aliqua className=""></aliqua></p>
+                    </div>
+                </div>
+                <div className={"alert-hint-footer"}>
+                    <div className={"button cancel"}>Cancel</div>
+                    <div className={"button confirm"}>Confirm</div>
+                </div>
+            </div>
             <div
                 className={`progress-button ${ isOpenProgressPanel ? "progress-button-active" : "" }`}
                 onClick={() => setIsOpenProgressPanel(!isOpenProgressPanel)}

src/styles/apps/terminal.css

@@ -1,6 +1,4 @@
 
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
-
 .terminal-app {
     cursor: text;
 

src/styles/components/ProgressPanel.css

@@ -1,4 +1,79 @@
 
+.alert-hint-viewport {
+    z-index: calc(var(--z-taskbar) + 10);
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    background-color: #77777777;
+}
+
+.alert-hint-header {
+    display: flex;
+    flex-direction: column;
+    /*align-items: center;*/
+
+    background-color: var(--secondary);
+
+    min-height: 7rem;
+    width: 18rem;
+
+    border-radius: 0.5rem 0.5rem 0 0;
+    padding: 1.25rem 2.25rem;
+
+    gap: 0.5rem;
+}
+.alert-hint-header .header{
+    display: flex;
+    flex-direction: row;
+    gap: 0.25rem;
+}
+.alert-hint-header .header-text {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.alert-hint-footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+
+    gap: 0.75rem;
+
+    padding-right: 1rem;
+
+    background-color: var(--primary-foreground);
+
+    height: 4rem;
+    width: 21.5rem;
+
+    border-radius: 0 0 0.5rem 0.5rem;
+}
+.alert-hint-footer .button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    cursor: pointer;
+    user-select: none;
+    padding: 6px 11px;
+    border-radius: 0.3rem;
+}
+.alert-hint-footer .button.cancel {
+    background-color: var(--border);
+}
+.alert-hint-footer .button.confirm {
+    background-color: #60cdff;
+    color: black;
+}
+
 .progress-button {
     z-index: 2;
 

src/styles/index.css

@@ -1,3 +1,6 @@
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
+
 body {
     /*font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;*/
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;