Setup Layout better

tgstation · Oct 8, 2024 · 7e4806e · 7e4806e
1 parent 9a0bf28
commit 7e4806e
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 19 deletions.
diff --git a/src/components/core/Layout/Layout.css b/src/components/core/Layout/Layout.css
diff --git a/src/components/core/Layout/Layout.tsx b/src/components/core/Layout/Layout.tsx
@@ -5,22 +5,21 @@ import Router from "../Router/Router";
 
 import ErrorBoundary from "@/components/utils/ErrorBoundary/ErrorBoundary";
 import { ICredentials } from "@/lib/Credentials";
-import "./Layout.css";
 
 interface IProps {
     setTemporaryCredentials: (credentials: ICredentials) => void;
 }
 
 const Layout = (props: IProps) => {
     return (
-        <div className="core-Layout">
-            <ErrorBoundary>
-                <Navbar />
+        <ErrorBoundary>
+            <Navbar />
+            <div className="mt-16">
                 <Router setTemporaryCredentials={props.setTemporaryCredentials} />
-                <ReportIssue />
-                <Logo />
-            </ErrorBoundary>
-        </div>
+            </div>
+            <ReportIssue />
+            <Logo />
+        </ErrorBoundary>
     );
 };
 

diff --git a/src/components/core/Logo/Logo.tsx b/src/components/core/Logo/Logo.tsx
@@ -7,7 +7,7 @@ import logo from "@/images/logo.svg";
 const Logo = () => {
     const [meme, setMeme] = useState(4); // chosen by fair dice roll
     return (
-        <>
+        <div className="fixed bottom-0 right-0 mb-1 mr-1">
             <TooltipProvider>
                 <Tooltip
                     onOpenChange={open => {
@@ -16,14 +16,14 @@ const Logo = () => {
                         }
                     }}>
                     <TooltipTrigger>
-                        <img className="nowrap corner-logo" width={50} height={50} src={logo} />
+                        <img className="nowrap" width={50} height={50} src={logo} />
                     </TooltipTrigger>
                     <TooltipContent>
                         <FormattedMessage id={`view.meme_${meme}`} />
                     </TooltipContent>
                 </Tooltip>
             </TooltipProvider>
-        </>
+        </div>
     );
 };
 

diff --git a/src/components/core/Navbar/Navbar.tsx b/src/components/core/Navbar/Navbar.tsx
@@ -17,9 +17,9 @@ const Navbar = () => {
     ];
 
     return (
-        <nav>
+        <nav className="fixed top-0 left-0 right-0 z-50 bg-primary shadow-md">
             <div className="container mx-1 px-4 sm:px-6 bg-primary shadow-md">
-                <div className="flex items-center h-16">
+                <div className="flex items-center justify-between h-16">
                     <div className="flex items-center">
                         <a href="/" className="text-xl font-bold text-white">
                             tgstation-server

diff --git a/src/components/core/ReportIssue/ReportIssue.tsx b/src/components/core/ReportIssue/ReportIssue.tsx
@@ -7,12 +7,11 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 
 const ReportIssue = () => {
     return (
-        <>
+        <div className="fixed bottom-0 left-0 ml-1 mb-1">
             <TooltipProvider>
                 <Tooltip>
                     <TooltipTrigger>
                         <Button
-                            className="report-issue"
                             onClick={() =>
                                 window.open(
                                     "https://github.com/tgstation/tgstation-server-webpanel/issues/new"
@@ -26,7 +25,7 @@ const ReportIssue = () => {
                     </TooltipContent>
                 </Tooltip>
             </TooltipProvider>
-        </>
+        </div>
     );
 };