🎨 styles: home subscribe

:%s

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -5,7 +5,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 1.6rem 3.2rem;
+  padding: 1.2rem 3.2rem;
   &:disabled {
     filter: brightness(0.9);
     cursor: not-allowed;
@@ -49,9 +49,17 @@
     }
   }
 
+  &.lightBorderNone {
+    @apply bg-white text-primary;
+    &.loading {
+      &::before {
+        border-top-color: var(--primary);
+      }
+    }
+  }
+
   &.ghost {
-    @apply bg-white;
-    color: var(--primary);
+    @apply bg-white text-primary;
     border: 1px solid var(--primary);
     &.loading {
       &::before {

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -4,7 +4,7 @@ import s from './ButtonCommon.module.scss'
 
 interface Props {
     children?: React.ReactNode,
-    type?: 'primary' | 'light' | 'ghost',
+    type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
     size?: 'default' | 'large',
     icon?: React.ReactNode,
     isIconSuffix?: boolean,

src/components/common/InputCommon/InputCommon.module.scss

@@ -40,5 +40,12 @@
         border: 1px solid var(--primary);
       }
     }
+    &.bgTransparent {
+      background: rgb(227, 242, 233, 0.3);
+      color: var(--white);
+      &::placeholder {
+        color: var(--white);
+      }
+    }
   }
 }

src/components/common/InputCommon/InputCommon.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { KEY } from 'src/utils/constanst.utils';
 import s from './InputCommon.module.scss';
@@ -9,14 +10,15 @@ interface Props {
     children?: React.ReactNode,
     value?: string | number,
     placeholder?: string,
-    type?: 'text' | 'number',
+    type?: 'text' | 'number' | 'email',
     styleType?: 'default' | 'custom',
+    backgroundTransparent?: boolean,
     icon?: React.ReactNode,
     onChange?: (value: string | number) => void,
     onEnter?: (value: string | number) => void,
 }
 
-const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon,
+const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon, backgroundTransparent = false,
     onChange, onEnter }: Props, ref) => {
     const inputElementRef = useRef<HTMLInputElement>(null);
 
@@ -24,6 +26,10 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
         focus: () => {
             inputElementRef.current?.focus();
         },
+        getValue: () => {
+            const value = inputElementRef.current?.value || ''
+            return value
+        }
     }));
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -32,6 +38,7 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
 
     const handleKeyDown = (e: any) => {
         if (e.key === KEY.ENTER && onEnter) {
+            console.log("on enter***")
             const value = inputElementRef.current?.value || ''
             onEnter(value)
         }
@@ -49,7 +56,11 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
                 placeholder={placeholder}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
-                className={`${s.inputCommon} ${s[styleType]}`}
+                className={classNames({
+                    [s.inputCommon]: true,
+                    [s[styleType]]: true,
+                    [s.bgTransparent]: backgroundTransparent
+                })}
             />
         </div>
     )