From 8910e9b7e4f9da27e9e066527399d085572511d4 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Tue, 9 Aug 2022 12:18:53 +1000
Subject: [PATCH 01/11] feat(interactables): clean up input group

---
 .../interactables/InputGroup/InputGroup.html  | 22 ++++---
 .../interactables/InputGroup/InputGroup.less  | 40 +++++++------
 .../interactables/InputGroup/InputGroup.vue   | 58 +++++++------------
 components/interactables/InputGroup/README.md |  7 +--
 .../interactables/InputGroup/types.d.ts       |  7 ++-
 5 files changed, 63 insertions(+), 71 deletions(-)

diff --git a/components/interactables/InputGroup/InputGroup.html b/components/interactables/InputGroup/InputGroup.html
index 21307dc13f..90d05d7eaa 100644
--- a/components/interactables/InputGroup/InputGroup.html
+++ b/components/interactables/InputGroup/InputGroup.html
@@ -1,29 +1,33 @@
-<div>
-  <TypographyText v-if="label" as="label" uppercase> {{label}} </TypographyText>
+<div class="input-container">
+  <TypographyText v-if="label" as="label" uppercase class="input-label">
+    {{ label }}
+  </TypographyText>
   <div class="input-wrapper">
     <input
       ref="input"
       class="input"
-      :class="`is-${size} is-${type}`"
+      :class="`font-size-${size} is-${color}`"
       :value="text"
-      :type="inputKind"
+      :type="type"
       :readonly="readonly"
       :placeholder="placeholder"
       :maxLength="maxLength"
-      :disabled="disabled || loading"
-      @keydown.enter="action"
+      :disabled="disabled"
+      @keydown.enter="handleSubmit"
       @input="$emit('change', $event.target.value)"
       data-cy="input-group"
     />
     <button
       class="button"
-      :class="[`is-${type} is-${size}`, {disabled: disabled}]"
-      @click="disabled || loading ? null : action()"
+      :class="[`font-size-${size} is-${color}`, {disabled: disabled}]"
+      @click="handleSubmit"
       data-cy="submit-input"
     >
       <UiLoadersSpinner v-if="loading" spinning />
       <slot v-else></slot>
     </button>
   </div>
-  <span v-if="showLimit" class="char-limit"> {{ textLength }} </span>
+  <span v-if="showLimit" class="char-limit">
+    {{ text.length }}/{{ maxLength }}
+  </span>
 </div>
diff --git a/components/interactables/InputGroup/InputGroup.less b/components/interactables/InputGroup/InputGroup.less
index c204d08806..bbadfe6f26 100644
--- a/components/interactables/InputGroup/InputGroup.less
+++ b/components/interactables/InputGroup/InputGroup.less
@@ -1,21 +1,25 @@
-.control:nth-child(1) {
-  &:extend(.full-width);
-}
-.input-wrapper {
+.input-container {
   display: flex;
-  &:extend(.bordered);
-  &:extend(.round-corners);
-}
+  flex-direction: column;
 
-.input.is-normal,
-.button.is-normal {
-  height: 2.3rem;
-  font-size: @text-size;
-}
-.char-limit {
-  float: right;
-  margin-right: @light-spacing;
-  font-size: @mini-text-size;
-  &:extend(.font-muted);
-  margin-left: auto;
+  .input-wrapper {
+    display: flex;
+    align-items: stretch;
+
+    &:extend(.bordered);
+    &:extend(.round-corners);
+
+    .button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .char-limit {
+    float: right;
+    margin-right: @light-spacing;
+    font-size: @mini-text-size;
+    &:extend(.font-muted);
+    margin-left: auto;
+  }
 }
diff --git a/components/interactables/InputGroup/InputGroup.vue b/components/interactables/InputGroup/InputGroup.vue
index e26a8c9ebd..f410c27143 100644
--- a/components/interactables/InputGroup/InputGroup.vue
+++ b/components/interactables/InputGroup/InputGroup.vue
@@ -1,8 +1,8 @@
 <template src="./InputGroup.html"></template>
+
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { toArray } from 'lodash'
-import { InputTypes, InputStyle, InputSize } from './types.d'
+import { InputType, InputColor, InputSize } from './types'
 
 export default Vue.extend({
   model: {
@@ -18,49 +18,30 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
-    /**
-     * autofocus the input on mount
-     */
     autofocus: {
       type: Boolean,
       default: false,
     },
-    /**
-     * Abstraction of native "type"
-     */
-    inputKind: {
-      type: String as PropType<InputTypes>,
+    type: {
+      type: String as PropType<InputType>,
       default: 'text',
     },
-    /**
-     * Placeholder text for blank inputs
-     */
-    placeholder: {
-      type: String,
-      default: 'Placeholder...',
-    },
-    /**
-     * Size of the input, reference InputSize types or Bulma.io
-     */
     size: {
       type: String as PropType<InputSize>,
-      default: 'normal',
+      default: 'md',
     },
-    /**
-     * Style of the input, reference InputStyle types or Bulma.io
-     */
-    type: {
-      type: String as PropType<InputStyle>,
-      default: 'normal',
+    color: {
+      type: String as PropType<InputColor>,
+      default: 'primary',
+    },
+    placeholder: {
+      type: String,
+      default: '',
     },
     disabled: {
       type: Boolean,
       default: false,
     },
-    action: {
-      type: Function,
-      required: true,
-    },
     loading: {
       type: Boolean,
       default: false,
@@ -78,17 +59,20 @@ export default Vue.extend({
       default: 256,
     },
   },
-  computed: {
-    textLength(): string {
-      /* toArray(): https://lodash.com/docs/4.17.15#toArray */
-      return `${toArray(this.text).length}/${this.maxLength}`
-    },
-  },
   mounted() {
     if (this.autofocus) {
       this.$nextTick(() => (this.$refs?.input as HTMLElement).focus())
     }
   },
+  methods: {
+    handleSubmit(event: InputEvent) {
+      if (this.disabled || this.loading) {
+        return
+      }
+      this.$emit('submit', event)
+    },
+  },
 })
 </script>
+
 <style scoped lang="less" src="./InputGroup.less"></style>
diff --git a/components/interactables/InputGroup/README.md b/components/interactables/InputGroup/README.md
index 039118f36a..4be5792227 100644
--- a/components/interactables/InputGroup/README.md
+++ b/components/interactables/InputGroup/README.md
@@ -7,11 +7,10 @@ Generic input group component.
 ```vue
 <InteractablesInputGroup
   v-model="input2Text"
-  size="small"
-  input-kind="number"
-  type="dark"
+  size="xs"
+  type="number"
   :loading="inputGroupLoading"
-  :action="
+  @submit="
     () => {
       inputGroupLoading = true
     }
diff --git a/components/interactables/InputGroup/types.d.ts b/components/interactables/InputGroup/types.d.ts
index 754f398cb3..2f8d25eede 100644
--- a/components/interactables/InputGroup/types.d.ts
+++ b/components/interactables/InputGroup/types.d.ts
@@ -1,9 +1,10 @@
-export type InputTypes = 'text' | 'number' | 'password'
-export type InputStyle =
+export type InputType = 'text' | 'number' | 'password'
+export type InputColor =
   | 'primary'
   | 'link'
   | 'info'
   | 'success'
   | 'warning'
   | 'danger'
-export type InputSize = 'small' | 'normal' | 'medium' | 'large'
+  | null
+export type InputSize = 'sm' | 'md' | 'lg' | 'xl'

From 0b6f332384ee0c69c11dff5597fa30e6fdc5aedd Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Mon, 8 Aug 2022 15:55:59 +1000
Subject: [PATCH 02/11] feat: use new input group props

---
 .../interactables/QuickProfile/QuickProfile.html     |  3 +--
 components/views/files/controls/Controls.html        |  5 ++---
 components/views/files/rename/Rename.html            |  3 +--
 .../views/settings/pages/accounts/Accounts.html      |  3 +--
 .../settings/pages/notifications/Notifications.html  | 12 +++++-------
 components/views/settings/pages/profile/Profile.html | 12 ++++--------
 components/views/wallet/balance/Balance.html         |  6 +-----
 components/views/wallet/mini/body/Body.html          |  7 +++----
 pages/auth/unlock/Unlock.html                        | 11 ++++++-----
 pages/components.vue                                 |  9 ++++-----
 10 files changed, 28 insertions(+), 43 deletions(-)

diff --git a/components/interactables/QuickProfile/QuickProfile.html b/components/interactables/QuickProfile/QuickProfile.html
index 98c12b49ad..2793cfee8e 100644
--- a/components/interactables/QuickProfile/QuickProfile.html
+++ b/components/interactables/QuickProfile/QuickProfile.html
@@ -24,10 +24,9 @@
   <template v-if="!isMe">
     <UiHorizontalRule />
     <InteractablesInputGroup
-      type="primary"
       v-model="text"
       :placeholder="`${$t('friends.message')} ${user.name}...`"
-      :action="sendMessage"
+      @submit="sendMessage"
       :maxLength="$Config.chat.maxChars"
       showLimit
     >
diff --git a/components/views/files/controls/Controls.html b/components/views/files/controls/Controls.html
index 2e80d28f0e..55479a0d9c 100644
--- a/components/views/files/controls/Controls.html
+++ b/components/views/files/controls/Controls.html
@@ -35,9 +35,8 @@
     <InteractablesInputGroup
       v-model="text"
       class="name"
-      size="small"
-      type="primary"
-      :action="addFolder"
+      size="xs"
+      @submit="addFolder"
       :placeholder="$t('pages.files.controls.name_folder')"
     >
       <folder-plus-icon size="1.3x" />
diff --git a/components/views/files/rename/Rename.html b/components/views/files/rename/Rename.html
index e277b60622..823d172243 100644
--- a/components/views/files/rename/Rename.html
+++ b/components/views/files/rename/Rename.html
@@ -2,11 +2,10 @@
   <InteractablesClose :action="closeModal" />
   <TypographyTitle :size="3" :text="$t('modal.rename')" />
   <InteractablesInputGroup
-    type="primary"
     v-model="text"
-    :action="renameItem"
     ref="inputGroup"
     data-cy="files-rename-input"
+    @submit="renameItem"
   >
     <save-icon size="1.3x" />
   </InteractablesInputGroup>
diff --git a/components/views/settings/pages/accounts/Accounts.html b/components/views/settings/pages/accounts/Accounts.html
index 7cc7291eca..3c5c8d25f2 100644
--- a/components/views/settings/pages/accounts/Accounts.html
+++ b/components/views/settings/pages/accounts/Accounts.html
@@ -11,9 +11,8 @@
     <TypographyLabel :text="$t('pages.settings.accounts.active')" />
     <InteractablesInputGroup
       readonly
-      type="primary"
-      :action="copyAddress"
       :text="accounts.active"
+      @submit="copyAddress"
     >
       <clipboard-icon size="1x" />
     </InteractablesInputGroup>
diff --git a/components/views/settings/pages/notifications/Notifications.html b/components/views/settings/pages/notifications/Notifications.html
index 3a4b2259a4..b8e0edf80d 100644
--- a/components/views/settings/pages/notifications/Notifications.html
+++ b/components/views/settings/pages/notifications/Notifications.html
@@ -49,22 +49,20 @@
         <InteractablesInputGroup
           v-if="NotificationStatus === 'granted' || Platform === PlatformTypeEnum.ELECTRON"
           class="modal-input"
-          size="small"
-          type="primary"
+          size="xs"
           v-model="$data.NotificationText"
           :placeholder="$t('pages.settings.notifications.send_placeholder')"
-          :action="sendNotification"
+          @submit="sendNotification"
         >
           <arrow-right-icon size="1x" />
         </InteractablesInputGroup>
       </span>
       <span v-if="Platform === PlatformTypeEnum.ANDROID">
         <InteractablesInputGroup
-          class="modal-input"
-          size="small"
-          type="primary"
           v-model="NotificationText"
-          :action="sendNotification"
+          class="modal-input"
+          size="xs"
+          @submit="sendNotification"
         >
           <arrow-right-icon size="1x" />
         </InteractablesInputGroup>
diff --git a/components/views/settings/pages/profile/Profile.html b/components/views/settings/pages/profile/Profile.html
index 7b00170bdc..22f4ccc961 100644
--- a/components/views/settings/pages/profile/Profile.html
+++ b/components/views/settings/pages/profile/Profile.html
@@ -76,11 +76,9 @@
               <div class="status-input">
                 <InteractablesInputGroup
                   v-model="status"
-                  size="small"
-                  input-kind="text"
-                  type="primary"
+                  size="xs"
+                  type="text"
                   :placeholder="$t('pages.settings.profile.status_placeholder')"
-                  :action="() => {}"
                 >
                   <edit-icon size="1x" />
                 </InteractablesInputGroup>
@@ -141,11 +139,9 @@
               </div>
               <InteractablesInputGroup
                 v-model="accountUrl"
-                size="small"
-                input-kind="text"
-                type="primary"
+                size="xs"
+                type="text"
                 :placeholder="$t('pages.settings.profile.accounts.url_placeholder')"
-                :action="() => {}"
               >
                 <edit-icon size="1x" />
               </InteractablesInputGroup>
diff --git a/components/views/wallet/balance/Balance.html b/components/views/wallet/balance/Balance.html
index 27921f4c20..7e34b0a2fb 100644
--- a/components/views/wallet/balance/Balance.html
+++ b/components/views/wallet/balance/Balance.html
@@ -8,11 +8,7 @@
       <TypographyTitle :size="5" text="123,456.78" />
       <TypographyText> Last Updated: Today </TypographyText>
       <div class="inline">
-        <InteractablesInputGroup
-          class="modal-input"
-          size="small"
-          type="primary"
-        >
+        <InteractablesInputGroup class="modal-input" size="xs">
           <send-icon size="1x" />
         </InteractablesInputGroup>
         <InteractablesSelect class="form-control" />
diff --git a/components/views/wallet/mini/body/Body.html b/components/views/wallet/mini/body/Body.html
index 7f640e365c..71d78136cd 100644
--- a/components/views/wallet/mini/body/Body.html
+++ b/components/views/wallet/mini/body/Body.html
@@ -6,13 +6,12 @@
   <UiSpacer :height="45" />
   <div class="flex-row">
     <InteractablesInputGroup
+      v-model="accountID"
       class="input-container"
-      type="primary"
-      size="small"
+      size="xs"
       :placeholder="$t('friends.search_placeholder')"
-      :action="searchFriend"
-      v-model="accountID"
       :loading="searching"
+      @submit="searchFriend"
     >
       <check-circle-2-icon size="1x" />
     </InteractablesInputGroup>
diff --git a/pages/auth/unlock/Unlock.html b/pages/auth/unlock/Unlock.html
index 39247ad654..2b368027a6 100644
--- a/pages/auth/unlock/Unlock.html
+++ b/pages/auth/unlock/Unlock.html
@@ -16,14 +16,15 @@
     </div>
     <InteractablesInputGroup
       v-model="pin"
-      size="small"
-      input-kind="password"
-      :type="`${error ? 'danger' : 'primary'}`"
-      :data-cy="`pin-label`"
+      size="xs"
+      type="password"
+      :color="`${error ? 'danger' : 'primary'}`"
+      data-cy="pin-label"
       :label="step === 'login' ? $t('pages.unlock.decrypt') : $t('pages.unlock.choose_pin')"
       :placeholder="$t('pages.unlock.placeholder')"
       :loading="status === 'loading'"
-      :action="action"
+      autofocus
+      @submit="action"
     >
       <unlock-icon size="1x" v-if="getIcon() === 'unlocked'" />
       <chevron-right-icon size="1x" v-else />
diff --git a/pages/components.vue b/pages/components.vue
index 15a8b7fe70..c624944912 100644
--- a/pages/components.vue
+++ b/pages/components.vue
@@ -192,17 +192,16 @@
             <p>Grouped Input</p>
             <InteractablesInputGroup
               v-model="input2Text"
-              size="small"
-              input-kind="number"
-              type="primary"
+              size="sm"
+              type="number"
               :label-text="input2Text.toString()"
               :loading="inputGroupLoading"
-              :action="
+              :icon="{ style: 'far', name: 'lock-open' }"
+              @submit="
                 () => {
                   inputGroupLoading = !inputGroupLoading
                 }
               "
-              :icon="{ style: 'far', name: 'lock-open' }"
             />
           </div>
         </div>

From 1e62f77537cee70bee6484828770f1480b952b9a Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Mon, 8 Aug 2022 15:56:20 +1000
Subject: [PATCH 03/11] fix(unlock): input focus logic

---
 pages/auth/unlock/index.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/pages/auth/unlock/index.vue b/pages/auth/unlock/index.vue
index 23b0dbf451..7862cb960e 100644
--- a/pages/auth/unlock/index.vue
+++ b/pages/auth/unlock/index.vue
@@ -101,6 +101,7 @@ export default Vue.extend({
      */
     async decrypt(redirect = true) {
       try {
+        this.status = 'loading'
         await this.$store.dispatch(
           'accounts/unlock',
           this.pin || (this.isDev ? DEV_PIN : ''),
@@ -118,8 +119,10 @@ export default Vue.extend({
           redirect && this.$router.replace('/')
         }
       } catch (error: any) {
-        this.error = error.message
         this.pin = ''
+        this.error = error.message
+      } finally {
+        this.status = 'idle'
       }
     },
     // Create & store a new pin, then decrypt.
@@ -130,10 +133,13 @@ export default Vue.extend({
      */
     async create() {
       try {
+        this.status = 'loading'
         await this.$store.dispatch('accounts/setPin', this.pin)
         await this.decrypt()
       } catch (error: any) {
         this.error = error.message
+      } finally {
+        this.status = 'idle'
       }
     },
     async deleteAccount() {
@@ -144,8 +150,11 @@ export default Vue.extend({
       location.reload()
     },
     action() {
-      this.status = 'loading'
-      return this.step === 'login' ? this.decrypt() : this.create()
+      if (this.step === 'login') {
+        this.decrypt()
+        return
+      }
+      this.create()
     },
     // FOR DEVELOPMENT PURPOSES ONLY
     async createRandom() {

From a57e73bb88c2f6287c3fb10811bf980b169f0dec Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Mon, 8 Aug 2022 17:36:03 +1000
Subject: [PATCH 04/11] feat: show clear icon prop

---
 .../interactables/InputGroup/InputGroup.html  |  5 +--
 .../interactables/InputGroup/InputGroup.less  | 36 +++++++++++++++++--
 .../interactables/InputGroup/InputGroup.vue   | 32 +++++++++++++++++
 3 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/components/interactables/InputGroup/InputGroup.html b/components/interactables/InputGroup/InputGroup.html
index 90d05d7eaa..3a0efa225e 100644
--- a/components/interactables/InputGroup/InputGroup.html
+++ b/components/interactables/InputGroup/InputGroup.html
@@ -1,7 +1,7 @@
 <div class="input-container">
-  <TypographyText v-if="label" as="label" uppercase class="input-label">
+  <TypographyLabel v-if="label" as="label" uppercase class="input-label">
     {{ label }}
-  </TypographyText>
+  </TypographyLabel>
   <div class="input-wrapper">
     <input
       ref="input"
@@ -18,6 +18,7 @@
       data-cy="input-group"
     />
     <button
+      v-if="$slots.default"
       class="button"
       :class="[`font-size-${size} is-${color}`, {disabled: disabled}]"
       @click="handleSubmit"
diff --git a/components/interactables/InputGroup/InputGroup.less b/components/interactables/InputGroup/InputGroup.less
index bbadfe6f26..689da430d4 100644
--- a/components/interactables/InputGroup/InputGroup.less
+++ b/components/interactables/InputGroup/InputGroup.less
@@ -1,14 +1,44 @@
-.input-container {
+.input-group {
   display: flex;
   flex-direction: column;
+  width: 100%;
 
-  .input-wrapper {
+  .input-outer {
     display: flex;
     align-items: stretch;
-
+    flex-grow: 1;
     &:extend(.bordered);
     &:extend(.round-corners);
 
+    .input-inner {
+      position: relative;
+      display: flex;
+      flex-grow: 1;
+
+      .input {
+        &.show-clear-button {
+          padding-right: 2rem;
+        }
+      }
+
+      .clear-button {
+        position: absolute;
+        inset: 0 0 0 auto;
+        font-size: @tiny-icon-size;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: @light-spacing;
+        color: @text-muted;
+      }
+
+      &:not(:last-child) .input {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right: 0;
+      }
+    }
+
     .button {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
diff --git a/components/interactables/InputGroup/InputGroup.vue b/components/interactables/InputGroup/InputGroup.vue
index f410c27143..cdadc95950 100644
--- a/components/interactables/InputGroup/InputGroup.vue
+++ b/components/interactables/InputGroup/InputGroup.vue
@@ -2,9 +2,13 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
+import { DeleteIcon } from 'satellite-lucide-icons'
 import { InputType, InputColor, InputSize } from './types'
 
 export default Vue.extend({
+  components: {
+    DeleteIcon,
+  },
   model: {
     prop: 'text',
     event: 'change',
@@ -58,6 +62,20 @@ export default Vue.extend({
       type: Number,
       default: 256,
     },
+    showClear: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      value: this.text ?? '',
+    }
+  },
+  computed: {
+    isEmpty() {
+      return !this.value.length
+    },
   },
   mounted() {
     if (this.autofocus) {
@@ -71,6 +89,20 @@ export default Vue.extend({
       }
       this.$emit('submit', event)
     },
+    handleInput(event: InputEvent) {
+      if (!event.target) {
+        return
+      }
+      const target = event.target as HTMLInputElement
+      this.value = target.value
+      this.$emit('change', target.value)
+    },
+    clearInput() {
+      const input = this.$refs.input as HTMLInputElement
+      this.value = ''
+      input.value = ''
+      input.focus()
+    },
   },
 })
 </script>

From af8d7bc53cebee28688145b5a8f9e0f32e99b470 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Tue, 9 Aug 2022 12:03:24 +1000
Subject: [PATCH 05/11] feat: consolidate input and input group components

---
 assets/styles/base.less                       |  24 ---
 components/interactables/Input/Input.html     |  75 ++++----
 components/interactables/Input/Input.less     | 104 ++++++-----
 components/interactables/Input/Input.vue      | 167 ++++++------------
 components/interactables/Input/README.md      |  26 ++-
 components/interactables/Input/types.d.ts     |   7 +-
 .../interactables/InputGroup/InputGroup.less  |  55 ------
 .../interactables/InputGroup/InputGroup.vue   | 110 ------------
 components/interactables/InputGroup/README.md |  39 ----
 .../interactables/InputGroup/types.d.ts       |  10 --
 .../QuickProfile/QuickProfile.html            |   4 +-
 .../interactables/UserPicker/UserPicker.html  |   3 +-
 .../views/chat/enhancers/Enhancers.html       |   2 +-
 .../views/chat/enhancers/glyphs/Glyphs.html   |   2 +-
 components/views/files/controls/Controls.html |   8 +-
 components/views/files/rename/Rename.html     |   4 +-
 .../marketplace/searchbox/Searchbox.html      |   4 +-
 .../navigation/server/sidebar/Sidebar.html    |   3 +-
 .../views/navigation/sidebar/Sidebar.html     |   7 +-
 .../views/navigation/sidebar/quick/Quick.html |   9 +-
 components/views/servers/create/Create.html   |   2 -
 .../settings/pages/accounts/Accounts.html     |   8 +-
 .../views/settings/pages/developer/Info.html  |   8 +-
 .../pages/notifications/Notifications.html    |   8 +-
 .../views/settings/pages/privacy/Privacy.html |   2 +-
 .../views/settings/pages/profile/Profile.html |   8 +-
 components/views/wallet/balance/Balance.html  |   4 +-
 components/views/wallet/mini/body/Body.html   |   4 +-
 pages/auth/unlock/Unlock.html                 |   5 +-
 pages/components.vue                          |  11 +-
 pages/message/NewMessage.html                 |   4 +-
 pages/mobile/chat/_id.vue                     |   4 +-
 32 files changed, 227 insertions(+), 504 deletions(-)
 delete mode 100644 components/interactables/InputGroup/InputGroup.less
 delete mode 100644 components/interactables/InputGroup/InputGroup.vue
 delete mode 100644 components/interactables/InputGroup/README.md
 delete mode 100644 components/interactables/InputGroup/types.d.ts

diff --git a/assets/styles/base.less b/assets/styles/base.less
index 828a901b09..80597ee18e 100644
--- a/assets/styles/base.less
+++ b/assets/styles/base.less
@@ -715,34 +715,10 @@ button {
   }
 }
 
-//Inputs
-.input {
-  &:extend(.input-bg);
-  &:extend(.font-primary);
-  box-shadow: none !important;
-  &:active,
-  &:focus {
-    background: @semitransparent-lightest-gradient !important;
-  }
-}
-
 ::placeholder {
   color: @text-muted !important;
 }
 
-.is-primary.input,
-.is-dark.input {
-  &:extend(.input-bg);
-  &:extend(.font-primary);
-  border-color: transparent;
-
-  &:active,
-  &:focus {
-    border: none;
-    outline: none;
-  }
-}
-
 //Search Input
 .search-query-highlight {
   &:extend(.background-flair);
diff --git a/components/interactables/Input/Input.html b/components/interactables/Input/Input.html
index e136c7b600..90b40b374f 100644
--- a/components/interactables/Input/Input.html
+++ b/components/interactables/Input/Input.html
@@ -1,36 +1,49 @@
-<div>
-  <TypographyLabel
-    class="input-label"
-    v-if="labelText.length"
-    :text="labelText"
-  />
-  <div
-    :class="{'search-box': true, 'right-icon': deleteIcon && internalText.length}"
-  >
-    <input
-      v-model="internalText"
-      class="input"
-      :class="{invalid : invalid, [`is-${size} is-${type}`]: true}"
-      :readonly="readonly"
-      :disabled="disabled"
-      :type="inputKind"
-      :placeholder="placeholder"
-      @input="update"
-      ref="input"
-      :maxLength="maxLength"
-      :minLength="minLength"
-      @keydown.space="preventLeadingSpace"
-      @paste="preventEmptyPaste"
-      @keydown.enter="submitEnter"
-      @focus="$emit('focus', $event)"
-      @blur="$emit('blur', $event)"
-    />
+<div class="input-group">
+  <TypographyLabel v-if="label" class="input-label" :text="label" />
+  <div class="input-outer">
+    <div class="input-inner">
+      <input
+        ref="input"
+        class="input"
+        :class="[
+          `font-size-${size} is-${color}`,
+          {
+            'show-clear-button': showClear,
+            'is-danger': error || invalid
+          }
+        ]"
+        :value="value"
+        :type="type"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        :minLength="minLength"
+        :maxLength="maxLength"
+        :disabled="disabled"
+        @keydown.enter="handleSubmit"
+        @input="handleInput"
+        data-cy="input-group"
+      />
+      <button
+        v-if="showClear && !isEmpty"
+        class="clear-button"
+        @click="clearInput"
+      >
+        <delete-icon size="1x" />
+      </button>
+    </div>
     <button
-      v-if="deleteIcon && internalText.length"
-      class="search-clear"
-      @click="clearSearch"
+      v-if="$slots.default"
+      class="button"
+      :class="[`font-size-${size} is-${color}`, {disabled: disabled}]"
+      @click="handleSubmit"
+      data-cy="submit-input"
     >
-      <delete-icon size="1x" />
+      <UiLoadersSpinner v-if="loading" spinning />
+      <slot v-else></slot>
     </button>
   </div>
+  <span v-if="showLimit" class="char-limit">
+    {{ text.length }}/{{ maxLength }}
+  </span>
+  <TypographyError v-if="error" class="error" :text="error" small />
 </div>
diff --git a/components/interactables/Input/Input.less b/components/interactables/Input/Input.less
index 1be10150cf..d8bfced3eb 100644
--- a/components/interactables/Input/Input.less
+++ b/components/interactables/Input/Input.less
@@ -1,51 +1,69 @@
-.input-label {
-  text-align: left;
-}
-.is-full-width {
-  &:extend(.full-width);
-}
-.search-box {
-  &.right-icon {
-    input {
-      padding-right: 34px;
+.input-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .input-outer {
+    display: flex;
+    align-items: stretch;
+    flex-grow: 1;
+
+    .input-inner {
+      position: relative;
+      display: flex;
+      flex-grow: 1;
+
+      .input {
+        flex-grow: 1;
+        padding: @light-spacing;
+        &:extend(.input-bg);
+        &:extend(.round-corners);
+        box-shadow: none;
+        color: @white;
+
+        &.show-clear-button {
+          padding-right: 2rem;
+        }
+      }
+
+      .clear-button {
+        position: absolute;
+        inset: 0 0 0 auto;
+        font-size: @tiny-icon-size;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: @light-spacing;
+        color: @text-muted;
+      }
+
+      &:not(:last-child) .input {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right: 0;
+      }
     }
-  }
-  .search-clear {
-    &:extend(.font-primary);
-    &:focus {
-      background: @background;
+
+    .button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
-    position: absolute;
-    font-size: @tiny-icon-size;
-    top: 0;
-    right: 0;
-    width: 34px;
-    height: @full;
-    background: transparent;
-    border-color: transparent;
-    cursor: pointer;
-    &:extend(.first-layer);
   }
-  position: relative;
 
-  .input {
+  .char-limit {
+    float: right;
+    margin-right: @light-spacing;
     font-size: @mini-text-size;
-    font-family: @secondary-font;
-    &.is-normal {
-      height: 2.3rem;
-    }
-    &:disabled {
-      &::placeholder {
-        /* without !important it does not work */
-        color: grey !important;
-      }
-    }
-    &.invalid {
-      border: 1px solid @red;
-    }
+    &:extend(.font-muted);
+    margin-left: auto;
+  }
 
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  .error {
+    margin-top: @light-spacing;
+  }
+
+  // TODO: remove after removing bulma
+  .is-primary:not(.is-danger) {
+    border-color: transparent;
   }
 }
diff --git a/components/interactables/Input/Input.vue b/components/interactables/Input/Input.vue
index 1d92f429ec..16f164393c 100644
--- a/components/interactables/Input/Input.vue
+++ b/components/interactables/Input/Input.vue
@@ -1,10 +1,9 @@
 <template src="./Input.html"></template>
+
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-
 import { DeleteIcon } from 'satellite-lucide-icons'
-
-import { InputTypes, InputStyle, InputSize } from './types.d'
+import { InputType, InputColor, InputSize } from './types'
 
 export default Vue.extend({
   components: {
@@ -12,112 +11,87 @@ export default Vue.extend({
   },
   model: {
     prop: 'text',
-    event: 'update',
+    event: 'change',
   },
   props: {
-    /**
-     * If enabled, the button will take up 100% of the parent container
-     */
-    fullWidth: Boolean,
-    /**
-     * If enabled, delete text icon will appear
-     */
-    deleteIcon: Boolean,
-    /**
-     * Default text can be included here
-     */
     text: {
-      type: [String, Number],
+      type: String,
       default: '',
     },
-    /**
-     * Used for display only inputs
-     */
     readonly: {
       type: Boolean,
       default: false,
     },
-    /**
-     * Used for set disabled status
-     */
-    disabled: {
+    autofocus: {
       type: Boolean,
-      required: false,
       default: false,
     },
-    /**
-     * Abstraction of native "type"
-     */
-    inputKind: {
-      type: String as PropType<InputTypes>,
+    type: {
+      type: String as PropType<InputType>,
       default: 'text',
     },
-    /**
-     * Placeholder text for blank inputs
-     */
-    placeholder: {
-      type: String,
-      default: 'Placeholder...',
-    },
-    /**
-     * Size of the input, reference InputSize types or Bulma.io
-     */
     size: {
       type: String as PropType<InputSize>,
-      default: 'normal',
+      default: 'md',
     },
-    /**
-     * Style of the input, reference InputStyle types or Bulma.io
-     */
-    type: {
-      type: String as PropType<InputStyle>,
-      default: 'normal',
+    color: {
+      type: String as PropType<InputColor>,
+      default: 'primary',
     },
-    /**
-     * Add a label to the top of the input
-     */
-    labelText: {
+    placeholder: {
       type: String,
-      required: false,
       default: '',
     },
-    /**
-     * Autofocus when page loads
-     */
-    autofocus: {
+    disabled: {
       type: Boolean,
-      required: false,
       default: false,
     },
-    maxLength: {
-      type: Number,
-      default: 256,
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    showLimit: {
+      type: Boolean,
+      default: false,
     },
     minLength: {
       type: Number,
       default: 0,
     },
-    invalid: {
+    maxLength: {
+      type: Number,
+      default: 256,
+    },
+    showClear: {
       type: Boolean,
       default: false,
     },
-    // if there is a :watchEnter true on the parent component, it will trigger the parent method on @watchEnter
-    watchEnter: {
+    invalid: {
       type: Boolean,
-      required: false,
       default: false,
     },
+    error: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
-      internalText: this.text ? this.text : '',
+      value: this.text ?? '',
     }
   },
+  computed: {
+    isEmpty() {
+      return !this.value.length
+    },
+  },
   watch: {
-    internalText(val) {
-      if (!val.trim().length) {
-        this.internalText = ''
-      }
+    text(value) {
+      this.value = value
     },
   },
   mounted() {
@@ -126,53 +100,28 @@ export default Vue.extend({
     }
   },
   methods: {
-    /**
-     * @method submitEnter
-     * @description emits @watchEnter in the parent if :watchEnter is true,
-     *   useful for allowing enter input on some inputs
-     */
-    submitEnter() {
-      if (this.watchEnter) {
-        this.$emit('watchEnter', this.watchEnter)
+    handleSubmit(event: InputEvent) {
+      if (this.disabled || this.loading || this.error || this.invalid) {
+        return
       }
+      this.$emit('submit', event)
     },
-    /**
-     * @method update
-     * @description Emits the update event with updated internalText string
-     */
-    update() {
-      this.$emit('update', this.internalText)
-    },
-    /**
-     * @method clearSearch
-     * @description Sets internalText in data to an empty string
-     */
-    clearSearch() {
-      this.internalText = ''
-      this.update()
-    },
-    /**
-     * @method preventLeadingSpace
-     * @description Prevent space if empty input
-     */
-    preventLeadingSpace(event: KeyboardEvent) {
-      if (!this.internalText.toString().length) {
-        event.preventDefault()
+    handleInput(event: InputEvent) {
+      if (!event.target) {
+        return
       }
+      const target = event.target as HTMLInputElement
+      this.value = target.value
+      this.$emit('change', target.value)
     },
-    /**
-     * @method preventEmptyPaste
-     * @description Prevent space if empty input
-     */
-    preventEmptyPaste(event: ClipboardEvent) {
-      if (
-        event.clipboardData &&
-        !event.clipboardData.getData('Text').trim().length
-      ) {
-        event.preventDefault()
-      }
+    clearInput() {
+      const input = this.$refs.input as HTMLInputElement
+      this.value = ''
+      input.value = ''
+      input.focus()
     },
   },
 })
 </script>
+
 <style scoped lang="less" src="./Input.less"></style>
diff --git a/components/interactables/Input/README.md b/components/interactables/Input/README.md
index da365c50de..60f36847c3 100644
--- a/components/interactables/Input/README.md
+++ b/components/interactables/Input/README.md
@@ -6,11 +6,15 @@ Generic input component.
 
 ```vue
 <InteractablesInput
-  v-model="something"
-  delete-icon="true"
-  size="small"
-  input-kind="number"
-  type="dark"
+  v-model="input2Text"
+  size="xs"
+  type="number"
+  :loading="inputGroupLoading"
+  @submit="
+    () => {
+      inputGroupLoading = true
+    }
+  "
 />
 ```
 
@@ -18,10 +22,18 @@ Generic input component.
 
 **text** Input display text
 
-**delete-icon** Show delete text icon
-
 **size** Input display size, honors bulma.io sizes
 
 **input-kind** Abstracts generic input type attribute
 
+**disabled** Disables the input button
+
+**action** Action that should happen when the attached button is pressed
+
+**icon** Provide in component slot
+
+**buttonText** Optional attached button text
+
 **label-text** Optional label appended to input
+
+**copy-content** If provided, the button will also copy the content to clipboard
diff --git a/components/interactables/Input/types.d.ts b/components/interactables/Input/types.d.ts
index 754f398cb3..2f8d25eede 100644
--- a/components/interactables/Input/types.d.ts
+++ b/components/interactables/Input/types.d.ts
@@ -1,9 +1,10 @@
-export type InputTypes = 'text' | 'number' | 'password'
-export type InputStyle =
+export type InputType = 'text' | 'number' | 'password'
+export type InputColor =
   | 'primary'
   | 'link'
   | 'info'
   | 'success'
   | 'warning'
   | 'danger'
-export type InputSize = 'small' | 'normal' | 'medium' | 'large'
+  | null
+export type InputSize = 'sm' | 'md' | 'lg' | 'xl'
diff --git a/components/interactables/InputGroup/InputGroup.less b/components/interactables/InputGroup/InputGroup.less
deleted file mode 100644
index 689da430d4..0000000000
--- a/components/interactables/InputGroup/InputGroup.less
+++ /dev/null
@@ -1,55 +0,0 @@
-.input-group {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  .input-outer {
-    display: flex;
-    align-items: stretch;
-    flex-grow: 1;
-    &:extend(.bordered);
-    &:extend(.round-corners);
-
-    .input-inner {
-      position: relative;
-      display: flex;
-      flex-grow: 1;
-
-      .input {
-        &.show-clear-button {
-          padding-right: 2rem;
-        }
-      }
-
-      .clear-button {
-        position: absolute;
-        inset: 0 0 0 auto;
-        font-size: @tiny-icon-size;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: @light-spacing;
-        color: @text-muted;
-      }
-
-      &:not(:last-child) .input {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-right: 0;
-      }
-    }
-
-    .button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-
-  .char-limit {
-    float: right;
-    margin-right: @light-spacing;
-    font-size: @mini-text-size;
-    &:extend(.font-muted);
-    margin-left: auto;
-  }
-}
diff --git a/components/interactables/InputGroup/InputGroup.vue b/components/interactables/InputGroup/InputGroup.vue
deleted file mode 100644
index cdadc95950..0000000000
--- a/components/interactables/InputGroup/InputGroup.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template src="./InputGroup.html"></template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue'
-import { DeleteIcon } from 'satellite-lucide-icons'
-import { InputType, InputColor, InputSize } from './types'
-
-export default Vue.extend({
-  components: {
-    DeleteIcon,
-  },
-  model: {
-    prop: 'text',
-    event: 'change',
-  },
-  props: {
-    text: {
-      type: String,
-      default: '',
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    autofocus: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      type: String as PropType<InputType>,
-      default: 'text',
-    },
-    size: {
-      type: String as PropType<InputSize>,
-      default: 'md',
-    },
-    color: {
-      type: String as PropType<InputColor>,
-      default: 'primary',
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    showLimit: {
-      type: Boolean,
-      default: false,
-    },
-    maxLength: {
-      type: Number,
-      default: 256,
-    },
-    showClear: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      value: this.text ?? '',
-    }
-  },
-  computed: {
-    isEmpty() {
-      return !this.value.length
-    },
-  },
-  mounted() {
-    if (this.autofocus) {
-      this.$nextTick(() => (this.$refs?.input as HTMLElement).focus())
-    }
-  },
-  methods: {
-    handleSubmit(event: InputEvent) {
-      if (this.disabled || this.loading) {
-        return
-      }
-      this.$emit('submit', event)
-    },
-    handleInput(event: InputEvent) {
-      if (!event.target) {
-        return
-      }
-      const target = event.target as HTMLInputElement
-      this.value = target.value
-      this.$emit('change', target.value)
-    },
-    clearInput() {
-      const input = this.$refs.input as HTMLInputElement
-      this.value = ''
-      input.value = ''
-      input.focus()
-    },
-  },
-})
-</script>
-
-<style scoped lang="less" src="./InputGroup.less"></style>
diff --git a/components/interactables/InputGroup/README.md b/components/interactables/InputGroup/README.md
deleted file mode 100644
index 4be5792227..0000000000
--- a/components/interactables/InputGroup/README.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Description
-
-Generic input group component.
-
-# Usage
-
-```vue
-<InteractablesInputGroup
-  v-model="input2Text"
-  size="xs"
-  type="number"
-  :loading="inputGroupLoading"
-  @submit="
-    () => {
-      inputGroupLoading = true
-    }
-  "
-/>
-```
-
-# Props
-
-**text** Input display text
-
-**size** Input display size, honors bulma.io sizes
-
-**input-kind** Abstracts generic input type attribute
-
-**disabled** Disables the input button
-
-**action** Action that should happen when the attached button is pressed
-
-**icon** Provide in component slot
-
-**buttonText** Optional attached button text
-
-**label-text** Optional label appended to input
-
-**copy-content** If provided, the button will also copy the content to clipboard
diff --git a/components/interactables/InputGroup/types.d.ts b/components/interactables/InputGroup/types.d.ts
deleted file mode 100644
index 2f8d25eede..0000000000
--- a/components/interactables/InputGroup/types.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export type InputType = 'text' | 'number' | 'password'
-export type InputColor =
-  | 'primary'
-  | 'link'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | null
-export type InputSize = 'sm' | 'md' | 'lg' | 'xl'
diff --git a/components/interactables/QuickProfile/QuickProfile.html b/components/interactables/QuickProfile/QuickProfile.html
index 2793cfee8e..9fe990301f 100644
--- a/components/interactables/QuickProfile/QuickProfile.html
+++ b/components/interactables/QuickProfile/QuickProfile.html
@@ -23,7 +23,7 @@
   <TypographyText> {{ user.status }} </TypographyText>
   <template v-if="!isMe">
     <UiHorizontalRule />
-    <InteractablesInputGroup
+    <InteractablesInput
       v-model="text"
       :placeholder="`${$t('friends.message')} ${user.name}...`"
       @submit="sendMessage"
@@ -31,7 +31,7 @@
       showLimit
     >
       <arrow-right-icon size="1x" />
-    </InteractablesInputGroup>
+    </InteractablesInput>
     <TypographyError
       v-if="isEmptyMessage"
       :text="$t('errors.chat.empty_message_error')"
diff --git a/components/interactables/UserPicker/UserPicker.html b/components/interactables/UserPicker/UserPicker.html
index d72eff0ec2..c19bd652c6 100644
--- a/components/interactables/UserPicker/UserPicker.html
+++ b/components/interactables/UserPicker/UserPicker.html
@@ -11,8 +11,7 @@
   </div>
   <InteractablesInput
     v-model="filter"
-    size="small"
-    type="dark"
+    size="xs"
     :placeholder="$t('servers.create.select_friends_placeholder')"
   />
   <div class="users" :style="{ height: height }">
diff --git a/components/views/chat/enhancers/Enhancers.html b/components/views/chat/enhancers/Enhancers.html
index 696868ca20..26d89081f9 100644
--- a/components/views/chat/enhancers/Enhancers.html
+++ b/components/views/chat/enhancers/Enhancers.html
@@ -47,7 +47,7 @@
               <InteractablesInput
                 v-model="search"
                 type="dark"
-                size="small"
+                size="xs"
                 :placeholder="$t('ui.search')"
               />
             </div>
diff --git a/components/views/chat/enhancers/glyphs/Glyphs.html b/components/views/chat/enhancers/glyphs/Glyphs.html
index a147e0921e..7e73578aea 100644
--- a/components/views/chat/enhancers/glyphs/Glyphs.html
+++ b/components/views/chat/enhancers/glyphs/Glyphs.html
@@ -2,7 +2,7 @@
   <div class="search-glyph-box">
     <InteractablesInput
       :placeholder="$t('ui.search')"
-      size="small"
+      size="xs"
       v-model="searchText"
       input-kind="text"
       type="primary"
diff --git a/components/views/files/controls/Controls.html b/components/views/files/controls/Controls.html
index 55479a0d9c..537574fd67 100644
--- a/components/views/files/controls/Controls.html
+++ b/components/views/files/controls/Controls.html
@@ -6,9 +6,7 @@
       :tooltipPosition="'top'"
     >
       <InteractablesInput
-        size="small"
-        input-kind="text"
-        type="dark"
+        size="xs"
         :placeholder="$t('pages.files.browse.search')"
         class="search"
       />
@@ -32,7 +30,7 @@
     >
       <file-plus-icon size="1.3x" />
     </InteractablesButton>
-    <InteractablesInputGroup
+    <InteractablesInput
       v-model="text"
       class="name"
       size="xs"
@@ -40,7 +38,7 @@
       :placeholder="$t('pages.files.controls.name_folder')"
     >
       <folder-plus-icon size="1.3x" />
-    </InteractablesInputGroup>
+    </InteractablesInput>
     <input
       ref="upload"
       type="file"
diff --git a/components/views/files/rename/Rename.html b/components/views/files/rename/Rename.html
index 823d172243..6c416ef7b7 100644
--- a/components/views/files/rename/Rename.html
+++ b/components/views/files/rename/Rename.html
@@ -1,13 +1,13 @@
 <div class="rename" data-cy="files-rename">
   <InteractablesClose :action="closeModal" />
   <TypographyTitle :size="3" :text="$t('modal.rename')" />
-  <InteractablesInputGroup
+  <InteractablesInput
     v-model="text"
     ref="inputGroup"
     data-cy="files-rename-input"
     @submit="renameItem"
   >
     <save-icon size="1.3x" />
-  </InteractablesInputGroup>
+  </InteractablesInput>
   <TypographyError v-if="error" :text="error" />
 </div>
diff --git a/components/views/marketplace/searchbox/Searchbox.html b/components/views/marketplace/searchbox/Searchbox.html
index fc93d7e377..82ff1ac86f 100644
--- a/components/views/marketplace/searchbox/Searchbox.html
+++ b/components/views/marketplace/searchbox/Searchbox.html
@@ -1,9 +1,7 @@
 <div class="search-box">
   <InteractablesInput
     :placeholder="$t('ui.search')"
-    size="small"
+    size="xs"
     v-model="internalText"
-    input-kind="text"
-    type="primary"
   />
 </div>
diff --git a/components/views/navigation/server/sidebar/Sidebar.html b/components/views/navigation/server/sidebar/Sidebar.html
index 8037d016c1..81b33b2b08 100644
--- a/components/views/navigation/server/sidebar/Sidebar.html
+++ b/components/views/navigation/server/sidebar/Sidebar.html
@@ -11,8 +11,7 @@
       <InteractablesInput
         :placeholder="`${$t('ui.search')}...`"
         size="small"
-        input-kind="text"
-        :delete-icon="true"
+        showClear
         type="dark"
         full-width
       />
diff --git a/components/views/navigation/sidebar/Sidebar.html b/components/views/navigation/sidebar/Sidebar.html
index 076ee929b7..46b84ebc85 100644
--- a/components/views/navigation/sidebar/Sidebar.html
+++ b/components/views/navigation/sidebar/Sidebar.html
@@ -9,12 +9,9 @@
       >
         <InteractablesInput
           :placeholder="`${$t('ui.search')}...`"
-          size="small"
-          input-kind="text"
-          :delete-icon="true"
-          type="dark"
+          size="xs"
           disabled
-          full-width
+          showClear
         />
       </UiComingSoon>
       <InteractablesSidebarToggle />
diff --git a/components/views/navigation/sidebar/quick/Quick.html b/components/views/navigation/sidebar/quick/Quick.html
index 617e1e0fcb..ef0e3f24fb 100644
--- a/components/views/navigation/sidebar/quick/Quick.html
+++ b/components/views/navigation/sidebar/quick/Quick.html
@@ -9,17 +9,14 @@
   <template v-if="friends.length > 1">
     <InteractablesInput
       v-model.trim="name"
-      size="small"
-      type="dark"
-      input-kind="text"
+      size="xs"
       :placeholder="$t('pages.chat.new_group_name')"
       :minLength="$Config.chat.groupNameMinLength"
       :maxLength="$Config.chat.groupNameMaxLength"
       :invalid="isInvalidName && Boolean(error)"
-      :watchEnter="true"
-      @watchEnter="confirm"
+      @submit="confirm"
+      :error="error"
     />
-    <TypographyError v-if="error" :text="error" small />
   </template>
   <InteractablesButton
     :type="friends.length ? 'primary' : 'dark'"
diff --git a/components/views/servers/create/Create.html b/components/views/servers/create/Create.html
index 194d92bd25..81220669d2 100644
--- a/components/views/servers/create/Create.html
+++ b/components/views/servers/create/Create.html
@@ -39,8 +39,6 @@
         <InteractablesInput
           :placeholder="$t('servers.create.server_name_placeholder')"
           v-model="name"
-          input-kind="text"
-          type="primary"
         />
       </div>
 
diff --git a/components/views/settings/pages/accounts/Accounts.html b/components/views/settings/pages/accounts/Accounts.html
index 3c5c8d25f2..d1b30c7b3d 100644
--- a/components/views/settings/pages/accounts/Accounts.html
+++ b/components/views/settings/pages/accounts/Accounts.html
@@ -9,13 +9,9 @@
 
   <SettingsUnit>
     <TypographyLabel :text="$t('pages.settings.accounts.active')" />
-    <InteractablesInputGroup
-      readonly
-      :text="accounts.active"
-      @submit="copyAddress"
-    >
+    <InteractablesInput readonly :text="accounts.active" @submit="copyAddress">
       <clipboard-icon size="1x" />
-    </InteractablesInputGroup>
+    </InteractablesInput>
   </SettingsUnit>
 
   <!-- <SettingsSection>
diff --git a/components/views/settings/pages/developer/Info.html b/components/views/settings/pages/developer/Info.html
index 2431fb9a36..af9e857ed0 100644
--- a/components/views/settings/pages/developer/Info.html
+++ b/components/views/settings/pages/developer/Info.html
@@ -13,13 +13,7 @@
     <SettingsUnit>
       <TypographyLabel :text="$t('pages.settings.developer.identifier')" />
       <br />
-      <InteractablesInput
-        size="small"
-        input-kind="text"
-        type="dark"
-        readonly
-        v-model="accounts.active"
-      />
+      <InteractablesInput size="xs" readonly v-model="accounts.active" />
     </SettingsUnit>
   </SettingsSection>
 </SettingsPage>
diff --git a/components/views/settings/pages/notifications/Notifications.html b/components/views/settings/pages/notifications/Notifications.html
index b8e0edf80d..267ee30191 100644
--- a/components/views/settings/pages/notifications/Notifications.html
+++ b/components/views/settings/pages/notifications/Notifications.html
@@ -46,7 +46,7 @@
         <TypographyLabel
           :text="$t('pages.settings.notifications.send_label')"
         />
-        <InteractablesInputGroup
+        <InteractablesInput
           v-if="NotificationStatus === 'granted' || Platform === PlatformTypeEnum.ELECTRON"
           class="modal-input"
           size="xs"
@@ -55,17 +55,17 @@
           @submit="sendNotification"
         >
           <arrow-right-icon size="1x" />
-        </InteractablesInputGroup>
+        </InteractablesInput>
       </span>
       <span v-if="Platform === PlatformTypeEnum.ANDROID">
-        <InteractablesInputGroup
+        <InteractablesInput
           v-model="NotificationText"
           class="modal-input"
           size="xs"
           @submit="sendNotification"
         >
           <arrow-right-icon size="1x" />
-        </InteractablesInputGroup>
+        </InteractablesInput>
       </span>
     </SettingsUnit>
   </SettingsSection>
diff --git a/components/views/settings/pages/privacy/Privacy.html b/components/views/settings/pages/privacy/Privacy.html
index bee74e8550..343f23401d 100644
--- a/components/views/settings/pages/privacy/Privacy.html
+++ b/components/views/settings/pages/privacy/Privacy.html
@@ -80,7 +80,7 @@
       <InteractablesInput
         v-model="ownInfo"
         type="dark"
-        size="small"
+        size="xs"
         :placeholder="$t('pages.privacy.ownInfo.placeholder')"
         class="ownInfo-input"
       />
diff --git a/components/views/settings/pages/profile/Profile.html b/components/views/settings/pages/profile/Profile.html
index 22f4ccc961..212adf5695 100644
--- a/components/views/settings/pages/profile/Profile.html
+++ b/components/views/settings/pages/profile/Profile.html
@@ -74,14 +74,14 @@
                 <TypographyTitle :size="6" :text="accounts.details.name" />
               </div>
               <div class="status-input">
-                <InteractablesInputGroup
+                <InteractablesInput
                   v-model="status"
                   size="xs"
                   type="text"
                   :placeholder="$t('pages.settings.profile.status_placeholder')"
                 >
                   <edit-icon size="1x" />
-                </InteractablesInputGroup>
+                </InteractablesInput>
               </div>
             </div>
             <div v-if="!!accounts.details.status" class="status">
@@ -137,14 +137,14 @@
                   <info-icon size="1.5x" class="section-icon-tooltip" />
                 </div>
               </div>
-              <InteractablesInputGroup
+              <InteractablesInput
                 v-model="accountUrl"
                 size="xs"
                 type="text"
                 :placeholder="$t('pages.settings.profile.accounts.url_placeholder')"
               >
                 <edit-icon size="1x" />
-              </InteractablesInputGroup>
+              </InteractablesInput>
             </div>
 
             <div class="accounts-subtitle-wrapper">
diff --git a/components/views/wallet/balance/Balance.html b/components/views/wallet/balance/Balance.html
index 7e34b0a2fb..c42750260a 100644
--- a/components/views/wallet/balance/Balance.html
+++ b/components/views/wallet/balance/Balance.html
@@ -8,9 +8,9 @@
       <TypographyTitle :size="5" text="123,456.78" />
       <TypographyText> Last Updated: Today </TypographyText>
       <div class="inline">
-        <InteractablesInputGroup class="modal-input" size="xs">
+        <InteractablesInput class="modal-input" size="xs">
           <send-icon size="1x" />
-        </InteractablesInputGroup>
+        </InteractablesInput>
         <InteractablesSelect class="form-control" />
       </div>
       <div class="inline">
diff --git a/components/views/wallet/mini/body/Body.html b/components/views/wallet/mini/body/Body.html
index 71d78136cd..8bfea2c129 100644
--- a/components/views/wallet/mini/body/Body.html
+++ b/components/views/wallet/mini/body/Body.html
@@ -5,7 +5,7 @@
   </div>
   <UiSpacer :height="45" />
   <div class="flex-row">
-    <InteractablesInputGroup
+    <InteractablesInput
       v-model="accountID"
       class="input-container"
       size="xs"
@@ -14,7 +14,7 @@
       @submit="searchFriend"
     >
       <check-circle-2-icon size="1x" />
-    </InteractablesInputGroup>
+    </InteractablesInput>
     <InteractablesSelect
       v-model="paymentOption"
       :options="[{ text: 'USD', value: 'usd' }]"
diff --git a/pages/auth/unlock/Unlock.html b/pages/auth/unlock/Unlock.html
index 2b368027a6..a640d0c11c 100644
--- a/pages/auth/unlock/Unlock.html
+++ b/pages/auth/unlock/Unlock.html
@@ -14,7 +14,7 @@
         {{$t('pages.unlock.choose_pin_description_2')}}
       </TypographyText>
     </div>
-    <InteractablesInputGroup
+    <InteractablesInput
       v-model="pin"
       size="xs"
       type="password"
@@ -25,10 +25,11 @@
       :loading="status === 'loading'"
       autofocus
       @submit="action"
+      showClear
     >
       <unlock-icon size="1x" v-if="getIcon() === 'unlocked'" />
       <chevron-right-icon size="1x" v-else />
-    </InteractablesInputGroup>
+    </InteractablesInput>
     <TypographyError v-if="error" :text="$t(error)" />
     <InteractablesSwitch
       v-model="storePin"
diff --git a/pages/components.vue b/pages/components.vue
index c624944912..d80b2fba4c 100644
--- a/pages/components.vue
+++ b/pages/components.vue
@@ -183,18 +183,13 @@
           <div class="content">
             <InteractablesInput v-model="input1Text" :label-text="input1Text" />
             <p>Text: {{ input2Text }}</p>
-            <InteractablesInput
-              v-model="input2Text"
-              size="small"
-              input-kind="number"
-              type="primary"
-            />
+            <InteractablesInput v-model="input2Text" size="xs" type="number" />
             <p>Grouped Input</p>
-            <InteractablesInputGroup
+            <InteractablesInput
               v-model="input2Text"
               size="sm"
               type="number"
-              :label-text="input2Text.toString()"
+              :label="input2Text.toString()"
               :loading="inputGroupLoading"
               :icon="{ style: 'far', name: 'lock-open' }"
               @submit="
diff --git a/pages/message/NewMessage.html b/pages/message/NewMessage.html
index 6b83e066b0..8b47ff1194 100644
--- a/pages/message/NewMessage.html
+++ b/pages/message/NewMessage.html
@@ -17,9 +17,7 @@
   <template v-if="friends.length > 1">
     <InteractablesInput
       v-model="name"
-      size="small"
-      type="dark"
-      input-kind="text"
+      size="xs"
       :placeholder="$t('pages.chat.new_group_name')"
       :minLength="$Config.chat.groupNameMinLength"
       :maxLength="$Config.chat.groupNameMaxLength"
diff --git a/pages/mobile/chat/_id.vue b/pages/mobile/chat/_id.vue
index 2761cc623a..12f75cd74e 100644
--- a/pages/mobile/chat/_id.vue
+++ b/pages/mobile/chat/_id.vue
@@ -9,9 +9,7 @@
           <InteractablesInput
             class="search"
             :placeholder="`${$t('ui.search')}...`"
-            :delete-icon="true"
-            input-kind="text"
-            type="dark"
+            show-clear
           />
           <button v-if="$route.params.id" @click="swiper.slideNext()">
             <menu-icon class="toggle-sidebar" size="1.5x" />

From a0560b4393292cbfe7e879ad4caae6522a40bfcd Mon Sep 17 00:00:00 2001
From: Joe McGrath <josephmcg01@gmail.com>
Date: Tue, 9 Aug 2022 13:00:22 +0900
Subject: [PATCH 06/11] fix(input): simplify v model logic

---
 components/interactables/Input/Input.html     |  2 +-
 components/interactables/Input/Input.vue      | 18 +++-------
 components/interactables/Input/types.d.ts     |  1 -
 .../interactables/InputGroup/InputGroup.html  | 34 -------------------
 4 files changed, 6 insertions(+), 49 deletions(-)
 delete mode 100644 components/interactables/InputGroup/InputGroup.html

diff --git a/components/interactables/Input/Input.html b/components/interactables/Input/Input.html
index 90b40b374f..a56981fdf7 100644
--- a/components/interactables/Input/Input.html
+++ b/components/interactables/Input/Input.html
@@ -12,7 +12,7 @@
             'is-danger': error || invalid
           }
         ]"
-        :value="value"
+        :value="text"
         :type="type"
         :readonly="readonly"
         :placeholder="placeholder"
diff --git a/components/interactables/Input/Input.vue b/components/interactables/Input/Input.vue
index 16f164393c..cbba889cf4 100644
--- a/components/interactables/Input/Input.vue
+++ b/components/interactables/Input/Input.vue
@@ -3,7 +3,8 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { DeleteIcon } from 'satellite-lucide-icons'
-import { InputType, InputColor, InputSize } from './types'
+import { InputType, InputColor } from './types'
+import { Size } from '~/types/typography'
 
 export default Vue.extend({
   components: {
@@ -31,7 +32,7 @@ export default Vue.extend({
       default: 'text',
     },
     size: {
-      type: String as PropType<InputSize>,
+      type: String as PropType<Size>,
       default: 'md',
     },
     color: {
@@ -86,12 +87,7 @@ export default Vue.extend({
   },
   computed: {
     isEmpty() {
-      return !this.value.length
-    },
-  },
-  watch: {
-    text(value) {
-      this.value = value
+      return !this.text.length
     },
   },
   mounted() {
@@ -111,14 +107,10 @@ export default Vue.extend({
         return
       }
       const target = event.target as HTMLInputElement
-      this.value = target.value
       this.$emit('change', target.value)
     },
     clearInput() {
-      const input = this.$refs.input as HTMLInputElement
-      this.value = ''
-      input.value = ''
-      input.focus()
+      this.$emit('change', '')
     },
   },
 })
diff --git a/components/interactables/Input/types.d.ts b/components/interactables/Input/types.d.ts
index 2f8d25eede..417fc31a3c 100644
--- a/components/interactables/Input/types.d.ts
+++ b/components/interactables/Input/types.d.ts
@@ -7,4 +7,3 @@ export type InputColor =
   | 'warning'
   | 'danger'
   | null
-export type InputSize = 'sm' | 'md' | 'lg' | 'xl'
diff --git a/components/interactables/InputGroup/InputGroup.html b/components/interactables/InputGroup/InputGroup.html
deleted file mode 100644
index 3a0efa225e..0000000000
--- a/components/interactables/InputGroup/InputGroup.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div class="input-container">
-  <TypographyLabel v-if="label" as="label" uppercase class="input-label">
-    {{ label }}
-  </TypographyLabel>
-  <div class="input-wrapper">
-    <input
-      ref="input"
-      class="input"
-      :class="`font-size-${size} is-${color}`"
-      :value="text"
-      :type="type"
-      :readonly="readonly"
-      :placeholder="placeholder"
-      :maxLength="maxLength"
-      :disabled="disabled"
-      @keydown.enter="handleSubmit"
-      @input="$emit('change', $event.target.value)"
-      data-cy="input-group"
-    />
-    <button
-      v-if="$slots.default"
-      class="button"
-      :class="[`font-size-${size} is-${color}`, {disabled: disabled}]"
-      @click="handleSubmit"
-      data-cy="submit-input"
-    >
-      <UiLoadersSpinner v-if="loading" spinning />
-      <slot v-else></slot>
-    </button>
-  </div>
-  <span v-if="showLimit" class="char-limit">
-    {{ text.length }}/{{ maxLength }}
-  </span>
-</div>

From 17704d55e396044170a476234389351eb8742770 Mon Sep 17 00:00:00 2001
From: Joe McGrath <josephmcg01@gmail.com>
Date: Tue, 9 Aug 2022 13:05:34 +0900
Subject: [PATCH 07/11] fix(friends): fix add friend logic and remove
 unnecessary ref logic

---
 components/views/friends/search/Search.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/components/views/friends/search/Search.vue b/components/views/friends/search/Search.vue
index e45de30a20..00431d29e5 100644
--- a/components/views/friends/search/Search.vue
+++ b/components/views/friends/search/Search.vue
@@ -1,13 +1,10 @@
 <template>
   <div>
     <InteractablesInput
-      ref="input"
       v-model="friendId"
-      type="primary"
-      size="small"
       :placeholder="$t('friends.search_placeholder')"
       autofocus
-      @update="_searchFriend"
+      @change="_searchFriend"
     />
     <TypographyError v-if="error" :text="$t(error)" />
     <UiLoadersLoadingBar v-else-if="searching" />
@@ -98,9 +95,6 @@ export default Vue.extend({
       this.user = null
       this.friendId = ''
       // @ts-ignore
-      const input = this.$refs.input.$refs.input as HTMLInputElement
-      input.value = ''
-      // @ts-ignore
       this.$toast.show(this.$t('friends.request_sent') as string)
     },
     copyId() {

From 1a84384241cf1c9020c46634ca3eadf809ad1603 Mon Sep 17 00:00:00 2001
From: Joe McGrath <josephmcg01@gmail.com>
Date: Tue, 9 Aug 2022 13:20:00 +0900
Subject: [PATCH 08/11] fix: remove value

---
 components/interactables/Input/Input.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/components/interactables/Input/Input.vue b/components/interactables/Input/Input.vue
index cbba889cf4..98e50cd78b 100644
--- a/components/interactables/Input/Input.vue
+++ b/components/interactables/Input/Input.vue
@@ -80,11 +80,6 @@ export default Vue.extend({
       default: '',
     },
   },
-  data() {
-    return {
-      value: this.text ?? '',
-    }
-  },
   computed: {
     isEmpty() {
       return !this.text.length

From 5353a83944a902662a155c220101100600104092 Mon Sep 17 00:00:00 2001
From: Joe McGrath <josephmcg01@gmail.com>
Date: Tue, 9 Aug 2022 13:33:42 +0900
Subject: [PATCH 09/11] fix(button): adjust font-color to match figma

---
 assets/styles/base.less                   | 1 -
 components/interactables/Input/Input.html | 4 ++--
 components/interactables/Input/Input.less | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/assets/styles/base.less b/assets/styles/base.less
index 80597ee18e..1629d3e164 100644
--- a/assets/styles/base.less
+++ b/assets/styles/base.less
@@ -262,7 +262,6 @@ button {
   &.is-primary {
     &:extend(.background-flair-gradient);
     &:extend(.glow-flair);
-    &:extend(.font-primary);
 
     &[disabled] {
       &:extend(.background-flair-gradient);
diff --git a/components/interactables/Input/Input.html b/components/interactables/Input/Input.html
index a56981fdf7..0aa59a4438 100644
--- a/components/interactables/Input/Input.html
+++ b/components/interactables/Input/Input.html
@@ -4,7 +4,7 @@
     <div class="input-inner">
       <input
         ref="input"
-        class="input"
+        class="input font-color-light"
         :class="[
           `font-size-${size} is-${color}`,
           {
@@ -33,7 +33,7 @@
     </div>
     <button
       v-if="$slots.default"
-      class="button"
+      class="button font-color-light"
       :class="[`font-size-${size} is-${color}`, {disabled: disabled}]"
       @click="handleSubmit"
       data-cy="submit-input"
diff --git a/components/interactables/Input/Input.less b/components/interactables/Input/Input.less
index d8bfced3eb..7180bcf53a 100644
--- a/components/interactables/Input/Input.less
+++ b/components/interactables/Input/Input.less
@@ -19,7 +19,6 @@
         &:extend(.input-bg);
         &:extend(.round-corners);
         box-shadow: none;
-        color: @white;
 
         &.show-clear-button {
           padding-right: 2rem;

From aecfc3bb123bcbf69a117e1394cebf14a7dfd034 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Tue, 9 Aug 2022 15:07:15 +1000
Subject: [PATCH 10/11] fix: bg

---
 components/interactables/Input/Input.less | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/components/interactables/Input/Input.less b/components/interactables/Input/Input.less
index 7180bcf53a..a85c6d8d6f 100644
--- a/components/interactables/Input/Input.less
+++ b/components/interactables/Input/Input.less
@@ -15,14 +15,20 @@
 
       .input {
         flex-grow: 1;
-        padding: @light-spacing;
-        &:extend(.input-bg);
-        &:extend(.round-corners);
+        padding: 0.5rem;
         box-shadow: none;
+        background: @input-gradient;
+        background-size: calc(100% + 2px) calc(100% + 2px);
+        background-position: center;
+        &:extend(.round-corners);
 
         &.show-clear-button {
           padding-right: 2rem;
         }
+
+        &:focus {
+          background-image: @semitransparent-lightest-gradient;
+        }
       }
 
       .clear-button {
@@ -32,7 +38,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: @light-spacing;
+        padding: 0.5rem;
         color: @text-muted;
       }
 
@@ -51,14 +57,14 @@
 
   .char-limit {
     float: right;
-    margin-right: @light-spacing;
+    margin-right: 0.5rem;
     font-size: @mini-text-size;
     &:extend(.font-muted);
     margin-left: auto;
   }
 
   .error {
-    margin-top: @light-spacing;
+    margin-top: 0.5rem;
   }
 
   // TODO: remove after removing bulma

From 2ff6f6df4ad0ff1aefb93694609d8b11458d0ac2 Mon Sep 17 00:00:00 2001
From: Joe McGrath <josephmcg01@gmail.com>
Date: Tue, 9 Aug 2022 14:11:59 +0900
Subject: [PATCH 11/11] fix(unlock): remove clear button on unlock page

---
 pages/auth/unlock/Unlock.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/pages/auth/unlock/Unlock.html b/pages/auth/unlock/Unlock.html
index a640d0c11c..25b3d84331 100644
--- a/pages/auth/unlock/Unlock.html
+++ b/pages/auth/unlock/Unlock.html
@@ -18,14 +18,13 @@
       v-model="pin"
       size="xs"
       type="password"
-      :color="`${error ? 'danger' : 'primary'}`"
+      :color="error ? 'danger' : 'primary'"
       data-cy="pin-label"
       :label="step === 'login' ? $t('pages.unlock.decrypt') : $t('pages.unlock.choose_pin')"
       :placeholder="$t('pages.unlock.placeholder')"
       :loading="status === 'loading'"
       autofocus
       @submit="action"
-      showClear
     >
       <unlock-icon size="1x" v-if="getIcon() === 'unlocked'" />
       <chevron-right-icon size="1x" v-else />