diff --git a/package.json b/package.json index 220c67d..ba514b8 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "electron-builder": "^24.6.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "sass": "^1.66.1", "typescript": "^5.1.6", "vite": "^4.4.9", "vite-plugin-electron": "^0.13.0-beta.3", diff --git a/src/App.scss b/src/App.css similarity index 100% rename from src/App.scss rename to src/App.css diff --git a/src/App.tsx b/src/App.tsx index 7e78842..d5703ce 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import { useState } from 'react' import Update from '@/components/update' import logoVite from './assets/logo-vite.svg' import logoElectron from './assets/logo-electron.svg' -import './App.scss' +import './App.css' console.log('[App.tsx]', `Hello world from Electron ${process.versions.electron}!`) diff --git a/src/components/update/Modal/index.tsx b/src/components/update/Modal/index.tsx index c8d6922..934f1a2 100644 --- a/src/components/update/Modal/index.tsx +++ b/src/components/update/Modal/index.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from 'react' import { createPortal } from 'react-dom' -import styles from './modal.module.scss' +import './modal.css' const ModalTemplate: React.FC -
-
-
-
-
{title}
+
+
+
+
+
+
{title}
-
{children}
+
{children}
{typeof footer !== 'undefined' ? ( -
+
diff --git a/src/components/update/Modal/modal.css b/src/components/update/Modal/modal.css new file mode 100644 index 0000000..d34178b --- /dev/null +++ b/src/components/update/Modal/modal.css @@ -0,0 +1,87 @@ +.update-modal { + --primary-color: rgb(224, 30, 90); + + .update-modal__mask { + width: 100vw; + height: 100vh; + position: fixed; + left: 0; + top: 0; + z-index: 9; + background: rgba(0, 0, 0, 0.45); + } + + .update-modal__warp { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 19; + } + + .update-modal__content { + box-shadow: 0 0 10px -4px rgb(130, 86, 208); + overflow: hidden; + border-radius: 4px; + + .content__header { + display: flex; + line-height: 38px; + background-color: var(--primary-color); + + .content__header-text { + font-weight: bold; + width: 0; + flex-grow: 1; + } + } + + .update-modal--close { + width: 30px; + height: 30px; + margin: 4px; + line-height: 34px; + text-align: center; + cursor: pointer; + + svg { + width: 17px; + height: 17px; + } + } + + .content__body { + padding: 10px; + background-color: #fff; + color: #333; + } + + .content__footer { + padding: 10px; + background-color: #fff; + display: flex; + justify-content: end; + + button { + padding: 7px 11px; + background-color: var(--primary-color); + font-size: 14px; + margin-left: 10px; + + &:first-child { + margin-left: 0; + } + } + } + } + + .icon { + padding: 0 15px; + width: 20px; + fill: currentColor; + + &:hover { + color: rgba(0, 0, 0, 0.4); + } + } +} \ No newline at end of file diff --git a/src/components/update/Modal/modal.module.scss b/src/components/update/Modal/modal.module.scss deleted file mode 100644 index 7218815..0000000 --- a/src/components/update/Modal/modal.module.scss +++ /dev/null @@ -1,89 +0,0 @@ -.modal { - --primary-color: rgb(224, 30, 90); - - :global { - .modal-mask { - width: 100vw; - height: 100vh; - position: fixed; - left: 0; - top: 0; - z-index: 9; - background: rgba(0, 0, 0, 0.45); - } - - .modal-warp { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 19; - } - - .modal-content { - box-shadow: 0 0 10px -4px rgb(130, 86, 208); - overflow: hidden; - border-radius: 4px; - - .modal-header { - display: flex; - line-height: 38px; - background-color: var(--primary-color); - - .modal-header-text { - font-weight: bold; - width: 0; - flex-grow: 1; - } - } - - .modal-close { - width: 30px; - height: 30px; - margin: 4px; - line-height: 34px; - text-align: center; - cursor: pointer; - - svg { - width: 17px; - height: 17px; - } - } - - .modal-body { - padding: 10px; - background-color: #fff; - color: #333; - } - - .modal-footer { - padding: 10px; - background-color: #fff; - display: flex; - justify-content: end; - - button { - padding: 7px 11px; - background-color: var(--primary-color); - font-size: 14px; - margin-left: 10px; - - &:first-child { - margin-left: 0; - } - } - } - } - - .icon { - padding: 0 15px; - width: 20px; - fill: currentColor; - - &:hover { - color: rgba(0, 0, 0, 0.4); - } - } - } -} diff --git a/src/components/update/Progress/index.tsx b/src/components/update/Progress/index.tsx index f7c9525..1701dc5 100644 --- a/src/components/update/Progress/index.tsx +++ b/src/components/update/Progress/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import styles from './progress.module.scss' +import './progress.css' const Progress: React.FC -
+
+
- {(percent ?? 0).toString().substring(0,4)}% + {(percent ?? 0).toString().substring(0, 4)}%
) } diff --git a/src/components/update/Progress/progress.css b/src/components/update/Progress/progress.css new file mode 100644 index 0000000..2cef7c1 --- /dev/null +++ b/src/components/update/Progress/progress.css @@ -0,0 +1,21 @@ +.update-progress { + display: flex; + align-items: center; + + .update-progress-pr { + border: 1px solid #000; + border-radius: 3px; + height: 6px; + width: 300px; + } + + .update-progress-rate { + height: 6px; + border-radius: 3px; + background-image: linear-gradient(to right, rgb(130, 86, 208) 0%, var(--primary-color) 100%) + } + + .update-progress-num { + margin: 0 10px; + } +} \ No newline at end of file diff --git a/src/components/update/Progress/progress.module.scss b/src/components/update/Progress/progress.module.scss deleted file mode 100644 index a963e64..0000000 --- a/src/components/update/Progress/progress.module.scss +++ /dev/null @@ -1,23 +0,0 @@ -.progress { - display: flex; - align-items: center; - - :global { - .progress-pr { - border: 1px solid #000; - border-radius: 3px; - height: 6px; - width: 200px; - } - - .progress-rate { - height: 6px; - border-radius: 3px; - background-image: linear-gradient(to right, rgb(130, 86, 208) 0%, var(--primary-color) 100%) - } - - .progress-num { - margin: 0 10px; - } - } -} diff --git a/src/components/update/index.tsx b/src/components/update/index.tsx index 742784b..9e28bb0 100644 --- a/src/components/update/index.tsx +++ b/src/components/update/index.tsx @@ -3,7 +3,7 @@ import type { ProgressInfo } from 'electron-updater' import { useCallback, useEffect, useState } from 'react' import Modal from '@/components/update/Modal' import Progress from '@/components/update/Progress' -import styles from './update.module.scss' +import './update.css' const Update = () => { const [checking, setChecking] = useState(false) @@ -98,21 +98,21 @@ const Update = () => { onOk={modalBtn?.onOk} footer={updateAvailable ? /* hide footer */null : undefined} > -
+
{updateError ? ( -
+

Error downloading the latest version.

{updateError.message}

) : updateAvailable ? ( -
+
The last version is: v{versionInfo?.newVersion}
-
v{versionInfo?.version} -> v{versionInfo?.newVersion}
-
-
Update progress:
-
+
v{versionInfo?.version} -> v{versionInfo?.newVersion}
+
+
Update progress:
+
diff --git a/src/components/update/update.css b/src/components/update/update.css new file mode 100644 index 0000000..e776968 --- /dev/null +++ b/src/components/update/update.css @@ -0,0 +1,24 @@ +.modal-slot { + .update-progress { + display: flex; + } + + .new-version__target, + .update__progress { + margin-left: 40px; + } + + .progress__title { + margin-right: 10px; + } + + .progress__bar { + width: 0; + flex-grow: 1; + } + + .can-not-available { + padding: 20px; + text-align: center; + } +} \ No newline at end of file diff --git a/src/components/update/update.module.scss b/src/components/update/update.module.scss deleted file mode 100644 index 32fa35b..0000000 --- a/src/components/update/update.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -.modalslot { - // display: flex; - // align-items: center; - // justify-content: center; - - :global { - .update-progress { - display: flex; - } - - .progress-title { - margin-right: 10px; - } - - .progress-bar { - width: 0; - flex-grow: 1; - } - - .can-available { - .new-version-target,.update-progress { - margin-left: 40px; - } - } - - .can-not-available { - padding: 20px; - text-align: center; - } - } -} \ No newline at end of file diff --git a/src/index.scss b/src/index.css similarity index 100% rename from src/index.scss rename to src/index.css diff --git a/src/main.tsx b/src/main.tsx index 5b9b627..c4647c7 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,7 +2,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './samples/node-api' -import './index.scss' +import './index.css' ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(