Add UI components

webui/src/common/components/Input/styles.sass

@@ -1,57 +1,62 @@
 .field
   display: flex
   flex-direction: column
-  gap: .35rem
-  font-size: .8rem
-  font-weight: 500
+  gap: .5rem
+  font-size: .9rem
+  font-weight: 600
   color: #374048
 
-.field__label
-  letter-spacing: .5px
+.field-label
+  letter-spacing: .3px
+  margin-bottom: .2rem
 
-.field__control
+.field-control
   position: relative
   display: flex
   align-items: center
   background: #ffffff
-  border: 1px solid #d0d7de
-  border-radius: 6px
-  padding: .55rem .7rem
-  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease
-  &.has-icon .field__input
-    padding-left: 1.6rem
+  border: 2px solid #e1e8f0
+  border-radius: 16px
+  padding: 1rem 1.2rem
+  transition: all .2s ease
+  &.has-icon .field-input
+    padding-left: 2.2rem
   &.has-error
     border-color: #d93025
-    box-shadow: 0 0 0 1px #d93025
+    box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.1)
   &:focus-within
     border-color: #0f62fe
-    box-shadow: 0 0 0 1px #0f62fe20
+    box-shadow: 0 0 0 4px rgba(15, 98, 254, 0.1)
+    transform: translateY(-1px)
 
-.field__icon
+.field-icon
   position: absolute
-  left: .55rem
+  left: 1rem
   top: 50%
   transform: translateY(-50%)
   display: inline-flex
-  font-size: 1rem
+  font-size: 1.1rem
   color: #6b7781
   pointer-events: none
 
-.field__input
+.field-input
   appearance: none
   outline: none
   background: transparent
   border: 0
   color: #1f2429
   font: inherit
+  font-size: 1rem
+  font-weight: 500
   width: 100%
-  line-height: 1.2
+  line-height: 1.3
   &::placeholder
     color: #a0abb4
+    font-weight: 400
   &:focus
     outline: none
 
-.field__error
+.field-error
   font-size: .65rem
   font-weight: 600
   color: #d93025