update positioning

ideal-lab5 · Jan 20, 2024 · 559ac6d · 559ac6d
1 parent 78b3439
commit 559ac6d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 26 deletions.
diff --git a/src/components/Desktop.js b/src/components/Desktop.js
@@ -5,14 +5,15 @@ import Notepad from './Notepad';
 import '../App.css';
 import { EventEmitter } from './EventEmitter';
 import { Modal } from '@react95/core';
-import { Explorer100, FlyingThroughSpace100, FolderExe2, FolderFile, Mail3, Network2, QuestionBubble, Time, Timedate200, Url105 } from '@react95/icons';
+import { Explorer100, FlyingThroughSpace100, FolderExe2, FolderFile, InfoBubble, Mail3, Network2, QuestionBubble, Time, Timedate200, Url105 } from '@react95/icons';
 import DesktopIcon from './DesktopIcon';
 
 function WebsiteDesktop(props) {
 
     const isMobile = window.innerWidth < 850;
     const [openEditors, setOpenEditors] = useState([]);
 
+    const [closeInfo, setCloseInfo] = useState(true);
 
     const editors = [
         { id: 'about', name: 'About', ico: <QuestionBubble />},
@@ -33,14 +34,15 @@ function WebsiteDesktop(props) {
                 openNotepad(editor)
             });
         });
+        // eslint-disable-next-line
     }, []);
 
     const getNextX = (n) => {
-        return `${15 + 5 * n}%`
+        return `${35 + 5 * n}%`
     }
 
     const getNextY = (n) => {
-        return `${20 + 5 * n}%`
+        return `${15 + 5 * n}%`
     }
 
     const closeNotepad = (id) => {
@@ -79,6 +81,21 @@ function WebsiteDesktop(props) {
                 </div>
             </div>
         </Modal>
+        { closeInfo && (
+            <Modal
+                icon={<InfoBubble />}
+                title={`info`}
+                closeModal={() => setCloseInfo(false)}
+                style={{
+                    left: isMobile ? '50%' : '10%',
+                    top: isMobile ? '30%' : '25%',
+                    width: isMobile ? '90%' : 450,
+                }}>
+                <div className='centered'>
+                <span>This website is best viewed on a laptop or PC.</span>
+                </div>
+            </Modal>
+        )}
         {openEditors.map((editor, idx) => (
             <Notepad
                 key={editor.id}

diff --git a/src/components/Notepad.js b/src/components/Notepad.js
@@ -1,26 +1,29 @@
-import React from 'react'
-import { Modal } from '@react95/core'
+import React from 'react';
+import { Modal } from '@react95/core';
 import ContentFactory from './NotepadContent/ContentFactory';
 
-function Notepad({ ico, closeNotepad, selectedItem, isMobile, left, top }) {
-    return (
-        <Modal
-            icon={ ico }
-            title={`${selectedItem.name}`}
-            closeModal={closeNotepad}
-            buttons={[{ value: "Close", onClick: closeNotepad }]}
-            style={{
-                left: isMobile ? '5%' : left,
-                top: isMobile ? '3%' : top,
-                width: isMobile ? '90%' : 450,
-            }}
-            menu={[
-                { name: 'File', list: [] },
-                { name: 'Edit', list: [] }
-            ]}>
-            <ContentFactory id={selectedItem.id} isMobile={isMobile} />
-        </Modal >
-    )
+function Notepad({ ico, closeNotepad, selectedItem, isMobile, left, top, focused }) {
+  return (
+    <Modal
+      icon={ico}
+      title={`${selectedItem.name}`}
+      closeModal={closeNotepad}
+      buttons={[{ value: "Close", onClick: closeNotepad }]}
+      style={{
+        left: isMobile ? '5%' : left,
+        top: isMobile ? '3%' : top,
+        width: isMobile ? '90%' : 450,
+        // Add focus styles based on the 'focused' prop
+        border: focused ? '2px solid #008080' : 'none', // Change the color and style as needed
+      }}
+      menu={[
+        { name: 'File', list: [] },
+        { name: 'Edit', list: [] }
+      ]}
+    >
+      <ContentFactory id={selectedItem.id} isMobile={isMobile} />
+    </Modal>
+  );
 }
 
-export default Notepad
+export default Notepad;
diff --git a/src/components/Taskbar.js b/src/components/Taskbar.js
@@ -19,7 +19,7 @@ export default function WebsiteTaskbar(props) {
     return (
         <TaskBar list={<List>
             <List.Item icon={<FolderExe/>}>
-              <span>Programs</span>
+              <span onClick={() => handleClick('programs')}>Programs</span>
               <List>
                 <List.Item icon={<Network3 />} onClick={() => handleClick('etf')}>
                   <span>ETF Network</span>