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

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/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/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>

src/lib/progress/steps/horizontal-bullet.tsx

@@ -62,19 +62,21 @@ const TextWrapper = styled.div<ITextWrapper>`
     line-height: 16px;
   }
 
-  ${mobileStyle(css`
-    position: absolute;
-    top: 24px;
-    left: 0;
-    margin-left: 0px;
-    transform: translateX(calc(-50% + 12px));
-    align-items: center;
-    text-align: center;
+  ${mobileStyle(
+    () => css`
+      position: absolute;
+      top: 24px;
+      left: 0;
+      margin-left: 0px;
+      transform: translateX(calc(-50% + 12px));
+      align-items: center;
+      text-align: center;
 
-    > h2 {
-      line-height: 19px;
-    }
-  `)}
+      > h2 {
+        line-height: 19px;
+      }
+    `
+  )}
 `;
 
 interface HorizontalBulletProps extends IContainer, ITextWrapper {

src/styles/common-style.ts

@@ -1,10 +1,15 @@
-import { css, FlattenSimpleInterpolation } from "styled-components";
+import {
+  css,
+  DefaultTheme,
+  FlattenInterpolation,
+  ThemeProps,
+} from "styled-components";
 
-export const mobileStyle: (
-  style: FlattenSimpleInterpolation
-) => FlattenSimpleInterpolation = (style) => css`
+export const mobileStyle = (
+  styleFn: () => FlattenInterpolation<ThemeProps<DefaultTheme>>
+) => css`
   @media (max-width: 900px) {
-    ${style}
+    ${() => styleFn()}
   }
 `;