Feat: Revamp input field

src/assets/styles/global.css

@@ -168,3 +168,15 @@
     @apply bg-gradient-to-tr from-vice-start to-vice-stop;
   }
 }
+
+/* Classes to remove number spinners from inputs of type number */
+/* Chrome, Safari, Edge, Opera */
+.remove-number-spinner::-webkit-outer-spin-button,
+.remove-number-spinner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+/* Firefox */
+.remove-number-spinner {
+  -moz-appearance: textfield;
+}

src/components/address-form/index.js

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form"
 import { Flex, Text } from "rebass"
 import { isEmpty } from "lodash"
 import Select from "../select"
-import Input from "../input"
+import Input from "../molecules/input"
 import { countries } from "../../utils/countries"
 
 const inputStyle = {

src/components/availability-duration/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react"
 
 import { Flex, Text, Box } from "rebass"
-import Input from "../input"
+import Input from "../molecules/input"
 import Typography from "../typography"
 import styled from "@emotion/styled"
 import { parse } from "iso8601-duration"

src/components/date-picker/date-picker.js

@@ -3,7 +3,7 @@ import ReactDatePicker from "react-datepicker"
 import "react-datepicker/dist/react-datepicker.css"
 import { Box, Flex } from "rebass"
 import Button from "../button"
-import InputField from "../input"
+import InputField from "../molecules/input"
 import moment from "moment"
 import styled from "@emotion/styled"
 

src/components/filter-dropdown-item/index.js

@@ -5,7 +5,7 @@ import { Box, Text, Flex } from "rebass"
 import Select from "../select"
 import { DateFilters } from "../../utils/filters"
 import { addHours, atMidnight, dateToUnixTimestamp } from "../../utils/time"
-import InputField from "../input"
+import InputField from "../molecules/input"
 import ReactDatePicker from "react-datepicker"
 import DatePicker from "../date-picker/date-picker"
 import moment from "moment"

src/components/fundamentals/icons/icon-type.tsx

@@ -0,0 +1,7 @@
+type IconProps = {
+  color?: string
+  size?: string | number
+  attributes?: React.SVGAttributes<SVGElement>
+}
+
+export default IconProps

src/components/fundamentals/icons/minus-icon.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import IconProps from "./icon-type"
+
+const MinusIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  attributes,
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M3.33301 8H12.6663"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default MinusIcon

src/components/fundamentals/icons/plus-icon.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import IconProps from "./icon-type"
+
+const PlusIcon: React.FC<IconProps> = ({
+  size = "24px",
+  color = "currentColor",
+  attributes,
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M8 3.33331V12.6666"
+        stroke={color}
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3.33301 8H12.6663"
+        stroke={color}
+        stroke-width="1.33333"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default PlusIcon

src/components/fundamentals/input-container.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { MouseEventHandler } from "react"
+
+type InputContainerProps = {
+  key?: string
+  props?: React.HTMLAttributes<HTMLDivElement>
+  onClick?: MouseEventHandler<HTMLDivElement>
+}
+
+const InputContainer: React.FC<InputContainerProps> = ({
+  key,
+  props,
+  onClick,
+  children,
+}) => {
+  return (
+    <div
+      tabIndex={-1}
+      className="bg-grey-5 inter-base-regular w-full p-3 flex h-18 flex-col cursor-text border border-grey-20 focus-within:shadow-input focus-within:border-violet-60 rounded-base my-4"
+      onClick={onClick}
+      key={key}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default InputContainer

src/components/fundamentals/input-header.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import InfoTooltip from "../info-tooltip"
+
+type InputHeaderProps = {
+  label: string
+  required?: boolean
+  withTooltip?: boolean
+  tooltipText?: string
+  tooltipProps?: any
+}
+
+const InputHeader: React.FC<InputHeaderProps> = ({
+  label,
+  required = false,
+  withTooltip = false,
+  tooltipText,
+  tooltipProps,
+}) => {
+  return (
+    <div className="w-full flex inter-small-semibold text-grey-50 items-center">
+      {label}
+      {required && <div className="text-rose-50 "> *</div>}
+      {withTooltip ? (
+        <div className="ml-2">
+          <InfoTooltip tooltipText={tooltipText} {...tooltipProps} />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default InputHeader