Use styled-components for global styles & adjust scroll bar

jhen0409 · jhen0409 · commit c3b8b45bc9d8 · 2023-07-29T10:04:09.000+08:00
diff --git a/app/globalStyles.js b/app/globalStyles.js
@@ -0,0 +1,62 @@
+import { css, createGlobalStyle } from 'styled-components'
+
+const commonStyles = css`
+  html,
+  body {
+    font-family: monaco, Consolas, Lucida Console, monospace;
+    overflow: hidden;
+    font-size: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(53, 59, 70);
+  }
+
+  #root {
+    width: 100%;
+    height: 100%;
+  }
+  #logs {
+    position: fixed;
+    top: 0;
+    left: 0;
+    white-space: pre;
+  }
+  #loading {
+    color: #aaa;
+    font-size: 30px;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @media print {
+    @page {
+      size: auto;
+      margin: 0;
+    }
+    body {
+      position: static;
+    }
+  }
+  .CodeMirror {
+    font-family: monaco, Consolas, Lucida Console, monospace !important;
+  }
+`
+
+export const GlobalStyle =
+  process.platform !== 'darwin'
+    ? createGlobalStyle`
+        ${commonStyles}
+        ::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+          background-color: #95959588;
+        }
+        ::-webkit-scrollbar-thumb {
+          background-color: #33333366;
+        }
+      `
+    : createGlobalStyle`${commonStyles}`
diff --git a/app/index.js b/app/index.js
@@ -14,6 +14,7 @@ import { invokeDevMethod } from './utils/devMenu'
 import { client, tryADBReverse } from './utils/adb'
 import config from './utils/config'
 import { toggleOpenInEditor, isOpenInEditorEnabled } from './utils/devtools'
+import { GlobalStyle } from './globalStyles'
 
 const currentWindow = getCurrentWindow()
 
@@ -38,21 +39,25 @@ const handleReady = () => {
     window.reactDevToolsPort = port
     const root = createRoot(document.getElementById('root'))
     root.render(
-      <Provider store={store}>
-        <PersistGate loading={null} persistor={persistor}>
-          <App />
-        </PersistGate>
-      </Provider>,
+      <>
+        <GlobalStyle />
+        <Provider store={store}>
+          <PersistGate loading={null} persistor={persistor}>
+            <App />
+          </PersistGate>
+        </Provider>
+      </>,
     )
   })
-};
+}
 
-({ store, persistor } = configureStore(handleReady))
+;({ store, persistor } = configureStore(handleReady))
 
 // Provide for user
 window.adb = client
 window.adb.reverseAll = tryADBReverse
-window.adb.reversePackager = () => tryADBReverse(store.getState().debugger.location.port)
+window.adb.reversePackager = () =>
+  tryADBReverse(store.getState().debugger.location.port)
 
 window.checkWindowInfo = () => {
   const debuggerState = store.getState().debugger
@@ -63,13 +68,14 @@ window.checkWindowInfo = () => {
   }
 }
 
-window.beforeWindowClose = () => new Promise((resolve) => {
-  if (store.dispatch(beforeWindowClose())) {
-    setTimeout(resolve, 200)
-  } else {
-    resolve()
-  }
-})
+window.beforeWindowClose = () =>
+  new Promise((resolve) => {
+    if (store.dispatch(beforeWindowClose())) {
+      setTimeout(resolve, 200)
+    } else {
+      resolve()
+    }
+  })
 
 // For security, we should disable nodeIntegration when user use this open a website
 const originWindowOpen = window.open
@@ -92,9 +98,9 @@ window.invokeDevMethod = (name) => invokeDevMethod(name)()
 // we need fix it for ensure child process work
 // (like launchEditor of react-devtools)
 if (
-  process.env.NODE_ENV === 'production'
-  && process.platform === 'darwin'
-  && process.env.PATH.indexOf('/usr/local/bin') === -1
+  process.env.NODE_ENV === 'production' &&
+  process.platform === 'darwin' &&
+  process.env.PATH.indexOf('/usr/local/bin') === -1
 ) {
   process.env.PATH = `${process.env.PATH}:/usr/local/bin`
 }
diff --git a/dist/app.html b/dist/app.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset=utf-8>
     <title>React Native Debugger</title>
-    <link href='css/style.css' rel="stylesheet" />
   </head>
   <body>
     <div id="root">
diff --git a/dist/css/style.css b/dist/css/style.css
diff --git a/electron/app.html b/electron/app.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset=utf-8>
     <title>React Native Debugger</title>
-    <link href='../dist/css/style.css' rel="stylesheet" />
   </head>
   <body>
     <div id="root">
