queue creation logic

frontend/app/src/pages/AppRoutes.tsx

@@ -11,6 +11,8 @@ import DashboardPage from "./DashboardPage";
 import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
 import NotFoundPage from "./NotFoundPage";
+import CreateQueueCard from "../components/queue/CreateQueueCard";
+import NewQueuePage from "./NewQueuePage";
 
 const AppRoutes = ({ children }: { children: ReactNode }) => {
   store.dispatch(getLocalToken());
@@ -22,6 +24,7 @@ const AppRoutes = ({ children }: { children: ReactNode }) => {
       <Routes>
         <Route path="/" element={<MainPage />} />
         <Route path="/dashboard" element={<DashboardPage />} />
+        <Route path="/dashboard/new" element={<NewQueuePage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </BrowserRouter>

frontend/app/src/pages/MainPage.tsx

@@ -3,6 +3,7 @@ import "./styles.css";
 import logo from "../../static/logo-full.png";
 import { Button } from "antd";
 import tr from "../config/translation";
+import { isMobile } from "react-device-detect";
 
 const MainPage = () => {
   return (
@@ -13,7 +14,9 @@ const MainPage = () => {
       </p>
       <div className="button-box">
         <Button size="large">{tr("Join a queue")}</Button>
-        <div style={{ width: "3rem" }} />
+        {!(
+          isMobile && window.screen.orientation.type === "portrait-primary"
+        ) && <div style={{ width: "3rem" }} />}
         <Button size="large">{tr("Take a tour")}</Button>
       </div>
     </div>

frontend/app/src/pages/NewQueuePage.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import "./styles.css";
+import { useSelector } from "react-redux";
+import { StorePrototype } from "../config/store";
+import tr from "../config/translation";
+import Title from "antd/es/typography/Title";
+import CreateQueueCard from "../components/queue/CreateQueueCard";
+
+const NewQueuePage = () => {
+  const user = useSelector((state: StorePrototype) => state.auth.user);
+  return user ? (
+    <CreateQueueCard />
+  ) : (
+    <Title level={2}>{tr("Log in first")}</Title>
+  );
+};
+
+export default NewQueuePage;

frontend/app/src/pages/styles.css

@@ -1,46 +1,45 @@
-
 @keyframes cardPopup {
-    0% {
-      transform: translateY(20%);
-      opacity: 0%;
-    }
-    50% {
-      transform: translateY(3%);
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 100%;
-    }
+  0% {
+    transform: translateY(20%);
+    opacity: 0%;
   }
+  50% {
+    transform: translateY(3%);
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 100%;
+  }
+}
 
 .card {
-    animation: 0.5s ease-out 0s 1 cardPopup;
-    background: #001529;
-    margin-top: 0.5rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
-    border-radius: 10px;
-  }
+  animation: 0.5s ease-out 0s 1 cardPopup;
+  background: #001529;
+  margin-top: 0.5rem;
+  margin-right: 1rem;
+  margin-left: 1rem;
+  border-radius: 10px;
+}
 
 .main {
-    font-family: "Comfortaa", sans-serif;
-    padding: 3rem;
-    display: flex;
-    flex-flow: column;
-    justify-items: center;
-    align-items: center;
-    align-content: space-between;
+  user-select: none;
+  padding: 3rem;
+  display: flex;
+  flex-flow: column;
+  justify-items: center;
+  align-items: center;
+  align-content: space-between;
 }
 
 .image {
-    height: 100px;
-    width: auto;
+  height: 100px;
+  width: auto;
 }
 
 .button-box {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-}
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}