diff --git a/package.json b/package.json index 6e64b93..e7880d3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pixel-base", - "version": "1.9.1", + "version": "1.9.2", "description": "Common UI components for web.pixelone.app, Based on React Bootstrap", "author": "muffrank", "license": "MIT", diff --git a/src/lib/DC-button/DC-button.tsx b/src/lib/DC-button/DC-button.tsx index e05c930..81b1018 100644 --- a/src/lib/DC-button/DC-button.tsx +++ b/src/lib/DC-button/DC-button.tsx @@ -243,6 +243,7 @@ const StyledPixelButton = styled(Button)<{ props }>` &:hover { color: white !important; background-color: ${$DCSuccessActiveColor} !important; + border-color: ${$DCSuccessActiveColor} !important; } `} ${(props: DcButtonProps) => @@ -256,6 +257,7 @@ const StyledPixelButton = styled(Button)<{ props }>` &:hover { color: white !important; background-color: ${$DCDangerActiveColor} !important; + border-color: ${$DCDangerActiveColor} !important; } `} ${(props: DcButtonProps) => @@ -269,6 +271,7 @@ const StyledPixelButton = styled(Button)<{ props }>` &:hover { color: white !important; background-color: ${$DCWarningActiveColor} !important; + border-color: ${$DCWarningActiveColor} !important; } `} ${(props: DcButtonProps) => @@ -282,6 +285,7 @@ const StyledPixelButton = styled(Button)<{ props }>` &:hover { color: white !important; background-color: ${$DCInfoActiveColor} !important; + border-color: ${$DCInfoActiveColor} !important; } `} diff --git a/src/lib/DC-switch/DC-switch.stories.tsx b/src/lib/DC-switch/DC-switch.stories.tsx index 0f0e8ac..cf7b214 100644 --- a/src/lib/DC-switch/DC-switch.stories.tsx +++ b/src/lib/DC-switch/DC-switch.stories.tsx @@ -10,7 +10,7 @@ export default { } as ComponentMeta const Template: ComponentStory = (args) => { - const [checked, setChecked] = React.useState(true) + const [checked, setChecked] = React.useState(false) return (
diff --git a/src/lib/dc-tag/dc-tag.tsx b/src/lib/dc-tag/dc-tag.tsx index a1e0933..2f1d877 100644 --- a/src/lib/dc-tag/dc-tag.tsx +++ b/src/lib/dc-tag/dc-tag.tsx @@ -4,14 +4,14 @@ import styled, { css } from 'styled-components' export interface DcTagProps extends React.HTMLProps { className?: - | 'primary' - | 'secondary' - | 'success' - | 'danger' - | 'warning' - | 'info' - | 'light' - | 'dark' + | 'primary' + | 'secondary' + | 'success' + | 'danger' + | 'warning' + | 'info' + | 'light' + | 'dark' textColor?: string customBackgroundColor?: boolean } @@ -54,7 +54,7 @@ const tagBgColors = { 'partial returns': '#fbe8ea', 'partial non monetory': '#e7e8ea', 'partial post delivery': '#ece7fe', - open: '#ffab40', + open: '#fdf7e3', closed: '#fbe8ea', 'partial ppen': '#e6f8f1', 'partial closed': '#fbe8ea', @@ -73,7 +73,7 @@ const tagBgColors = { 'on-hold': '#fbe8ea', onlinepayment: '#e6f8f1', prepaid: '#e6f8f1', - pending: '#ff9800', + pending: '#fdf7e3', ready_to_ship: '#448aff', confirmed: '#e6f8f1', detain: '#fbe8ea', @@ -101,7 +101,7 @@ const tagBgColors = { duplicate: '#e7e8ea', active: 'green', series: '#ffeb3b', - internal: '#ff9800', + internal: '#fdf7e3', api: 'green', sync: '#ffeb3b', manual: '#fbe8ea', @@ -109,15 +109,15 @@ const tagBgColors = { ems: '#cc01fa', woocom: '#e6f8f1', wix: '#ffeb3b', - daraz: '#ff9800', + daraz: '#fdf7e3', gsheet: '#ece7fe', - TCS: '#EF9200', + TCS: '#fdf7e3', Leopard: '#FFCB05', 'Pakistan Post': '#7c0000', - Laugix: '#ff9800', + Laugix: '#fdf7e3', Forrun: '#C72027', Trax: '#4EB86D', - MNP: '#F26522', + MNP: '#fdf7e3', TCSEnvio: '#2B3D4C', Rider: '#008AFF', SmartLane: '#00559F', @@ -131,8 +131,8 @@ const tagBgColors = { Swyft: '#B11CCC', MXC: '#24478C', PostEx: '#000000', - Daraz: '#F75A08', - BarqRaftar: '#FF9D01' + Daraz: '#fdf7e3', + BarqRaftar: '#fdf7e3' } const tagColors = { 'non monetory': '#343a40', @@ -288,7 +288,7 @@ const DcTagStyled = styled.div` } ` -const StyledBadge = styled(Badge)<{ Bgcolor?: string }>` +const StyledBadge = styled(Badge) <{ Bgcolor?: string }>` background-color: ${({ Bgcolor }) => Bgcolor || '#2e7d32'} !important; color: ${({ color }) => color || 'white'} !important; padding: 0.35rem 0.5rem; diff --git a/src/lib/pixel-button-icon/pixel-icon.tsx b/src/lib/pixel-button-icon/pixel-icon.tsx index b38c7b7..743de1d 100644 --- a/src/lib/pixel-button-icon/pixel-icon.tsx +++ b/src/lib/pixel-button-icon/pixel-icon.tsx @@ -1,9 +1,9 @@ -import styled from "styled-components"; +import styled from 'styled-components' -import React from "react"; -import { $primaryColor } from "../styleGuide"; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { OverlayTrigger, Tooltip } from "react-bootstrap"; +import React from 'react' +import { $DCprimaryColor } from '../styleGuide' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { OverlayTrigger, Tooltip } from 'react-bootstrap' export interface PixelIconProps { className?: string fontSize?: string @@ -16,53 +16,64 @@ export interface PixelIconProps { padding?: string margin?: string style?: React.CSSProperties - children?:any + children?: any } - -export const PixelIcon = React.forwardRef< - HTMLButtonElement, - PixelIconProps> - ((props, ref) => { +export const PixelIcon = React.forwardRef( + (props, ref) => { const { className, - fontSize = "16px", + fontSize = '16px', color, icon, showTooltip = false, tooltip = 'ToolTip', tooltipPlacement = 'top', - onClick = () => { }, + onClick = () => {}, ...rest - } = props; + } = props return ( {showTooltip ? ( {tooltip}} - > - onClick() - } ref={ref} {...rest} /> - + overlay={ + {tooltip} + } + > + + {' '} + onClick()} + ref={ref} + {...rest} + /> + ) : ( - - onClick() - } ref={ref} {...rest} /> + onClick()} + ref={ref} + {...rest} + /> )} ) - }) + } +) -const ActionIcon = styled(FontAwesomeIcon) >` - color: ${(props) => props.color || $primaryColor}; +const ActionIcon = styled(FontAwesomeIcon)< + Pick +>` + color: ${(props) => props.color || $DCprimaryColor}; font-size: ${(props) => props.fontSize || '14px'}; cursor: pointer; padding: ${(props) => props.padding || '0px'}; @@ -74,5 +85,4 @@ const ActionIcon = styled(FontAwesomeIcon)