Skip to content

Commit

Permalink
Added SideNav
Browse files Browse the repository at this point in the history
  • Loading branch information
@BradyMitch
BradyMitch committed Nov 4, 2024
1 parent de49883 commit 23eea6b
Show file tree
Hide file tree
Showing 12 changed files with 173 additions and 211 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ The DATS project will be transferring inactive Full Retention (FR) government di

To switch API environments:

1. In the app, go to `Edit > Select API URL`.
1. In the app, go to `Edit > Select Environment`.

2. Choose `Local`, `Dev`, `Test`, or `Prod`.
- Default: `Local` during development using `npm run dev`, `Prod` in executable builds.
Expand Down
8 changes: 7 additions & 1 deletion desktop/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,15 @@
},
"dependencies": {
"@bcgov/citz-imb-sso-js-core": "1.0.0",
"@bcgov/design-system-react-components": "0.4.0",
"@electron-toolkit/preload": "3.0.1",
"@electron-toolkit/utils": "3.0.0",
"electron-cookies": "1.1.0"
"@emotion/react": "11.13.3",
"@emotion/styled": "11.13.0",
"@mui/icons-material": "6.1.6",
"@mui/material": "6.1.6",
"electron-cookies": "1.1.0",
"react-router-dom": "6.27.0"
},
"devDependencies": {
"@biomejs/biome": "1.9.3",
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/main/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ const menuTemplate = [
label: "Edit",
submenu: [
{
label: "Select API URL",
label: "Select Environment",
submenu: [
{
label: "Local",
Expand Down
73 changes: 15 additions & 58 deletions desktop/src/renderer/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useEffect, useState } from "react";
import { AuthButton, ProcessFolderButton, Versions, VPNPopup } from "./components";
import electronLogo from "./assets/electron.svg";
import { SideNav, VPNPopup } from "./components";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { FileListPage, HomePage, SendRecordsPage } from "./pages";

function App(): JSX.Element {
const [api] = useState(window.api); // Preload scripts
const [apiStatus, setApiStatus] = useState<string>("Checking...");
const [showVPNPopup, setShowVPNPopup] = useState<boolean | null>(null);

// Authentication state
Expand Down Expand Up @@ -42,17 +42,8 @@ function App(): JSX.Element {
setShowVPNPopup(!ipStatusOK);
};

const handleAPIStatusUpdate = async () => {
const url = await api.getCurrentApiUrl();
const apiStatusOK = await api.checkApiStatus(url);
setApiStatus(apiStatusOK ? "Online" : "Offline");
};

// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
useEffect(() => {
// Check if API is health upon first load
handleAPIStatusUpdate();

// Check for VPN or gov Network use on load, and every 5 seconds
handleIPStatusUpdate();
const interval = setInterval(handleIPStatusUpdate, 5 * 1000);
Expand All @@ -62,54 +53,20 @@ function App(): JSX.Element {
};
}, []);

const handleTestRoute = async () => {
const url = await api.getCurrentApiUrl();
const [error, response] = await api.sso.fetchProtectedRoute(`${url}/test`, accessToken);

if (error) return console.log("Error in fetch: ", error);
const result = await response.result.json;

console.log("Result: ", result);
};

return (
<>
<img alt="logo" className="logo" src={electronLogo} />
<div className="creator">Digital Archives Transfer Service</div>
<div className="text">
Build an Electron app with <span className="react">React</span> and{" "}
<span className="ts">TypeScript</span>
</div>
<p className="tip">
Please try pressing <code>Ctrl + Shift + I or Cmd + Option + I</code> to open the devTools
</p>
<div className="status">
<strong>API Status:</strong> {apiStatus}
</div>
<div className="tip">
{accessToken && `Hello ${api.sso.getUser(accessToken)?.display_name}!`}
</div>
<div className="actions">
<div className="action">
<AuthButton accessToken={accessToken} idToken={idToken} />
</div>
<div className="action">
<button type="button" onClick={handleTestRoute}>
Log Protected Route Test
</button>
</div>
<div className="action">
<button type="button" onClick={() => console.log("User: ", api.sso.getUser(accessToken))}>
Log User
</button>
</div>
<div className="action">
<ProcessFolderButton />
</div>
<BrowserRouter>
<div style={{ display: "flex" }}>
<SideNav />
<main style={{ flexGrow: 1, padding: "16px" }}>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/file-list" element={<FileListPage />} />
<Route path="/send-records" element={<SendRecordsPage />} />
</Routes>
</main>
{showVPNPopup && <VPNPopup />}
</div>
<Versions />
{showVPNPopup && <VPNPopup />}
</>
</BrowserRouter>
);
}

Expand Down
90 changes: 40 additions & 50 deletions desktop/src/renderer/src/assets/base.css
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,57 @@
:root {
--ev-c-white: #ffffff;
--ev-c-white-soft: #f8f8f8;
--ev-c-white-mute: #f2f2f2;

--ev-c-black: #1b1b1f;
--ev-c-black-soft: #222222;
--ev-c-black-mute: #282828;

--ev-c-gray-1: #515c67;
--ev-c-gray-2: #414853;
--ev-c-gray-3: #32363f;

--ev-c-text-1: rgba(255, 255, 245, 0.86);
--ev-c-text-2: rgba(235, 235, 245, 0.6);
--ev-c-text-3: rgba(235, 235, 245, 0.38);

--ev-button-alt-border: transparent;
--ev-button-alt-text: var(--ev-c-text-1);
--ev-button-alt-bg: var(--ev-c-gray-3);
--ev-button-alt-hover-border: transparent;
--ev-button-alt-hover-text: var(--ev-c-text-1);
--ev-button-alt-hover-bg: var(--ev-c-gray-2);
--ev-c-white: #ffffff;
--ev-c-white-soft: #f8f8f8;
--ev-c-white-mute: #f2f2f2;

--ev-c-black: #1b1b1f;
--ev-c-black-soft: #222222;
--ev-c-black-mute: #282828;

--ev-c-gray-1: #515c67;
--ev-c-gray-2: #414853;
--ev-c-gray-3: #32363f;

--ev-c-text-1: #2c2d30;
--ev-c-text-2: rgba(235, 235, 245, 0.6);
--ev-c-text-3: rgba(235, 235, 245, 0.38);

--ev-button-alt-border: transparent;
--ev-button-alt-text: var(--ev-c-text-1);
--ev-button-alt-bg: var(--ev-c-gray-3);
--ev-button-alt-hover-border: transparent;
--ev-button-alt-hover-text: var(--ev-c-text-1);
--ev-button-alt-hover-bg: var(--ev-c-gray-2);
}

:root {
--color-background: var(--ev-c-black);
--color-background-soft: var(--ev-c-black-soft);
--color-background-mute: var(--ev-c-black-mute);
--color-background: var(--ev-c-black);
--color-background-soft: var(--ev-c-black-soft);
--color-background-mute: var(--ev-c-black-mute);

--color-text: var(--ev-c-text-1);
--color-text: var(--ev-c-text-1);
}

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
box-sizing: border-box;
margin: 0;
font-weight: normal;
}

ul {
list-style: none;
list-style: none;
}

body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-top: 1px solid #e3e3e3;
min-height: 100vh;
color: var(--color-text);
background: white;
line-height: 1.6;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
101 changes: 1 addition & 100 deletions desktop/src/renderer/src/assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ body {
align-items: center;
justify-content: center;
overflow: hidden;
background-image: url("./wavy-lines.svg");
background-size: cover;
user-select: none;
}

Expand All @@ -21,8 +19,7 @@ code {
padding: 3px 5px;
border-radius: 2px;
background-color: var(--color-background-mute);
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
"Liberation Mono", monospace;
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 85%;
}

Expand Down Expand Up @@ -72,102 +69,6 @@ code {
font-weight: 600;
}

.react {
background: -webkit-linear-gradient(315deg, #087ea4 55%, #7c93ee);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}

.ts {
background: -webkit-linear-gradient(315deg, #3178c6 45%, #f0dc4e);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}

.actions {
display: flex;
padding-top: 32px;
margin: -6px;
flex-wrap: wrap;
justify-content: flex-start;
}

.action {
flex-shrink: 0;
padding: 6px;
}

.action button {
cursor: pointer;
text-decoration: none;
display: inline-block;
border: 1px solid transparent;
text-align: center;
font-weight: 600;
white-space: nowrap;
border-radius: 20px;
padding: 0 20px;
line-height: 38px;
font-size: 14px;
border-color: var(--ev-button-alt-border);
color: var(--ev-button-alt-text);
background-color: var(--ev-button-alt-bg);
}

.action a {
cursor: pointer;
text-decoration: none;
display: inline-block;
border: 1px solid transparent;
text-align: center;
font-weight: 600;
white-space: nowrap;
border-radius: 20px;
padding: 0 20px;
line-height: 38px;
font-size: 14px;
border-color: var(--ev-button-alt-border);
color: var(--ev-button-alt-text);
background-color: var(--ev-button-alt-bg);
}

.action a:hover {
border-color: var(--ev-button-alt-hover-border);
color: var(--ev-button-alt-hover-text);
background-color: var(--ev-button-alt-hover-bg);
}

.versions {
position: absolute;
bottom: 30px;
margin: 0 auto;
padding: 15px 0;
font-family: "Menlo", "Lucida Console", monospace;
display: inline-flex;
overflow: hidden;
align-items: center;
border-radius: 22px;
background-color: #202127;
backdrop-filter: blur(24px);
}

.versions li {
display: block;
float: left;
border-right: 1px solid var(--ev-c-gray-1);
padding: 0 20px;
font-size: 14px;
line-height: 14px;
opacity: 0.8;
&:last-child {
border: none;
}
}

.vpn-popup-overlay {
position: fixed;
top: 0;
Expand Down
Loading

0 comments on commit 23eea6b

Please sign in to comment.