Make run command

src/WinXP/Windows/index.js

@@ -142,9 +142,9 @@ const StyledWindow = styled(Window)`
   border-top-right-radius: 8px;
   .header__bg {
     background: ${({ isFocus }) =>
-      isFocus
-        ? 'linear-gradient(to bottom,#0058ee 0%,#3593ff 4%,#288eff 6%,#127dff 8%,#036ffc 10%,#0262ee 14%,#0057e5 20%,#0054e3 24%,#0055eb 56%,#005bf5 66%,#026afe 76%,#0062ef 86%,#0052d6 92%,#0040ab 94%,#003092 100%)'
-        : 'linear-gradient(to bottom, #7697e7 0%,#7e9ee3 3%,#94afe8 6%,#97b4e9 8%,#82a5e4 14%,#7c9fe2 17%,#7996de 25%,#7b99e1 56%,#82a9e9 81%,#80a5e7 89%,#7b96e1 94%,#7a93df 97%,#abbae3 100%)'};
+    isFocus
+      ? 'linear-gradient(to bottom,#0058ee 0%,#3593ff 4%,#288eff 6%,#127dff 8%,#036ffc 10%,#0262ee 14%,#0057e5 20%,#0054e3 24%,#0055eb 56%,#005bf5 66%,#026afe 76%,#0062ef 86%,#0052d6 92%,#0040ab 94%,#003092 100%)'
+      : 'linear-gradient(to bottom, #7697e7 0%,#7e9ee3 3%,#94afe8 6%,#97b4e9 8%,#82a5e4 14%,#7c9fe2 17%,#7996de 25%,#7b99e1 56%,#82a9e9 81%,#80a5e7 89%,#7b96e1 94%,#7a93df 97%,#abbae3 100%)'};
     position: absolute;
     left: 0;
     top: 0;

src/WinXP/apps/RunBox/index.js

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import dropDown from 'src/assets/windowsIcons/dropdown.png';
+import run from 'src/assets/windowsIcons/743(32x32).png';
+//import question from 'src/assets/windowsIcons/747(16x16).png'
+
+
+export default function RunBox() {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleChange = (e) => {
+
+    setInputValue(e.currentTarget.value)
+    console.log(inputValue)
+
+  }
+
+
+  return (
+    <Div>
+      <div className="run__box"><div><img src={run} alt="error" className="run__img" /></div>
+        <div className="run__text">Type the name of program,folder, document, or Internet resources, and windows will open it for you.</div>
+      </div>
+      <div className="run__input">
+        <span>Open:</span>
+        <div><input type="text" className="input__box" value={inputValue} onChange={handleChange} /></div>
+        <div className="run__imag"><img src={dropDown} alt="error" className="run__img" height="23px" /></div>
+      </div>
+      <div className="run__buttonbox">
+        <button className="run__button" >Ok</button>
+        <button className="run__button">Cancel</button>
+        <button className="run__button">Browse</button>
+
+      </div>
+
+
+    </Div >
+  );
+}
+
+const Div = styled.div`
+      height: 100%;
+      background: linear-gradient(to right, #edede5 0%, #ede8cd 100%);
+      display:flex;
+      flex-direction:column;
+      color:#5f5757;
+
+
+      .run__text{
+        width:310px;
+        margin-left:5px;
+        margin-top:2px;
+        letter-spacing:.50px;
+        font-size: 11px;
+        font-weight:500;
+
+        letter-spacing:1px;
+      }
+      .run__box{
+        display: flex;
+        flex-direction:row; 
+        margin:5px;
+      }
+
+      .run__input{
+        top:100px;
+        display: flex;
+        margin-left: 7px;
+        flex-direction:row; 
+
+      }
+      .input__box{
+        margin-left: 5px;
+        width:280px;
+        padding: 3px;
+      }
+      input{
+        -webkit-user-select: text;
+        outline:0;
+      }
+      .run__buttonbox{
+        margin-left: 110px;
+        margin-top: 20px;
+        display: flex;
+        flex-direction:row; 
+      }
+
+      .run__button{
+        width: 75px;
+        background-color: white; 
+        border: 1px solid #5f5757;
+        border-radius: 6px; 
+        margin:2px;
+        padding:4px;
+      }
+
+
+
+    `;

src/WinXP/apps/index.js

@@ -3,6 +3,7 @@ import Minesweeper from './Minesweeper';
 import ErrorBox from './ErrorBox';
 import MyComputer from './MyComputer';
 import Notepad from './Notepad';
+import RunBox from './RunBox'
 import Winamp from './Winamp';
 import Paint from './Paint';
 import iePaper from 'src/assets/windowsIcons/ie-paper.png';
@@ -13,6 +14,9 @@ import computer from 'src/assets/windowsIcons/676(16x16).png';
 import computerLarge from 'src/assets/windowsIcons/676(32x32).png';
 import notepad from 'src/assets/windowsIcons/327(16x16).png';
 import notepadLarge from 'src/assets/windowsIcons/327(32x32).png';
+import run from 'src/assets/windowsIcons/743(32x32).png';
+
+
 import winamp from 'src/assets/windowsIcons/winamp.png';
 import paintLarge from 'src/assets/windowsIcons/680(32x32).png';
 import paint from 'src/assets/windowsIcons/680(16x16).png';
@@ -292,6 +296,26 @@ export const appSettings = {
     maximized: window.innerWidth < 800,
     multiInstance: true,
   },
+  RunBox: {
+    header: {
+      icon: run,
+      title: 'Run',
+      buttons: ['close'],
+      noFooterWindow: true,
+    },
+    component: RunBox,
+    defaultSize: {
+      width: 380,
+      height: 160,
+    },
+    defaultOffset: {
+      x: window.innerWidth / 2 - 400,
+      y: window.innerHeight / 2 + 100,
+    },
+    resizable: false,
+    minimized: false,
+    maximized: false,
+  }
 };
 
-export { InternetExplorer, Minesweeper, ErrorBox, MyComputer, Notepad, Winamp };
+export { InternetExplorer, Minesweeper, ErrorBox, MyComputer, Notepad, Winamp, RunBox };

src/WinXP/index.js

@@ -252,6 +252,8 @@ function WinXP() {
       dispatch({ type: ADD_APP, payload: appSettings['My Computer'] });
     else if (o === 'Notepad')
       dispatch({ type: ADD_APP, payload: appSettings.Notepad });
+    else if (o === 'Run...')
+      dispatch({ type: ADD_APP, payload: appSettings.RunBox });
     else if (o === 'Winamp')
       dispatch({ type: ADD_APP, payload: appSettings.Winamp });
     else if (o === 'Paint')