Fix Home/CantCreateRoom page (#4690)

* Fix HomeCantCreateRoom

* Rename CantCreateRoom component

* Make page full-height

app/assets/locales/en.json

@@ -37,7 +37,8 @@
     "settings_title": "Manage your rooms",
     "settings_description": "Configure your rooms and meeting settings to be in charge of an effective classroom.",
     "and_more_title": "And more!",
-    "and_more_description": "BigBlueButton offers built-in tools for applied learning and is designed to save you time during class."
+    "and_more_description": "BigBlueButton offers built-in tools for applied learning and is designed to save you time during class.",
+    "enter_meeting_url": "Please enter the URL of your BigBlueButton meeting in the field below."
   },
   "authentication": {
     "sign_in": "Sign In",

app/javascript/components/home/Home.jsx → app/javascript/components/rooms/CantCreateRoom.jsx

 import React from 'react';
 import { Card, Stack } from 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
+import { useTranslation } from 'react-i18next';
 import Logo from '../shared_components/Logo';
 
 // This page is shown is the current_user does NOT have CreateRoom permission
-export default function Home() {
+export default function CantCreateRoom() {
+  const { t } = useTranslation();
+
   return (
-    <div className="mt-5">
+    <div className="pt-5">
       <div className="text-center mb-4">
-        <Logo size="large" />
+        <Logo />
       </div>
       <Card className="col-md-8 mx-auto p-5 border-0 shadow-sm text-center">
-        <h1 className="mt-4"> Welcome to BigBlueButton. </h1>
         <div className="mt-4 px-xxl-5">
           <div className="text-start">
-            <h6> Please enter the URL of your meeting. </h6>
+            <h6> { t('homepage.enter_meeting_url') } </h6>
             <Stack direction="horizontal">
               <input className="form-control" id="joinUrl" />
-              <Button variant="brand" className="ms-2">Join</Button>
+              <Button variant="brand" className="ms-2">{ t('join') }</Button>
             </Stack>
           </div>
         </div>

app/javascript/components/shared_components/Logo.jsx

@@ -10,8 +10,8 @@ export default function Logo({ size }) {
 
   // Logo can be small or regular size
   const sizeClass = size === 'small'
-    ? 'mb-4 small-logo cursor-pointer'
-    : 'mb-4 logo cursor-pointer position-absolute bottom-0 mx-auto start-0 end-0 text-center';
+    ? 'small-logo cursor-pointer'
+    : 'logo cursor-pointer position-absolute bottom-0 mx-auto start-0 end-0 text-center';
   // Small Logo is used in Header only and does not require a wrapper
   const sizeWrapperClass = !size ? 'logo-wrapper position-relative d-block mx-auto' : undefined;
 

app/javascript/main.jsx

@@ -26,7 +26,7 @@ import Roles from './components/admin/roles/Roles';
 import ResetPassword from './components/users/password_management/ResetPassword';
 import EditUser from './components/admin/manage_users/EditUser';
 import EditRole from './components/admin/roles/EditRole';
-import Home from './components/home/Home';
+import CantCreateRoom from './components/rooms/CantCreateRoom';
 import ActivateAccount from './components/users/account_activation/ActivateAccount';
 import VerifyAccount from './components/users/account_activation/VerifyAccount';
 import AdminPanel from './components/admin/AdminPanel';
@@ -69,7 +69,7 @@ const router = createBrowserRouter(
 
         <Route path="/rooms" element={<Rooms />} />
         <Route path="/rooms/:friendlyId" element={<Room />} />
-        <Route path="/home" element={<Home />} />
+        <Route path="/home" element={<CantCreateRoom />} />
 
         <Route path="/admin" element={<AdminPanel />} />
         <Route path="/admin/users" element={<ManageUsers />} />