Design refinements

Murray-Bridge-Bunyips · Aug 18, 2023 · d66e096 · d66e096
1 parent 074a6fa
commit d66e096
Show file tree

Hide file tree

Showing 15 changed files with 181 additions and 61 deletions.
diff --git a/public/navbarbg.png b/public/navbarbg.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -58,11 +58,18 @@ function App() {
     ) : (
         <>
             <div className="offline">
-                <h1>Bunyip Bellower</h1>
-                <p className="conn">Connecting</p>
+                <img id="loadingimg" src="/logo192.png" alt="Bunyip Bellower Logo" onError={() => {
+                    (document.getElementById("loadingimg") as HTMLElement).style.display = "none";
+                    (document.getElementById("second-loader") as HTMLElement).style.display = "block";
+                }} />
+                <div id="second-loader" style={{ display: "none" }}>
+                    <h1>Bunyip Bellower</h1>
+                    <p className="conn">Connecting</p>
+                </div>
             </div>
             {longConnect && (
                 <p className="disc">
+                    <br />
                     This seems to be taking a while. <br /> Please check your internet connection.
                 </p>
             )}

diff --git a/src/chat/Chat.tsx b/src/chat/Chat.tsx
@@ -168,11 +168,11 @@ function Chat() {
                                 <button className="moreitems" onClick={() => updatePagination()} />
                             ) : (
                                 <>
-                                    <p className="top">
+                                    <div className="top">
                                         Welcome to the Bunyip Bellower! <br /> This is the start of the <b>{channel}</b>{" "}
                                         channel.
-                                    </p>
-                                    <hr />
+                                        <hr />
+                                    </div>
                                 </>
                             )}
                             {/* Leading dummy for pagination support */}

diff --git a/src/chat/Message.tsx b/src/chat/Message.tsx
@@ -54,7 +54,7 @@ function Message(props: { message: MessageData; key: string }) {
     return (
         // Determine whether the message was sent or received by checking the author and current user
         <div
-            className={`message ${auth.currentUser?.uid === message.uid ? "sent" : "received"}`}
+            className={`message ${auth.currentUser?.uid === message.uid ? "sent" : "received"}${message.photoURL === "sys" ? " sys" : ""}`}
             onMouseOver={handleMouseOver}
             onMouseOut={handleMouseOut}
         >

diff --git a/src/css/App.css b/src/css/App.css
@@ -52,6 +52,26 @@ textarea::-webkit-scrollbar-thumb {
     content: "";
 }
 
+#loadingimg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: pulse 2s infinite linear;
+}
+
+@keyframes pulse {
+    0% {
+        transform: translate(-50%, -50%) scale(1);
+    }
+    50% {
+        transform: translate(-50%, -50%) scale(1.1);
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
 .offline,
 .disc {
     position: absolute;

diff --git a/src/css/Channels.css b/src/css/Channels.css
@@ -4,27 +4,75 @@
  */
 
 .buttons {
+    transition: 0.3s;
     height: 50px;
     width: 90%;
     border: none;
     border-radius: 5px;
-    background-color: rgb(70, 150, 10);
+    background-color: rgb(51, 114, 3);
     cursor: pointer; /* Makes cursor change on hover */
     margin: 7px;
+    font-weight: bold;
+    text-overflow: ellipsis;
 }
 
-.buttons:hover {
+.buttons:focus {
+    outline: none;
+}
+
+.buttons:hover:not(.active) {
     background-color: rgb(70, 170, 10);
 }
 
+.active {
+    background-color: rgb(94, 255, 0);
+}
+
 /* Styles for channel obliteration button */
-.oblbutton{
+.oblbutton {
+    transition: 0.3s;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAATklEQVR4nGNgGBHg////Df8xQQe5hlEEGAbcAhAgSTED6erpb8F/EvmjFjCMBhHDaCoagUFECAxKC578Jx08IcUCPxIteQLSQ7QFQwoAAIX8orNLyGYcAAAAAElFTkSuQmCC);
+    background-repeat: no-repeat;
+    background-size: 60%;
+    background-position: center;
     border: none;
     border-radius: 5px;
-    background-color: rgb(209, 33, 20);
+    width: 50px;
+    height: 50px;
     cursor: pointer; /* Makes cursor change on hover */
+    background-color: #006e25;
+}
+
+.oblbutton:focus {
+    outline: none;
 }
 
-.oblbutton:hover{
-    background-color: rgb(238, 35, 20);
-}
+.channelpair {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 5px;
+}
+
+.oblbutton:hover {
+    background-color: rgb(179, 48, 38);
+}
+
+#channelName {
+    width: 60%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    background-color: #f8f8f8;
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    outline: none;
+}
+
+.logo {
+    width: 100px;
+}
diff --git a/src/css/Chat.css b/src/css/Chat.css
@@ -16,7 +16,8 @@
 .menu {
     grid-area: menu;
     position: fixed;
-    background: rgb(0, 52, 14);
+    background: linear-gradient(135deg, rgba(5, 33, 0, 1) 0%, rgba(0, 80, 6, 1) 100%);
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
     height: calc(100% - 132px);
     border-radius: 12px;
     width: 20%;
@@ -26,6 +27,20 @@
     overflow: auto;
 }
 
+.menu::-webkit-scrollbar {
+    width: 10px;
+}
+
+.menu::-webkit-scrollbar-track {
+    background-color: #00330f;
+}
+
+.menu::-webkit-scrollbar-thumb {
+    background-color: #025a02;
+    border-radius: 5px;
+    height: 50px;
+}
+
 @media screen and (max-width: 950px) {
     .menu {
         display: none;
@@ -49,7 +64,7 @@
 }
 
 .moreitems {
-    transition: background-color 0.5s;
+    transition: 0.3s;
     color: inherit;
     border: none;
     padding: 8px;
@@ -59,13 +74,13 @@
     font: inherit;
     cursor: pointer;
     outline: none !important;
-    width: calc(100vw - 20px);
+    width: 110%;
     background: #272a2c none;
     overflow: hidden;
 }
 
-.moreitems:active {
-    background-color: #46bb46;
+.moreitems:hover {
+    background-color: #242424;
 }
 
 .moreitems::after {
@@ -75,11 +90,20 @@
 .moreitems:active::after {
     content: "Loading...";
     font-weight: 600;
-    color: rgb(0, 0, 0);
 }
 
 .top {
     text-align: center;
     font-style: italic;
     font-size: 12px;
+    width: 111%;
+}
+
+@media screen and (max-width: 950px) {
+    .top {
+        width: 95vw;
+    }
+    .moreitems {
+        width: 95vw;
+    }
 }
diff --git a/src/css/Message.css b/src/css/Message.css
@@ -25,6 +25,17 @@
     grid-template-areas:
         "pfp namedate msgman"
         "pfp text text";
+
+    margin-top: 5px;
+}
+
+/* Target every other .message element and adjust its background-color */
+.message:nth-of-type(even) {
+    background-color: #2e3335;
+}
+
+.sys {
+    background-color: rgb(41, 41, 41) !important;
 }
 
 /* I've used this same keyframe in at least three projects */
@@ -42,14 +53,16 @@
     padding: 12px;
 }
 
-.message:hover {
+.message:hover:not(.sys) {
     background-color: #282c2d;
 }
 
 .namedate {
     max-width: fit-content;
     place-items: center;
     grid-area: namedate;
+    display: flex;
+    align-items: center;
 }
 
 .date,
@@ -59,10 +72,13 @@
 }
 
 .date {
-    font-size: 12px;
+    font-size: 10px;
     max-width: fit-content;
+    /* bootstrap text-muted */
+    color: #878a8d;
     padding: 8px;
     margin: 0;
+    margin-top: 6px;
 }
 
 .text,
@@ -103,4 +119,5 @@
 .filevideo {
     max-height: 350px;
     max-width: 90%;
+    border-radius: 8px;
 }
diff --git a/src/css/MessageBar.css b/src/css/MessageBar.css
@@ -23,7 +23,7 @@
 
 .nomsg {
     border-radius: 10px;
-    width: calc(100vw - 28px);
+    width: 76vw;
     padding: 8px;
 }
 

diff --git a/src/css/Msgman.css b/src/css/Msgman.css
@@ -6,8 +6,8 @@
 .msgman {
     transition: background-color 0.4s;
     position: relative;
-    width: 40px;
-    height: 40px;
+    width: 35px;
+    height: 35px;
     border-radius: 50%;
     background-color: rgba(150, 150, 150, 0.2);
     border: 0;

diff --git a/src/css/Navbar.css b/src/css/Navbar.css
@@ -15,8 +15,8 @@
     position: fixed;
     margin: 8px;
     width: calc(100vw - 20px);
-    background-size: cover;
     background: rgb(0, 52, 14) url("/navbarbg.png") no-repeat 100%;
+    background-size: cover;
     height: 100px;
     border-radius: 12px;
     z-index: 2;
@@ -67,7 +67,7 @@
 .currenttime,
 .productname,
 .backupname {
-    top: 20px;
+    top: 30px;
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
@@ -77,7 +77,7 @@
 }
 
 .currenttime {
-    top: 50px;
+    top: 60px;
 }
 
 .backupname {

diff --git a/src/css/Scroll.css b/src/css/Scroll.css
@@ -22,5 +22,5 @@
 
 .scroll:hover {
     cursor: pointer;
-    background-color: rgb(108, 180, 89);
+    background-color: rgb(30, 139, 0);
 }