diff --git a/index.html b/index.html index e4b78ea..d3a2061 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + Pull the Trigger
diff --git a/package.json b/package.json index 56d3cf1..d8b9b05 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "dev": "vite", - "build": "tsc && vite build", + "build": "vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, diff --git a/public/gun.jpg b/public/gun.jpg new file mode 100644 index 0000000..ac6a6cf Binary files /dev/null and b/public/gun.jpg differ diff --git a/src/App.tsx b/src/App.tsx index 77356e7..f64097d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,6 +20,8 @@ import ThemeProvider from "./components/ThemeProvider"; import "@mantine/core/styles.css"; //import Mantine V7 styles needed by MRT import "@mantine/dates/styles.css"; //if using mantine date picker features import "mantine-react-table/styles.css"; //import MRT styles +import { appTheme } from "./contexts/theme"; +import { useAtom } from "jotai"; function App() { const { data, isFetched } = useQueryAPI({ @@ -31,46 +33,50 @@ function App() { defaultValue: "blackboard", }); - const [currentTheme, setCurrentTheme] = useState(undefined); + const [theme, setTheme] = useAtom(appTheme); useEffect(() => { if (data && themeName) { const temp = data.find((t: any) => t.name === themeName); - setCurrentTheme(temp); + setTheme(temp); } }, [isFetched, themeName]); const router = createBrowserRouter( createRoutesFromElements( - } /> + } /> } + element={} /> , ), ); const overrides = createTheme({ - white: currentTheme?.colorbackground, + white: theme?.colorbackground, fontFamily: "-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif", }); const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides); - + return ( - - {currentTheme && ( - - + <> + {theme && ( + + + + )} - + + + ); } -export default App; +export default App; \ No newline at end of file diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx index 1af49ea..3c2c345 100644 --- a/src/DataTable/DataTable.tsx +++ b/src/DataTable/DataTable.tsx @@ -6,11 +6,14 @@ import { } from "mantine-react-table"; import { memo } from "react"; import "../dataTableStyles.css"; -import { ActionIcon, Button, Flex, Text, Tooltip } from "@mantine/core"; +import { ActionIcon, Button, Flex, Text } from "@mantine/core"; import { FiPlus } from "react-icons/fi"; import { IconEdit, IconTrash } from "@tabler/icons-react"; import { useMutationAPI } from "../hooks/useAPI"; import { modals } from "@mantine/modals"; +import { actionIconClasses, buttonClasses } from "../styles"; +import { appTheme } from "../contexts/theme"; +import { useAtom } from "jotai"; export function DataTableComponent({ tableName, @@ -27,10 +30,10 @@ export function DataTableComponent({ isLoading: boolean; endpoint: string; }) { - const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI(); - const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI(); - const { mutateAsync: deleteRow, isPending: isDeletingRow } = useMutationAPI(); - + const [theme, setTheme] = useAtom(appTheme); + const { mutateAsync: createRow } = useMutationAPI(); + const { mutateAsync: editRow } = useMutationAPI(); + const { mutateAsync: deleteRow } = useMutationAPI(); const handleCreateRow: MRT_TableOptions["onCreatingRowSave"] = async ({ values, exitCreatingMode, @@ -45,7 +48,7 @@ export function DataTableComponent({ editRow({ method: "PATCH", endpoint: endpoint, body: values }); table.setEditingRow(null); }; - +console.log(theme) const openDeleteConfirmModal = (row: MRT_Row) => modals.openConfirmModal({ title: "Are you sure you want to delete this user?", @@ -55,7 +58,6 @@ export function DataTableComponent({ onConfirm: () => deleteRow({ method: "DELETE", endpoint: endpoint, body: row.original }), }); - const table = useMantineReactTable({ columns: columns, data: tableData, @@ -80,36 +82,25 @@ export function DataTableComponent({ showLoadingOverlay: isLoading, isLoading: isLoading, }, - mantineTableHeadProps: { - style: { - color: "var(--color-text-pri)", - }, - }, - mantineTableBodyCellProps: { - style: { - color: "var(--color-text-pri)", - background: "var(--color-background)", - borderRight: "none", - borderLeft: "none", - }, - }, + mantinePaperProps: {className: 'root'}, renderRowActions: ({ row, table }) => ( - - table.setEditingRow(row)}> - - - - - openDeleteConfirmModal(row)}> - - - + table.setEditingRow(row)}> + + + openDeleteConfirmModal(row)}> + + ), + mantineCreateRowModalProps: { + style: { + color: theme.colortextpri, + }, + }, renderTopToolbarCustomActions: ({ table }) => { return ( - ); diff --git a/src/contexts/theme.ts b/src/contexts/theme.ts new file mode 100644 index 0000000..bdfdc46 --- /dev/null +++ b/src/contexts/theme.ts @@ -0,0 +1,5 @@ +import { atom } from "jotai"; + +const appTheme = atom({}); + +export { appTheme } diff --git a/src/dataTableStyles.css b/src/dataTableStyles.css index 96b7fd6..d955f38 100644 --- a/src/dataTableStyles.css +++ b/src/dataTableStyles.css @@ -1,31 +1,31 @@ -.mrt-table-head-sort-button { - display: none; +.root { + --mrt-base-background-color: var(--color-background); + --mrt-striped-row-background-color: var(); + --mrt-row-hover-background-color: var(); + --mrt-striped-row-hover-background-color: var(); + --mrt-selected-row-background-color: var(); + --mrt-selected-row-hover-background-color: var(); + --mrt-pinned-row-background-color: var(); + --mrt-pinned-row-hover-background-color: var(); + --mrt-pinned-column-background-color: var(); + --mrt-dragging-hovered-border-color: var(); + --mrt-dragging-drag-border-color: var(); + --mrt-resize-column-border-color: var(); color: var(--color-text-pri) !important; } -.mrt-table-head-sort-button[data-sorted='asc'] { - display: flex; - min-height: 12px !important; - min-width: 12px !important; - max-width: 16px; - max-height: 16px; - - & > * > .tabler-icon-arrows-sort { - height: 12px !important; - width: 12px !important; - color: light-dark(--mantine-primary-color-6, --mantine-color-appGray-5); - } +.mrt-table-head-sort-button { + color: var(--color-text-pri) !important; } -.mrt-table-head-sort-button[data-sorted='desc'] { - display: flex; - min-height: 12px !important; - min-width: 12px !important; - max-width: 16px; - max-height: 16px; - & > * > .tabler-icon-arrows-sort { - height: 12px !important; - width: 12px !important; - color: light-dark(--mantine-primary-color-6, --mantine-color-appGray-5); - } +.mantine-Input-input { + color: var(--color-text-pri) !important; } + +.mantine-Select-input { + color: var(--color-text-pri) !important; +} + +.mantine-Select-option { + color: var(--color-text-pri) !important; +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index f2eb3d0..5cac195 100644 --- a/src/index.css +++ b/src/index.css @@ -1 +1,12 @@ -@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap'); \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap'); + +.mrt-edit-action-buttons { + .mantine-Button-root[data-variant="subtle"] { + color: var(--color-text-pri) !important; + background-color: var(--color-text-pri) !important; + } + .mantine-Button-root[data-variant="filled"] { + color: var(--color-text-pri) !important; + background-color: var(--color-text-pri) !important; + } +} \ No newline at end of file diff --git a/src/pages/homepage/components/Search.tsx b/src/pages/homepage/components/Search.tsx index 14976c5..8882ef9 100644 --- a/src/pages/homepage/components/Search.tsx +++ b/src/pages/homepage/components/Search.tsx @@ -10,12 +10,19 @@ export default function Search() { const [providerURL, setProviderURL] = useState( "https://www.google.com/search?q=", ); + const [value, setValue] = useState(""); const handleKeyPress = (item: any) => { - const option = + let option = '' + let subtext = '' + if (item.target.value.startsWith("/")) { + option = item.target.value.substr(1, item.target.value.indexOf(" ") - 1) || item.target.value.substr(1); - const subtext = item.target.value.substr(2 + option.length); + subtext = item.target.value.substr(2 + option.length); + } else { + subtext = item.target.value; + } if (item.key === "Enter") { if (item.target.value.startsWith("/")) { open(`${providerURL}${subtext}`, "_self"); @@ -63,25 +70,25 @@ export default function Search() { classNames={textInputClasses} spellCheck="true" leftSection={providerLabel} + value={value} + data-active={value !== ''} onChange={(item: any) => { + setValue(item.currentTarget.value) if (item.target.value.startsWith("/")) { - setProviderLabel( - providers?.find( - (p: any) => p.prefix === item.target.value.split(" ")[0], - ).name, - ); - setProviderURL( - providers?.find( - (p: any) => p.prefix === item.target.value.split(" ")[0], - ).url, - ); + const provider = providers?.find( + (p: any) => p.prefix === item.target.value.split(" ")[0], + ) + setProviderLabel(provider?.name || "Invalid Search"); + setProviderURL(provider?.url); } else { setProviderLabel("Google Search"); setProviderURL("https://www.google.com/search?q="); } }} onKeyUp={(item: any) => { - handleKeyPress(item); + if(providerLabel !== "Invalid Search"){ + handleKeyPress(item); + } }} /> diff --git a/src/pages/settings/components/Themes.tsx b/src/pages/settings/components/Themes.tsx index dd2529e..030ce7a 100644 --- a/src/pages/settings/components/Themes.tsx +++ b/src/pages/settings/components/Themes.tsx @@ -7,10 +7,8 @@ import { ColorPicker, ColorSwatch, Divider, - Grid, Group, Modal, - SimpleGrid, Stack, Text, TextInput, @@ -19,7 +17,7 @@ import { FiEdit, FiPlus, FiSave, FiTrash, FiX } from "react-icons/fi"; import { useDisclosure, useLocalStorage } from "@mantine/hooks"; import "@mantine/core/styles/ModalBase.css"; import "@mantine/core/styles/Modal.css"; -import { actionIconClasses, modalClasses, textClasses } from "../../../styles"; +import { actionIconClasses, buttonClasses, modalClasses, textClasses } from "../../../styles"; import ThemeModalContent from "./ThemeModalContent"; import { modals } from "@mantine/modals"; function ThemesSettings({ theme }: any) { @@ -84,13 +82,6 @@ function ThemesSettings({ theme }: any) { <>