feat: navbar

server/index.ts

@@ -36,7 +36,8 @@ app.use(morgan("[:date[iso]] :url :method :status :response-time ms - :res[conte
 SuperTokens.init({
 	framework: "express",
 	supertokens: {
-		connectionURI: "http://localhost:3567",
+		connectionURI: "https://st-dev-f7b51bf0-6f37-11ee-ab56-97ec83be9019.aws.supertokens.io",
+		apiKey: "JHF7i8m3=333kML7N7AuP7nPmI",
 	},
 	appInfo: {
 		appName: "Dashboard Dev Node",

src/App.tsx

@@ -19,7 +19,6 @@ import { getDashboardAppBasePath } from "./utils";
 
 // This is to make sure that images are packed in the build folder
 import "./images";
-import SignOutBtn from "./ui/components/auth/SignOutBtn";
 import AuthWrapper from "./ui/components/authWrapper";
 import ErrorBoundary from "./ui/components/errorboundary";
 import { AccessDeniedModal } from "./ui/components/layout/accessDeniedModal";
@@ -29,6 +28,7 @@ import { ToastNotificationContainer } from "./ui/components/toast/toastNotificat
 import { AccessDeniedContextProvider } from "./ui/contexts/AccessDeniedContext";
 import { PopupContentContextProvider } from "./ui/contexts/PopupContentContext";
 import { TenantsListContextProvider } from "./ui/contexts/TenantsListContext";
+import MainLayout from "./ui/layouts/mainLayout";
 import UserRolesList from "./ui/pages/userroles";
 
 function App() {
@@ -41,21 +41,22 @@ function App() {
 						<TenantsListContextProvider>
 							<AuthWrapper>
 								<Router basename={getDashboardAppBasePath()}>
-									<SignOutBtn />
-									<Routes>
-										<Route
-											path="/"
-											element={<UsersListPage />}
-										/>
-										<Route
-											path="/roles"
-											element={<UserRolesList />}
-										/>
-										<Route
-											path="*"
-											element={<UsersListPage />}
-										/>
-									</Routes>
+									<MainLayout>
+										<Routes>
+											<Route
+												path="/"
+												element={<UsersListPage />}
+											/>
+											<Route
+												path="/roles"
+												element={<UserRolesList />}
+											/>
+											<Route
+												path="*"
+												element={<UsersListPage />}
+											/>
+										</Routes>
+									</MainLayout>
 								</Router>
 								<AccessDeniedModal />
 								<ToastNotificationContainer />

src/ui/components/auth/SignOutBtn.tsx

@@ -1,13 +1,14 @@
 import useAuthService from "../../../api";
+import Button from "../button";
 import "./SignOutBtn.scss";
 const SignOutBtn = () => {
 	const { logout } = useAuthService();
 	return (
-		<button
-			id="sign-out-btn"
+		<Button
+			color="outline"
 			onClick={logout}>
 			Sign Out
-		</button>
+		</Button>
 	);
 };
 

src/ui/components/header/header.scss

@@ -0,0 +1,28 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+.st-header {
+	position: fixed;
+	width: 100%;
+	z-index: 100;
+
+	display: flex;
+	padding: 16px 18px;
+	justify-content: space-between;
+	align-items: center;
+
+	background: #fff;
+	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
+}

src/ui/components/header/index.tsx

@@ -0,0 +1,34 @@
+/* Copyright (c) 2022, VRAI Labs and/or its affiliates. All rights reserved.
+ *
+ * This software is licensed under the Apache License, Version 2.0 (the
+ * "License") as published by the Apache Software Foundation.
+ *
+ * You may not use this file except in compliance with the License. You may
+ * obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getImageUrl } from "../../../utils";
+import SignOutBtn from "../auth/SignOutBtn";
+
+import "./header.scss";
+
+export const LOGO_LIGHT = getImageUrl("ST_icon_light_theme.svg");
+
+export default function Header() {
+	return (
+		<header className="st-header">
+			<img
+				className="logo"
+				src={LOGO_LIGHT}
+				alt="Supertokens"
+			/>
+			<SignOutBtn />
+		</header>
+	);
+}

src/ui/components/sidebar/sidebar.scss

@@ -8,6 +8,7 @@
 	z-index: 10;
 
 	ul {
+		margin-top: 50px;
 		list-style-type: none;
 	}
 

src/ui/contexts/AppEnvContext.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import MainLayout from "../layouts/mainLayout";
 
 interface IAppEnvContext {
 	connectionURI: string;
@@ -32,9 +31,5 @@ export const AppEnvContextProvider: React.FC<IAppEnvContextProviderProps> = ({ c
 		isDemoConnectionURI: isDemoConnectionUri(connectionURI),
 	};
 
-	return (
-		<AppEnvContext.Provider value={contextValue}>
-			<MainLayout>{children}</MainLayout>
-		</AppEnvContext.Provider>
-	);
+	return <AppEnvContext.Provider value={contextValue}>{children}</AppEnvContext.Provider>;
 };

src/ui/layouts/mainLayout.scss

@@ -2,6 +2,7 @@
 	display: block;
 
 	.main-content {
+		margin-top: 44px;
 		margin-left: var(--sidebar-width);
 		min-height: 100vh;
 	}

src/ui/layouts/mainLayout.tsx

@@ -1,4 +1,5 @@
 import { Footer } from "../components/footer/footer";
+import Header from "../components/header";
 import SideBar from "../components/sidebar";
 
 import "./mainLayout.scss";
@@ -9,14 +10,17 @@ type MainLayoutProps = {
 
 export default function MainLayout({ children }: MainLayoutProps) {
 	return (
-		<main className="main-layout-container">
-			<SideBar />
-			<section className="main-content">{children}</section>
-			<Footer
-				colorMode="dark"
-				horizontalAlignment="center"
-				verticalAlignment="center"
-			/>
-		</main>
+		<>
+			<Header />
+			<main className="main-layout-container">
+				<SideBar />
+				<section className="main-content">{children}</section>
+				<Footer
+					colorMode="dark"
+					horizontalAlignment="center"
+					verticalAlignment="center"
+				/>
+			</main>
+		</>
 	);
 }

src/ui/pages/userroles/index.scss

@@ -16,7 +16,7 @@
 .userroles-container {
 	max-width: var(--container-width);
 	height: 100vh;
-	padding: 72px 40px 48px;
+	padding: 72px 0px 0px;
 	margin: auto;
 
 	.userroles-title {
@@ -32,3 +32,9 @@
 		margin-bottom: 48px;
 	}
 }
+
+@media (max-width: 1024px) {
+	.userroles-container {
+		padding: 72px 40px 48px;
+	}
+}

src/ui/pages/usersList/UsersList.tsx

@@ -26,7 +26,6 @@ import { localStorageHandler } from "../../../services/storage";
 import { AppEnvContextProvider, useAppEnvContext } from "../../../ui/contexts/AppEnvContext";
 import { getApiUrl, getAuthMode, isSearchEnabled, useFetchData } from "../../../utils";
 import { package_version } from "../../../version";
-import { LOGO_ICON_LIGHT } from "../../components/footer/footer";
 import InfoConnection from "../../components/info-connection/info-connection";
 import NoUsers from "../../components/noUsers/NoUsers";
 import Search from "../../components/search";
@@ -253,11 +252,6 @@ export const UsersList: React.FC<UserListProps> = ({
 		<div
 			className="users-list"
 			style={css}>
-			<img
-				className="title-image"
-				src={LOGO_ICON_LIGHT}
-				alt="Auth Page"
-			/>
 			<h1 className="users-list-title">
 				User Management <span className="pill paid-feature-badge">Beta</span>
 			</h1>