fix: Change SelectField CSS to match input height (#545)

src/components/SelectField/SelectField.css

@@ -7,7 +7,7 @@
   border-radius: 0px;
   border: none;
   border-bottom: 2px solid var(--divider);
-  padding: 2px 0px 12px 0px;
+  padding: 2px 0px 0px 0px;
   width: 100%;
   margin-top: 8px;
   min-height: 40px;
@@ -37,7 +37,7 @@
   font-size: 20px;
   font-weight: 500;
   font-family: var(--font-family);
-  line-height: 18px;
+  line-height: 30px;
 }
 
 .dcl.select-field .ui.dropdown > .default.text {
@@ -57,7 +57,7 @@
 
 .dcl.select-field .ui.dropdown .dropdown.icon {
   padding-right: 0px;
-  padding-top: 4px;
+  padding-bottom: 0px;
   color: var(--text);
 }
 

src/components/SelectField/SelectField.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import classNames from 'classnames'
 import { Dropdown, DropdownProps } from '../Dropdown/Dropdown'
 import { Header } from '../Header/Header'
 import './SelectField.css'
@@ -13,20 +14,26 @@ export type SelectFieldProps = DropdownProps & {
 
 export class SelectField extends React.PureComponent<SelectFieldProps> {
   render(): JSX.Element {
-    const { label, header, options, message, error, border, ...rest } =
-      this.props
-    let classes = 'dcl select-field'
-
-    if (error) {
-      classes += ' error warning circle'
-    }
-
-    if (border) {
-      classes += ' border'
-    }
+    const {
+      label,
+      header,
+      options,
+      message,
+      error,
+      border,
+      className,
+      ...rest
+    } = this.props
 
     return (
-      <div className={classes}>
+      <div
+        className={classNames(
+          'dcl',
+          'select-field',
+          { error: error, warning: error, circle: error, border: border },
+          className
+        )}
+      >
         {label ? <Header sub>{label}</Header> : null}
 
         <Dropdown search selection options={options} {...rest}>