Modal

    - font weight fix
    - title sperated
    - cancle button design match
icon
    - icon fix
    - color changes
BarChart
    - border radius fix

Author: shreeyash07

packages/ui/src/components/Alert/index.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 import {
+    AlertLineIcon,
     CheckboxCircleLineIcon,
     CloseLineIcon,
-    ErrorWarningLineIcon,
     InformationLineIcon,
     QuestionLineIcon,
 } from '@ifrc-go/icons';
@@ -40,7 +40,7 @@ const icon: {
     [key in AlertType]: React.ReactNode;
 } = {
     success: <CheckboxCircleLineIcon className={styles.icon} />,
-    danger: <ErrorWarningLineIcon className={styles.icon} />,
+    danger: <AlertLineIcon className={styles.icon} />,
     info: <InformationLineIcon className={styles.icon} />,
     warning: <QuestionLineIcon className={styles.icon} />,
 };

packages/ui/src/components/Alert/styles.module.css

@@ -14,7 +14,7 @@
     }
 
     &.info {
-        background-color: var(--go-ui-color-gray-80);
+        background-color: var(--go-ui-color-gray-50);
     }
 
     &.success {

packages/ui/src/components/BarChart/styles.module.css

@@ -20,13 +20,13 @@
         }
 
         .bar-track {
-            border-radius: 0.3rem;
+            border-radius: 0 var(--go-ui-border-radius-md) var(--go-ui-border-radius-md) 0;
             background-color: var(--go-ui-color-gray-30);
             width: 60%;
             height: 0.6rem;
 
             .bar {
-                border-radius: 0.3rem;
+                border-radius: 0 var(--go-ui-border-radius-md) var(--go-ui-border-radius-md) 0;
                 background-color: var(--go-ui-color-primary-red);
                 height: 100%;
             }

packages/ui/src/components/Button/styles.module.css

@@ -64,7 +64,7 @@
         }
 
         &.default-spacing {
-            --padding: var(--go-ui-spacing-3xs) var(--go-ui-spacing-md);
+            --padding: var(--go-ui-spacing-3xs) var(--go-ui-spacing-lg);
         }
 
         &.comfortable-spacing {

packages/ui/src/components/ConfirmButton/index.tsx

@@ -2,18 +2,22 @@ import {
     useCallback,
     useState,
 } from 'react';
+import { _cs } from '@togglecorp/fujs';
 
 import Button, { Props as ButtonProps } from '#components/Button';
 import Modal from '#components/Modal';
 import useTranslation from '#hooks/useTranslation';
 
 import i18n from './i18n.json';
+import styles from './styles.module.css';
 
 export interface Props<NAME> extends ButtonProps<NAME> {
     confirmMessage?: React.ReactNode;
     confirmHeading?: React.ReactNode;
     onClick?: (name: NAME, e: React.MouseEvent<HTMLButtonElement>) => void;
     onConfirm: (name: NAME) => void;
+    disabled?: boolean;
+    className?: string;
 }
 
 function ConfirmButton<NAME>(props: Props<NAME>) {
@@ -25,6 +29,8 @@ function ConfirmButton<NAME>(props: Props<NAME>) {
         name,
         onConfirm,
         onClick,
+        disabled,
+        className,
         ...buttonProps
     } = props;
 
@@ -53,8 +59,10 @@ function ConfirmButton<NAME>(props: Props<NAME>) {
             <Button
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...buttonProps}
+                className={_cs(className, disabled && styles.disabled)}
                 name={name}
                 onClick={handleOnClick}
+                disabled={disabled}
             />
             {showConfirmation && (
                 <Modal
@@ -66,7 +74,7 @@ function ConfirmButton<NAME>(props: Props<NAME>) {
                             <Button
                                 name={false}
                                 onClick={setShowConfirmation}
-                                variant="secondary"
+                                variant="tertiary"
                             >
                                 {strings.buttonCancel}
                             </Button>

packages/ui/src/components/ConfirmButton/styles.module.css

@@ -0,0 +1,6 @@
+.disabled {
+    border-color: var(--go-ui-color-gray-40);
+    background-color: var(--go-ui-color-gray-40);
+    color: var(--go-ui-color-black);
+}
+

packages/ui/src/components/Container/index.tsx

@@ -30,6 +30,7 @@ export interface Props {
     className?: string;
     contentViewType?: 'grid' | 'vertical' | 'default';
     ellipsizeHeading?: boolean;
+    modalHeading?: boolean;
     filters?: React.ReactNode;
     filterActions?: React.ReactNode;
     footerActions?: React.ReactNode;
@@ -85,6 +86,7 @@ function Container(props: Props) {
         containerRef,
         contentViewType = 'default',
         ellipsizeHeading,
+        modalHeading,
         filters,
         filterActions,
         footerActions,
@@ -207,6 +209,7 @@ function Container(props: Props) {
                     elementRef={headerElementRef}
                     actionsContainerClassName={actionsContainerClassName}
                     ellipsizeHeading={ellipsizeHeading}
+                    modalHeading={modalHeading}
                     heading={heading}
                     headingLevel={headingLevel}
                     icons={icons}

packages/ui/src/components/Header/index.tsx

@@ -15,6 +15,7 @@ export interface Props {
     className?: string;
     elementRef?: React.Ref<HTMLDivElement>;
     ellipsizeHeading?: boolean;
+    modalHeading?: boolean;
 
     actions?: React.ReactNode;
     actionsContainerClassName?: string;
@@ -47,6 +48,7 @@ function Header(props: Props) {
         className,
         elementRef,
         ellipsizeHeading,
+        modalHeading,
         heading,
         headingClassName,
         headingLevel,
@@ -72,6 +74,7 @@ function Header(props: Props) {
                         level={headingLevel}
                         className={headingClassName}
                         ellipsize={ellipsizeHeading}
+                        modalHeading={modalHeading}
                     >
                         {heading}
                     </Heading>
@@ -80,10 +83,12 @@ function Header(props: Props) {
                             {headingDescription}
                         </div>
                     )}
+                    {modalHeading && <div className={styles.border} />}
                 </>
             );
         },
         [
+            modalHeading,
             heading,
             ellipsizeHeading,
             headingDescription,

packages/ui/src/components/Header/styles.module.css

@@ -1,4 +1,8 @@
 .header {
     display: flex;
     flex-direction: column;
+
+    .border {
+        border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+    }
 }

packages/ui/src/components/Heading/index.tsx

@@ -25,6 +25,7 @@ export interface Props {
     level?: HeadingLevel;
     children: ReactNode;
     ellipsize?: boolean;
+    modalHeading?: boolean;
 }
 
 function Heading(props: Props) {
@@ -33,6 +34,7 @@ function Heading(props: Props) {
         level = 3,
         children,
         ellipsize,
+        modalHeading,
     } = props;
 
     const HeadingTag = `h${level}` as ElementType;
@@ -47,6 +49,7 @@ function Heading(props: Props) {
     return (
         <HeadingTag
             className={_cs(
+                modalHeading && styles.modalFontWeight,
                 styles.heading,
                 ellipsize && styles.ellipsized,
                 levelToClassName[level],