add styling

frontend/src/components/Hosting.tsx

@@ -1,6 +1,7 @@
 import useFetchHosting from "../utils/fetchHosting";
 import { useNotification } from "../NotificationContext";
 import { useCookies } from "react-cookie";
+import CenteredContainer from "./ChildrenContainer";
 
 
 interface ReserveButtonProps {
@@ -28,7 +29,7 @@ const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
     return (
         <>
             <button onClick={handleReserve} disabled={isReserved}>
-                {isReserved ? `Занято гостем ${reservedBy}` : 'Занять'}
+                {isReserved ? `${reservedBy}` : 'Занять'}
             </button>
         </>
     );
@@ -39,19 +40,20 @@ function Hosting() {
     const { data, error, loading, update } = useFetchHosting();
     return (
         <>
-            <h2>Поселение</h2>
-            <p>
-                Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
-                вы не хотите тесниться, то рядом с нами есть
-                <a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>, а так же
-                <a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
-                (Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
-                Спальные места:
-            </p>
+            <CenteredContainer>
+                <h2>Поселение</h2>
+                <p>
+                    Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
+                    вы не хотите тесниться, то рядом с нами есть
+                    <a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>, а так же
+                    <a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
+                    (Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
+                    Спальные места:
+                </p>
             {loading && <div>Loading...</div>}
             {error && <div>Error</div>}
             {data && (
-                <div>
+                <div className="table-wrapper">
                     <table>
                         <thead>
                             <tr>
@@ -72,6 +74,7 @@ function Hosting() {
                     </table>
                 </div>
             )}
+            </CenteredContainer>
             <br />
         </>
     );