diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index 7bcfadc..8f82a46 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -94,6 +94,7 @@
"@mui/icons-material": "^5.8.0",
"@mui/material": "^5.8.1",
"electron-squirrel-startup": "^1.0.0",
+ "notistack": "^2.0.5",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icons": "^4.3.1"
diff --git a/packages/desktop/src/app.tsx b/packages/desktop/src/app.tsx
index 40ea306..855b7ae 100644
--- a/packages/desktop/src/app.tsx
+++ b/packages/desktop/src/app.tsx
@@ -4,42 +4,16 @@ import * as React from 'react';
import ReactDOM from 'react-dom/client';
import Terminal from './components/Terminal';
-const theme = createTheme({
- typography: {
- fontFamily: ['IBM Plex Sans', 'sans-serif'].join(','),
- overline: {
- letterSpacing: 2,
- },
- },
- palette: {
- primary: {
- main: '#438E86',
- },
- secondary: {
- main: '#FFB6B6',
- },
- },
- components: {
- // Name of the component
- MuiButtonBase: {
- defaultProps: {
- // The props to change the default for.
- disableRipple: true, // No more ripple, on the whole application 💣!
- },
- },
- MuiAvatar: {
- defaultProps: {
- variant: 'rounded',
- },
- },
- },
-});
+import { SnackbarProvider } from 'notistack';
+import { NirvanaTheme } from './mui/NirvanaTheme';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
-
-
+
+
+
+
,
);
diff --git a/packages/desktop/src/components/KeyboardShortcutLabel.tsx b/packages/desktop/src/components/KeyboardShortcutLabel.tsx
new file mode 100644
index 0000000..8be75c6
--- /dev/null
+++ b/packages/desktop/src/components/KeyboardShortcutLabel.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, styled, Typography } from '@mui/material';
+import { blueGrey } from '@mui/material/colors';
+
+const StyledBox = styled(Box)(({ theme }) => ({
+ px: theme.spacing(1),
+ py: theme.spacing(0.5),
+ border: `1px solid`,
+ borderColor: blueGrey[50],
+}));
+
+export default function KeyboardShortcutLabel({ label }: { label: string }) {
+ return (
+
+ {label}
+
+ );
+}
diff --git a/packages/desktop/src/components/Terminal.tsx b/packages/desktop/src/components/Terminal.tsx
index 62a9b03..2da97be 100644
--- a/packages/desktop/src/components/Terminal.tsx
+++ b/packages/desktop/src/components/Terminal.tsx
@@ -1,21 +1,11 @@
import React from 'react';
import { Container } from '@mui/system';
-import {
- alpha,
- Avatar,
- Box,
- Button,
- Grid,
- InputBase,
- Paper,
- Stack,
- styled,
- Typography,
-} from '@mui/material';
+import { Avatar, Box, Grid, Input, Stack, Typography } from '@mui/material';
import NirvanaLogo from './NirvanaLogo';
-import { grey } from '@mui/material/colors';
+import { blueGrey } from '@mui/material/colors';
import { FiSearch } from 'react-icons/fi';
+import KeyboardShortcutLabel from './KeyboardShortcutLabel';
export default function Terminal() {
return (
@@ -23,7 +13,7 @@ export default function Terminal() {
-
-
-
+
+
+
+
+
+
diff --git a/packages/desktop/src/mui/NirvanaTheme.ts b/packages/desktop/src/mui/NirvanaTheme.ts
new file mode 100644
index 0000000..03a52c4
--- /dev/null
+++ b/packages/desktop/src/mui/NirvanaTheme.ts
@@ -0,0 +1,43 @@
+import { createTheme } from '@mui/material';
+
+export const NirvanaTheme = createTheme({
+ typography: {
+ fontFamily: ['IBM Plex Sans', 'sans-serif'].join(','),
+ overline: {
+ letterSpacing: 2,
+ },
+ },
+ palette: {
+ primary: {
+ main: '#438E86',
+ },
+ secondary: {
+ main: '#FFB6B6',
+ },
+ },
+ components: {
+ // Name of the component
+ MuiButtonBase: {
+ defaultProps: {
+ // The props to change the default for.
+ disableRipple: true, // No more ripple, on the whole application 💣!
+ },
+ },
+ MuiAvatar: {
+ defaultProps: {
+ variant: 'rounded',
+ },
+ },
+ MuiInput: {
+ styleOverrides: {
+ root: {
+ fontSize: '0.9em',
+ },
+ },
+ defaultProps: {
+ disableUnderline: true,
+ fullWidth: true,
+ },
+ },
+ },
+});
diff --git a/yarn.lock b/yarn.lock
index 446e1ab..294e48b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1825,7 +1825,7 @@ clone@^1.0.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
-clsx@^1.1.1:
+clsx@^1.1.0, clsx@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -3576,7 +3576,7 @@ he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -4747,6 +4747,14 @@ normalize-url@^6.0.1:
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
+notistack@^2.0.5:
+ version "2.0.5"
+ resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.5.tgz#8eb53720453f6e02182cd0e6784ced630a7bb7e6"
+ integrity sha512-Ig2T1Muqkc1PaSQcEDrK7diKv6cBxw02Iq6uv074ySfgq524TV5lK41diAb6OSsaiWfp3aRt+T3+0MF8m2EcJQ==
+ dependencies:
+ clsx "^1.1.0"
+ hoist-non-react-statics "^3.3.0"
+
npm-conf@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9"