Yet more css fixes

pages/index.js

@@ -1,6 +1,8 @@
-import { Component } from 'react'
+import { Card, Container, Grid } from '@nextui-org/react';
+import { Component } from 'react';
+import NavBar from '../src/components/Navbar';
 
-import '../styles/main.module.css'
+import styles from '../styles/main.module.css';
 
 export default class Home extends Component {
 
@@ -18,8 +20,22 @@ export default class Home extends Component {
 	}
 
 	render() {
-		return <div className={main}>
+		return <div className={styles.main}>
-			hi
+			<NavBar></NavBar>
+
+			<Container css={{
+				marginTop: '$15'
+			}}>
+				<Grid.Container>
+					<Grid xs={12}>
+						<Card>
+							<Card.Body>
+								hello!
+							</Card.Body>
+						</Card>
+					</Grid>
+				</Grid.Container>
+			</Container>
 		</div>
 	}
 }

pages/overlay.js

@@ -1,13 +1,11 @@
 import { Link } from '@nextui-org/react';
 import {Component} from 'react'
-import Avatar from '../src/components/Avatar';
 import PlayerStats from '../src/components/PlayerStats';
 import ScoreStats from '../src/components/ScoreStats';
 import SongInfo from "../src/components/SongInfo";
 
 import Utils from '../src/utils/utils';
 import styles from '../styles/overlay.module.css';
-import playerStatsStyles from '../styles/playerStats.module.css';
 
 export default class Overlay extends Component {
 

src/components/Navbar.js

@@ -0,0 +1,13 @@
+import { Navbar, Text } from "@nextui-org/react";
+
+const NavBar = () => {
+    return <Navbar isBordered variant={"sticky"}>
+        <Navbar.Brand>
+            <Text b color="inherit">
+                Beat Saber Overlay
+            </Text>
+        </Navbar.Brand>
+    </Navbar>
+}
+
+export default NavBar;

styles/overlay.module.css

@@ -7,183 +7,4 @@
 
 .loading {
 	color: black;
-}
-
-.info {
-	margin-top: 35px;
-	color: white;
-}
-
-.info a {
-	font-size: large;
-	text-decoration: none;
-	color: #7299d4;
-	transition: 0.2s;
-}
-
-.info a:hover {
-    color: #4b72d3 !important;
-}
-
-.overlay {
-	padding: 10px;
-}
-
-.invalid-player p {
-	font-size: large !important;
-	color: white;
-}
-
-.invalid-player b {
-	font-size: large !important;
-	color: white;
-}
-
-.player-stats-container {
-	display: flex;
-	margin-left: -5px;
-	margin-top: -5px;
-}
-
-.player-country {
-	display: flex;
-	line-height: normal;
-}
-
-.player-country span {
-	margin-top: 3px;
-}
-
-.player-country p {
-	margin: 0 6px 0 0;
-}
-
-.player-country-icon {
-	margin-top: 7px;
-	border-radius: 30%;
-}
-
-.player-avatar {
-	border-radius: 5%;
-}
-
-.player-stats {
-	display: block;
-	margin-left: 10px;
-}
-
-.player-stats p {
-	font-size: xx-large;
-}
-
-.score-stats {
-	text-align: center;
-	position:absolute;
-	top:0;
-	right:0;
-	margin-right: 5px;
-}
-
-.score-stats p {
-	font-size: xx-large;
-}
-
-.score-stats-right {
-	margin-right: 10px;
-}
-
-.score-stats-average-cut {
-	font-weight: bold;
-	font-size: x-large;
-}
-
-.score-stats-hands {
-	display: flex;
-}
-
-.score-stats-hands div {
-	padding-left: 10px;
-}
-
-.score-stats-info {
-	margin-right: 10px;
-	text-align: right;
-}
-
-.song-info-container {
-	display: flex;
-	position: fixed;
-	bottom:0;
-	left:0;
-	margin-left: 5px;
-	margin-bottom: 5px;
-	font-size: large !important;
-}
-
-.song-info-container img {
-	border-radius: 5%;
-}
-
-.song-info {
-	margin-left: 10px;
-}
-
-.song-info p {
-	font-size: x-large;
-}
-
-.song-info-song-name {
-	font-size: x-large;
-	font-weight: bold;
-}
-
-.song-info-song-author {
-	font-size: large;
-	margin-top: -5px;
-	margin-bottom: -5px;
-}
-
-.song-info-song-other-container {
-	display: flex;
-	margin-top: 6px;
-}
-
-.song-info-diff {
-	font-size: large;
-	padding: 0px 4px;
-	width: fit-content;
-	border-radius: 5%;
-	font-weight: bold;
-}
-
-.song-info-bsr {
-	font-size: large;
-	margin-left: 10px;
-}
-
-.song-time-container {
-	width: 200px;
-	display: grid;
-}
-
-.song-time-background {
-	grid-column: 1;
-	grid-row: 1;
-	z-index: 1;
-	padding: 3px;
-	width: 100%;
-	background-color: white !important;
-}
-
-.song-time {
-	grid-column: 1;
-	grid-row: 1;
-	z-index: 2;
-	padding: 3px;
-	background-color: red !important;
-}
-
-.song-time-text {
-	margin-top: 6px;
-	font-size: large;
 }