:zap: Better icons, buttons & animations

.directory

@@ -1,6 +0,0 @@
-[Dolphin]
-Timestamp=2019,8,23,13,58,13
-Version=4
-
-[Settings]
-HiddenFilesShown=true

.gitignore

@@ -91,3 +91,6 @@ sw.*
 
 # Postwoman build data
 .postwoman
+
+# File explorer
+.directory

assets/css/styles.scss

@@ -248,7 +248,7 @@ input[type="checkbox"] {
       justify-content: center;
       margin: 8px 8px 8px 0;
       color: transparent;
-      transition: 0.2s;
+      transition: all 0.2s ease-in-out;
     }
   }
 
@@ -451,7 +451,7 @@ input[type="radio"] + label {
   padding: 8px 16px;
   border-bottom: 2px solid transparent;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s ease-in-out;
 
   &:hover {
     border-color: var(--brd-color);

components/history.vue

@@ -2,7 +2,7 @@
   <pw-section class="gray" label="History">
     <ul>
       <li id="filter-history">
-        <input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0 || isClearingHistory" v-model="filterText">
+        <input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText">
       </li>
     </ul>
     <ul>
@@ -36,14 +36,14 @@
         </li>
         <div class="show-on-small-screen">
           <li>
-            <button class="icon" :id="'delete-button#'+index" :disabled="isClearingHistory" @click="deleteHistory(entry)" aria-label="Delete">
+            <button class="icon" :id="'delete-button#'+index" @click="deleteHistory(entry)" aria-label="Delete">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                 <path d="M5.633 22.031c1.135 1.313 3.735 1.969 6.334 1.969 2.601 0 5.199-.656 6.335-1.969.081-.404 3.698-18.468 3.698-18.882 0-2.473-7.338-3.149-10-3.149-4.992 0-10 1.242-10 3.144 0 .406 3.556 18.488 3.633 18.887zm6.418-16.884c-4.211 0-7.625-.746-7.625-1.667s3.414-1.667 7.625-1.667 7.624.746 7.624 1.667-3.413 1.667-7.624 1.667z"/>
               </svg>
             </button>
           </li>
           <li>
-            <button class="icon" :id="'use-button#'+index" :disabled="isClearingHistory" @click="useHistory(entry)" aria-label="Edit">
+            <button class="icon" :id="'use-button#'+index" @click="useHistory(entry)" aria-label="Edit">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                 <path d="M19.769 9.923l-12.642 12.639-7.127 1.438 1.438-7.128 12.641-12.64 5.69 5.691zm1.414-1.414l2.817-2.82-5.691-5.689-2.816 2.817 5.69 5.692z"/>
               </svg>

components/modal.vue

@@ -25,7 +25,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -69,6 +69,6 @@
   .modal-fade-enter .modal-container,
   .modal-fade-leave-active .modal-container {
     transform: scale(0.9);
-    transition: all .2s ease;
+    transition: all 0.1s ease-in-out;
   }
 </style>

components/settings/swatch.vue

@@ -2,7 +2,7 @@
   <div class="color" :data-color="color">
     <span :style="{backgroundColor: color}" class="preview">
       <svg v-if="active" class="activeTick" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-        <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/>
+        <circle cx="12" cy="12" r="12"/>
       </svg>
     </span>
     {{ name || color }}
@@ -14,13 +14,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 0 8px;
+    padding: 0 16px 0 4px;
     margin: 4px;
-    background-color: var(--brd-color);
+    background-color: var(--bg-dark-color);
     color: var(--fg-color);
-    border-radius: 8px;
+    border-radius: 20px;
     cursor: pointer;
-    height: 41px;
+    height: 40px;
 
     &.active {
       background-color: var(--bg-dark-color);
@@ -46,7 +46,7 @@
 
   .color.vibrant {
     .preview .activeTick {
-      fill: #000;
+      fill: var(--act-color);
     }
   }
 </style>

pages/index.vue

@@ -141,7 +141,7 @@
           <li>
             <button class="icon" @click="addRequestBodyParam" name="addrequest">
               <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                <path d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z"/>
+                <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
               </svg>
               <span>Add New</span>
             </button>
@@ -303,7 +303,7 @@
             <li>
               <button class="icon" @click="addRequestHeader">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                  <path d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z"/>
+                  <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
                 </svg>
                 <span>Add New</span>
               </button>
@@ -342,7 +342,7 @@
             <li>
               <button class="icon" @click="addRequestParam">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
-                  <path d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z"/>
+                  <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
                 </svg>
                 <span>Add New</span>
               </button>

pages/settings.vue

@@ -80,7 +80,7 @@
         //        set the relevant values.
         themes: [{
             "color": "rgb(37, 38, 40)",
-            "name": "Dark (Default)",
+            "name": "Dark (default)",
             "class": ""
           },
           {
@@ -95,7 +95,7 @@
           // If the color is vibrant, black is used as the active foreground color.
           {
             "color": "#50fa7b",
-            "name": "Green (Default)",
+            "name": "Green (default)",
             "vibrant": true
           },
           {