From 811978c80ab1ada72ea8cf0bf78e54a4f8252ef9 Mon Sep 17 00:00:00 2001 From: Haaaan1 <114866543+Haaaan1@users.noreply.github.com> Date: Sat, 20 Apr 2024 09:57:22 +0200 Subject: [PATCH] Revert "Feature/lobby UI" --- .../routing/routeProtectors/LobbyGuard.js | 6 +- src/components/views/Editprofile.tsx | 4 +- src/components/views/Lobby.tsx | 449 +++--------------- src/components/views/Login.tsx | 11 +- src/components/views/Profile.tsx | 4 +- src/components/views/Register.tsx | 10 +- src/styles/ui/BaseContainer.scss | 1 + src/styles/ui/Popup.scss | 32 -- src/styles/views/Lobby.scss | 266 +---------- src/styles/views/Login.scss | 11 +- src/styles/views/Register.scss | 11 +- 11 files changed, 114 insertions(+), 691 deletions(-) delete mode 100644 src/styles/ui/Popup.scss diff --git a/src/components/routing/routeProtectors/LobbyGuard.js b/src/components/routing/routeProtectors/LobbyGuard.js index c241335..7c03ec1 100644 --- a/src/components/routing/routeProtectors/LobbyGuard.js +++ b/src/components/routing/routeProtectors/LobbyGuard.js @@ -16,10 +16,8 @@ export const LobbyGuard = () => { return ; } - // Debugging - - return ; - //return ; + + return ; }; LobbyGuard.propTypes = { diff --git a/src/components/views/Editprofile.tsx b/src/components/views/Editprofile.tsx index b7afc94..a785976 100644 --- a/src/components/views/Editprofile.tsx +++ b/src/components/views/Editprofile.tsx @@ -33,8 +33,8 @@ FormField.propTypes = { const EditProfile = () => { const navigate = useNavigate(); - const userid = sessionStorage.getItem("id") ?? ""; - const currentUsername = sessionStorage.getItem("username") ?? ""; + const userid = localStorage.getItem("id") ?? ""; + const currentUsername = localStorage.getItem("username") ?? ""; const [id] = useState(userid); const [username, setUsername] = useState(currentUsername); const [birthday, setBirthday] = useState(""); diff --git a/src/components/views/Lobby.tsx b/src/components/views/Lobby.tsx index 358b3e8..2a993b5 100644 --- a/src/components/views/Lobby.tsx +++ b/src/components/views/Lobby.tsx @@ -1,115 +1,68 @@ -import React, { useRef, useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { api, handleError } from "helpers/api"; import { Spinner } from "components/ui/Spinner"; import { Button } from "components/ui/Button"; -import { useNavigate } from "react-router-dom"; +import {useNavigate} from "react-router-dom"; import BaseContainer from "components/ui/BaseContainer"; import PropTypes from "prop-types"; import "styles/views/Lobby.scss"; import { User, Room } from "types"; -import Popup from "components/ui/Popup"; -import { Dropdown } from "components/ui/Dropdown"; - - type PlayerProps = { user: User; }; type RoomComponentProps = { room: Room; }; - type RoomListProps = { rooms: Room[]; }; const Player: React.FC = ({ user }) => (
- {user.username} + {user.username}
{user.username}
); const RoomComponent: React.FC = ({ room }) => (
- {room.roomPlayersList.map((user) => ( + {room.roomPlayersList.map(user => ( ))}
{room.theme}
-
+
{room.status}
); -const RoomList: React.FC = ({ rooms }) => ( +const RoomList: React.FC = ({ rooms }) => (
- {rooms.map((room) => ( + {rooms.map(room => ( ))}
); -interface FormFieldProps { - label: string; - placeholder?: string; - value: string; - type?: string; - onChange: (value: string) => void; - disabled?: boolean; -} -const FormField: React.FC = (props) => { - return ( -
- - props.onChange(e.target.value)} - disabled={props.disabled} - /> -
- ); -}; Player.propTypes = { user: PropTypes.object, }; const mockRoomPlayers: User[] = [ - - { id: 1, username: "Alice", avatar: "grinning-face-with-sweat", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") }, - { id: 2, username: "Bob", avatar: "grinning-face-with-sweat", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") }, - { id: 3, username: "Han", avatar: "grinning-face-with-sweat", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") }, - { id: 4, username: "Li", avatar: "grinning-face-with-sweat", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") }, - { id: 5, username: "Liuz", avatar: "grinning-face-with-sweat", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") }, - + { id: 1, username: "Alice", avatar: "https://twemoji.maxcdn.com/v/latest/72x72/1f604.png", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") }, + { id: 2, username: "Bob", avatar: "https://twemoji.maxcdn.com/v/latest/72x72/1f602.png", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") }, ]; -const avatarList: string[] = [ - "grinning-face-with-sweat","horse-face", "hot-face","hushed-face", "kissing-face", - "last-quarter-moon-face","loudly-crying-face", "lying-face" -] - const mockRooms: Room[] = [ { id: "1", roomOwnerId: "1", - roomPlayersList: mockRoomPlayers, + roomPlayersList: [mockRoomPlayers[0]], theme: "Advanced", status: "In Game", maxPlayersNum: 4, - alivePlayersList: mockRoomPlayers, + alivePlayersList: [mockRoomPlayers[0]], currentPlayerIndex: 0, playToOuted: false, }, @@ -123,361 +76,105 @@ const mockRooms: Room[] = [ alivePlayersList: [mockRoomPlayers[1]], currentPlayerIndex: 1, playToOuted: false, - }, + } ]; + const Lobby = () => { const navigate = useNavigate(); - const roomCreationPopRef = useRef(null); - const profilePopRef = useRef(null); - const changeAvatarPopRef = useRef(null); - const infoPopRef = useRef(null); + const [rooms, setRooms] = useState(mockRooms); const [user, setUser] = useState(mockRoomPlayers[0]); - const [username, setUsername] = useState(null); - const [avatar, setAvatar] = useState(null); - const [roomName, setRoomName] = useState(""); - const [numRounds, setNumRounds] = useState(0); - const [roomTheme, setRoomTheme] = useState(""); const logout = async () => { - const id = sessionStorage.getItem("id"); - sessionStorage.removeItem("token"); + const id = localStorage.getItem("id"); + localStorage.removeItem("token"); //apply a post request for user logout try { - const requestBody = JSON.stringify({ id: id }); + const requestBody = JSON.stringify({id:id}); const response = await api.post("/users/logout", requestBody); console.log(response); + } catch (error) { alert(`Something went wrong during the logout: \n${handleError(error)}`); } navigate("/login"); }; - useEffect(() => { - async function fetchData() { - try { - //get all rooms - const response = await api.get("/games/lobby"); - await new Promise((resolve) => setTimeout(resolve, 1000)); - setRooms(response.data); - - console.log("request to:", response.request.responseURL); - console.log("status code:", response.status); - console.log("status text:", response.statusText); - console.log("requested data:", response.data); - - // See here to get more data. - console.log(response); - - // Get user ID from sessionStorage - const userId = sessionStorage.getItem("id"); - if (userId) { - // Get current user's information - const userResponse = await api.get(`/users/${userId}`); - setUser(userResponse.data); // Set user data from API - console.log("User data:", userResponse.data); - } else { - console.log("No user ID found in sessionStorage."); - } - } catch (error) { - console.error( - `Something went wrong while fetching the users: \n${handleError( - error - )}` - ); - console.error("Details:", error); - alert( - "Something went wrong while fetching the users! See the console for details." - ); - } - } - - fetchData().catch(error => { - console.error("Unhandled error in fetchData:", error); - }); - }, []); - - const doEdit = async () => { - try { - const requestBody = JSON.stringify({ username, avatar: avatar }); - const id = sessionStorage.getItem("id"); - console.log("Request body:", requestBody); - await api.put(`/users/${id}`, requestBody); - toggleProfilePop(); - } catch (error) { - if (error.response && error.response.data) { - alert(error.response.data.message); - } else { - console.error("Error:", error.message); - alert("An unexpected error occurred."); - } - } - }; - - const createRoom = async () => { - try { - const ownerId = sessionStorage.getItem("id"); // 假设ownerId存储在sessionStorage中 - const requestBody = JSON.stringify({ - name: roomName, - num: numRounds, - ownerId: ownerId, - theme: roomTheme - }); - - const response = await api.post("/games", requestBody); - console.log("Room created successfully:", response); - const roomId = response.roomId; - navigate(`/room=${roomId}`); - //toggleRoomCreationPop(); // 关闭创建房间的弹窗 - } catch (error) { - console.error("Error creating room:", handleError(error)); - alert(`Error creating room: ${handleError(error)}`); - } - }; - - - const toggleRoomCreationPop = () => { - // if the ref is not set, do nothing - if (!roomCreationPopRef.current) { - return; - } - // if the dialog is open, close it. Otherwise, open it. - roomCreationPopRef.current.hasAttribute("open") - ? roomCreationPopRef.current.close() - : roomCreationPopRef.current.showModal(); - }; - - const toggleProfilePop = () => { - // if the ref is not set, do nothing - if (!profilePopRef.current) { - return; - } - // if the dialog is open, close it. Otherwise, open it. - profilePopRef.current.hasAttribute("open") - ? profilePopRef.current.close() - : profilePopRef.current.showModal(); - }; - - async function enterRoom(roomId, userId) { - try { - const requestBody = JSON.stringify({ userId, roomId }); - await api.put("/games", requestBody); - } catch (error) { - console.error(`Something went wrong during the enterRoom: \n${handleError(error)}`); - } - } - - const toggleAvatarPop = () => { - // if the ref is not set, do nothing - if (!changeAvatarPopRef.current) { - return; - } - // if the dialog is open, close it. Otherwise, open it. - changeAvatarPopRef.current.hasAttribute("open") - ? changeAvatarPopRef.current.close() - : changeAvatarPopRef.current.showModal(); - }; - - const toggleInfoPop = () => { - // if the ref is not set, do nothing - if (!infoPopRef.current) { - return; - } - // if the dialog is open, close it. Otherwise, open it. - infoPopRef.current.hasAttribute("open") - ? infoPopRef.current.close() - : infoPopRef.current.showModal(); - }; - - const changeAvatar = async (newAvatar) =>{ - try { - // 更新本地状态 - setAvatar(newAvatar); - - // 构造请求体，只包含 avatar 更改 - const requestBody = JSON.stringify({ username, avatar: newAvatar }); - const id = sessionStorage.getItem("id"); - console.log("Request body:", requestBody); - // 执行更新请求 - await api.put(`/users/${id}`, requestBody); - - // 可能需要关闭弹窗或执行其他 UI 反馈 - - console.log("Avatar changed successfully"); - } catch (error) { - if (error.response && error.response.data) { - alert(error.response.data.message); - } else { - console.error("Error:", error.message); - alert("An unexpected error occurred."); - } - } + // useEffect(() => { + // async function fetchData() { + // try { + // //get all rooms + // const response = await api.get("/games/lobby"); + // await new Promise((resolve) => setTimeout(resolve, 1000)); + // setRooms(response.data); + // + // console.log("request to:", response.request.responseURL); + // console.log("status code:", response.status); + // console.log("status text:", response.statusText); + // console.log("requested data:", response.data); + // + // // See here to get more data. + // console.log(response); + // } catch (error) { + // console.error( + // `Something went wrong while fetching the users: \n${handleError( + // error + // )}` + // ); + // console.error("Details:", error); + // alert( + // "Something went wrong while fetching the users! See the console for details." + // ); + // } + // } + // + // fetchData(); + // }, []); + + const userinfo = () =>{ + return } - - const updateAvatar = (newAvatar) => { - setUser(prevUser => ({ - ...prevUser, // 复制 prevUser 对象的所有现有属性 - avatar: newAvatar // 更新 avatar 属性 - })); - }; - - const userinfo = () => { - return; - }; - - const renderRoomLists = () => { - return rooms.map((Room) => ( -
{ - e.preventDefault(); - const currentId = sessionStorage.getItem("id"); - // const isPlayerInRoom = Room.roomPlayersList.join().includes(currentId); - enterRoom(Room.id, currentId) - .then(() => { - navigate(`/room=${Room.id}`); - }) - .catch(error => { - console.error(`Something went wrong during the enterRoom: \n${handleError(error)}`); - alert(`Something went wrong during the enterRoom: \n${handleError(error)}`); - }); - }}> + return mockRooms.map(room => ( +
- {Room.roomPlayersList?.map((user, index) => ( + {room.roomPlayersList?.map((user, index) => (
- + {user.name}
{user.username}
))}
- ROOM #{Room.id} -
{Room.theme}
- - {Room.status} + ROOM #{room.id} +
{room.theme}
+ + + {room.status} +
)); }; - - + return ( + -
- + +
+ {user.name}
{user.username}
-
Kaeps
-
i
-
- {/* for clip the scrollbar inside the border */} -
-

Rooms

- {renderRoomLists()} -
- -
-
+
+ Kaeps +
+
i
+
+

Rooms

+ {renderRoomLists()}
- - -
{ - toggleAvatarPop(); - // toggleProfilePop(); - }}> - -
-
- - setUsername(e)} - /> -
- -
Name: {user.name}
-
Status: {user.status}
- -
RegisterDate: {user && new Date(user.registerDate).toLocaleDateString()}
-
Birthday: {user && new Date(user.birthday).toLocaleDateString()}
- -
- - -
- - - - -
- {avatarList?.map((avatar,index) => ( -
- { - changeAvatar(avatar).then(r => toggleProfilePop()); - - }}/> -
- ))} -
- - - - -
Create Room
- setRoomName(e.target.value)} /> - setNumRounds(parseInt(e.target.value, 10))} /> - setRoomTheme(selectedOption.value)} - /> -
- - -
- - - - - -
Here is some Guidelines....
-
- -
- ); }; diff --git a/src/components/views/Login.tsx b/src/components/views/Login.tsx index 3758f7f..c848e5f 100644 --- a/src/components/views/Login.tsx +++ b/src/components/views/Login.tsx @@ -46,9 +46,12 @@ const Login = () => { // Get the returned user and update a new object. const user = new User(response.data); - sessionStorage.setItem("token", user.token); - sessionStorage.setItem("id", user.id); - sessionStorage.setItem("username", user.username); + // Store the token into the local storage. + localStorage.setItem("token", user.token); + + // Store the username into the local storage for log out. + localStorage.setItem("id",user.id); + localStorage.setItem("username",user.username); // Login successfully worked --> navigate to the route /game in the LobbyRouter navigate("/lobby"); @@ -62,7 +65,6 @@ const Login = () => { return (
-
Kaeps
{ disabled={!username || !password || username.trim() ===" " || password.trim() ===" "} width="100%" onClick={() => doLogin()} - style={{ color: "black"}} > Login diff --git a/src/components/views/Profile.tsx b/src/components/views/Profile.tsx index bbd2161..a5ebbae 100644 --- a/src/components/views/Profile.tsx +++ b/src/components/views/Profile.tsx @@ -10,7 +10,7 @@ import { User } from "types"; const Profile = () => { const navigate = useNavigate(); const { id } = useParams<{ id: string }>(); - const localId = parseInt(sessionStorage.getItem("id") ?? "0", 10); + const localId = parseInt(localStorage.getItem("id") ?? "0", 10); const [user, setUser] = useState(""); useEffect(() => { @@ -19,7 +19,7 @@ const Profile = () => { const response = await api.get(`/users/${id}`); setUser(response.data); //update the username after editing - sessionStorage.setItem("username", response.data.username); + localStorage.setItem("username", response.data.username); } catch (error) { console.error(`Fetching user data failed: ${handleError(error)}`); alert(`Something went wrong during Fetching user: \n${handleError(error)}`); diff --git a/src/components/views/Register.tsx b/src/components/views/Register.tsx index 833d111..4987790 100644 --- a/src/components/views/Register.tsx +++ b/src/components/views/Register.tsx @@ -47,9 +47,11 @@ const Register = () => { // Get the returned user and update a new object. const user = new User(response.data); - sessionStorage.setItem("token", user.token); - sessionStorage.setItem("id", user.id); - sessionStorage.setItem("username", user.username); + // Store the token into the local storage. + localStorage.setItem("token", user.token); + localStorage.setItem("id", user.id); + // Store the username into the local storage. + localStorage.setItem("username", user.username); // Login successfully worked --> navigate to the route /game in the LobbyRouter navigate("/lobby"); } catch (error) { @@ -62,7 +64,6 @@ const Register = () => { return (
-
Kaeps
{ disabled={!username || !password ||password.indexOf(" ") !== -1|| username.indexOf(" ") !== -1} width="75%" onClick={() => doRegister()} - style={{ color: "black"}} > register diff --git a/src/styles/ui/BaseContainer.scss b/src/styles/ui/BaseContainer.scss index f236b5b..b27c25f 100644 --- a/src/styles/ui/BaseContainer.scss +++ b/src/styles/ui/BaseContainer.scss @@ -7,4 +7,5 @@ padding-right: 15px; max-width: $DESKTOP_WIDTH; color: $textColor; + background-color: aqua; } \ No newline at end of file diff --git a/src/styles/ui/Popup.scss b/src/styles/ui/Popup.scss deleted file mode 100644 index 0732e27..0000000 --- a/src/styles/ui/Popup.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import "../theme"; - -.popup { - background-color: $whiteYellow; - outline: none; - border: none; - border-radius: 10px; - box-shadow: 0 0 0 10px $classicYellow; - min-height: auto; -} -.popup::-webkit-scrollbar { - width: 10px; - height: 10px; - &-track { - background: $whiteYellow; - border-radius: 5px; - } - - &-thumb { - background: $greyBlue; - -webkit-border-radius: 10px; - border-radius: 10px; - } -} -.popup-content { - height: 100%; - padding: 20px; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; -} diff --git a/src/styles/views/Lobby.scss b/src/styles/views/Lobby.scss index b3cf60d..92c1af2 100644 --- a/src/styles/views/Lobby.scss +++ b/src/styles/views/Lobby.scss @@ -17,22 +17,7 @@ align-items: center; box-shadow: $dropShadow; } - &.room-list::-webkit-scrollbar{ - width: 10px; - height: 10px; - - &-track{ - background: $whiteYellow; - border-radius: 5px; - } - - &-thumb{ - background: $greyBlue; - -webkit-border-radius: 10px; - border-radius: 10px; - } - } - &.room-list-wrapper{ + &.room-list{ position: absolute; // 使用绝对定位 right: 3%; // 定位到右边 top: 10%; // 从顶部留下10%的空间以居中显示 @@ -40,50 +25,11 @@ height: 80%; // 高度为视口高度的80% display: flex; flex-direction: column; - background-color: $classicYellow; + background-color: #ffcc66; padding: 10px; border-radius: 1.5em; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - overflow-y: hidden; - } - &.room-list{ - display: flex; - flex-direction: column; - flex-grow: 1; overflow-y: auto; - &.btn-container{ - all: initial; // avoid the inherited styles - position: relative; // absolute pos relative to the parent - background-color: transparent; // use Btn's color - display: flex; - flex-direction: row; - align-items: flex-end; - justify-content: center; - height: auto; - width: 100%; - bottom: 3%; - left: 0%; - margin-top: 2%; - flex-grow: 1; - .create-room-btn{ - bottom: 0%; - min-width: fit-content; - width: 20%; - min-height: 50px; - display: flex; - justify-items: center; - align-items: center; - justify-content: center; - align-content: center; - font-size: 1.3em; - background-color: $darkBlue; - color: white; - // dont capitalize the text - text-transform: none; - // make the text bold - font-weight: bolder; - } - } } &.user-list { list-style: none; @@ -102,13 +48,10 @@ .room-container{ display: flex; margin-bottom: 20px; - background: white; - box-shadow: 0 0 0 4px $whiteYellow; + background: #fff6e5; border-radius: 10px; padding: 10px; - margin-inline: 5%; justify-content: space-between; - flex-direction: row; } .room { background-color: #fff; @@ -116,7 +59,7 @@ border-radius: 8px; //overflow: hidden; - .room-header{ + .room-header, .room-players { flex: 1; // Allow both children to grow and take up equal space display: flex; flex-direction: column; // Stack the children of these containers vertically @@ -127,19 +70,27 @@ .room-players { align-items: flex-start; // Align the players to the start of the flex container - flex: 1; // Allow both children to grow and take up equal space - display: flex; - flex-direction: row; // Stack the children of these containers vertically - //align-items: center; // Center the items horizontally - justify-content: center; // Center the items vertically - padding: 10px; } .room-header { align-items: flex-end; // Align the room details to the end of the flex container } + .player { + margin-right: 10px; + text-align: center; + .player-avatar { + width: 40px; + height: 40px; + border-radius: 50%; + background-color: #D9D9D9; // 默认背景色 + } + + .player-username { + font-size: 0.8em; + } + } .room-footer { display: flex; @@ -153,50 +104,6 @@ } } -.avatar-list { - display: flex; - flex-wrap: wrap; // 允许头像列表换行 - justify-content: flex-start; // 头像左对齐 - margin: 0 -10px; // 用于抵消每个头像的外边距，可以根据实际需求调整 - - .player { - width: 20%; // 四个头像一行，每个占总宽的25% - padding-left: 10%; // 每个头像周围的间距，可以根据实际需求调整 - box-sizing: border-box; // 包括padding在内的宽度计算方式 - - i { - display: block; // 确保图标块状显示 - font-size: 3.8rem; // 图标大小 - cursor: pointer; // 鼠标悬停时显示指针 - margin: 10px 0; // 上下间距，可以根据需要调整 - } - } -} -.player { - margin-right: 10px; - margin-left: 10px; - text-align: center; - - .player-avatar { - width: 40px; - height: 40px; - border-radius: 50%; - background-color: #D9D9D9; // 默认背景色 - } - - .player-username { - font-size: 0.8em; - } -} -.room-players { - align-items: flex-end; // Align the players to the start of the flex container - flex: 1; // Allow both children to grow and take up equal space - display: flex; - flex-direction: row; // Stack the children of these containers vertically - //align-items: center; // Center the items horizontally - justify-content: left; // Center the items vertically - padding: 10px; -} .status-container { width: 18%; /* 或者任何固定宽度 */ display: inline-block; /* 或者 block，取决于你的布局需求 */ @@ -265,7 +172,7 @@ left: 15%; // 定位到zuo边 top: 25%; // 从顶部留下10%的空间以居中显示 font-size: 250px; - color: $classicYellow; + color: #ffcc66; font-family: "Acme", sans-serif; } @@ -278,137 +185,6 @@ text-align: center; color: white; font-family: "Acme", sans-serif; - background: $classicYellow; + background: #ffcc66; border-radius: $borderRadius; -} - -.profile-popup{ - height:50%; - &.content{ - display: flex; - flex-direction: column; - flex-grow: 1; - font-size: 2em; - .title{ - font-size: 1.5em; - margin-bottom: 20px; - display: inline; - text-align: center; - } - .avatar-container { - display: flex; - justify-content: center; /* 水平居中 */ - margin-bottom: 3rem; - } - } - - &.header-cnt{ - display: flex; - flex-direction: row; - flex-grow: 1; - font-size: 2em; - .title{ - font-size: 1.5em; - margin-bottom: 20px; - display: inline; - text-align: center; - } - } - &.btn-container{ - display: flex; - flex-direction: row; - justify-content: center; - align-items: flex-end; - margin-top: 10%; - Button{ - height: auto; - font-size: 1em; - padding: 0.6em; - margin: 0 10px; - color: white; - background-color: $classicYellow; - } - } - &.label { - display: flex; - font-size: 32px; - } - &.field { - display: flex; - flex-direction: row; - justify-content: center; - } - &.input { - height: 35px; - padding-left: 15px; - margin-left: 4px; - border: none; - border-radius: 0.75em; - margin-top: 5px; - background: #FFF3CF; - color: $textColor; - } - -} -.room-creation-popup{ - height: 50%; - &.content{ - display: flex; - flex-direction: column; - flex-grow: 1; - font-size: 2em; - .title{ - font-size: 1.5em; - margin-bottom: 20px; - display: inline; - text-align: center; - } - input { - height: 100px; - width: 800px; - padding-left: 1px; - margin-left: 4px; - border: 1px solid black; - border-radius: 0.75em; - margin-bottom: 20px; - background: transparentize(white, 0.4); - color: $textColor; - } - } - .theme-dropdown{ - position: relative; - display: flex; - align-items: center; - justify-items: center; - width: 800px; - height: 100px; - margin-bottom: 20px; - select{ - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - background-color: $classicYellow; - text-align: center; - border-radius: 0.75em; - option{ - background-color: $classicYellow; //TODO: firefox not supporting this - outline: none; - text-align: center; - } - } - } - &.btn-container{ - display: flex; - flex-direction: row; - justify-content: center; - align-items: flex-end; - Button{ - height: auto; - font-size: 1em; - padding: 0.6em; - margin: 0 10px; - color: white; - background-color: $classicYellow; - } - } -} +} \ No newline at end of file diff --git a/src/styles/views/Login.scss b/src/styles/views/Login.scss index 4dca06f..933be87 100644 --- a/src/styles/views/Login.scss +++ b/src/styles/views/Login.scss @@ -20,7 +20,7 @@ padding-top: 30px; padding-left: 37px; padding-right: 37px; - background-color: #C9D7DD; + background-color: $background; transition: opacity 0.5s ease, transform 0.5s ease; box-shadow: $dropShadow; border-radius: 1.5em; @@ -57,13 +57,4 @@ justify-content: center; margin-top: -1em; } -} - -.kaeps-title{ - - top: 5%; // 从顶部留下10%的空间以居中显示 - font-size: 150px; - padding-bottom: 5%; - color: $classicYellow; - font-family: "Acme", sans-serif; } \ No newline at end of file diff --git a/src/styles/views/Register.scss b/src/styles/views/Register.scss index e24ac68..c5dba0e 100644 --- a/src/styles/views/Register.scss +++ b/src/styles/views/Register.scss @@ -20,7 +20,7 @@ padding-top: 30px; padding-left: 37px; padding-right: 37px; - background-color: #C9D7DD; + background-color: $background; transition: opacity 0.5s ease, transform 0.5s ease; box-shadow: $dropShadow; border-radius: 1.5em; @@ -57,13 +57,4 @@ justify-content: center; margin-top: 0em; } -} - -.kaeps-title{ - - top: 5%; // 从顶部留下10%的空间以居中显示 - font-size: 150px; - padding-bottom: 5%; - color: $classicYellow; - font-family: "Acme", sans-serif; } \ No newline at end of file