Remove OpenVidu image before form and update styles in JavaScript and Angular tutorials

application-client/openvidu-angular/src/app/app.component.css

@@ -3,13 +3,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-}
-
-#openvidu-logo {
-    height: 150px;
-    width: auto;
-    margin-top: 3em;
-    margin-bottom: 3em;
+    height: 100%;
 }
 
 #join-dialog {
@@ -17,7 +11,6 @@
     max-width: 900px;
     padding: 60px;
     border-radius: 6px;
-    text-align: center;
     background-color: #f0f0f0;
 }
 
@@ -87,6 +80,7 @@
     justify-content: space-between;
     align-items: center;
     width: 100%;
+    max-width: 1000px;
     padding: 0 20px;
     margin-bottom: 20px;
 }
@@ -99,36 +93,29 @@
 
 #layout-container {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 10px;
     justify-content: center;
     align-items: center;
     width: 100%;
-    max-width: 1250px;
+    max-width: 1000px;
     height: 100%;
 }
 
 /* Media Queries */
 @media screen and (max-width: 768px) {
-    #openvidu-logo {
-        height: 100px;
-        margin-top: 2em;
-        margin-bottom: 2em;
-    }
-
     #join-dialog {
         width: 90%;
         padding: 30px;
     }
 
     #join-dialog h2 {
-        font-size: 40px;
+        font-size: 50px;
     }
 
     #layout-container {
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     }
-
 }
 
 @media screen and (max-width: 480px) {
@@ -138,7 +125,7 @@
     }
 
     #join-dialog h2 {
-        font-size: 30px;
+        font-size: 40px;
     }
 
     #layout-container {

application-client/openvidu-angular/src/app/app.component.html

@@ -1,8 +1,5 @@
 @if (!room) {
 <div id="join">
-    <a href="http://www.openvidu.io/" target="_blank">
-        <img id="openvidu-logo" src="assets/images/openvidu_logo.png" alt="OpenVidu logo" />
-    </a>
     <div id="join-dialog">
         <h2>Join a Video Room</h2>
         <form [formGroup]="roomForm" (ngSubmit)="joinRoom()">

application-client/openvidu-angular/src/index.html

@@ -34,14 +34,14 @@
             <a href="/" title="Home"><h1>Basic Angular</h1></a>
             <div id="links">
                 <a
-                    href="https://github.com/OpenVidu/openvidu-livekit-tutorials/tree/master/basic/frontend/javascript"
+                    href="https://github.com/OpenVidu/openvidu-livekit-tutorials/tree/master/application-client/openvidu-js"
                     title="GitHub Repository"
                     target="_blank"
                 >
                     <i class="fa-brands fa-github"></i>
                 </a>
                 <a
-                    href="https://livekit-tutorials.openvidu.io/basic/frontend/javascript"
+                    href="https://livekit-tutorials.openvidu.io/tutorials/application-client/javascript/"
                     title="Documentation"
                     target="_blank"
                 >
@@ -57,7 +57,7 @@
         <footer>
             <p class="text">Made with love by <span>OpenVidu Team</span></p>
             <a href="http://www.openvidu.io/" target="_blank">
-                <img id="openvidu-isotype" src="assets/images/openvidu_isotype.png" alt="OpenVidu isotype" />
+                <img id="openvidu-logo" src="assets/images/openvidu_logo.png" alt="OpenVidu logo" />
             </a>
         </footer>
     </body>

application-client/openvidu-angular/src/styles.css

@@ -75,7 +75,7 @@ footer .text span {
     font-weight: bold;
 }
 
-#openvidu-isotype {
+#openvidu-logo {
     height: 35px;
     -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;
@@ -83,7 +83,7 @@ footer .text span {
     transition: all 0.1s ease-in-out;
 }
 
-#openvidu-isotype:hover {
+#openvidu-logo:hover {
     -webkit-filter: grayscale(0.5);
     filter: grayscale(0.5);
 }

application-client/openvidu-js/web/index.html

@@ -38,14 +38,14 @@
             <a href="/" title="Home"><h1>Basic JavaScript</h1></a>
             <div id="links">
                 <a
-                    href="https://github.com/OpenVidu/openvidu-livekit-tutorials/tree/master/basic/frontend/javascript"
+                    href="https://github.com/OpenVidu/openvidu-livekit-tutorials/tree/master/application-client/openvidu-js"
                     title="GitHub Repository"
                     target="_blank"
                 >
                     <i class="fa-brands fa-github"></i>
                 </a>
                 <a
-                    href="https://livekit-tutorials.openvidu.io/basic/frontend/javascript"
+                    href="https://livekit-tutorials.openvidu.io/tutorials/application-client/javascript/"
                     title="Documentation"
                     target="_blank"
                 >
@@ -56,9 +56,6 @@
 
         <main>
             <div id="join">
-                <a href="http://www.openvidu.io/" target="_blank">
-                    <img id="openvidu-logo" src="resources/images/openvidu_logo.png" alt="OpenVidu logo" />
-                </a>
                 <div id="join-dialog">
                     <h2>Join a Video Room</h2>
                     <form onsubmit="joinRoom(); return false">
@@ -78,9 +75,7 @@
             <div id="room" hidden>
                 <div id="room-header">
                     <h2 id="room-title"></h2>
-                    <button class="btn btn-danger" id="leave-room-button" onclick="leaveRoom()">
-                        Leave Room
-                    </button>
+                    <button class="btn btn-danger" id="leave-room-button" onclick="leaveRoom()">Leave Room</button>
                 </div>
                 <div id="layout-container"></div>
             </div>
@@ -89,7 +84,7 @@
         <footer>
             <p class="text">Made with love by <span>OpenVidu Team</span></p>
             <a href="http://www.openvidu.io/" target="_blank">
-                <img id="openvidu-isotype" src="resources/images/openvidu_isotype.png" alt="OpenVidu isotype" />
+                <img id="openvidu-logo" src="resources/images/openvidu_logo.png" alt="OpenVidu logo" />
             </a>
         </footer>
     </body>

application-client/openvidu-js/web/styles.css

@@ -55,13 +55,7 @@ main {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-}
-
-#openvidu-logo {
-    height: 150px;
-    width: auto;
-    margin-top: 3em;
-    margin-bottom: 3em;
+    height: 100%;
 }
 
 #join-dialog {
@@ -69,7 +63,6 @@ main {
     max-width: 900px;
     padding: 60px;
     border-radius: 6px;
-    text-align: center;
     background-color: #f0f0f0;
 }
 
@@ -139,6 +132,7 @@ main {
     justify-content: space-between;
     align-items: center;
     width: 100%;
+    max-width: 1000px;
     padding: 0 20px;
     margin-bottom: 20px;
 }
@@ -151,12 +145,12 @@ main {
 
 #layout-container {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 10px;
     justify-content: center;
     align-items: center;
     width: 100%;
-    max-width: 1250px;
+    max-width: 1000px;
     height: 100%;
 }
 
@@ -213,7 +207,7 @@ footer .text span {
     font-weight: bold;
 }
 
-#openvidu-isotype {
+#openvidu-logo {
     height: 35px;
     -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;
@@ -221,7 +215,7 @@ footer .text span {
     transition: all 0.1s ease-in-out;
 }
 
-#openvidu-isotype:hover {
+#openvidu-logo:hover {
     -webkit-filter: grayscale(0.5);
     filter: grayscale(0.5);
 }
@@ -232,23 +226,17 @@ footer .text span {
         padding: 10px 15px;
     }
 
-    #openvidu-logo {
-        height: 100px;
-        margin-top: 2em;
-        margin-bottom: 2em;
-    }
-
     #join-dialog {
         width: 90%;
         padding: 30px;
     }
 
     #join-dialog h2 {
-        font-size: 40px;
+        font-size: 50px;
     }
 
     #layout-container {
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     }
 
     footer {
@@ -267,7 +255,7 @@ footer .text span {
     }
 
     #join-dialog h2 {
-        font-size: 30px;
+        font-size: 40px;
     }
 
     #layout-container {