From 207a2540101b2f216bde94ae53286d2e52f044e3 Mon Sep 17 00:00:00 2001 From: Wolfboy248 Date: Mon, 25 Nov 2024 09:20:01 +0100 Subject: frontend: begin port to css modules, sidebar refactor --- frontend/src/App.css | 25 ++- frontend/src/components/ConfirmDialog.tsx | 5 +- frontend/src/components/Login.tsx | 38 ++-- frontend/src/components/MessageDialog.tsx | 3 +- frontend/src/components/Sidebar.tsx | 321 ++++++++++++---------------- frontend/src/components/Sidebar_old.tsx | 210 ++++++++++++++++++ frontend/src/components/UploadRunDialog.tsx | 9 +- frontend/src/css/Button.module.css | 91 ++++++++ frontend/src/css/Buttons.css | 3 + frontend/src/css/Dialog.css | 5 - frontend/src/css/Games.css | 6 +- frontend/src/css/Input.module.css | 15 ++ frontend/src/css/Sidebar.module.css | 163 ++++++++++++++ frontend/src/css/UploadRunDialog.css | 15 -- frontend/src/pages/About.tsx | 4 +- frontend/src/pages/Games.tsx | 4 +- frontend/src/pages/Profile.tsx | 2 +- frontend/src/types/Sidebar.ts | 12 ++ 18 files changed, 689 insertions(+), 242 deletions(-) create mode 100644 frontend/src/components/Sidebar_old.tsx create mode 100644 frontend/src/css/Button.module.css create mode 100644 frontend/src/css/Buttons.css create mode 100644 frontend/src/css/Input.module.css create mode 100644 frontend/src/css/Sidebar.module.css create mode 100644 frontend/src/types/Sidebar.ts (limited to 'frontend') diff --git a/frontend/src/App.css b/frontend/src/App.css index 14a9972..a6ef415 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,13 +1,11 @@ main { overflow: auto; overflow-x: hidden; - position: relative; - width: calc(100% - 380px); + width: calc(100% - 350px); height: 100vh; - left: 350px; - padding-right: 30px; + padding: 0px 30px; font-size: 40px; font-family: BarlowSemiCondensed-Regular; @@ -15,9 +13,28 @@ main { } +button img { + height: 24px; +} + +b { + font-family: BarlowCondensed-Bold; +} + +* { + --text-color: #cdcfdf; + --primary: #2B2E46; + --primary-dark: #202232; +} + +#root { + display: flex; +} + a { color: inherit; width: fit-content; + text-decoration: none; } body { diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx index 44a653b..0679c25 100644 --- a/frontend/src/components/ConfirmDialog.tsx +++ b/frontend/src/components/ConfirmDialog.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import btn from "@css/Button.module.css" import "@css/Dialog.css" interface ConfirmDialogProps { @@ -20,8 +21,8 @@ const ConfirmDialog: React.FC = ({ title, subtitle, onConfir {subtitle}
- - + +
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx index f1628b2..fe0cbd1 100644 --- a/frontend/src/components/Login.tsx +++ b/frontend/src/components/Login.tsx @@ -5,14 +5,20 @@ import { ExitIcon, UserIcon, LoginIcon } from '@images/Images'; import { UserProfile } from '@customTypes/Profile'; import { API } from '@api/Api'; import "@css/Login.css"; +import { Button, Buttons } from "@customTypes/Sidebar"; +import btn from "@css/Button.module.css"; interface LoginProps { + isSearching: boolean; + currentBtn: number; + buttonsList: Buttons; + setCurrentBtn: React.Dispatch>; setToken: React.Dispatch>; profile?: UserProfile; setProfile: React.Dispatch>; }; -const Login: React.FC = ({ setToken, profile, setProfile }) => { +const Login: React.FC = ({ isSearching, currentBtn, buttonsList, setCurrentBtn, setToken, profile, setProfile }) => { const navigate = useNavigate(); @@ -36,13 +42,15 @@ const Login: React.FC = ({ setToken, profile, setProfile }) => { {profile.profile ? ( <> - - - + @@ -50,8 +58,8 @@ const Login: React.FC = ({ setToken, profile, setProfile }) => { : ( <> - - @@ -66,12 +74,12 @@ const Login: React.FC = ({ setToken, profile, setProfile }) => { ) : ( - - )} diff --git a/frontend/src/components/MessageDialog.tsx b/frontend/src/components/MessageDialog.tsx index 5c85189..8c584b7 100644 --- a/frontend/src/components/MessageDialog.tsx +++ b/frontend/src/components/MessageDialog.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import btn from "@css/Button.module.css" import "@css/Dialog.css" interface MessageDialogProps { @@ -19,7 +20,7 @@ const MessageDialog: React.FC = ({ title, subtitle, onClose {subtitle}
- +
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 67f7f3d..beff4f0 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,12 +1,15 @@ -import React from 'react'; +import React from "react"; import { Link, useLocation } from 'react-router-dom'; - import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, PortalIcon, SearchIcon, UploadIcon } from '@images/Images'; -import Login from '@components/Login'; import { UserProfile } from '@customTypes/Profile'; -import { Search } from '@customTypes/Search'; +import sidebar from "@css/Sidebar.module.css"; +import { Button, Buttons } from "@customTypes/Sidebar"; +import btn from "@css/Button.module.css"; +import { abort } from "process"; +import Login from "@components/Login"; import { API } from '@api/Api'; -import "@css/Sidebar.css"; +import inp from "@css/Input.module.css"; +import { Search } from '@customTypes/Search'; interface SidebarProps { setToken: React.Dispatch>; @@ -16,187 +19,131 @@ interface SidebarProps { }; const Sidebar: React.FC = ({ setToken, profile, setProfile, onUploadRun }) => { - - const [searchData, setSearchData] = React.useState(undefined); - const [isSidebarLocked, setIsSidebarLocked] = React.useState(false); - const [isSidebarOpen, setSidebarOpen] = React.useState(true); - - const location = useLocation(); - const path = location.pathname; - - const handle_sidebar_click = (clicked_sidebar_idx: number) => { - const btn = document.querySelectorAll("button.sidebar-button"); - if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide() } - // clusterfuck - btn.forEach((e, i) => { - btn[i].classList.remove("sidebar-button-selected") - btn[i].classList.add("sidebar-button-deselected") - }) - btn[clicked_sidebar_idx].classList.add("sidebar-button-selected") - btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected") - }; - - const _handle_sidebar_hide = () => { - var btn = document.querySelectorAll("button.sidebar-button") as NodeListOf - const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf - const side = document.querySelector("#sidebar-list") as HTMLElement; - const searchbar = document.querySelector("#searchbar") as HTMLInputElement; - const uploadRunBtn = document.querySelector("#upload-run") as HTMLInputElement; - const uploadRunSpan = document.querySelector("#upload-run>span") as HTMLInputElement; - - if (isSidebarOpen) { - if (profile) { - const login = document.querySelectorAll(".login>button")[1] as HTMLElement; - login.style.opacity = "1" - uploadRunBtn.style.width = "310px" - uploadRunBtn.style.padding = "0.4em 0 0 11px" - uploadRunSpan.style.opacity = "0" - setTimeout(() => { - uploadRunSpan.style.opacity = "1" - }, 100) - } - setSidebarOpen(false); - side.style.width = "320px" - btn.forEach((e, i) => { - e.style.width = "310px" - e.style.padding = "0.4em 0 0 11px" - setTimeout(() => { - span[i].style.opacity = "1" - }, 100) - }); - side.style.zIndex = "2" - } else { - if (profile) { - const login = document.querySelectorAll(".login>button")[1] as HTMLElement; - login.style.opacity = "0" - uploadRunBtn.style.width = "40px" - uploadRunBtn.style.padding = "0.4em 0 0 5px" - uploadRunSpan.style.opacity = "0" - } - setSidebarOpen(true); - side.style.width = "40px"; - searchbar.focus(); - btn.forEach((e, i) => { - e.style.width = "40px" - e.style.padding = "0.4em 0 0 5px" - span[i].style.opacity = "0" - }) - setTimeout(() => { - side.style.zIndex = "0" - }, 300); - } - }; - - const _handle_sidebar_lock = () => { - if (!isSidebarLocked) { - _handle_sidebar_hide() - setIsSidebarLocked(true); - setTimeout(() => setIsSidebarLocked(false), 300); - } - }; - - const _handle_search_change = async (q: string) => { - const searchResponse = await API.get_search(q); - setSearchData(searchResponse); - }; - - React.useEffect(() => { - if (path === "/") { handle_sidebar_click(1) } - else if (path.includes("games")) { handle_sidebar_click(2) } - else if (path.includes("rankings")) { handle_sidebar_click(3) } - // else if (path.includes("news")) { handle_sidebar_click(4) } - // else if (path.includes("scorelog")) { handle_sidebar_click(5) } - else if (path.includes("profile")) { handle_sidebar_click(4) } - else if (path.includes("rules")) { handle_sidebar_click(5) } - else if (path.includes("about")) { handle_sidebar_click(6) } - }, [path]); - - return ( - - ); -}; + const location = useLocation(); + const [load, setLoad] = React.useState(false); + const [searchData, setSearchData] = React.useState(undefined); + const [hasClickedSearch, setHasClickedSearch] = React.useState(false); + const [isSearching, setIsSearching] = React.useState(false); + const [buttonsList, setButtonsList] = React.useState({ + top: [ + {img: HomeIcon, text: "Home", url: "/"}, + {img: PortalIcon, text: "Games", url: "/games"}, + {img: FlagIcon, text: "Rankings", url: "/rankings"} + ], + bottom: [ + {img: BookIcon, text: "Rules", url: "/rules"}, + {img: HelpIcon, text: "About LPHUB", url: "/about"} + ] + }); + + const _handle_search = () => { + if (!hasClickedSearch) { + _handle_search_change(""); + } + setHasClickedSearch(true); + setIsSearching(!isSearching); + document.querySelector("#searchInput")!.focus(); + } + + const _handle_search_change = async (query: string) => { + const response = await API.get_search(query); + setSearchData(response); + } + + const _get_index_load = () => { + const pathname = window.location.pathname; + const btnObj = buttonsList.top.find(obj => obj.url === pathname); + let btnIndex = buttonsList.top.findIndex(obj => obj.url === pathname); + if (btnIndex != -1) { + return btnIndex; + } else if (buttonsList.top.findIndex(obj => obj.url === pathname) == -1 && buttonsList.bottom.findIndex(obj => obj.url === pathname) != -1) { + btnIndex = buttonsList.bottom.findIndex(obj => obj.url === pathname); + return btnIndex + buttonsList.top.length + 1; + } else if (load) { + return currentBtn; + } else { + return 0; + } + } + const [currentBtn, setCurrentBtn] = React.useState(_get_index_load); + + React.useEffect(() => { + setCurrentBtn(_get_index_load); + setLoad(true); + }, [location]) + + return ( +
+
+ {}} to={"/"}> + +
+ PORTAL 2 + Least Portals Hub +
+ +
+ +
+
+
+ + + + + {buttonsList.top.map((e: any, i: any) => { + return + }) + + } +
+
+ + + {buttonsList.bottom.map((e: any, i: any) => { + return + }) + + } +
+
+ +
+
+ {_handle_search_change(e.target.value)}} id="searchInput" className={inp.sidebar} type="text" placeholder='Search for map or a player...'/> +
+ +
+ {searchData?.maps.map((map, i) => { + return + {map.game} + {map.chapter} + {map.map} + + })} + + {searchData?.players.map((player, i) => { + return + + {player.user_name} + + })} +
+
+ +
+
+ ) +} export default Sidebar; + diff --git a/frontend/src/components/Sidebar_old.tsx b/frontend/src/components/Sidebar_old.tsx new file mode 100644 index 0000000..4d1cd7a --- /dev/null +++ b/frontend/src/components/Sidebar_old.tsx @@ -0,0 +1,210 @@ +import React, { useRef } from 'react'; +import { Link, useLocation } from 'react-router-dom'; + +import btn from "@css/Button.module.css"; +import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, PortalIcon, SearchIcon, UploadIcon } from '@images/Images'; +import Login from '@components/Login'; +import { UserProfile } from '@customTypes/Profile'; +import { Search } from '@customTypes/Search'; +import { API } from '@api/Api'; +import "@css/Sidebar.css"; + +interface SidebarProps { + setToken: React.Dispatch>; + profile?: UserProfile; + setProfile: React.Dispatch>; + onUploadRun: () => void; +}; + +const Sidebar: React.FC = ({ setToken, profile, setProfile, onUploadRun }) => { + + const btnRef = useRef(null); + const [searchData, setSearchData] = React.useState(undefined); + const [isSidebarLocked, setIsSidebarLocked] = React.useState(false); + const [isSidebarOpen, setSidebarOpen] = React.useState(true); + + const location = useLocation(); + const path = location.pathname; + + const handle_sidebar_click = (clicked_sidebar_idx: number) => { + const btn = document.querySelectorAll("#sidebarBtn"); + if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide() } + // clusterfuck + btn.forEach((e, i) => { + btn[i].classList.remove("sidebar-button-selected") + btn[i].classList.add("sidebar-button-deselected") + }) + btn[clicked_sidebar_idx].classList.add("sidebar-button-selected") + btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected") + }; + + const _handle_sidebar_hide = () => { + var btn = document.querySelectorAll("button.sidebar-button") as NodeListOf + const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf + const side = document.querySelector("#sidebar-list") as HTMLElement; + const searchbar = document.querySelector("#searchbar") as HTMLInputElement; + const uploadRunBtn = document.querySelector("#upload-run") as HTMLInputElement; + const uploadRunSpan = document.querySelector("#upload-run>span") as HTMLInputElement; + + if (isSidebarOpen) { + if (profile) { + const login = document.querySelectorAll(".login>button")[1] as HTMLElement; + login.style.opacity = "1" + uploadRunBtn.style.width = "310px" + uploadRunBtn.style.padding = "0.4em 0 0 11px" + uploadRunSpan.style.opacity = "0" + setTimeout(() => { + uploadRunSpan.style.opacity = "1" + }, 100) + } + setSidebarOpen(false); + side.style.width = "320px" + btn.forEach((e, i) => { + e.style.width = "310px" + e.style.padding = "0.4em 0 0 11px" + setTimeout(() => { + span[i].style.opacity = "1" + }, 100) + }); + side.style.zIndex = "2" + } else { + if (profile) { + const login = document.querySelectorAll(".login>button")[1] as HTMLElement; + login.style.opacity = "0" + uploadRunBtn.style.width = "40px" + uploadRunBtn.style.padding = "0.4em 0 0 5px" + uploadRunSpan.style.opacity = "0" + } + setSidebarOpen(true); + side.style.width = "40px"; + searchbar.focus(); + btn.forEach((e, i) => { + e.style.width = "40px" + e.style.padding = "0.4em 0 0 5px" + span[i].style.opacity = "0" + }) + setTimeout(() => { + side.style.zIndex = "0" + }, 300); + } + }; + + const _handle_sidebar_lock = () => { + if (!isSidebarLocked) { + _handle_sidebar_hide() + setIsSidebarLocked(true); + setTimeout(() => setIsSidebarLocked(false), 300); + } + }; + + const _handle_search_change = async (q: string) => { + const searchResponse = await API.get_search(q); + setSearchData(searchResponse); + }; + + React.useEffect(() => { + if (path === "/") { handle_sidebar_click(1) } + else if (path.includes("games")) { handle_sidebar_click(2) } + else if (path.includes("rankings")) { handle_sidebar_click(3) } + // else if (path.includes("news")) { handle_sidebar_click(4) } + // else if (path.includes("scorelog")) { handle_sidebar_click(5) } + else if (path.includes("profile")) { handle_sidebar_click(4) } + else if (path.includes("rules")) { handle_sidebar_click(5) } + else if (path.includes("about")) { handle_sidebar_click(6) } + }, [path]); + + React.useEffect(() => { + const btns = document.querySelectorAll("#sidebarBtn"); + btns.forEach((e, num) => { + e.setAttribute("num", num.toString()); + }); + }) + + return ( + + ); +}; + +export default Sidebar; diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx index 118b589..951944b 100644 --- a/frontend/src/components/UploadRunDialog.tsx +++ b/frontend/src/components/UploadRunDialog.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { UploadRunContent } from '@customTypes/Content'; import { ScoreboardTempUpdate, SourceDemoParser, NetMessages } from '@nekz/sdp'; +import btn from "@css/Button.module.css"; import '@css/UploadRunDialog.css'; import { Game } from '@customTypes/Game'; import { Map } from '@customTypes/Map'; @@ -241,7 +242,7 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, Drag and drop
Or click here
- +
: null} @@ -260,7 +261,7 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, Drag and drop
Or click here
- +
: null} @@ -281,8 +282,8 @@ const UploadRunDialog: React.FC = ({ token, open, onClose, }
- - + +
diff --git a/frontend/src/css/Button.module.css b/frontend/src/css/Button.module.css new file mode 100644 index 0000000..d1c3ad7 --- /dev/null +++ b/frontend/src/css/Button.module.css @@ -0,0 +1,91 @@ +.default, .defaultWide, .sidebar, .logout { + border: none; + border-radius: 24px; + padding: 5px 10px; + background-color: #2b2e46; + font-family: BarlowSemiCondensed-Regular; + color: #CDCFDF; + font-size: 18px; + cursor: pointer; + transition: all 0.2s ease; +} + +.sidebar.selected { + background-color: #202232; +} + +.sidebar.selected:hover { + background-color: #202232; +} + +.default:hover, .defaultWide:hover, .sidebar:hover { + background-color: rgb(38, 42, 62); +} + +.defaultWide { + width: 100%; +} + +.default.error, .defaultWide.error { + background-color: rgb(147, 45, 45); +} + +.default.error:hover, .defaultWide.error { + background-color: rgb(105, 36, 36); +} + +.sidebar { + display: flex; + width: 100%; + align-items: center; + font-family: BarlowSemiCondensed-Regular; + padding: 8px 12px; + height: 42px; + padding-right: 4px; + text-wrap: nowrap; + transition: all 0.2s ease; +} + +.sidebar.min { + padding: 8px 9px; +} + +.sidebar.min>span { + opacity: 0; + animation: sidebar_text_out 0.2s ease; + transform: translateX(-200px); +} + +.sidebar img { + height: 24px; +} + +.sidebar.profile>img { + border-radius: 24px; +} + +.sidebar>span { + padding: 0px 8px; + transition: all 0.2s ease; +} + +.logout { + background-color: #00000000; + display: flex; + align-items: center; +} + +@keyframes sidebar_text_out { + 0% { + opacity: 1; + transform: translateX(0px); + } + 50% { + opacity: 0; + transform: translateX(0px); + } + 60%, 100% { + transform: translateX(-200px); + } +} + diff --git a/frontend/src/css/Buttons.css b/frontend/src/css/Buttons.css new file mode 100644 index 0000000..de8f31d --- /dev/null +++ b/frontend/src/css/Buttons.css @@ -0,0 +1,3 @@ +.default { + +} diff --git a/frontend/src/css/Dialog.css b/frontend/src/css/Dialog.css index fc557d2..51bf0ae 100644 --- a/frontend/src/css/Dialog.css +++ b/frontend/src/css/Dialog.css @@ -61,11 +61,6 @@ white-space: pre-wrap; } -.dialog-btns-container button { - border-radius: 24px; - padding: 5px 10px; -} - .dialog-btns-container button:nth-child(2):hover { background-color: rgb(105, 36, 36); } diff --git a/frontend/src/css/Games.css b/frontend/src/css/Games.css index ec57a71..9270a98 100644 --- a/frontend/src/css/Games.css +++ b/frontend/src/css/Games.css @@ -11,9 +11,7 @@ } .games-page-item-content { - position: absolute; - left: 50px; - width: calc(100% - 100px); + position: relative; } .games-page-item-content a { @@ -96,4 +94,4 @@ span>b { .games-page-item-body-item-num { font-size: 50px; font-family: BarlowCondensed-Bold; -} \ No newline at end of file +} diff --git a/frontend/src/css/Input.module.css b/frontend/src/css/Input.module.css new file mode 100644 index 0000000..c216f73 --- /dev/null +++ b/frontend/src/css/Input.module.css @@ -0,0 +1,15 @@ +.sidebar { + background-color: #161723; + color: var(--text-color); + border: none; + border-radius: 300px; + font-family: BarlowSemiCondensed-Regular; + padding: 8px; + width: calc(100% - 16px); + outline: none; + font-size: 18px; +} + +.sidebar::placehoder { + color: #2b2e46; +} diff --git a/frontend/src/css/Sidebar.module.css b/frontend/src/css/Sidebar.module.css new file mode 100644 index 0000000..9436a93 --- /dev/null +++ b/frontend/src/css/Sidebar.module.css @@ -0,0 +1,163 @@ +.sidebar { + display: flex; + width: 350px; + min-width: 350px; + height: 100vh; + color: var(--text-color); + font-family: BarlowSemiCondensed-Regular; + font-size: 18px; + background-color: var(--primary-dark); + flex-direction: column; +} + +.logo, .logo>a { + height: fit-content; + display: flex; + width: calc(100% - 4px); + text-decoration: none; + padding-left: 4px; + background-color: var(--primary) +} + +.logo>a>img { + padding: 12px 8px; + height: 80px; +} + +.logo>a>div { + display: flex; + flex-direction: column; + width: 100%; +} + +.logo>a>div>span { + font-size: 36px; + font-family: BarlowCondensed-Regular; + padding-left: 8px; +} + +.logoTitle { + display: flex; + height: 60px; + font-size: 56px; +} + +/* btns */ +.btns { + display: flex; + flex-direction: column; + padding: 0px 8px; + height: 100%; + width: calc(100% - 16px); + justify-content: space-between; + background-color: var(--primary); + transition: all 0.3s ease; +} + +.topBtns>span { + height: 28px; + display: flex; +} + +.btns.min { + width: 42px; +} + +.topBtns, .bottomBtns { + display: flex; + flex-direction: column; + gap: 8px; +} + +.topBtns { + padding-top: 8px; +} + +.bottomBtns { + padding-bottom: 8px; +} + +.topBtns a, .bottomBtns a { + width: 100%; +} + +.btnsContainer { + display: flex; +} + +/* Clusterfuck */ +.searchContainer { + width: 0%; + transition: all 0.3s ease, overflow-y 0.0s ease 0.1s; + opacity: 0; + overflow-y: hidden; +} + +.searchContainer.min { + width: 100%; + transition: all 0.3s ease, opacity 0.1s ease 0.1s; + opacity: 1; + overflow-y: auto; +} + +.inpContainer { + padding: 8px; +} + +.searchResults { + overflow-y: auto; + height: calc(100% - 54px); +} + +.result { + margin: 10px 6px 0 6px; + height: 80px; + width: 100%; + max-width: 285px; + animation: result_in 0.2s ease; + animation-fill-mode: backwards; + overflow: hidden; + + border-radius: 20px; + text-align: center; + + display: grid; + + border: 0; + transition: background-color .1s; + background-color: #2b2e46; + grid-template-rows: 20% 20% 60%; + width: calc(100% - 15px); +} +.result>span{ + color: #888; + font-size: 16px; + font-family: BarlowSemiCondensed-Regular; +} +.result>span:nth-child(3), .result.player span{ + font-size: 30px; + color: #CDCFDF; +} + +.result.player img { + height: 80px; +} + +.result.player span { + display: flex; + text-align: left; + margin-left: 90px; + width: fit-content; +} + +@keyframes result_in { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0px); + } +} + diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css index f129bb8..7cc2cf5 100644 --- a/frontend/src/css/UploadRunDialog.css +++ b/frontend/src/css/UploadRunDialog.css @@ -96,25 +96,10 @@ div#upload-run{ } } -button, input { - background-color: #2b2e46; - border: none; - font-family: BarlowSemiCondensed-Regular; - color: #CDCFDF; - font-size: 18px; - cursor: pointer; - padding: 5px 0px; - transition: all 0.2s ease; -} - .upload-run-buttons-container button { border-radius: 32px; } -button:hover { - background-color: #222538; -} - .upload-run-map-container { display: flex; } diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx index ded3461..fe2e25a 100644 --- a/frontend/src/pages/About.tsx +++ b/frontend/src/pages/About.tsx @@ -27,9 +27,9 @@ const About: React.FC = () => { return ( -
+
{aboutText} -
+ ); }; diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx index 15105c9..e7e031e 100644 --- a/frontend/src/pages/Games.tsx +++ b/frontend/src/pages/Games.tsx @@ -25,7 +25,7 @@ const Games: React.FC = ({ games }) => { }, []); return ( -
+
@@ -35,7 +35,7 @@ const Games: React.FC = ({ games }) => {
-
+ ); }; diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx index f7134a7..00d8f4e 100644 --- a/frontend/src/pages/Profile.tsx +++ b/frontend/src/pages/Profile.tsx @@ -108,7 +108,7 @@ const Profile: React.FC = ({ profile, token, gameData, onDeleteRec }; return ( -
+
{MessageDialogComponent} {MessageDialogLoadComponent} {ConfirmDialogComponent} diff --git a/frontend/src/types/Sidebar.ts b/frontend/src/types/Sidebar.ts new file mode 100644 index 0000000..71a7571 --- /dev/null +++ b/frontend/src/types/Sidebar.ts @@ -0,0 +1,12 @@ +import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, PortalIcon, SearchIcon, UploadIcon } from '@images/Images'; + +export interface Button { + img: string; + text: string; + url: string; +} + +export interface Buttons { + top: Button[]; + bottom: Button[]; +} -- cgit v1.2.3