style: upload button

README.md

@@ -54,4 +54,8 @@ or with Docker
 docker-compose up
 ```
 
--> Then open `http://localhost:3000` in your browser
+-> Then open `http://localhost:3000` in your browser
+
+## License
+
+[MIT](LICENSE) © Thuong Truong, 2024

package.json

@@ -5,7 +5,7 @@
     "license": "MIT",
     "scripts": {
         "start": "node dist/app.js",
-        "dev": "nodemon --exec ts-node src/app.ts",
+        "dev": "nodemon --exec ts-node src/app.ts --watch src public",
         "build": "tsc -p tsconfig.json",
         "lint": "eslint src/**/*.ts",
         "format": "prettier '**/*.{js,ts,mjs,cjs,json,css,scss}' --write",

public/assets/css/styles.css

@@ -238,10 +238,27 @@ span {
 .chat form {
     display: flex;
     align-items: center;
-    padding: 8px 12px 8px 20px;
+    padding: 8px 12px 8px 10px;
     background: #f0ecec;
     margin: 8px;
     border-radius: 50px;
+    gap: 0.25rem;
+}
+
+.chat form .upload-btn {
+    padding: 3px;
+    height: 2rem;
+    width: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    box-shadow: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.chat form .upload-btn:hover {
+    background: #bbe7ff;
 }
 
 .chat form input {

public/assets/css/video-grid.css

@@ -16,36 +16,34 @@
 .Scenary {
     position: fixed;
     top: 0;
-    bottom: 28px;
+    bottom: 2rem;
     left: 0;
     right: 0;
     display: flex;
     flex-direction: column;
-    padding: 20px;
-    gap: 20px;
+    padding: 1rem;
+    gap: 1rem;
 }
 
 /* Container of Screen and Dish */
 .Conference {
     display: flex;
     flex: 1;
-    border-radius: 10px;
-    gap: 20px;
+    gap: 1rem;
     max-height: 100%;
     max-width: 100%;
 }
 
 /* Container of Cameras */
 .Dish {
-    overflow: auto;
+    overflow: hidden;
     display: flex;
     align-content: center;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     vertical-align: middle;
     flex: 1;
-    border-radius: 10px;
 }
 
 /* Camera */
@@ -56,9 +54,8 @@
     border-radius: 10px;
     overflow: hidden;
     display: inline-block;
-    box-shadow: var(--shadow-dark);
-    background: #fff;
     animation: show 0.4s ease;
+    border: 2px solid #00889a;
 }
 
 /* Video (check the nice property object-fit) */
@@ -124,8 +121,6 @@
 .Screen {
     flex: 2;
     background: #000;
-    opacity: 0.8;
-    border-radius: 10px;
 }
 
 /* Animation of Cameras */

public/assets/js/video-grid.js

@@ -5,7 +5,7 @@ class CameraGrid {
     // default options
     _dish = false;
     _conference = false;
-    _margin = 10;
+    _margin = 2;
     _aspect = 0;
     _video = false;
     _ratio = this.ratio(); // to perfomance call here

public/call.ejs

@@ -49,12 +49,12 @@
                 </div>
                 <div class="chat-content"></div>
                 <form>
-                    <div id="upload_widget" class="cloudinary-button">
+                    <div id="upload_widget" class="cloudinary-button upload-btn">
                         <img src="/assets/img/upload.png" width="28px" height="28px" alt="upload"/>
                     </div>
                     <input type="text" placeholder="Send Message" class="chat-form-input" name="message">
                     <button type="submit" title="send">
-                        <img src="/assets/img/send.png" width="28px" height="28px" alt="send"/>
+                        <img src="/assets/img/send.png" width="26px" height="26px" alt="send"/>
                     </button>
                 </form>
             </div>