Addedlogotypes

apps/front/package.json

@@ -9,7 +9,8 @@
   "devDependencies": {
     "@types/react-dom": "^17.0.9",
     "typescript": "^4.4.2",
-    "vite": "^2.5.3"
+    "vite": "^2.5.3",
+    "vite-plugin-svgr": "^0.4.0"
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",

apps/front/src/components/BuildingPlan.tsx

@@ -5,6 +5,8 @@ import { useRoomContext } from "../context";
 import { RoomDisplay } from "../types/room";
 import { Canvas } from "./Canvas";
 
+import {ReactComponent as Logotype} from './logo.svg'
+
 export type BuildingPlanProps = { width: number; height: number };
 
 const getRoomByCoord = (x: number, y: number, map: RoomDisplay[]) => {
@@ -61,6 +63,8 @@ export const BuildingPlan = ({ width, height }: BuildingPlanProps) => {
     if (index >= 0) toggleFree(index + 1);
   };
 
+  if (state.map.length === 0) return <Logotype height="50vh" />
+
   return (
     <>
       <Canvas

apps/front/src/components/Header.tsx

@@ -1,9 +1,24 @@
-import { AppBar, Toolbar, Typography } from "@material-ui/core";
+import {
+  AppBar,
+  IconButton,
+  Toolbar,
+  Typography,
+  SvgIcon,
+} from "@material-ui/core";
+
+import { ReactComponent as LogoIcon } from "./logo.svg";
 
 export const Header = () => (
   <AppBar>
     <Toolbar>
-      <Typography variant="h6">roomruler</Typography>
+      <IconButton edge="start" aria-label="logotype">
+        <SvgIcon>
+          <LogoIcon />
+        </SvgIcon>
+      </IconButton>
+      <Typography variant="h6">
+        roomruler
+      </Typography>
     </Toolbar>
   </AppBar>
 );

apps/front/src/components/logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" ><path style="fill:#ffffff;fill-opacity:1;" d="M 11.460012,1.515e-6 V 2.1549993e-4 H 1.0575403 2.3577327e-4 V 1.0565848 11.449855 H 2.16e-5 v 1.056574 h 2.1417327e-4 v 11.49357 H 1.0575403 V 12.555107 c 5.8382554,0.532282 10.4024717,5.471581 10.4024717,11.4449 l 1.057515,-8e-6 c 0,-5.64901 -3.7605698,-10.473592 -8.9135769,-12.021974 C 8.7569572,10.42946 12.517527,5.6490043 12.517527,1.515e-6 Z M 1.0575403,1.0565767 H 11.411071 C 10.910026,6.541683 6.5475024,10.900348 1.0575403,11.400949 Z" /><path style="fill:#ffffff;fill-opacity:1;" d="m 17.477568,0.02806071 v 17.45505829 0.0076 c 0.0042,3.589506 2.928819,6.509244 6.522454,6.509244 V 22.94319 c -3.024781,0 -5.464943,-2.438003 -5.464943,-5.460107 h -2.52e-4 V 0.02806071 Z" /></svg>

apps/front/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "target": "es6",
     "module": "ESNext",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vite-plugin-svgr/client"]
   },
   "include": ["src"],
   "references": [{ "path": "../../packages/messages/tsconfig.json" }]

apps/front/vite.config.js

@@ -1,9 +1,10 @@
 import { defineConfig } from "vite";
+import svgrPlugin from "vite-plugin-svgr";
 
 export default defineConfig({
   esbuild: {
     jsxInject: `import React from "react"`,
   },
   optimizeDeps: { include: ["@roomruler/messages"] },
-  
+  plugins: [svgrPlugin()],
 });