talksik/nirvana-v3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding in mui and getting rid of other styling

Browse Source
This commit is contained in:
talksik
2022-06-10 07:44:52 -05:00
parent ae109400f7
commit a26565a715
12 changed files with 497 additions and 753 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/package.json
+4 -7
View File
@@ -77,7 +77,6 @@
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"@vercel/webpack-asset-relocator-loader": "1.7.0",
"autoprefixer": "^10.4.4",
"css-loader": "^6.0.0",
"electron": "17.1.2",
"eslint": "^8.0.1",
@@ -86,21 +85,19 @@
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"fork-ts-checker-webpack-plugin": "^6.0.1",
"mini-css-extract-plugin": "^2.6.0",
"node-loader": "^2.0.0",
"postcss": "^8.4.12",
"postcss-loader": "^6.2.1",
"sass-loader": "^12.6.0",
"style-loader": "^3.0.0",
"tailwindcss": "^3.0.23",
"ts-loader": "^9.2.2",
"typescript": "~4.5.4"
},
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.8.0",
"@mui/material": "^5.8.1",
"@getstation/electron-google-oauth2": "^2.1.0",
"@nirvana/components": "*",
"@nirvana/core": "*",
"antd": "^4.20.2",
"axios": "^0.26.1",
"electron-squirrel-startup": "^1.0.0",
"electron-store": "^8.0.1",
packages/desktop/postcss.config.js
-3
View File
@@ -1,3 +0,0 @@
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
};
packages/desktop/src/components/lineIcon.tsx
-68
View File
@@ -1,68 +0,0 @@
import { Avatar } from 'antd';
import React, { useMemo } from 'react';
function LineIcon({
sourceImages,
grayscale = true,
}: {
sourceImages: string[];
grayscale: boolean;
}) {
const isMultiple = useMemo(() => {
if (sourceImages?.length > 1) return true;
return false;
}, [sourceImages]);
return (
<>
{isMultiple ? (
<div
className={`relative ${
grayscale ? 'grayscale opacity-40' : ''
} h-[40px] w-[40px] flex-grow-0`}
>
{sourceImages.map((avatarSrc, index) => {
if (index === 0) {
return (
<Avatar
key={`lineIcon-${avatarSrc}-${index}`}
src={avatarSrc}
shape="square"
size={'small'}
className={`shadow-lg absolute bottom-0 left-0 bg-slate-200`}
/>
);
} else if (index === 1) {
return (
<Avatar
key={`lineIcon-${avatarSrc}-${index}`}
src={avatarSrc}
shape="square"
size={'small'}
className={`absolute top-0 right-0 bg-slate-200`}
/>
);
}
// TODO: add third in the frame if we want later
return <></>;
})}
</div>
) : (
sourceImages?.map((avatarSrc, index) => (
<Avatar
key={`lineIcon-${avatarSrc}-${index}`}
src={avatarSrc}
shape="square"
size={'large'}
className={`${grayscale && 'grayscale opacity-40'} shadow-lg`}
/>
))
)}
</>
);
}
export default React.memo(LineIcon);
packages/desktop/src/mui/NirvanaTheme.ts
+100
View File
@@ -0,0 +1,100 @@
import { createTheme, experimental_sx as sx } from '@mui/material';
import { blueGrey } from '@mui/material/colors';
export const NirvanaTheme = createTheme({
typography: {
fontFamily: ['IBM Plex Sans', 'sans-serif'].join(','),
overline: {
letterSpacing: 2,
},
caption: {
color: blueGrey[200],
},
button: {
textTransform: 'none',
},
},
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: {
styleOverrides: {
root: sx({
boxShadow: 1,
}),
},
defaultProps: {
variant: 'rounded',
},
},
MuiInput: {
styleOverrides: {
root: {
fontSize: '0.9em',
},
},
defaultProps: {
disableUnderline: true,
fullWidth: true,
},
},
MuiListItem: {
styleOverrides: {
root: {
padding: '2px 0 2px 0 !important',
},
},
defaultProps: {
disableGutters: true,
disablePadding: false,
},
},
MuiListItemButton: {
styleOverrides: {
root: {
borderRadius: 5,
},
},
},
MuiListSubheader: {
styleOverrides: {
root: {
'&.MuiListSubheader-root': {
lineHeight: 2,
paddingBottom: '4px',
display: 'flex',
gap: '0.7em',
alignItems: 'center',
backgroundColor: 'transparent',
},
},
},
},
MuiFab: {
styleOverrides: {
root: {
borderRadius: 5,
},
},
},
},
});
packages/desktop/src/styles/index.css
-22
View File
@@ -1,9 +1,3 @@
@import '~antd/dist/antd.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
display: flex;
flex-direction: column;
@@ -20,10 +14,6 @@ body {
font-family: 'IBM Plex Sans', sans-serif;
}
button {
@apply transition-all rounded;
}
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
@@ -43,15 +33,6 @@ button {
-webkit-app-region: no-drag;
}
.ant-avatar-group .ant-avatar {
border: none;
@apply shadow-lg;
}
.ant-modal-footer {
padding: 0 !important;
}
/* Designing for scroll-bar */
::-webkit-scrollbar {
width: 4px;
@@ -59,19 +40,16 @@ button {
/* Track */
::-webkit-scrollbar-track {
@apply bg-gray-100;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
@apply bg-gray-300;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
@apply bg-gray-500;
}
.direction-ltr {
packages/desktop/src/tree/Terminal.tsx
+21
View File
@@ -0,0 +1,21 @@
import { Grid } from '@mui/material';
import React from 'react';
export default function Terminal() {
return (
<Grid container spacing={0}>
<Grid item xs={4}>
This is the sidepanel
</Grid>
<Grid item xs={8}>
{' '}
main panel
</Grid>
<Grid item xs={12}>
This is the footer controls
</Grid>
</Grid>
);
}
packages/desktop/src/tree/electronApp.tsx
+27 -23
View File
@@ -1,37 +1,41 @@
import { AuthProvider } from '../providers/AuthProvider';
import { ElectronProvider } from '../providers/ElectronProvider';
import { NirvanaTheme } from '../mui/NirvanaTheme';
import ProtectedRoute from './ProtectedRoute';
import React from 'react';
import { SocketProvider } from '../providers/SocketProvider';
import { StabilityProvider } from '../providers/StabilityProvider';
import { ThemeProvider } from '@mui/material';
import { Toaster } from 'react-hot-toast';
import { ZenProvider } from '../providers/ZenProvider';
export default function ElectronApp() {
return (
<StabilityProvider>
<ElectronProvider>
<AuthProvider>
<ProtectedRoute>
<ZenProvider>
<SocketProvider>
<></>
</SocketProvider>
</ZenProvider>
</ProtectedRoute>
</AuthProvider>
<ThemeProvider theme={NirvanaTheme}>
<StabilityProvider>
<ElectronProvider>
<AuthProvider>
<ProtectedRoute>
<ZenProvider>
<SocketProvider>
<></>
</SocketProvider>
</ZenProvider>
</ProtectedRoute>
</AuthProvider>
<Toaster
position={'bottom-right'}
toastOptions={{
style: {
borderRadius: '10px',
background: '#333',
color: '#fff',
},
}}
/>
</ElectronProvider>
</StabilityProvider>
<Toaster
position={'bottom-right'}
toastOptions={{
style: {
borderRadius: '10px',
background: '#333',
color: '#fff',
},
}}
/>
</ElectronProvider>
</StabilityProvider>
</ThemeProvider>
);
}
packages/desktop/tailwind.config.js
-7
View File
@@ -1,7 +0,0 @@
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
packages/desktop/webpack.renderer.config.js
+5 -16
View File
@@ -1,22 +1,11 @@
const rules = require("./webpack.rules");
const plugins = require("./webpack.plugins");
const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
const path = require("path");
const path = require('path');
rules.push({
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{
loader: "postcss-loader",
options: {
postcssOptions: {
config: path.join(__dirname, "postcss.config.js"),
},
},
},
],
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});
module.exports = {
@@ -25,6 +14,6 @@ module.exports = {
},
plugins: plugins,
resolve: {
extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
},
};
packages/desktop/webpack.rules.js
+5 -6
View File
@@ -1,5 +1,4 @@
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const path = require('path');
module.exports = [
// Add support for native node modules
@@ -7,15 +6,15 @@ module.exports = [
// We're specifying native_modules in the test because the asset relocator loader generates a
// "fake" .node file which is really a cjs file.
test: /native_modules\/.+\.node$/,
use: "node-loader",
use: 'node-loader',
},
{
test: /\.(m?js|node)$/,
parser: { amd: false },
use: {
loader: "@vercel/webpack-asset-relocator-loader",
loader: '@vercel/webpack-asset-relocator-loader',
options: {
outputAssetBase: "native_modules",
outputAssetBase: 'native_modules',
},
},
},
@@ -23,7 +22,7 @@ module.exports = [
test: /\.tsx?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: "ts-loader",
loader: 'ts-loader',
options: {
transpileOnly: true,
},
packages/desktop/webpack.web.config.js
+10 -21
View File
@@ -1,41 +1,30 @@
const rules = require("./webpack.rules");
const rules = require('./webpack.rules');
const plugins = require("./webpack.plugins");
const plugins = require('./webpack.plugins');
const path = require("path");
const path = require('path');
rules.push({
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{
loader: "postcss-loader",
options: {
postcssOptions: {
config: path.join(__dirname, "postcss.config.js"),
},
},
},
],
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});
module.exports = {
mode: "development",
entry: "./src/app.tsx",
mode: 'development',
entry: './src/app.tsx',
module: {
rules,
},
plugins: plugins,
resolve: {
extensions: [".js", ".ts", ".jsx", ".tsx", ".css"],
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
},
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
devServer: {
static: path.join(__dirname, "build"),
static: path.join(__dirname, 'build'),
compress: true,
port: 4000,
},
yarn.lock
+325 -580
View File
File diff suppressed because it is too large Load Diff