From 78ae14ea5e394bac7a18d96b5f4c6c84766abb74 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Fri, 15 Oct 2021 20:37:45 +0200
Subject: [PATCH] [mirotalksfu] - fix room name form-input

---
 public/css/landing.css   | 59 ++++++++++++++++++++++++++++++++++++++++
 public/view/landing.html | 20 ++++++++------
 2 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/public/css/landing.css b/public/css/landing.css
index 2b418c0..67d322b 100644
--- a/public/css/landing.css
+++ b/public/css/landing.css
@@ -1019,6 +1019,7 @@ label {
         margin-right: 8px;
     }
 }
+
 .button {
     display: inline-flex;
     font-size: 14px;
@@ -1791,3 +1792,61 @@ main {
     padding-left: 0;
     padding-right: 0;
 }
+
+@media (min-width: 641px) {
+    .cta .form-input {
+        min-width: 280px;
+    }
+
+    .cta-inner {
+        padding-left: 48px;
+        padding-right: 48px;
+    }
+}
+
+@media (max-width: 640px) {
+    .form-group-desktop .form-input {
+        margin-bottom: 12px;
+    }
+
+    .form-group-desktop .button {
+        width: 100%;
+    }
+}
+
+@media (min-width: 641px) {
+    .form-group-desktop {
+        display: flex;
+    }
+
+    .form-group-desktop .form-input {
+        flex-grow: 1;
+        flex-shrink: 1;
+        margin-right: 12px;
+    }
+
+    .form-group-desktop .button {
+        padding-left: 24px;
+        padding-right: 24px;
+        flex-shrink: 0;
+    }
+}
+
+.form-input {
+    display: block;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: -0.1px;
+    padding: 11px 15px;
+    height: 48px;
+    border: none;
+    border-radius: 0;
+    justify-content: center;
+    text-align: center;
+    white-space: nowrap;
+    background-color: #242830;
+    color: #fff !important;
+    box-shadow: none;
+    max-width: 100%;
+    width: 100%;
+}
diff --git a/public/view/landing.html b/public/view/landing.html
index 8c2d80a..bf4b4ba 100644
--- a/public/view/landing.html
+++ b/public/view/landing.html
@@ -16,7 +16,7 @@
 
         <!-- Title and Icon -->
 
-        <title>MiroTalk SFU - Free Video Calls, Messaging and Screen Sharing.</title>
+        <title>MiroTalk SFU, Free Video Calls, Messaging and Screen Sharing</title>
         <link rel="shortcut icon" href="../images/logo.svg" />
         <link rel="apple-touch-icon" href="../images/logo.svg" />
 
@@ -111,16 +111,18 @@
                                 Pick a room name.<br />
                                 How about this one?
                             </h3>
-                            <div>
+                            <div class="cta">
                                 <div class="mb-24">
                                     <label for="roomName"></label>
-                                    <input class="button" type="text" id="roomName" value="" />
-                                    <button
-                                        class="button button-primary button-wide-mobile pulse"
-                                        onclick="{window.location.href = '/join/' + document.getElementById('roomName').value}"
-                                    >
-                                        Join to room
-                                    </button>
+                                    <div class="form-group-desktop">
+                                        <input class="form-input" type="text" id="roomName" value="" />
+                                        <button
+                                            class="button button-primary pulse"
+                                            onclick="{window.location.href = '/join/' + document.getElementById('roomName').value}"
+                                        >
+                                            Join to room
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
                         </div>