From 74a768e9420165c0b1b4ef83927c64ef5e8d1270 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Tue, 9 Aug 2022 12:03:24 +1000
Subject: [PATCH] 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.html  |  41 -----
 .../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 +-
 components/views/friends/add/Add.html         |   3 +-
 .../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 +-
 34 files changed, 228 insertions(+), 547 deletions(-)
 delete mode 100644 components/interactables/InputGroup/InputGroup.html
 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 eb0f782bf7..25c0eceb4e 100644
--- a/assets/styles/base.less
+++ b/assets/styles/base.less
@@ -733,34 +733,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.html b/components/interactables/InputGroup/InputGroup.html
deleted file mode 100644
index 29f5421953..0000000000
--- a/components/interactables/InputGroup/InputGroup.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<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 }]"
-        :value="value"
-        :type="type"
-        :readonly="readonly"
-        :placeholder="placeholder"
-        :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="$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>
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 f00b53874b..70f28d57d3 100644
--- a/components/interactables/QuickProfile/QuickProfile.html
+++ b/components/interactables/QuickProfile/QuickProfile.html
@@ -25,7 +25,7 @@
   <TypographyText :text="user.status" :size="6" />
   <template v-if="!isMe">
     <UiHorizontalRule />
-    <InteractablesInputGroup
+    <InteractablesInput
       v-model="text"
       :placeholder="`${$t('friends.message')} ${user.name}...`"
       @submit="sendMessage"
@@ -33,7 +33,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 634d4dedb4..7885f7345d 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 390bcd28ac..7f178bc04f 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 c764f646fc..716ac37b50 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/friends/add/Add.html b/components/views/friends/add/Add.html
index e7a9d565c3..3996d0be31 100644
--- a/components/views/friends/add/Add.html
+++ b/components/views/friends/add/Add.html
@@ -8,8 +8,7 @@
   </div>
   <InteractablesInput
     v-model="friendId"
-    type="primary"
-    size="small"
+    size="xs"
     :placeholder="$t('friends.search_placeholder')"
     @update="_searchFriend"
     ref="input"
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 9270c0c363..eda1c6de46 100644
--- a/components/views/navigation/sidebar/quick/Quick.html
+++ b/components/views/navigation/sidebar/quick/Quick.html
@@ -7,17 +7,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 2eb9d54922..aa1d44fa1a 100644
--- a/components/views/settings/pages/notifications/Notifications.html
+++ b/components/views/settings/pages/notifications/Notifications.html
@@ -47,7 +47,7 @@
         <TypographyLabel
           :text="$t('pages.settings.notifications.send_label')"
         />
-        <InteractablesInputGroup
+        <InteractablesInput
           v-if="NotificationStatus === 'granted' || Platform === PlatformTypeEnum.ELECTRON"
           class="modal-input"
           size="xs"
@@ -56,17 +56,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 5a28089f9d..1c92f00b2c 100644
--- a/components/views/settings/pages/privacy/Privacy.html
+++ b/components/views/settings/pages/privacy/Privacy.html
@@ -78,7 +78,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 401e06e76d..6bba3c842d 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 66ee6a72c8..7e634590d9 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 :size="6" text="Last Updated: Today" />
       <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 ec0012a38a..677a53c287 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 963b2759b7..9e8bb8110a 100644
--- a/pages/auth/unlock/Unlock.html
+++ b/pages/auth/unlock/Unlock.html
@@ -6,7 +6,7 @@
       <TypographyText :text="$t('pages.unlock.choose_pin_description_1')" />
       <TypographyText :text="$t('pages.unlock.choose_pin_description_2')" />
     </div>
-    <InteractablesInputGroup
+    <InteractablesInput
       v-model="pin"
       size="xs"
       type="password"
@@ -17,10 +17,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" />