Optimize UI for Lighthouse audit

index.html

@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Fakebook social media app, which reminds you Facebook and contains AI generated code to use AINIRO Magic backend"
+    />
     <title>fakebook-aigen</title>
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">

src/components/PostModal.css

@@ -51,13 +51,17 @@
   width: 100%;
   border: 2px solid lightgray;
   border-radius: 10px;
-  padding: 10px;
+  overflow: hidden;
+  background: #000;
   position: relative;
-  padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */
+  padding-bottom: 56.25%;
+  height: 0;
 }
 
 .react-player {
   position: absolute;
   top: 0;
   left: 0;
+  width: 100% !important;
+  height: 100% !important;
 }

src/components/ProfileLink.jsx

@@ -18,14 +18,14 @@ const ProfileLink = (props) => {
         color: "inherited",
       }}
     >
-      <Col xs="auto" className="px-2 ml-2">
+      <Col xs='auto' className='px-2 ml-2'>
         <CircularImage
           size={size}
           url={profilePictureURL}
           isOnline={isOnline}
         />
       </Col>
-      <Col className="align-self-center p-0" style={{ color: "inherited" }}>
+      <Col className='align-self-center p-0 text-dark'>
         {bold === "true" ? <b>{name}</b> : name}
       </Col>
     </Row>

src/components/Titlebar.jsx

@@ -51,13 +51,13 @@ const TitleBar = () => {
   return (
     <div className='titlebar bg-light'>
       <Navbar bg='light' className='p-0 nav-container'>
-        <Navbar.Brand as={Link} to='/'>
+        <Navbar.Brand as={Link} to='/' aria-label='fakebook'>
           <FaFacebook color='dodgerblue' fontSize='2em' className='mx-3' />
         </Navbar.Brand>
         <div style={{ width: "450px" }} className='spaceing' />
         <Nav className='w-75 justify-content-start mr-5'>
           <Nav.Item className='first'>
-            <Link to='/' className='nav-link' ref={refs.home}>
+            <Link to='/' className='nav-link' ref={refs.home} aria-label='home'>
               <VscHome
                 fontSize='2rem'
                 className='mx-4'
@@ -66,7 +66,12 @@ const TitleBar = () => {
             </Link>
           </Nav.Item>
           <Nav.Item>
-            <Link to='/friends/list' className='nav-link' ref={refs.friends}>
+            <Link
+              to='/friends/list'
+              className='nav-link'
+              ref={refs.friends}
+              aria-label='friends list'
+            >
               <FaUserFriends
                 fontSize='2rem'
                 className='mx-4'
@@ -75,7 +80,12 @@ const TitleBar = () => {
             </Link>
           </Nav.Item>
           <Nav.Item>
-            <Link to='/watch' className='nav-link' ref={refs.watch}>
+            <Link
+              to='/watch'
+              className='nav-link'
+              ref={refs.watch}
+              aria-label='videos'
+            >
               <MdOndemandVideo
                 fontSize='2rem'
                 className='mx-4'