ReallyGood · Almoglem · Apr 11, 2022 · Apr 11, 2022 · Apr 13, 2022 · Apr 13, 2022
diff --git a/src/WinXP/Windows/index.js b/src/WinXP/Windows/index.js
@@ -66,6 +66,8 @@ const Window = memo(function({
   }
   const dragRef = useRef(null);
   const ref = useRef(null);
+  const innerWindowRef = useRef(null);
+
   const { width: windowWidth, height: windowHeight } = useWindowSize();
   const { offset, size } = useElementResize(ref, {
     dragRef,
@@ -92,6 +94,7 @@ const Window = memo(function({
     x = offset.x;
     y = offset.y;
   }
+
   return (
     <div
       className={className}
@@ -125,7 +128,7 @@ const Window = memo(function({
           isFocus={isFocus}
         />
       </header>
-      <div className="app__content">
+      <div className="app__content" ref={innerWindowRef}>
         {component({
           onClose: _onMouseUpClose,
           onMinimize: _onMouseUpMinimize,

diff --git a/src/WinXP/apps/InternetExplorer/index.js b/src/WinXP/apps/InternetExplorer/index.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { WindowDropDowns, Google } from 'components';
+
 import dropDownData from './dropDownData';
 import ie from 'assets/windowsIcons/ie-paper.png';
 import printer from 'assets/windowsIcons/17(32x32).png';
@@ -27,6 +28,7 @@ function InternetExplorer({ onClose }) {
     route: 'main',
     query: '',
   });
+
   function onSearch(str) {
     if (str.length) {
       setState({

diff --git a/src/WinXP/apps/Notepad/index.js b/src/WinXP/apps/Notepad/index.js
@@ -1,10 +1,13 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useRef, useContext, useEffect } from 'react';
 import Frame from 'react-frame-component';
 
 import styled from 'styled-components';
 
 import { WindowDropDowns } from 'components';
 import { getDropDownData } from './dropDownData';
+import { getNotepadIframeStyle } from './utils';
+import { applyScrollbarClass } from 'scrollbar';
 
 import { Context as AppContext } from '../../index';
 import { ADD_APP } from '../../constants/actions';
@@ -41,6 +44,16 @@ export default function Notepad({ onClose, isFocus }) {
     textareaRef.current && textareaRef.current.focus();
   }, [isFocus]);
 
+  useEffect(() => {
+    applyScrollbarClass(
+      frameRef.current?.contentDocument.querySelector('.frame-content'),
+    );
+  }, [
+    textareaRef.current?.value?.length,
+    frameRef.current?.clientWidth,
+    frameRef.current?.clientHeight,
+  ]);
+
   function selectText(start, end) {
     caretStart.current = start;
     caretEnd.current = end;
@@ -242,46 +255,13 @@ export default function Notepad({ onClose, isFocus }) {
     });
   }
 
-  const frameInitialContent = `
-  <!DOCTYPE html><html>
-  <head>
-  <style>
-  html, div, body, textarea {
-    height: 100%;
-    width: 100%;
-    margin: 0;
-  }
-  html, body {
-    overflow: hidden;
-  }
-  textarea {
-    flex: auto;
-    outline: none;
-    font-family: 'Lucida Console', monospace;
-    font-size: 13px;
-    line-height: 14px;
-    resize: none;
-    padding: 2px;
-    ${wordWrap ? '' : 'white-space: nowrap; overflow-x: scroll;'}
-    overflow-y: scroll;
-    border: 1px solid #96abff;
-  }
-
-  textarea::selection {
-    background-color: #1660e8;
-    color: white;
-  }
-  </style>
-  </head>
-  <body><div></div></body></html>`;
-
   return (
     <Div>
       <section className="np__toolbar">
         <WindowDropDowns items={dropDownData} onClickItem={onClickOptionItem} />
       </section>
-
-      <Frame initialContent={frameInitialContent} ref={frameRef} tabIndex={-1}>
+      <Frame ref={frameRef} tabIndex={-1}>
+        <style>{getNotepadIframeStyle(wordWrap)}</style>
         <textarea
           ref={textareaRef}
           value={docText}

diff --git a/src/WinXP/apps/Notepad/utils.js b/src/WinXP/apps/Notepad/utils.js
@@ -0,0 +1,32 @@
+import { getScrollbarCSS } from 'scrollbar';
+
+export function getNotepadIframeStyle(wordWrap) {
+  return `
+${getScrollbarCSS()}
+html, div, body, textarea {
+  height: calc(100% - 1px);
+  width: calc(100% - 1px);
+margin: 0;
+}
+html, body {
+overflow: hidden;
+}
+textarea {
+cursor: auto;
+flex: auto;
+outline: none;
+font-family: 'Lucida Console', monospace;
+font-size: 13px;
+line-height: 14px;
+resize: none;
+padding: 2px;
+${wordWrap ? '' : 'white-space: nowrap; overflow-x: scroll;'}
+overflow-y: scroll;
+border: 1px solid #96abff;
+}
+
+textarea::selection {
+background-color: #1660e8;
+color: white;
+}`;
+}
diff --git a/src/WinXP/index.js b/src/WinXP/index.js
@@ -11,6 +11,8 @@ import useMouse from 'react-use/lib/useMouse';
 import ga from 'react-ga';
 
 import { getLocalStorage, setLocalStorage, throttledFunc } from './utils';
+import { getScrollbarCSS } from '../scrollbar';
+
 import {
   defaultDesktop,
   defaultScreenSaver,
@@ -439,6 +441,7 @@ function WinXP() {
       state={state.powerState}
       tabIndex={0}
     >
+      <style>{getScrollbarCSS()}</style>
       <Icons
         icons={state.icons}
         onMouseDown={onMouseDownIcon}

diff --git a/src/assets/scrollbar/button-down-dark.svg b/src/assets/scrollbar/button-down-dark.svg