feat(web): datepicker-in-mobile-and-alert-message-svg

src/examples/buttons.tsx

@@ -8,6 +8,7 @@ const Buttons = () => (
     <Button small text="Get help" Icon={Telegram} />
     <Button disabled isLoading text="Hello" />
     <Button variant="secondary" text="Hello" />
+    <Button variant="secondary" isLoading disabled text="Hello" />
     <Button variant="tertiary" small text="Hello" />
   </>
 );

src/examples/messages.tsx

@@ -4,7 +4,38 @@ import Push from "../lib/messages/push";
 
 const Messages = () => (
   <>
-    <Alert variant="warning" title={"this is a warning"} msg={"error"} />
+    <Alert
+      variant="warning"
+      title={"this is a warning"}
+      msg={"Hiring an outside contractor?"}
+    />
+
+    <Alert
+      variant="info"
+      title={"this is a warning"}
+      msg={
+        "Want to protect your crypto transaction? Use this option " +
+        "safe cross-chain swap. One person escrows an asset based on " +
+        "Ethereum and the funds are released once assets on another " +
+        "blockchain have been moved."
+      }
+    />
+
+    <Alert
+      variant="info"
+      title={"this is a warning"}
+      msg={
+        "Want to protect your crypto transaction? Use this option " +
+        "safe cross-chain swap. One person escrows an asset based on " +
+        "Ethereum and the funds are released once assets on another " +
+        "blockchain have been moved." +
+        "Want to protect your crypto transaction? Use this option " +
+        "safe cross-chain swap. One person escrows an asset based on " +
+        "Ethereum and the funds are released once assets on another " +
+        "blockchain have been moved."
+      }
+    />
+
     <Push
       variant="error"
       title={"Transaction failed"}

src/lib/button/secondary.tsx

@@ -2,24 +2,41 @@ import styled from "styled-components";
 import BaseButton from "./base";
 
 const SecondaryButton = styled(BaseButton)`
-  background: ${(props) => props.theme.klerosUIComponentsWhiteBackground};
+  background: ${(props) =>
+    props.disabled
+      ? props.theme.klerosUIComponentsLightGrey
+      : props.theme.klerosUIComponentsWhiteBackground};
   border: ${(props) =>
-    "1px solid " + props.theme.klerosUIComponentsPrimaryBlue};
+    props.disabled
+      ? `1px solid ${props.theme.klerosUIComponentsStroke}`
+      : `1px solid ${props.theme.klerosUIComponentsPrimaryBlue}`};
 
   .button-text {
-    color: ${(props) => props.theme.klerosUIComponentsPrimaryBlue};
+    color: ${(props) =>
+      props.disabled
+        ? props.theme.klerosUIComponentsStroke
+        : props.theme.klerosUIComponentsPrimaryBlue};
   }
 
   .button-svg {
-    fill: ${(props) => props.theme.klerosUIComponentsPrimaryBlue};
+    fill: ${(props) =>
+      props.disabled
+        ? props.theme.klerosUIComponentsStroke
+        : props.theme.klerosUIComponentsPrimaryBlue};
   }
 
   .button-loading {
-    fill: ${(props) => props.theme.klerosUIComponentsPrimaryBlue};
+    fill: ${(props) =>
+      props.disabled
+        ? props.theme.klerosUIComponentsStroke
+        : props.theme.klerosUIComponentsPrimaryBlue};
   }
 
   :hover {
-    background: ${(props) => props.theme.klerosUIComponentsMediumBlue};
+    background: ${(props) =>
+      props.disabled
+        ? props.theme.klerosUIComponentsLightGrey
+        : props.theme.klerosUIComponentsMediumBlue};
   }
 `;
 

src/lib/dropdown/cascader/index.tsx

@@ -15,9 +15,11 @@ interface ILayer {
 
 const Wrapper = styled(DropdownContainer)`
   border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
-  ${mobileStyle(css`
-    width: 240px;
-  `)}
+  ${mobileStyle(
+    () => css`
+      width: 240px;
+    `
+  )}
   border-radius: 3px;
 `;
 
@@ -32,9 +34,11 @@ const Container = styled.div<{ path: ILayer[]; isOpen: boolean }>`
     grid-template-columns: repeat(${path.length}, 238px) 0px;
     grid-template-rows: max-content;
     gap: 1px;
-    ${mobileStyle(css`
-      overflow: auto;
-    `)}
+    ${mobileStyle(
+      () => css`
+        overflow: auto;
+      `
+    )}
   `}
 `;
 

src/lib/dropdown/cascader/selector.tsx

@@ -10,9 +10,11 @@ const Wrapper = styled.div`
   background: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
   padding: 8px 16px;
   display: flex;
-  ${mobileStyle(css`
-    justify-content: center;
-  `)}
+  ${mobileStyle(
+    () => css`
+      justify-content: center;
+    `
+  )}
   justify-content: end;
   align-items: center;
 `;

src/lib/form/datepicker/dropdown.tsx

@@ -1,18 +1,20 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import DateSelector, { IDateSelector } from "./date-selector";
 import TimeSelector, { ITimeControls } from "./time-selector";
 import Button from "../../button";
+import { mobileStyle } from "../../../styles/common-style";
 
 interface IContainer {
   time?: boolean;
   isOpen?: boolean;
 }
+
 const Container = styled.div<IContainer>`
   position: absolute;
   z-index: 100;
   overflow: hidden;
-  height: ${({ isOpen }) => (isOpen ? "350" : "0")}px;
+  height: ${({ isOpen }) => (isOpen ? "auto" : "0")};
   width: ${({ time }) => (time ? "450px" : "330px")};
   transition: height ease
     ${({ theme }) => theme.klerosUIComponentsTransitionSpeed};
@@ -22,19 +24,42 @@ const Container = styled.div<IContainer>`
   box-shadow: 0px 2px 3px
     ${({ theme }) => theme.klerosUIComponentsDefaultShadow};
   border-radius: 3px;
+
+  ${mobileStyle(
+    () => css`
+      width: 332px;
+      position: static;
+      margin: 0;
+      left: 0;
+      top: 0;
+    `
+  )}
 `;
 
 const Selectors = styled.div`
   display: flex;
+
+  ${mobileStyle(
+    () => css`
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+    `
+  )}
 `;
 
 const ButtonContainer = styled.div`
   width: 100%;
-  height: 64px;
-  padding: 0px 24px;
+  padding: 16px 24px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
+
+  ${mobileStyle(
+    () => css`
+      justify-content: center;
+    `
+  )}
 `;
 
 interface IDropdown extends IDateSelector, ITimeControls, IContainer {

src/lib/form/datepicker/time-selector.tsx

@@ -1,15 +1,23 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import TimeControls, { ITimeControls } from "./time-controls";
 export type { ITimeControls };
-import { h2 } from "../../../styles/common-style";
+import { h2, mobileStyle } from "../../../styles/common-style";
 
 const Wrapper = styled.div`
-  width: 100%;
+  width: 118px;
   height: 284px;
   border-left: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
   display: flex;
   flex-direction: column;
+
+  ${mobileStyle(
+    () => css`
+      border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
+      border-top: none;
+      border-bottom: none;
+    `
+  )}
 `;
 
 const Header = styled.div`

src/lib/form/textarea.tsx

@@ -26,7 +26,7 @@ const StyledTextarea = styled.textarea`
 const StyledSVG = styled.svg``;
 
 const Message = styled.div<VariantProp>`
-  margin-top: 6px;
+  margin-top: 12px;
   display: flex;
   align-items: flex-start;
 

src/lib/messages/alert.tsx

@@ -4,74 +4,96 @@ import SuccessIcon from "../../assets/svgs/status-icons/success.svg";
 import WarningIcon from "../../assets/svgs/status-icons/warning.svg";
 import ErrorIcon from "../../assets/svgs/status-icons/error.svg";
 import InfoIcon from "../../assets/svgs/status-icons/info.svg";
-import { borderBox, svg, h2, small } from "../../styles/common-style";
 
 type VariantProp = { variant: "success" | "warning" | "error" | "info" };
 
 const variantColor = css<VariantProp>`
   ${({ theme, variant }) => {
-    if (variant === "success") return theme.klerosUIComponentsSuccess;
-    if (variant === "warning") return theme.klerosUIComponentsWarning;
-    if (variant === "error") return theme.klerosUIComponentsError;
-    return theme.klerosUIComponentsPrimaryBlue;
+    switch (variant) {
+      case "success":
+        return css`
+          color: ${theme.klerosUIComponentsSuccess};
+        `;
+      case "warning":
+        return css`
+          color: ${theme.klerosUIComponentsWarning};
+        `;
+      case "error":
+        return css`
+          color: ${theme.klerosUIComponentsError};
+        `;
+      case "info":
+      default:
+        return css`
+          color: ${theme.klerosUIComponentsPrimaryBlue};
+        `;
+    }
   }}
 `;
 
-const StyledSVG = styled.svg``;
+const borderColor = ({
+  theme,
+  variant,
+}: {
+  theme: any;
+  variant: VariantProp["variant"];
+}) => {
+  const colors = {
+    success: theme.klerosUIComponentsSuccess,
+    warning: theme.klerosUIComponentsWarning,
+    error: theme.klerosUIComponentsError,
+    info: theme.klerosUIComponentsPrimaryBlue,
+  };
+  return colors[variant];
+};
 
 const Wrapper = styled.div<VariantProp>`
-  ${borderBox}
-  min-width: 328px;
-  width: fit-content;
-  height: fit-content;
+  display: flex;
+  align-items: center;
   background: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
-  border: 1px solid ${variantColor};
+  border: 1px solid ${({ theme, variant }) => borderColor({ theme, variant })};
   border-radius: 3px;
   padding: 16px 24px;
-  display: flex;
-  align-items: center;
+`;
 
-  & ${StyledSVG} {
-    ${svg}
+const IconWrapper = styled.div<VariantProp>`
+  ${variantColor}
+  svg {
+    fill: currentColor;
     height: 24px;
     width: 24px;
-    fill: ${variantColor};
   }
 `;
 
+const Text = styled.div`
+  margin-left: 16px;
+`;
+
 const StyledTitle = styled.h2<VariantProp>`
-  ${h2}
-  color: ${variantColor};
+  ${variantColor}
+  font-size: 16px;
+  margin: 0;
 `;
 
 const StyledMessage = styled.small`
-  ${small}
   color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
 `;
 
-const Text = styled.div<VariantProp>`
-  margin-left: 16px;
-`;
-
 interface AlertProps extends VariantProp {
   title: string;
   msg: string;
 }
 
 const Alert: React.FC<AlertProps> = ({ variant, title, msg }) => (
   <Wrapper variant={variant}>
-    {variant === "success" && (
-      <SuccessIcon className={StyledSVG.styledComponentId} />
-    )}
-    {variant === "warning" && (
-      <WarningIcon className={StyledSVG.styledComponentId} />
-    )}
-    {variant === "error" && (
-      <ErrorIcon className={StyledSVG.styledComponentId} />
-    )}
-    {variant === "info" && <InfoIcon className={StyledSVG.styledComponentId} />}
-    <Text {...{ variant }}>
-      <StyledTitle {...{ variant }}>{title}</StyledTitle>
+    <IconWrapper variant={variant}>
+      {variant === "success" && <SuccessIcon />}
+      {variant === "warning" && <WarningIcon />}
+      {variant === "error" && <ErrorIcon />}
+      {variant === "info" && <InfoIcon />}
+    </IconWrapper>
+    <Text>
+      <StyledTitle variant={variant}>{title}</StyledTitle>
       <StyledMessage>{msg}</StyledMessage>
     </Text>
   </Wrapper>