Feature/red theme/button input

src/components/atoms/Button/Button.tsx

@@ -16,60 +16,68 @@ export interface ButtonProps
   invert?: boolean;
   loading?: boolean;
   block?: boolean;
-  mode?: "primary" | "secondary" | "outline" | "white" | "icon";
+  mode?:
+    | "primary"
+    | "secondary"
+    | "outline"
+    | "white"
+    | "icon"
+    | "secondary outline";
   as?: React.ElementType;
   "aria-label"?: string;
 }
 
 const StyledButton = styled("button")<ButtonProps>`
-  background: ${(props) => {
-    if (props.mode === "outline") {
+  background: ${({ mode, theme, invert }) => {
+    if (mode && mode.includes("outline")) {
       return "transparent";
     }
-    if (props.invert) {
-      return props.theme.invertColor;
+    if (invert) {
+      return theme.invertColor;
     }
-    if (props.mode === "white") {
-      return props.theme.white;
+    if (mode === "white") {
+      return theme.white;
     }
-    if (props.mode === "icon") {
+    if (mode === "icon") {
       return "transparent";
     }
-    return props.theme?.primaryColor || "black";
+    return theme?.primaryColor || "black";
   }};
-  color: ${(props) => {
-    if (props.mode === "outline" || props.mode === "icon") {
-      if (props.invert) {
+  color: ${({ theme, mode, invert }) => {
+    if ((mode && mode.includes("outline")) || mode === "icon") {
+      if (invert) {
         return getStylesBasedOnTheme(
-          props.theme.mode,
-          props.theme.dm__outlineButtonInvertColor,
-          props.theme.outlineButtonInvertColor,
-          props.theme.primaryColor
+          theme.mode,
+          theme.dm__outlineButtonInvertColor,
+          theme.outlineButtonInvertColor,
+          theme.textColor
         );
       }
       return getStylesBasedOnTheme(
-        props.theme.mode,
-        props.theme.dm__outlineButtonColor,
-        props.theme.outlineButtonColor,
-        props.theme.primaryColor
+        theme.mode,
+        theme.dm__outlineButtonColor,
+        theme.textColor,
+        theme.textColor
       );
     }
 
-    if (props.mode === "white") {
-      return props.theme.black;
+    if (mode === "white") {
+      return theme.black;
     }
 
-    return props.theme.white;
+    return theme.white;
   }};
   font-family: ${(props) => getFontFromTheme(props.theme).fontFamily};
   font-weight: bold;
   font-size: ${(props) => {
     if (props.mode) {
       switch (props.mode) {
         case "primary":
-          return "18px";
         case "secondary":
         case "outline":
+        case "secondary outline":
+          return "16px";
+
         case "white":
         default:
           return "14px";
@@ -84,21 +92,25 @@ const StyledButton = styled("button")<ButtonProps>`
     return "1.55em";
   }};
   cursor: pointer;
+  padding: "9xp 16px";
   padding: ${(props) => {
-    if (props.mode === "primary") {
-      return "0.75em 2em";
-    } else if (props.mode === "icon") {
+    if (props.mode === "icon") {
       return "4px";
+    } else if (
+      props.mode === "secondary" ||
+      props.mode === "secondary outline"
+    ) {
+      return "4px 13px";
     }
-    return "0.65em 1.3em";
+    return "9px 16px";
   }};
   border-radius: ${(props) => props.theme?.buttonRadius || 2}px;
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   border-style: solid;
   border-width: 2px;
   border-color: ${({ theme, mode, invert }) => {
-    if (mode === "outline") {
+    if (mode?.includes("outline")) {
       if (invert) {
         return getStylesBasedOnTheme(
           theme.mode,
@@ -146,9 +158,11 @@ const StyledButton = styled("button")<ButtonProps>`
       if (props.mode) {
         switch (props.mode) {
           case "primary":
-            return "18px";
           case "secondary":
           case "outline":
+          case "secondary outline":
+            return "18px";
+
           default:
             return "14px";
         }
@@ -175,7 +189,6 @@ const StyledButton = styled("button")<ButtonProps>`
       }
       return props.theme.white;
     }};
-    box-shadow: none !important;
   }
 
   &:hover {
@@ -184,11 +197,16 @@ const StyledButton = styled("button")<ButtonProps>`
         return props.theme.primaryColor;
       }
     }};
-    border-color: transparent;
+    border: ${(props) => {
+      if (props.mode && props.mode.includes("outline")) {
+        return `1px solid ${chroma(props.theme.primaryColor).alpha(0.8).hex()}`;
+      }
+    }};
+
     ${(props) => {
       if (props.theme) {
         if (props.invert) {
-          if (props.mode === "outline") {
+          if (props.mode && props.mode.includes("outline")) {
             return `
               background: ${props.theme.white};
               color: ${props.theme.gray1};
@@ -210,26 +228,27 @@ const StyledButton = styled("button")<ButtonProps>`
             opacity: 0.6;
             `;
         } else {
-          if (props.mode === "outline") {
+          if (props.mode && props.mode.includes("outline")) {
             return `
               background: ${getStylesBasedOnTheme(
                 props.theme.mode,
                 props.theme.white,
-                props.theme.black
+                "transparent"
               )};
               color: ${getStylesBasedOnTheme(
                 props.theme.mode,
                 props.theme.black,
-                props.theme.white
+                props.theme.textColor
               )};
             `;
           }
           return `
-            background: ${chroma(props.theme.primaryColor).alpha(0.3).hex()};
+            color: ${chroma(props.theme.white).alpha(0.85).hex()};
+            background: ${chroma(props.theme.primaryColor).alpha(0.85).hex()};
           `;
         }
       }
-    }}
+    }};
   }
 
   &:disabled {
@@ -249,20 +268,26 @@ const StyledButton = styled("button")<ButtonProps>`
       if (props.invert) {
         return `color: ${props.theme.white};`;
       }
+      if (props.mode && props.mode.includes("outline")) {
+        return `color: ${props.theme.textColor};
+        background: ${props.theme.white};
+        border: 1px solid ${props.theme.primaryButtonDisabled};        
+        `;
+      }
     }};
   }
-  &:hover,
-  &:focus,
+
+  /* &:focus,
   &:active {
     ${(props) => {
-      if (props.theme) {
-        return `background: rgba(${chroma(props.theme.gray1)
-          .rgb()
-          .join(",")}, 0.2);`;
-      }
-    }}
+    if (props.theme) {
+      return `background: rgba(${chroma(props.theme.gray1)
+        .rgb()
+        .join(",")}, 0.2);`;
+    }
+  }}
     color: ${(props) => props.theme.white}
-  }
+  } */
 `;
 
 // Main button with styles

src/components/atoms/Input/Input.tsx

@@ -57,7 +57,12 @@ const StyledDiv = styled("div")<InputProps>`
     }
 
     .helper {
-      font-size: 12px;
+      font-size: 11px;
+      width: 100%;
+      display: block;
+      text-align: center;
+      margin-top: 1px;
+      opacity: 0.55;
     }
 
     .input-and-fieldset {
@@ -68,11 +73,11 @@ const StyledDiv = styled("div")<InputProps>`
       input {
         font-family: ${(props) => getFontFromTheme(props.theme).fontFamily};
         border: 0px;
-        font-size: 14px;
+        font-size: 13px;
         box-sizing: content-box;
         display: block;
         width: 100%;
-        padding: 11px 12px 13px;
+        padding: 14px 18px;
         caret-color: #e60037;
         border-radius: ${(props) => props.theme.inputRadius}px;
         background: ${(props) => {
@@ -179,8 +184,8 @@ const StyledDiv = styled("div")<InputProps>`
         position: absolute;
         left: 0px;
         top: 0px;
-        transform: translate(12px, 12px) scale(1);
-        font-size: 12px;
+        transform: translate(18px, 14px) scale(1);
+        font-size: 13px;
         z-index: 1;
         transition: 0.2s all;
         color: ${({ theme, error, disabled }) => {

src/components/atoms/Link/Link.tsx

@@ -19,7 +19,7 @@ const StyledAnchor = styled("a")<LinkProps>`
   font-family: ${(props) =>
     props.theme ? getFontFromTheme(props.theme).fontFamily : "sans-serif"};
   font-weight: 500;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.55em;
   cursor: pointer;
   -webkit-font-smoothing: antialiased;

src/components/atoms/Typography/Text.tsx

@@ -11,7 +11,7 @@ export interface TextProps
     ExtendableStyledComponent {
   noMargin?: boolean;
   bold?: boolean;
-  size?: "16" | "14" | "13" | "12";
+  size?: "16" | "14" | "13" | "12" | "11";
   type?: "primary" | "secondary" | "warning" | "danger";
   className?: string;
 }
@@ -28,7 +28,7 @@ const StyledP = styled.p<TextProps>`
         return getStylesBasedOnTheme(
           props.theme.mode,
           props.theme.white,
-          "#111"
+          props.theme.textColor
         );
     }
   }};

src/components/molecules/Banner/Banner.tsx

@@ -66,7 +66,7 @@ export const Banner: React.FC<BannerProps> = (props) => {
             <React.Fragment>{title}</React.Fragment>
           )}
           <Button
-            mode={mobile ? "secondary" : "primary"}
+            mode={"primary"}
             className={"banner-btn"}
             onClick={handleBtn}
             block={mobile}

src/components/molecules/Search/Search.tsx

@@ -91,8 +91,7 @@ const StyledSearch = styled("div")<StyledSearchProps>`
     max-height: ${({ isFocused }) => (isFocused ? "250px" : "0")};
     overflow-y: auto;
     display: ${({ isFocused }) => (isFocused ? "block" : "none")};
-    background-color: ${({ theme }) =>
-      getStylesBasedOnTheme(theme.mode, theme.gray1, theme.gray5)};
+    background-color: ${({ theme }) => theme.white};
     border-width: 0.5px;
     border-style: solid;
     border-color: ${({ theme }) =>
@@ -103,9 +102,10 @@ const StyledSearch = styled("div")<StyledSearchProps>`
       )};
     border-top: none;
     box-sizing: border-box;
-    border-bottom-left-radius: ${({ theme }) => theme.inputRadius}px;
-    border-bottom-right-radius: ${({ theme }) => theme.inputRadius}px;
+    border-radius: ${({ theme }) => theme.buttonRadius}px;
+    padding: 0px 6px;
     z-index: 1;
+    box-shadow: 0px 10px 15px #00000019;
 
     > * {
       padding: 15px;
@@ -126,6 +126,13 @@ const StyledSearch = styled("div")<StyledSearchProps>`
           )};
       }
     }
+
+    ::-webkit-scrollbar {
+      width: 1px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: ${({ theme }) => theme.primaryColor};
+    }
   }
 `;
 

src/components/organisms/LoginForm/LoginForm.tsx

@@ -48,6 +48,9 @@ const StyledDiv = styled.div<{ mobile: boolean }>`
     max-width: 440px;
     margin-bottom: 15px;
   }
+  > button {
+    width: 100%;
+  }
 `;
 
 interface MyFormValues {
@@ -176,7 +179,7 @@ export const LoginForm: React.FC<Props> = ({
               onChange={handleChange}
             />
             <Button
-              mode="secondary"
+              mode="primary"
               type="submit"
               loading={isSubmitting || user.loading}
               block
@@ -194,12 +197,13 @@ export const LoginForm: React.FC<Props> = ({
           {t<string>("Login.NotRemember")}
         </Link>
       </Text>
-      <Text size="14">
-        {t<string>("Login.NoAccount")}{" "}
-        <Link underline onClick={() => onRegisterLink && onRegisterLink()}>
-          {t<string>("Login.Signup")}
-        </Link>
-      </Text>
+      <Text size="14">{t<string>("Login.NoAccount")} </Text>
+      <Button
+        mode={"outline"}
+        onClick={() => onRegisterLink && onRegisterLink()}
+      >
+        {t<string>("Login.Signup")}
+      </Button>
     </StyledDiv>
   );
 };