added css

.firebaserc

@@ -1,5 +1,5 @@
 {
   "projects": {
-    "default": "servercrazy"
+    "default": "serverkrazy"
   }
 }

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - master
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_SERVERKRAZY }}'
+          channelId: live
+          projectId: serverkrazy

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,17 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_SERVERKRAZY }}'
+          projectId: serverkrazy

firebase.json

@@ -1,22 +1,22 @@
 {
   "database": {
-      "rules": "database.rules.json"
+    "rules": "database.rules.json"
   },
   "hosting": [
-      {
-          "site": "servercrazy",
-          "public": "build",
-          "ignore": [
-              "firebase.json",
-              "**/.*",
-              "**/node_modules/**"
-          ],
-          "rewrites": [
-              {
-                  "source": "**",
-                  "destination": "/index.html"
-              }
-          ]
-      }
+    {
+      "site": "servercrazy",
+      "public": "build",
+      "ignore": [
+        "firebase.json",
+        "**/.*",
+        "**/node_modules/**"
+      ],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ]
+    }
   ]
-}
+}

package.json

@@ -22,6 +22,7 @@
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "react-terminal": "^1.4.4",
+    "sass": "^1.71.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/backend.js

@@ -1,40 +1,31 @@
 // import { HTMLforFile } from "./utilComponents/HTMLforFile";
 // import TEMPLATEfile from "./utilComponents/TEMPLATEfile";
 // import TEMPLATEmsg from "./utilComponents/TEMPLATEmsg";
+import { initializeApp } from "firebase/app";
 import {
-  ref as refStorage,
-  put,
-  uploadBytesResumable,
-  getStorage,
-  deleteObject,
-  getDownloadURL,
-  listAll,
-} from "firebase/storage";
-import {
+  EmailAuthProvider,
+  FacebookAuthProvider,
+  GoogleAuthProvider,
   createUserWithEmailAndPassword,
+  getAuth,
   getRedirectResult,
-  signInWithEmailAndPassword,
+  linkWithPopup,
   onAuthStateChanged,
+  reauthenticateWithCredential,
+  reauthenticateWithPopup,
+  reload,
+  sendEmailVerification,
+  sendPasswordResetEmail,
+  signInWithEmailAndPassword,
   signInWithPopup,
   signInWithRedirect,
   signOut,
-  getAuth,
-  updatePassword,
-  reauthenticateWithPopup,
-  updateProfile,
-  sendEmailVerification,
-  reauthenticateWithCredential,
-  linkWithPopup,
   unlink as unlinkProvider,
-  reload,
-  AuthCredential,
-  EmailAuthProvider,
-  sendPasswordResetEmail,
   updateEmail,
+  updatePassword,
+  updateProfile,
   verifyBeforeUpdateEmail,
 } from "firebase/auth";
-import { GoogleAuthProvider, FacebookAuthProvider } from "firebase/auth";
-import { initializeApp } from "firebase/app";
 import {
   child,
   getDatabase,
@@ -46,15 +37,23 @@ import {
   push,
   ref,
   remove,
+  set,
   update,
 } from "firebase/database";
 import {
+  deleteObject,
+  getDownloadURL,
+  getStorage,
+  listAll,
+  ref as refStorage,
+  uploadBytesResumable,
+} from "firebase/storage";
+import {
+  getParams,
+  getRandomString,
   getThumb,
-  manageErrorFireBase,
   log,
-  _,
-  getRandomString,
-  getParams,
+  manageErrorFireBase,
   timestamp,
 } from "./utilites.js";
 let TEMPLATEfile = () => {};
@@ -253,7 +252,7 @@ class Server {
               console.log(data);
 
               this.server = ref(firebase.database(), this.serverName);
-              push(child(this.server, "serverDetails"), {
+              set(child(this.server, "serverDetails"), {
                 owner: this.fbobj.currentUser.uid,
                 ownerName: this.fbobj.currentUser.displayName,
                 created: timestamp(),
@@ -296,8 +295,10 @@ class Server {
       ServerDetails: child(this.server, "serverDetails"),
       data: child(this.server, "data"),
     };
-    onChildAdded(child(this.server, "serverDetails"), (data) => {
-      this.serverOwner = data.val().owner;
+    onValue(child(this.server, "serverDetails"), (data) => {
+      if (data.exists()) {
+        this.serverOwner = data.val().owner;
+      }
       this.onServChange();
     });
 
@@ -368,6 +369,10 @@ class Server {
     }
   }
   isMyServer = () => {
+    if (this.server == null) {
+      return false;
+    }
+    if (this.fbobj.currentUser == null) return false;
     return this.serverOwner == this.fbobj.currentUser.uid;
   };
   isMine = (sender) => {

src/components/App.jsx

@@ -13,6 +13,7 @@ import JumpToServer from "./JumpToServer";
 import ServerInfo from "./ServerInfo";
 import { TerminalContextProvider } from "react-terminal";
 import { Cookies, useCookies, withCookies } from "react-cookie";
+import Loading from "./utils/Loading";
 const firebaseContext = React.createContext();
 const serverContext = React.createContext();
 const msgBucketContext = React.createContext();
@@ -29,7 +30,7 @@ function App() {
     });
   }
   const [cookies, setCookies] = useCookies(["serverName"]);
-  window._ = { __fb, __server, __msgBucket ,cookies};
+  window._ = { __fb, __server, __msgBucket, cookies };
   function setServCookie(serverName) {
     setCookies("serverName", serverName, { path: "/" });
   }
@@ -79,7 +80,7 @@ function App() {
   }, [server, fb, msgBucket]);
 
   return (
-    <div>
+
       <firebaseContext.Provider value={__fb}>
         <serverContext.Provider value={__server}>
           <msgBucketContext.Provider value={__msgBucket}>
@@ -93,6 +94,15 @@ function App() {
               <TerminalContextProvider>
                 <BrowserRouter>
                   <Routes>
+                    <Route
+                      path="/loading"
+                      element={
+                        <Loading
+                          className="w-100 h-100 d-center flex-column"
+                          loadingText="loading jump interface"
+                        />
+                      }
+                    />
                     <Route path="/" element={<Home />} />
                     <Route path="/server/:server">
                       <Route path="" element={<ServerInfo />} />
@@ -137,7 +147,7 @@ function App() {
           </msgBucketContext.Provider>
         </serverContext.Provider>
       </firebaseContext.Provider>
-    </div>
+
   );
 }
 

src/components/Chatting_Screen/InputType/InputElement.jsx → src/components/Chatting_Screen/InputType/InputElement/InputElement.jsx

@@ -1,21 +1,24 @@
 import React, { Fragment, useState } from "react";
-import { Form } from "react-bootstrap";
+import { FloatingLabel, Form, FormControl } from "react-bootstrap";
+import { Floating_Control_Label } from "../../../utils/FormComp";
+import "./index.css"
 
 function InputElement({ msg, setMsg, handleMsgInput }) {
   const [isFocused, setIsFocused] = useState(false);
   return (
-    <Form.Group className="w-100" controlId="ControlInput1">
-
-
-      <Form.Control
+    <div className="inputelement w-100 d-flex align-items-stretch">
+      <Floating_Control_Label
+        className="resize-none w-100 border-0 outline-0 box-shadow-none text-input-msg bg-transparent text-white min-height-none h-fit-content"
+        label={!msg.includes('\n') ? <>T<u>y</u>pe a Message</> : <></>}
+        id="ControlInput1"
         as="textarea"
-        placeholder="Type a message"
+        placeholder=""
         autoFocus
         onFocus={() => setIsFocused(true)}
         onBlur={() => setIsFocused(false)}
         onChange={(e) => setMsg(e.target.value)}
         value={msg}
-        accessKey="y" 
+        accessKey="y"
         onKeyDown={(e) => {
           if (e.key == "Enter") {
             if (e.shiftKey || e.altKey) {
@@ -29,7 +32,7 @@ function InputElement({ msg, setMsg, handleMsgInput }) {
           }
         }}
       />
-    </Form.Group>
+    </div>
   );
 }
 

src/components/Chatting_Screen/InputType/InputElement/index.css

@@ -0,0 +1,14 @@
+.inputelement{
+    .float-control-label{
+        width: 100%;
+        .form-floating{
+            label{
+                color: white !important;
+                &:after{
+                    display: none
+                }
+            }
+        }
+    }
+
+}

src/components/Chatting_Screen/InputType/InputElement/index.js

@@ -0,0 +1,2 @@
+import InputElement from "./InputElement.jsx"
+export default InputElement;