chore: 🔧 login enter

src/components/input/InputWithDeco.tsx

@@ -46,6 +46,7 @@ type InputWithDecoProps = {
   placeholder?: string;
   inputType?: string;
   inputCallback?: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 };
 
 export const InputWithDeco: React.FC<InputWithDecoProps> = ({
@@ -60,6 +61,7 @@ export const InputWithDeco: React.FC<InputWithDecoProps> = ({
   noInput,
   inputType = 'text',
   inputCallback,
+  onKeyDown,
 }) => {
   const showAmount = !!amount || customAmount;
   let correctValue = value ? value : '';
@@ -68,6 +70,7 @@ export const InputWithDeco: React.FC<InputWithDecoProps> = ({
     correctValue = value && value > 0 ? value : '';
   }
 
+  const onKeyDownProp = onKeyDown ? { onKeyDown } : {};
   const props = noInput ? {} : { value: correctValue };
 
   return (
@@ -93,6 +96,7 @@ export const InputWithDeco: React.FC<InputWithDecoProps> = ({
           mobileMargin={'0'}
           type={inputType}
           onChange={e => inputCallback && inputCallback(e.target.value)}
+          {...onKeyDownProp}
           {...props}
         />
       )}

src/components/input/index.tsx

@@ -20,25 +20,25 @@ interface InputProps {
 }
 
 export const StyledInput = styled.input<InputProps>`
-    font-size: 14px;
-    padding: 5px;
-    height: 38px;
-    margin: 8px 0;
-    border: 1px solid ${inputBorderColor};
-    background: none;
-    border-radius: 5px;
-    color: ${textColor};
-    background-color: ${({ backgroundColor }) =>
-      backgroundColor || inputBackgroundColor};
-    ${({ maxWidth }) =>
-      maxWidth &&
-      css`
-        max-width: ${maxWidth};
-      `}
-    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-    margin: ${({ withMargin }) => (withMargin ? withMargin : '0')};
+  font-size: 14px;
+  padding: 5px;
+  height: 38px;
+  margin: 8px 0;
+  border: 1px solid ${inputBorderColor};
+  background: none;
+  border-radius: 5px;
+  color: ${textColor};
+  background-color: ${({ backgroundColor }) =>
+    backgroundColor || inputBackgroundColor};
+  ${({ maxWidth }) =>
+    maxWidth &&
+    css`
+      max-width: ${maxWidth};
+    `}
+  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
+  margin: ${({ withMargin }) => (withMargin ? withMargin : '0')};
 
-    @media (${mediaWidths.mobile}) {
+  @media (${mediaWidths.mobile}) {
     ${({ withMargin, mobileMargin }) =>
       mobileMargin
         ? css`
@@ -61,16 +61,14 @@ export const StyledInput = styled.input<InputProps>`
         : ''};
   }
 
-    &:hover {
-        border: 1px solid
-            ${({ color }) => (color ? color : colorButtonBorder)};
-    }
+  &:hover {
+    border: 1px solid ${({ color }) => (color ? color : colorButtonBorder)};
+  }
 
-    &:focus {
-        outline: none;
-        border: 1px solid
-            ${({ color }) => (color ? color : colorButtonBorder)};
-    }
+  &:focus {
+    outline: none;
+    border: 1px solid ${({ color }) => (color ? color : colorButtonBorder)};
+  }
 `;
 
 interface InputCompProps {

src/views/homepage/Login.tsx

@@ -87,6 +87,13 @@ export const Login = ({ account }: LoginProps) => {
             type={'password'}
             withMargin={'0 0 0 16px'}
             onChange={e => setPass(e.target.value)}
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                getSessionToken({
+                  variables: { id: account.id, password: pass },
+                });
+              }
+            }}
           />
         </SingleLine>
         <ColorButton