ui-bugs

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",

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;
       }
     `}
 

src/lib/DC-switch/DC-switch.stories.tsx

@@ -10,7 +10,7 @@ export default {
 } as ComponentMeta<typeof DcSwitch>
 
 const Template: ComponentStory<typeof DcSwitch> = (args) => {
-  const [checked, setChecked] = React.useState(true)
+  const [checked, setChecked] = React.useState(false)
   return (
     <React.Fragment>
       <Section>

src/lib/dc-tag/dc-tag.tsx

@@ -4,14 +4,14 @@ import styled, { css } from 'styled-components'
 
 export interface DcTagProps extends React.HTMLProps<HTMLDivElement> {
   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,23 +101,23 @@ const tagBgColors = {
   duplicate: '#e7e8ea',
   active: 'green',
   series: '#ffeb3b',
-  internal: '#ff9800',
+  internal: '#fdf7e3',
   api: 'green',
   sync: '#ffeb3b',
   manual: '#fbe8ea',
   inactive: '#fbe8ea',
   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;

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<HTMLButtonElement, PixelIconProps>(
+  (props, ref) => {
     const {
       className,
-      fontSize = "16px",
+      fontSize = '16px',
       color,
       icon,
       showTooltip = false,
       tooltip = 'ToolTip',
       tooltipPlacement = 'top',
-      onClick = () => { },
+      onClick = () => {},
       ...rest
-    } = props;
+    } = props
     return (
       <React.Fragment>
         {showTooltip ? (
           <OverlayTrigger
             placement={tooltipPlacement}
-            overlay={<Tooltip id={`tooltip-${tooltipPlacement}`}>{tooltip}</Tooltip>}
-          ><span> <ActionIcon className={className} icon={icon} color={color} fontSize={fontSize} onClick={() =>
-            onClick()
-          } ref={ref} {...rest} /></span>
-
+            overlay={
+              <Tooltip id={`tooltip-${tooltipPlacement}`}>{tooltip}</Tooltip>
+            }
+          >
+            <span>
+              {' '}
+              <ActionIcon
+                className={className}
+                icon={icon}
+                color={color}
+                fontSize={fontSize}
+                onClick={() => onClick()}
+                ref={ref}
+                {...rest}
+              />
+            </span>
           </OverlayTrigger>
         ) : (
-          <ActionIcon className={className} icon={icon} color={color} fontSize={fontSize} onClick={() =>
-            onClick()
-          } ref={ref} {...rest} />
+          <ActionIcon
+            className={className}
+            icon={icon}
+            color={color}
+            fontSize={fontSize}
+            onClick={() => onClick()}
+            ref={ref}
+            {...rest}
+          />
         )}
       </React.Fragment>
     )
-  })
+  }
+)
 
-const ActionIcon = styled(FontAwesomeIcon) <Pick<
-  PixelIconProps,
-  | 'color'
-  | 'fontSize'
-  | 'padding'
-  | 'margin'
->>`
-  color: ${(props) => props.color || $primaryColor};
+const ActionIcon = styled(FontAwesomeIcon)<
+  Pick<PixelIconProps, 'color' | 'fontSize' | 'padding' | 'margin'>
+>`
+  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) <Pick<
     }
   }
 `
-export default PixelIcon;
-
+export default PixelIcon

src/lib/pixel-drop-dow-menu/pixel-drop-down-menu.stories.tsx

@@ -3,6 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 
 import PixelDropDown from './pixel-drop-down-menu'
 import PixelProfile from '../pixel-user-profile/pixel-user-profile'
+import { Disabled } from '../DC-button/dc-button.stories'
 
 export default {
   title: 'Pixel Dropdown Menu',
@@ -91,7 +92,7 @@ Grouped.args = {
         },
         { label: 'Test 2' },
         { label: 'Test 323' },
-        { label: 'Test 12323' }
+        { label: 'Test 12323', disabled: true }
       ]
     },
     {