From 8152d3fe73485141bb8c60d360082cdae247fd28 Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Tue, 20 Aug 2024 15:52:52 -0500 Subject: [PATCH] More styling --- index.html | 4 +- package.json | 2 +- public/gun.jpg | Bin 0 -> 5772 bytes src/App.tsx | 30 ++++++++----- src/DataTable/DataTable.tsx | 53 ++++++++++------------- src/contexts/theme.ts | 5 +++ src/dataTableStyles.css | 50 ++++++++++----------- src/index.css | 13 +++++- src/pages/homepage/components/Search.tsx | 33 ++++++++------ src/pages/settings/components/Themes.tsx | 13 ++---- src/styles/Button.module.css | 18 ++++++++ src/styles/Tabs.module.css | 7 +++ src/styles/TextInput.module.css | 15 +++++++ 13 files changed, 148 insertions(+), 95 deletions(-) create mode 100644 public/gun.jpg create mode 100644 src/contexts/theme.ts 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 0000000000000000000000000000000000000000..ac6a6cfe94e59b4ae9d72f585846d4e90f3e2e80 GIT binary patch literal 5772 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 L#w%&y>)C$+p3bBv literal 0 HcmV?d00001 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) { <>