From edb56a92ff3514d548010cae87f942247bcb9498 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 25 Jan 2024 02:15:28 +0100 Subject: [PATCH 1/3] feat(web): datepicker-in-mobile-and-alert-message-svg --- src/examples/messages.tsx | 33 ++++++- src/lib/dropdown/cascader/index.tsx | 16 ++-- src/lib/dropdown/cascader/selector.tsx | 8 +- src/lib/form/datepicker/dropdown.tsx | 33 ++++++- src/lib/form/datepicker/time-selector.tsx | 14 ++- src/lib/messages/alert.tsx | 92 ++++++++++++-------- src/lib/progress/steps/horizontal-bullet.tsx | 26 +++--- src/styles/common-style.ts | 15 ++-- 8 files changed, 168 insertions(+), 69 deletions(-) diff --git a/src/examples/messages.tsx b/src/examples/messages.tsx index 5b2f282..9d71098 100644 --- a/src/examples/messages.tsx +++ b/src/examples/messages.tsx @@ -4,7 +4,38 @@ import Push from "../lib/messages/push"; const Messages = () => ( <> - + + + + + + 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; + ` + )} `} `; diff --git a/src/lib/dropdown/cascader/selector.tsx b/src/lib/dropdown/cascader/selector.tsx index 25e6407..92a225d 100644 --- a/src/lib/dropdown/cascader/selector.tsx +++ b/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; `; diff --git a/src/lib/form/datepicker/dropdown.tsx b/src/lib/form/datepicker/dropdown.tsx index 237c481..3e2f07c 100644 --- a/src/lib/form/datepicker/dropdown.tsx +++ b/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` 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` 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 { diff --git a/src/lib/form/datepicker/time-selector.tsx b/src/lib/form/datepicker/time-selector.tsx index 32a3b1e..4f77730 100644 --- a/src/lib/form/datepicker/time-selector.tsx +++ b/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` diff --git a/src/lib/messages/alert.tsx b/src/lib/messages/alert.tsx index b127bb8..9e23862 100644 --- a/src/lib/messages/alert.tsx +++ b/src/lib/messages/alert.tsx @@ -4,55 +4,81 @@ 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` ${({ 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` - ${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` + ${variantColor} + svg { + fill: currentColor; height: 24px; width: 24px; - fill: ${variantColor}; } `; +const Text = styled.div` + margin-left: 16px; +`; + const StyledTitle = styled.h2` - ${h2} - color: ${variantColor}; + ${variantColor} + font-size: 16px; + margin: 0; `; const StyledMessage = styled.small` - ${small} color: ${({ theme }) => theme.klerosUIComponentsPrimaryText}; `; -const Text = styled.div` - margin-left: 16px; -`; - interface AlertProps extends VariantProp { title: string; msg: string; @@ -60,18 +86,14 @@ interface AlertProps extends VariantProp { const Alert: React.FC = ({ variant, title, msg }) => ( - {variant === "success" && ( - - )} - {variant === "warning" && ( - - )} - {variant === "error" && ( - - )} - {variant === "info" && } - - {title} + + {variant === "success" && } + {variant === "warning" && } + {variant === "error" && } + {variant === "info" && } + + + {title} {msg} diff --git a/src/lib/progress/steps/horizontal-bullet.tsx b/src/lib/progress/steps/horizontal-bullet.tsx index e6f7740..42dd371 100644 --- a/src/lib/progress/steps/horizontal-bullet.tsx +++ b/src/lib/progress/steps/horizontal-bullet.tsx @@ -62,19 +62,21 @@ const TextWrapper = styled.div` 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 { diff --git a/src/styles/common-style.ts b/src/styles/common-style.ts index ec264e4..2982f66 100644 --- a/src/styles/common-style.ts +++ b/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> +) => css` @media (max-width: 900px) { - ${style} + ${() => styleFn()} } `; From d4d2d2cf2e8b0c527665dd853bbcb040d94732a3 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 25 Jan 2024 02:21:25 +0100 Subject: [PATCH 2/3] feat: small margin adjustment --- src/lib/form/textarea.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/form/textarea.tsx b/src/lib/form/textarea.tsx index 0f8b7f4..6931cf2 100644 --- a/src/lib/form/textarea.tsx +++ b/src/lib/form/textarea.tsx @@ -26,7 +26,7 @@ const StyledTextarea = styled.textarea` const StyledSVG = styled.svg``; const Message = styled.div` - margin-top: 6px; + margin-top: 12px; display: flex; align-items: flex-start; From bd524db824e5d5da4e112df31d6f0a0bfc68d97a Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 25 Jan 2024 03:39:12 +0100 Subject: [PATCH 3/3] feat(web): disable style for secondarybutton --- src/examples/buttons.tsx | 1 + src/lib/button/secondary.tsx | 29 +++++++++++++++++++++++------ 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/examples/buttons.tsx b/src/examples/buttons.tsx index f12cec7..59071bc 100644 --- a/src/examples/buttons.tsx +++ b/src/examples/buttons.tsx @@ -8,6 +8,7 @@ const Buttons = () => (