Skip to content

Commit

Permalink
Updates:
Browse files Browse the repository at this point in the history 
Use dedicated lightMode/darkMode css classes so I can change entire theme from either CSS class
Add dark mode css class where needed
Remove unused components & CSS classes
Hide delete column when editing source or types
Fix placement of save/cancel icons in WL which was too high up and didnt look good in light mode
Fix bug when closing detail where if you go to admin you cant switch tabs because isadding wasnt set to false
  • Loading branch information
@SegiH
SegiH committed Aug 31, 2024
1 parent 3b865a9 commit 17d9258
Show file tree
Hide file tree
Showing 25 changed files with 168 additions and 192 deletions.
4 changes: 2 additions & 2 deletions src/app/404/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ export default function ErrorPage() {
const router = useRouter();

return (
<div className={`${!darkMode ? " blackForeground whiteBackground" : " whiteForeground blackBackground"}`}>
<div className={`${!darkMode ? " lightMode" : " darkMode"}`}>
<span>
<img src="/404.jpg" alt="Uh oh. Something went wrong" />

<br /><br />

<a className={`clickable largeText ${!darkMode ? " blackForeground whiteBackground" : " whiteForeground blackBackground"}`} onClick={() => router.push("/")}>Go Home</a>
<a className={`clickable largeText ${!darkMode ? " lightMode" : " darkMode"}`} onClick={() => router.push("/")}>Go Home</a>

<h1>{isErrorMessage}</h1>
</span>
Expand Down
3 changes: 2 additions & 1 deletion src/app/Admin/EditToolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const EditToolbar = ({ section, setRowModesModel, setShowActiveBugLogs, showActi

const {
bugLogs,
darkMode,
getFormattedDate,
isAdding,
isEditing,
Expand Down Expand Up @@ -90,7 +91,7 @@ const EditToolbar = ({ section, setRowModesModel, setShowActiveBugLogs, showActi
{section === "Bug Log" &&
<span>
Show Active Bug Logs
<input type="checkbox" checked={showActiveBugLogs} onChange={(event) => setShowActiveBugLogs(event.target.checked)} />
<input className={`${!darkMode ? "lightMode" : "darkMode"}`} type="checkbox" checked={showActiveBugLogs} onChange={(event) => setShowActiveBugLogs(event.target.checked)} />
</span>
}
</GridToolbarContainer>
Expand Down
26 changes: 17 additions & 9 deletions src/app/Admin/ManageUserAccounts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const EditToolbar = require("./EditToolbar").default;
const GridEventListener = require("@mui/x-data-grid").GridEventListener;
const GridParams = require("@mui/x-data-grid").GridParams;
const GridActionsCellItem = require("@mui/x-data-grid").GridActionsCellItem;
const GridColumnHeaderParams = require("@mui/x-data-grid").GridColumnHeaderParams;
const GridRenderEditCellParams = require("@mui/x-data-grid").GridRenderEditCellParams;
const GridRowModes = require("@mui/x-data-grid").GridRowModes;
const IUser = require("../interfaces/IUser");
Expand Down Expand Up @@ -280,16 +281,22 @@ const ManageUserAccounts = () => {
width: 100,
editable: false,
type: "number",
headerClassName: !darkMode ? "lightMode" : "darkMode",
renderCell: (params: typeof GridRenderEditCellParams) => {
return (
<div>{params.value}</div>
<div className={`${!darkMode ? "lightMode" : "darkMode"}`}>{params.value}</div>
)},
},
{
field: "Username",
headerName: "User name",
editable: true,
width: 150,
headerClassName: !darkMode ? "lightMode" : "darkMode",
renderCell: (params: typeof GridRenderEditCellParams) => {
return (
<div className={`${!darkMode ? "lightMode" : "darkMode"}`}>{params.value}</div>
)},
},
{
field: "Realname",
Expand All @@ -302,6 +309,7 @@ const ManageUserAccounts = () => {
headerName: "Password",
editable: false,
width: 230,
headerClassName: !darkMode ? "lightMode" : "darkMode",
renderCell: (params: typeof GridParams) => {
return (
<Button
Expand All @@ -328,8 +336,9 @@ const ManageUserAccounts = () => {
enabled: false,
width: 130,
type: "boolean",
headerClassName: !darkMode ? "lightMode" : "darkMode",
renderCell: (params: typeof GridRenderEditCellParams) => (
<div>{params.value == true ? "Y" : "N"}</div>
<div className={`${!darkMode ? "lightMode" : "darkMode"}`}>{params.value == true ? "Y" : "N"}</div>
),
},
{
Expand All @@ -338,8 +347,9 @@ const ManageUserAccounts = () => {
editable: true,
width: 130,
type: "boolean",
headerClassName: !darkMode ? "lightMode" : "darkMode",
renderCell: (params: typeof GridRenderEditCellParams) => (
<div>{params.value == true ? "Y" : "N"}</div>
<div className={`${!darkMode ? "lightMode" : "darkMode"}`}>{params.value == true ? "Y" : "N"}</div>
),
},
{
Expand All @@ -348,13 +358,14 @@ const ManageUserAccounts = () => {
headerName: "Actions",
width: 100,
cellClassName: "actions",
headerClassName: !darkMode ? "lightMode" : "darkMode",
getActions: ({ id }: { id: number }) => {
const newestUser = users?.filter((user: typeof IUser) => user.UserID === id && user.isNew === true);

if (editingId === null && !isAdding && !isEditing) {
return [<GridActionsCellItem key={id} icon={EditIconComponent} label="Edit" className="icon textPrimary" onClick={enterEditModeClickHandler(id)} color="inherit" />];
return [<GridActionsCellItem key={id} icon={EditIconComponent} label="Edit" className={`icon`} onClick={enterEditModeClickHandler(id)} color="inherit" />];
} else if ((isEditing && editingId === id) || (isAdding && newestUser.length === 1)) {
return [<GridActionsCellItem key={id} icon={SaveIconComponent} className="icon textPrimary" label="Save" onClick={saveRowEditClickHandler(id)} color="primary" />, <GridActionsCellItem key={id} icon={CancelIconComponent} label="Cancel" className="icon textPrimary" onClick={cancelRowEditClickHandler(id)} color="error" />];
return [<GridActionsCellItem key={id} icon={SaveIconComponent} className="icon" label="Save" onClick={saveRowEditClickHandler(id)} color="primary" />, <GridActionsCellItem key={id} icon={CancelIconComponent} label="Cancel" className="icon textPrimary" onClick={cancelRowEditClickHandler(id)} color="error" />];
} else {
return [<></>]
}
Expand Down Expand Up @@ -402,12 +413,9 @@ const ManageUserAccounts = () => {
<>
{users && users.length > 0 &&
<DataGrid
className={`${!darkMode ? " blackForeground whiteBackground" : " whiteForeground blackBackground"}`}
className={`${!darkMode ? "lightMode" : "darkMode"}`}
rows={users}
columns={columns}
sx={{
color: "white",
}}
editMode="row"
getRowId={(row: typeof IUser) => row.UserID}
rowModesModel={rowModesModel}
Expand Down
14 changes: 7 additions & 7 deletions src/app/Admin/ManageWatchListSources.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,9 @@ const ManageWatchListSources = () => {
width: 100,
renderCell: (params: typeof GridRenderEditCellParams) => {
return (
<div>{params.value}</div>
)},
<div>{params.value}</div>
)
},
},
{
field: "WatchListSourceName",
Expand Down Expand Up @@ -216,12 +217,9 @@ const ManageWatchListSources = () => {

return (
<DataGrid
className={`${!darkMode ? " blackForeground whiteBackground" : " whiteForeground blackBackground"}`}
className={`${!darkMode ? " lightMode" : " darkMode"}`}
rows={watchListSources}
columns={columns}
sx={{
color: "white",
}}
editMode="row"
getRowId={(row: typeof IWatchListSource) => row.WatchListSourceID}
rowModesModel={rowModesModel}
Expand All @@ -235,7 +233,9 @@ const ManageWatchListSources = () => {
componentsProps={{
toolbar: { section, setRowModesModel },
}}
experimentalFeatures={{ newEditingApi: true }}
columnVisibilityModel={{
deleteActions: !isAdding && !isEditing
}}
/>
);
};
Expand Down
8 changes: 4 additions & 4 deletions src/app/Admin/ManageWatchListTypes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,12 +203,9 @@ const ManageWatchListTypes = () => {

return (
<DataGrid
className={`${!darkMode ? " blackForeground whiteBackground" : " whiteForeground blackBackground"}`}
className={`${!darkMode ? " lightMode" : " darkMode"}`}
rows={watchListTypes}
columns={columns}
sx={{
color: "white",
}}
editMode="row"
getRowId={(row: typeof IWatchListType) => row.WatchListTypeID}
rowModesModel={rowModesModel}
Expand All @@ -223,6 +220,9 @@ const ManageWatchListTypes = () => {
toolbar: { section, setRowModesModel },
}}
experimentalFeatures={{ newEditingApi: true }}
columnVisibilityModel={{
deleteActions: !isAdding && !isEditing
}}
/>
);
};
Expand Down
6 changes: 3 additions & 3 deletions src/app/Admin/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,9 @@ export default function Admin() {
return (
<div>
<Tabs value={selectedTab} onChange={tabClickHandler}>
<Tab className={`${!darkMode ? " blackForeground whiteBackground" : " whiteForeground blackBackground"}`} label="Users" {...tabProps(0)} />
<Tab className={`${!darkMode ? " blackForeground whiteBackground" : " whiteForeground blackBackground"}`} label="Sources" {...tabProps(1)} />
<Tab className={`${!darkMode ? " blackForeground whiteBackground" : " whiteForeground blackBackground"}`} label="Types" {...tabProps(2)} />
<Tab className={`${!darkMode ? " lightMode" : " darkMode"}`} label="Users" {...tabProps(0)} />
<Tab className={`${!darkMode ? " lightMode" : " darkMode"}`} label="Sources" {...tabProps(1)} />
<Tab className={`${!darkMode ? " lightMode" : " darkMode"}`} label="Types" {...tabProps(2)} />
</Tabs>

<CustomTabPanel value={selectedTab} index={0}>
Expand Down
7 changes: 2 additions & 5 deletions src/app/BugLog/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ export default function BugLog() {
type: "number",
renderCell: (params: typeof GridRenderEditCellParams) => {
return (
<div style={{ color: editingId === null ? "white" : "black" }}>{typeof params.value !== "undefined" ? params.value : ""}</div>
<div className={`${!darkMode ? " lightMode" : " darkMode"}`}>{typeof params.value !== "undefined" ? params.value : ""}</div>
)
},
},
Expand Down Expand Up @@ -307,12 +307,9 @@ export default function BugLog() {
<>
Bug Log
<DataGrid
className={`${!darkMode ? " blackForeground whiteBackground" : " whiteForeground blackBackground"}`}
className={`${!darkMode ? " lightMode" : " darkMode"}`}
rows={bugLogs}
columns={columns}
sx={{
color: "white",
}}
editMode="row"
getRowId={(row: typeof IBugLog) => row.WLBugID}
getRowHeight={(params) => "auto"}
Expand Down
7 changes: 0 additions & 7 deletions src/app/Login/Login.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
/*body {
background-color: black;
}*/

.form {
background-color: rgba(255,255,255,0.13) !important;
/*background-color: white;*/
position: relative;
z-index: 1;
max-width: 360px;
Expand All @@ -17,7 +11,6 @@
}

.login-background {
background-color: white;
background-size: cover;
background-repeat: repeat;
box-sizing: border-box;
Expand Down
2 changes: 1 addition & 1 deletion src/app/Login/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export default function Login() {
<div className={`login-page`}>
<div className="form">
<form className="login-form">
<span className={`login-label ${!darkMode ? "blackForeground" : "whiteForeground"}`}>WatchList Login</span>
<span className={`login-label ${!darkMode ? " lightMode" : " darkMode"}`}>WatchList Login</span>
<input type="text" autoFocus disabled={loginSubmitted} value={username} placeholder="username" required onChange={(event) => setUsername(event.target.value)} onKeyUp={handleKeyUp} />
<input type="password" disabled={loginSubmitted} value={password} placeholder="password" required onChange={(event) => setPassword(event.target.value)} onKeyUp={handleKeyUp} />

Expand Down
2 changes: 1 addition & 1 deletion src/app/Setup/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export default function Setup() {
<div className={`login-page`}>
<div className="form">
<form className="login-form">
<span className={`login-label ${!darkMode ? "blackForeground" : "whiteForeground"}`}>WatchList Setup</span>
<span className={`login-label ${!darkMode ? " lightMode" : " darkMode"}`}>WatchList Setup</span>

<input type="text" autoFocus disabled={submitClicked} value={realname} placeholder="Name" required onChange={(event) => setRealname(event.target.value)} onKeyUp={handleKeyUp} />
<input type="text" autoFocus disabled={submitClicked} value={username} placeholder="Username" required onChange={(event) => setUsername(event.target.value)} onKeyUp={handleKeyUp} />
Expand Down
Loading

0 comments on commit 17d9258

Please sign in to comment.