diff options
| author |  Kristóf Marussy <kristof@marussy.com> | 2021-12-22 22:54:38 +0100 |
|---|---|---|
| committer | Kristóf Marussy <kristof@marussy.com> | 2021-12-22 22:54:38 +0100 |
| commit | 9a2b4af1aa07eb4760692afe040dab9267fe7987 (patch) | |
| tree | 041b491dd5dfd3b49d79aa929ed32c91dee73edd /packages/renderer | |
| parent | build: Simplify project structure (diff) | |
| download | sophie-9a2b4af1aa07eb4760692afe040dab9267fe7987.tar.gz sophie-9a2b4af1aa07eb4760692afe040dab9267fe7987.tar.zst sophie-9a2b4af1aa07eb4760692afe040dab9267fe7987.zip | |
feat: Add mui
Diffstat (limited to 'packages/renderer')
| -rw-r--r-- | packages/renderer/index.html | 2 | ||||
| -rw-r--r-- | packages/renderer/package.json | 5 | ||||
| -rw-r--r-- | packages/renderer/src/index.tsx | 35 |
3 files changed, 35 insertions, 7 deletions
diff --git a/packages/renderer/index.html b/packages/renderer/index.html index 7c6771f..08469c7 100644 --- a/packages/renderer/index.html +++ b/packages/renderer/index.html | |||
| @@ -3,7 +3,7 @@ | |||
| 3 | <head> | 3 | <head> |
| 4 | <meta charset="UTF-8"> | 4 | <meta charset="UTF-8"> |
| 5 | <meta http-equiv="Content-Security-Policy" content="script-src 'self' blob:"> | 5 | <meta http-equiv="Content-Security-Policy" content="script-src 'self' blob:"> |
| 6 | <meta content="width=device-width, initial-scale=1.0" name="viewport"> | 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 7 | <title>Sophie</title> | 7 | <title>Sophie</title> |
| 8 | </head> | 8 | </head> |
| 9 | <body> | 9 | <body> |
diff --git a/packages/renderer/package.json b/packages/renderer/package.json index 0c006a8..b18b2fe 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json | |||
| @@ -8,6 +8,11 @@ | |||
| 8 | "typecheck": "tsc --noEmit" | 8 | "typecheck": "tsc --noEmit" |
| 9 | }, | 9 | }, |
| 10 | "dependencies": { | 10 | "dependencies": { |
| 11 | "@emotion/react": "^11.7.1", | ||
| 12 | "@emotion/styled": "^11.6.0", | ||
| 13 | "@fontsource/roboto": "^4.5.1", | ||
| 14 | "@mui/icons-material": "^5.2.5", | ||
| 15 | "@mui/material": "^5.2.5", | ||
| 11 | "react": "^17.0.2", | 16 | "react": "^17.0.2", |
| 12 | "react-dom": "^17.0.2" | 17 | "react-dom": "^17.0.2" |
| 13 | }, | 18 | }, |
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx index 21ad152..67bdf93 100644 --- a/packages/renderer/src/index.tsx +++ b/packages/renderer/src/index.tsx | |||
| @@ -1,10 +1,33 @@ | |||
| 1 | import '@fontsource/roboto/300.css'; | ||
| 2 | import '@fontsource/roboto/400.css'; | ||
| 3 | import '@fontsource/roboto/500.css'; | ||
| 4 | import '@fontsource/roboto/700.css'; | ||
| 5 | import Button from "@mui/material/Button"; | ||
| 6 | import CssBaseline from "@mui/material/CssBaseline"; | ||
| 7 | import { | ||
| 8 | unstable_createMuiStrictModeTheme as createTheme, | ||
| 9 | ThemeProvider, | ||
| 10 | } from '@mui/material/styles'; | ||
| 1 | import React from 'react'; | 11 | import React from 'react'; |
| 2 | import { render } from 'react-dom'; | 12 | import { render } from 'react-dom'; |
| 3 | 13 | ||
| 4 | const app = ( | 14 | const theme = createTheme({ |
| 5 | <React.StrictMode> | 15 | palette: { |
| 6 | <h1>Hello Sophie!</h1> | 16 | mode: 'dark', |
| 7 | </React.StrictMode> | 17 | }, |
| 8 | ); | 18 | }); |
| 9 | 19 | ||
| 10 | render(app, document.getElementById('app')); | 20 | function App() { |
| 21 | return ( | ||
| 22 | <React.StrictMode> | ||
| 23 | <ThemeProvider theme={theme}> | ||
| 24 | <CssBaseline enableColorScheme /> | ||
| 25 | <Button variant="contained"> | ||
| 26 | Hello Sophie! | ||
| 27 | </Button> | ||
| 28 | </ThemeProvider> | ||
| 29 | </React.StrictMode> | ||
| 30 | ); | ||
| 31 | } | ||
| 32 | |||
| 33 | render(<App />, document.querySelector('#app')); | ||