login styling

src/components/textbtn.vue

@@ -18,11 +18,12 @@ export default {
     cursor: pointer;
     border: none;
     height: 2.5rem;
-    padding-left: 1.5rem;
+    padding-left: 2rem;
-    padding-right: 1.5rem;
+    padding-right: 2rem;
     background-color: #00BCD4;
     box-shadow: 3px 3px 10px #222;
     border-radius: 1.25rem;
+    margin: 1rem;
   }
   .btnText {
     position: relative;

src/views/login.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="login">
-    <h1 class="title">short your url</h1>
+    <h1 class="title">open chat</h1>
     <div class="input-field" id="longurl">
       <label for="longurl-input"></label>
-      <input class="input" id="longurl-input" type="text" autocomplete="off" maxlength="20" placeholder="chose nickname">
+      <input v-model="session.content.user" class="input" id="longurl-input" type="text" autocomplete="off" maxlength="20" placeholder="chose nickname">
     </div>
     <input type="hidden" value="search" name="login">
     <textbtn text="login" />
@@ -17,12 +17,50 @@ export default {
   name: "login.vue",
   components: {
     textbtn
+  },
+  data(){
+    return {
+      session: {
+        type: "session",
+        time: Date.now(),
+        content: {
+          user: ""
+        }
+      }
+    }
   }
 }
 </script>
 
 <style scoped>
 #login{
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  height: min-content;
+  width: 100%;
+}
+input{
+  padding: 0 2rem 0 2rem;
+  height: 2.5rem;
+  color: #fff;
+  background-color: #1d1d1d;
+  border-radius: 1.25rem;
+  border: 1px solid #fff;
   text-align: center;
+  font-size: 1.1rem;
+}
+input:focus{
+  color: #000;
+  background-color: #fff;
+}
+
+
+@media (max-width: 35rem) {
+  input {
+    width: calc(100% - 8rem);
+  }
 }
 </style>