design changes

frontend/app/rsbuild.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
     port: 3000,
   },
   html: {
-    favicon: "./static/logo-square.png",
+    favicon: "./static/favicon-32x32.png",
     title: "queueful!",
     template: "./static/index.html",
   },

frontend/app/src/App.css

@@ -1,7 +1,7 @@
 body {
   margin: 0;
   color: #fff;
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Comfortaa", sans-serif;
   background-image: linear-gradient(to bottom, #020917, #101725);
 }
 

frontend/app/src/components/AuthModal.tsx

@@ -1,6 +1,10 @@
 import { Form, Input, Menu, MenuProps, Modal, Spin } from "antd";
 import "./styles.css";
-import { KeyOutlined, UserAddOutlined } from "@ant-design/icons";
+import {
+  KeyOutlined,
+  LoadingOutlined,
+  UserAddOutlined,
+} from "@ant-design/icons";
 import React, { useContext, useEffect, useState } from "react";
 import {
   TokenResponse,
@@ -83,7 +87,10 @@ const AuthModal = (props: {
       okText={current === "login" ? tr("Log in") : tr("Register")}
       confirmLoading={isLoggingIn}
     >
-      <Spin spinning={isLoggingIn || isRegistering}>
+      <Spin
+        spinning={isLoggingIn || isRegistering}
+        indicator={<LoadingOutlined style={{ fontSize: 36 }} spin />}
+      >
         <Menu
           onClick={(e) => setCurrent(e.key)}
           mode="horizontal"

frontend/app/src/config/store.ts

@@ -6,6 +6,7 @@ import {
 } from "@reduxjs/toolkit";
 import { setupListeners } from "@reduxjs/toolkit/query";
 import { AuthApi, User } from "../slice/AuthApi";
+import { QueueApi } from "../slice/QueueApi";
 
 export type AuthDataType = {
   token: string | null;
@@ -43,6 +44,7 @@ export const store = configureStore({
   reducer: {
     // Add the generated reducer as a specific top-level slice
     [AuthApi.reducerPath]: AuthApi.reducer,
+    [QueueApi.reducerPath]: QueueApi.reducer,
     auth: createReducer(initialAuthDataState, (builder) => {
       builder.addCase(updateToken, (state, action) => {
         state.token = action.payload;
@@ -81,7 +83,9 @@ export const store = configureStore({
   // Adding the api middleware enables caching, invalidation, polling,
   // and other useful features of `rtk-query`.
   middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(AuthApi.middleware),
+    getDefaultMiddleware()
+      .concat(AuthApi.middleware)
+      .concat(QueueApi.middleware),
 });
 
 // optional, but required for refetchOnFocus/refetchOnReconnect behaviors

frontend/app/src/config/style.ts

@@ -1,35 +1,14 @@
 import { ThemeConfig } from "antd";
 
 export const theme: ThemeConfig = {
-  components: {
-    Modal: {
-      contentBg: "#001529",
-    },
-    Form: {
-      labelColor: "#77828c",
-    },
-    Input: {
-      activeBg: "#001c36",
-    },
-    Button: {
-      primaryColor: "#001529",
-      defaultHoverBg: "#001529",
-      defaultHoverColor: "white",
-      colorPrimaryBgHover: "#001529",
-      // colorPrimaryHover: "#001529",
-    },
-    Message: {
-      contentBg: "#001c36",
-    },
-    Popover: {
-      colorBgElevated: "#001c36",
-    },
-  },
   token: {
-    colorText: "#ffffff",
+    colorText: "white",
-    colorBgContainer: "#001c36",
+    colorIcon: "white",
-    colorIcon: "#77828c",
+    colorPrimary: "#00d8a4",
-    colorPrimary: "#ffffff",
+    colorIconHover: "#00d8a4",
-    colorPrimaryHover: "#001529",
+    colorBgContainer: "#001d39",
+    colorBgBase: "#001529",
+    borderRadius: 5,
+    fontFamily: "Comfortaa",
   },
 };

frontend/app/src/pages/MainPage.tsx

@@ -12,8 +12,9 @@ const MainPage = () => {
         {tr("Queuing has never been so simple")}
       </p>
       <div className="button-box">
-        <Button>{tr("Join a queue")}</Button>
+        <Button size="large">{tr("Join a queue")}</Button>
-        <Button>{tr("Take a tour")}</Button>
+        <div style={{ width: "3rem" }} />
+        <Button size="large">{tr("Take a tour")}</Button>
       </div>
     </div>
   );

frontend/app/src/pages/styles.css

@@ -6,6 +6,7 @@
 
 .main {
     font-family: "Comfortaa", sans-serif;
+    padding: 3rem;
     display: flex;
     flex-flow: column;
     justify-items: center;
@@ -21,8 +22,7 @@
 .button-box {
     width: 100%;
     display: flex;
-    align-self: center;
+    justify-content: center;
-    flex-flow: row;
+    align-items: center;
-    justify-items: center;
+    flex-wrap: wrap;
-    align-content: space-around;
 }

frontend/app/src/slice/QueueApi.ts

@@ -0,0 +1,24 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { baseUrl } from "../config/baseUrl";
+import { RootState } from "../config/store";
+
+export const QueueApi = createApi({
+  reducerPath: "QueueApi",
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${baseUrl}/queue`,
+    prepareHeaders: (headers, { getState }) => {
+      const token = (getState() as RootState).auth.token;
+      if (token) {
+        headers.set("authorization", `Bearer ${token}`);
+      }
+      return headers;
+    },
+  }),
+  endpoints: (builder) => ({
+    getQueues: builder.query({
+      query: () => "/",
+    }),
+  }),
+});
+
+export const { useGetQueuesQuery } = QueueApi;