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

removing mui and being just fine

Browse Source
This commit is contained in:
talksik
2022-04-30 09:52:49 -05:00
parent f5561465a8
commit 56fc9df18e
9 changed files with 16 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/package.json
-4
View File
@@ -116,11 +116,7 @@
},
"dependencies": {
"@carbon/icons-react": "10.22.0",
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@getstation/electron-google-oauth2": "^2.1.0",
"@mui/icons-material": "^5.5.1",
"@mui/material": "^5.5.1",
"@nirvana/core": "*",
"@types/carbon-components-react": "^7.55.1",
"antd": "^4.19.2",
packages/desktop/src/nirvanaApp.tsx
+7 -23
View File
@@ -1,5 +1,4 @@
import { QueryClient, QueryClientProvider } from "react-query";
import { ThemeProvider, createTheme } from "@mui/material";
import Home from "./pages/Home";
import Login from "./pages/Login";
@@ -17,33 +16,18 @@ export const queryClient = new QueryClient();
export const socket = io("http://localhost:5000");
const darkTheme = createTheme({
palette: {
mode: "dark",
primary: {
main: "#438E86",
},
secondary: {
main: "#FFB6B6",
},
},
});
function NirvanaApp() {
return (
<>
<QueryClientProvider client={queryClient}>
<ThemeProvider theme={darkTheme}>
<RecoilRoot>
<ProtectedRoute>
<Home />
</ProtectedRoute>
<ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
</RecoilRoot>
<RecoilRoot>
<ProtectedRoute>
<Home />
</ProtectedRoute>
<ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
</RecoilRoot>
<Toaster />
</ThemeProvider>
<Toaster />
</QueryClientProvider>
</>
);
packages/desktop/src/pages/Home/conversations/index.tsx
+1 -41
View File
@@ -2,9 +2,7 @@ import {
$newConvoPage,
$selectedConversation,
} from "../../../controller/recoil";
import { Add, LinkRounded, RecordVoiceOverTwoTone } from "@mui/icons-material";
import { Avatar, Tooltip } from "antd";
import { Button, Fab, Tab, Tabs } from "@mui/material";
import {
Conversation,
ConversationMemberState,
@@ -118,45 +116,7 @@ export default function Conversations() {
return (
<>
<div className="flex flex-row justify-between items-center p-2">
<Tabs
value={selectedTab}
onChange={handleChangeTab}
textColor="secondary"
indicatorColor="secondary"
aria-label="secondary tabs example"
sx={{ textTransform: "none" }}
>
<Tab value={ConvoTab.LIVE} label="LIVE" sx={{ fontSize: "0.75em" }} />
<Tab
value={ConvoTab.TUNED}
label="TUNED IN"
sx={{ fontSize: "0.75em" }}
/>
<Tab
value={ConvoTab.INBOX}
label="INBOX"
sx={{ fontSize: "0.75em" }}
/>
<Tab
value={ConvoTab.REQUESTS}
label="REQUESTS"
sx={{ fontSize: "0.75em" }}
/>
</Tabs>
<Fab
variant="extended"
size="small"
color="primary"
aria-label="add"
onClick={handleNewConvo}
style={{ textTransform: "none" }}
>
<RecordVoiceOverTwoTone fontSize="small" sx={{ mr: 1 }} />
new
</Fab>
</div>
<div className="flex flex-row justify-between items-center p-2"></div>
<div className="flex flex-col items-center">
{renderConversationContent()}
packages/desktop/src/pages/Home/header/index.tsx
-73
View File
@@ -1,14 +1,4 @@
import { $jwtToken, $searchQuery } from "../../../controller/recoil";
import {
Avatar,
Button,
Divider,
ListItemIcon,
Menu,
MenuItem,
MenuProps,
} from "@mui/material";
import { Check, Logout } from "@mui/icons-material";
import Logo, { LogoType } from "../../../components/Logo";
import { useEffect, useRef, useState } from "react";
import { useRecoilState, useSetRecoilState } from "recoil";
@@ -99,70 +89,7 @@ export default function Header() {
<div className="flex flex-row items-center bg-zinc-800 h-20 px-5">
<Logo type={LogoType.small} className="scale-[0.4]" />
<input
ref={inputRef}
placeholder="type / to search"
className="placeholder:text-zinc-400 bg-transparent outline-none text-zinc-100 mr-auto flex-1"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<Button
onClick={() => updateStatus(UserStatus.FLOW_STATE)}
color="secondary"
size="small"
style={{ textTransform: "none" }}
>
flow state
</Button>
<span className="px-5" onClick={handleClick}>
{userDetailsResponse?.user && (
<UserAvatarWithStatus user={userDetailsResponse?.user} />
)}
</span>
</div>
<Menu
anchorEl={anchorEl as Element}
id="profile-menu"
open={openAvatarMenu}
onClose={handleClose}
onClick={handleClose}
>
<MenuItem onClick={() => updateStatus(UserStatus.ONLINE)}>
<ListItemIcon>
{userDetailsResponse?.user.status === UserStatus.ONLINE && (
<Check fontSize="small" />
)}
</ListItemIcon>
Online
</MenuItem>
<MenuItem onClick={() => updateStatus(UserStatus.OFFLINE)}>
<ListItemIcon>
{userDetailsResponse?.user.status === UserStatus.OFFLINE && (
<Check fontSize="small" />
)}
</ListItemIcon>
Away
</MenuItem>
<MenuItem onClick={() => updateStatus(UserStatus.FLOW_STATE)}>
<ListItemIcon>
{userDetailsResponse?.user.status === UserStatus.OFFLINE && (
<Check fontSize="small" />
)}
</ListItemIcon>
Flow State
</MenuItem>
<Divider />
<MenuItem onClick={logOut}>
<ListItemIcon>
<Logout fontSize="small" />
</ListItemIcon>
Sign Out
</MenuItem>
</Menu>
</>
);
}
packages/desktop/src/pages/Home/newConvo/index.tsx
+3 -34
View File
@@ -1,12 +1,3 @@
import {
Button,
FormControl,
Input,
InputAdornment,
InputLabel,
TextField,
} from "@mui/material";
import { Check, Search } from "@mui/icons-material";
import {
useCreateConvo,
useGetDmByUserId,
@@ -163,25 +154,7 @@ export default function NewConvo() {
return (
<div className="flex flex-col">
<div className="flex flex-row">
<Button
onClick={handleGoBack}
size="small"
style={{ textTransform: "none" }}
>
back
</Button>
<TextField
value={userSearchQuery}
autoFocus
color="secondary"
label="Search by name or email"
variant="filled"
fullWidth
onChange={handleUpdateSearchInput}
/>
</div>
<div className="flex flex-row"></div>
<span className="mx-auto">{data?.users.length ?? 0} results</span>
@@ -190,7 +163,7 @@ export default function NewConvo() {
{/* selected people */}
{selectedUsers?.map((user) => (
<div onClick={() => selectOrUnselectUser(user)}>
<UserRow user={user} rightJsx={<Check />} />
<UserRow user={user} />
</div>
))}
@@ -203,11 +176,7 @@ export default function NewConvo() {
))}
</div>
<div className="ml-auto">
<Button variant="contained" onClick={createConvo}>
Connect
</Button>
</div>
<div className="ml-auto"></div>
</div>
);
}
packages/desktop/src/pages/Home/search/index.tsx
-1
View File
@@ -4,7 +4,6 @@ import {
} from "../../../controller/recoil";
import { FaAngleRight } from "react-icons/fa";
import { Tooltip } from "@mui/material";
import { User } from "@nirvana/core/models";
import { useEffect } from "react";
import { useRecoilState } from "recoil";
packages/desktop/src/pages/Login/index.tsx
-2
View File
@@ -3,7 +3,6 @@ import { useEffect, useState } from "react";
import { useRecoilState, useSetRecoilState } from "recoil";
import { $jwtToken } from "../../controller/recoil";
import { CircularProgress } from "@mui/material";
import { FcGoogle } from "react-icons/fc";
import Logo from "../../components/Logo";
import { useLogin } from "../../controller/index";
@@ -56,7 +55,6 @@ export default function Login() {
{isLoading ? (
<>
<CircularProgress />
<span className="text-white">Attempting to log you in</span>
</>
) : (
packages/web/components/providers/toastProvider.tsx
-65
View File
@@ -1,65 +0,0 @@
import MuiAlert, { AlertProps } from "@mui/material/Alert";
import React, { useState } from "react";
import { AlertColor } from "@mui/material";
import Snackbar from "@mui/material/Snackbar";
import { useContext } from "react";
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
ref
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
interface context {
handleOpen: (severity: AlertColor, message: string) => void;
}
const NirvanaToastContext = React.createContext<context>({
handleOpen: (
severity: AlertColor = "success",
message: string = "Success"
) => {},
});
export const NirvanaToastProvider: React.FC = ({ children }) => {
const [open, setOpen] = useState<boolean>(false);
const [severity, setSeverity] = useState<AlertColor>("success");
const [message, setMessage] = useState<string>("Success");
const handleOpen = (
severity: AlertColor = "success",
message: string = "Success"
) => {
// set severity + message first
setSeverity(severity);
setMessage(message);
// show the alert
setOpen(true);
};
const handleClose = () => setOpen(false);
const value = {
handleOpen,
};
return (
<NirvanaToastContext.Provider value={value}>
<Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
<Alert onClose={handleClose} severity={severity} sx={{ width: "100%" }}>
{message}
</Alert>
</Snackbar>
{children}
</NirvanaToastContext.Provider>
);
};
export default function useNirvanaToast() {
return useContext(NirvanaToastContext);
}