🎨 Fixed some UI glitch

assets/css/styles.scss

@@ -17,6 +17,10 @@ $responsiveWidth: 720px;
   background-color: rgba(0, 0, 0, .5);
 }
 
+::placeholder {
+  color: var(--fg-color);
+}
+
 * {
   box-sizing: border-box;
   outline: 0;
@@ -194,6 +198,14 @@ fieldset.red legend {
   color: #ff5555;
 }
 
+fieldset.yellow {
+  border-color: #f1fa8c;
+}
+
+fieldset.yellow legend {
+  color: #f1fa8c;
+}
+
 .hidden {
   display: none;
 }
@@ -204,7 +216,7 @@ option,
 textarea,
 pre {
   margin: 4px;
-  padding: 8px 16px;
+  padding: 8px;
   border-radius: 4px;
   width: calc(100% - 8px);
   background-color: var(--bg-dark-color);
@@ -213,12 +225,6 @@ pre {
   font-size: 18px;
   font-family: monospace;
   transition: all 0.2s ease-in-out;
-}
-
-select,
-input,
-option {
-  height: 41px;
 
   &:not([readonly]):hover,
   &:not([readonly]):focus {
@@ -227,6 +233,12 @@ option {
   }
 }
 
+select,
+input,
+option {
+  height: 41px;
+}
+
 input[type="checkbox"] {
   display: none;
 

assets/js/curlparser.js

@@ -220,4 +220,4 @@ function parseCurlCommand(curlCommand) {
 }
 
 
-export default parseCurlCommand;
+export default parseCurlCommand;

components/history.vue

@@ -3,7 +3,7 @@
     <ul>
       <li id="filter-history">
         <label for="filter-history-input">Search History</label>
-        <input id="filter-history-input" type="text" :readonly="history.length === 0 || isClearingHistory" v-model="filterText">
+        <input id="filter-history-input" type="text" placeholder="search history" :readonly="history.length === 0 || isClearingHistory" v-model="filterText">
       </li>
     </ul>
     <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="89" :remain="Math.min(5, filteredHistory.length)">

components/modal.vue

@@ -5,17 +5,13 @@
         <div class="modal-wrapper">
           <div class="modal-container">
             <div class="modal-header">
-              <slot name="header">default header</slot>
+              <slot name="header"></slot>
             </div>
-
             <div class="modal-body">
-              <slot name="body">default body</slot>
+              <slot name="body"></slot>
             </div>
-
             <div class="modal-footer">
-              <slot name="footer">
+              <slot name="footer"></slot>
-                default footer
-              </slot>
             </div>
           </div>
         </div>
@@ -23,50 +19,43 @@
     </transition>
   </div>
 </template>
-
 <style scoped>
 .modal-mask {
   position: fixed;
-  z-index: 9998;
+  z-index: 9;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
-  display: table;
+  display: flex;
-  transition: opacity 0.3s ease;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
 }
 
 .modal-wrapper {
-  display: table-cell;
+  display: flex;
-  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  max-width: 800px;
 }
 
 .modal-container {
-  width: 40rem;
+  display: flex;
-  height: 30rem;
+  flex-grow: 1;
-  margin: 0px auto;
+  flex-direction: column;
-  padding: 20px 30px;
+  margin: 8px;
-  background-color: #fff;
+  padding: 16px;
-  border-radius: 2px;
+  transition: all 0.2s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  background-color: var(--bg-color);
-  transition: all 0.3s ease;
+  border: 2px solid var(--ac-color);
-  font-family: Helvetica, Arial, sans-serif;
+  border-radius: 4px;
-  background-color: rgba(0, 0, 0, 0.95);
-}
-
-.modal-header h3 {
-  margin-top: 0;
-  color: #42b983;
 }
 
 .modal-body {
-  height: 20rem;
+  margin: 8px 0;
-  margin: 20px 0;
-}
-
-.modal-default-button {
-  float: right;
 }
 
 /*
@@ -91,4 +80,4 @@
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
-</style>
+</style>

pages/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="page">
-    <pw-section class="blue" label="Import" ref="import">
+    <pw-section class="yellow" label="Import" ref="import">
-      <button id="show-modal" @click="showModal = true">Import</button>
+      <button id="show-modal" @click="showModal = true">Import cURL</button>
       <import-modal v-if="showModal" @close="showModal = false">
         <div slot="header">
-          <h2>Import cURL</h2>
+          <h3 class="title">Import cURL</h3>
         </div>
         <div slot="body">
-          <textarea id="import-text" style="height:20rem">
+          <textarea id="import-text" autofocus rows="8">
           </textarea>
         </div>
         <div slot="footer">
@@ -90,7 +90,7 @@
               </button>
             </div>
           </div>
-          <textarea ref="generatedCode" name="generatedCode" style="font-family: monospace;" rows="16">{{requestCode}}</textarea>
+          <textarea ref="generatedCode" name="generatedCode" rows="16">{{requestCode}}</textarea>
         </li>
       </ul>
     </pw-section>
@@ -135,7 +135,7 @@
         </ul>
       </div>
       <div v-else>
-        <textarea @keydown="formatRawParams" rows="16" style="font-family: monospace;" v-model="rawParams" v-textarea-auto-height="rawParams"></textarea>
+        <textarea @keydown="formatRawParams" rows="16" v-model="rawParams" v-textarea-auto-height="rawParams"></textarea>
       </div>
     </pw-section>
     <pw-section class="purple" id="response" label="Response" ref="response">
@@ -803,12 +803,10 @@
         observer.observe(requestElement);
       },
       handleImport () {
-        console.log("handleimport");
         let textarea = document.getElementById("import-text")
         let text = textarea.value;
         try {
          let parsedCurl = parseCurlCommand(text);
-         console.log(parsedCurl); 
          this.url=parsedCurl.url.replace(/\"/g,"").replace(/\'/g,"");
          this.url = this.url[this.url.length -1] == '/' ? this.url.slice(0, -1): this.url;
          this.path = "";