Merge pull request #185 from h3poteto/close-button

fix: Set font size of close button in login

src/renderer/components/Authorize.vue

@@ -1,10 +1,14 @@
 <template>
 <div id="authorize">
-  <div class="close">
-    <el-button type="text" @click="close">
-      <i class="el-icon-close"></i>
+  <el-header>
+    <el-row>
+      <el-col :span="24" class="close">
+        <el-button type="text" icon="el-icon-close" @click="close" class="close-button">
         </el-button>
-  </div>
+      </el-col>
+    </el-row>
+  </el-header>
+  <el-container>
     <el-form ref="form" :model="authorizeForm" label-width="120px" label-position="top" class="authorize-form" v-on:submit.prevent="authorizeSubmit">
       <el-form-item label="Please paste authorization code from your browser:">
         <el-input v-model="authorizeForm.code"></el-input>
@@ -17,6 +21,7 @@
         <el-button type="primary" @click="authorizeSubmit">Submit</el-button>
       </el-form-item>
     </el-form>
+  </el-container>
 </div>
 </template>
 
@@ -59,6 +64,10 @@ export default {
 
   .close {
     text-align: right;
+
+    .close-button {
+      font-size: 24px;
+    }
   }
 
   .authorize-form {

src/renderer/components/Login.vue

@@ -1,12 +1,17 @@
 <template>
-<div id="login">
-  <div class="close">
-    <el-button type="text" @click="close">
-      <i class="el-icon-close"></i>
+<el-container id="login">
+  <el-header>
+    <el-row>
+      <el-col :span="24" class="close">
+        <el-button type="text" icon="el-icon-close" @click="close" class="close-button">
         </el-button>
-  </div>
+      </el-col>
+    </el-row>
+  </el-header>
+  <el-container>
     <login-form></login-form>
-</div>
+  </el-container>
+</el-container>
 </template>
 
 <script>
@@ -39,6 +44,10 @@ export default {
 
   .close {
     text-align: right;
+
+    .close-button {
+      font-size: 24px;
+    }
   }
 
   .el-form-item__label {

src/renderer/components/Login/LoginForm.vue

@@ -1,5 +1,4 @@
 <template>
-<div id="login_form">
   <el-form ref="loginForm" label-width="120px" label-position="top" v-on:submit.prevent="confirm" class="login-form">
     <el-form-item label="At first, let's login a mastodon instance. Please write host name which you want to login.">
       <el-input v-model="domainName" placeholder="mastodon.social"></el-input>
@@ -13,7 +12,6 @@
       <el-button type="primary" class="login" @click="login" v-if="selectedInstance !== null">Login</el-button>
     </el-form-item>
   </el-form>
-</div>
 </template>
 
 <script>

src/renderer/components/TimelineSpace/Modals/ImageViewer.vue

@@ -2,7 +2,7 @@
 <div id="image" v-if="modalOpen">
   <div class="image-wrapper" @keyup.esc.exact="close" tabindex="-1" ref="wrapper">
     <div class="image-header">
-      <i class="el-icon-close" @click="close"></i>
+      <el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
     </div>
     <div class="image-content">
       <img :src="imageURL">
@@ -51,11 +51,9 @@ export default {
     padding: 8px 8px 0 0 ;
     color: #409eff;
     box-sizing: border-box;
-    font-size: 18px;
 
-    i {
-      font-weight: 800;
-      cursor: pointer;
+    .close-button {
+      font-size: 24px;
     }
   }