Update modal popup design + update create branch modal

geldata · Jul 30, 2024 · 65210aa · 65210aa
1 parent c44c974
commit 65210aa
Show file tree

Hide file tree

Showing 15 changed files with 496 additions and 141 deletions.
diff --git a/shared/common/hooks/useModal/index.tsx b/shared/common/hooks/useModal/index.tsx
@@ -11,6 +11,7 @@ import {createPortal} from "react-dom";
 const modalContext = createContext<{
   modal: JSX.Element | null;
   openModal: (modal: JSX.Element | null, transition?: boolean) => () => void;
+  _modalOpen: boolean;
 }>(null!);
 
 export function ModalProvider({children}: PropsWithChildren<{}>) {
@@ -66,7 +67,11 @@ export function ModalProvider({children}: PropsWithChildren<{}>) {
 
   return (
     <modalContext.Provider
-      value={{modal: transitionState === false ? null : modal, openModal}}
+      value={{
+        modal: modal,
+        openModal,
+        _modalOpen: !!modal && transitionState !== false,
+      }}
     >
       {children}
       <div
@@ -87,25 +92,42 @@ export function ModalProvider({children}: PropsWithChildren<{}>) {
   );
 }
 
-export function useModal() {
-  return useContext(modalContext);
-}
-
-export function useCloseModal() {
-  const {openModal} = useContext(modalContext);
-  return () => openModal(null);
-}
-
 const modalPlaceholder = <></>;
 
-export function useModal_v2(modal: JSX.Element) {
-  const {modal: placeholder, openModal} = useContext(modalContext);
+export function useModal(): {
+  modal: JSX.Element | null;
+  openModal: (modal: JSX.Element | null, transition?: boolean) => () => void;
+};
+export function useModal(modal: JSX.Element): {
+  modal: JSX.Element | null;
+  openModal: (transition?: boolean) => () => void;
+};
+export function useModal(modal?: JSX.Element): {
+  modal: JSX.Element | null;
+  openModal:
+    | ((modal: JSX.Element | null, transition?: boolean) => () => void)
+    | ((transition?: boolean) => () => void);
+} {
+  const ctx = useContext(modalContext);
+
+  if (!modal) {
+    return {
+      modal: ctx._modalOpen ? ctx.modal : null,
+      openModal: ctx.openModal,
+    };
+  }
 
   return {
     modal:
-      placeholder === modalPlaceholder
+      ctx.modal === modalPlaceholder
         ? createPortal(modal, document.getElementById("modal_target")!)
         : null,
-    openModal: () => openModal(modalPlaceholder),
+    openModal: (transition?: boolean) =>
+      ctx.openModal(modalPlaceholder, transition),
   };
 }
+
+export function useCloseModal() {
+  const {openModal} = useContext(modalContext);
+  return (transition?: boolean) => openModal(null, transition);
+}
diff --git a/shared/common/newui/button/button.module.scss b/shared/common/newui/button/button.module.scss
@@ -34,7 +34,7 @@
 
   &.primary {
     // background: linear-gradient(180deg, #a565cd 0%, #9c56b4 100%);
-    background: #a565cd;
+    background: var(--buttonPrimaryBackground, #a565cd);
     box-shadow: 0px 2px 4px 0px rgba(165, 100, 203, 0.25);
     border: 0;
     color: #fffffffa;
@@ -61,7 +61,7 @@
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
 
     &.primary {
-      background: #6c4186;
+      background: var(--buttonPrimaryBackground, #6c4186);
       box-shadow: 0px 2px 4px 0px rgba(73, 20, 104, 0.5);
       border: 0;
       color: #ffffffdb;

diff --git a/shared/common/newui/button/index.tsx b/shared/common/newui/button/index.tsx
@@ -17,19 +17,20 @@ export interface ButtonProps extends _BaseButtonProps {
   onClick?: () => void;
 }
 
-export function Button({
+function _Button({
   className,
   kind,
+  type,
   children,
   leftIcon,
   rightIcon,
   disabled,
   loading,
   ...props
-}: ButtonProps) {
+}: ButtonProps & {type: "button" | "submit"}) {
   return (
     <button
-      type="button"
+      type={type}
       className={cn(
         styles.button,
         {
@@ -48,6 +49,14 @@ export function Button({
   );
 }
 
+export const Button = (props: ButtonProps) => (
+  <_Button {...props} type="button" />
+);
+
+export const SubmitButton = (props: Omit<ButtonProps, "onClick">) => (
+  <_Button {...props} type="submit" />
+);
+
 export interface LinkButtonProps extends _BaseButtonProps {
   href: string;
   target?: React.AnchorHTMLAttributes<HTMLAnchorElement>["target"];

diff --git a/shared/common/newui/checkbox/checkbox.module.scss b/shared/common/newui/checkbox/checkbox.module.scss
@@ -38,6 +38,11 @@
     }
   }
 
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
   @include darkTheme {
     color: #ccc;
 

diff --git a/shared/common/newui/checkbox/index.tsx b/shared/common/newui/checkbox/index.tsx
@@ -7,20 +7,27 @@ export interface CheckboxProps {
   label?: string | JSX.Element;
   checked: boolean;
   onChange: (checked: boolean) => void;
+  disabled?: boolean;
 }
 
 export function Checkbox({
   className,
   label,
   checked,
   onChange,
+  disabled,
 }: CheckboxProps) {
   return (
-    <label className={cn(styles.checkbox, className)}>
+    <label
+      className={cn(styles.checkbox, className, {
+        [styles.disabled]: !!disabled,
+      })}
+    >
       <input
         type="checkbox"
         checked={checked}
         onChange={(e) => onChange(e.target.checked)}
+        disabled={disabled}
       />
       <div className={styles.check} />
       {label}

diff --git a/shared/common/newui/fieldHeader/fieldHeader.module.scss b/shared/common/newui/fieldHeader/fieldHeader.module.scss
@@ -0,0 +1,22 @@
+.fieldHeader {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  padding: 0 4px;
+}
+
+.optional {
+  opacity: 0.5;
+  margin-left: 6px;
+  font-weight: 450;
+}
+
+.headerNote {
+  color: var(--Grey50, #808080);
+  font-weight: 400;
+  margin-left: auto;
+}
diff --git a/shared/common/newui/fieldHeader/index.tsx b/shared/common/newui/fieldHeader/index.tsx
@@ -0,0 +1,19 @@
+import styles from "./fieldHeader.module.scss";
+
+export interface FieldHeaderProps {
+  label?: string | JSX.Element;
+  optional?: boolean;
+  headerNote?: string;
+}
+
+export function FieldHeader({label, optional, headerNote}: FieldHeaderProps) {
+  return (
+    <div className={styles.fieldHeader}>
+      {label}
+      {optional ? <span className={styles.optional}>(optional)</span> : null}
+      {headerNote ? (
+        <span className={styles.headerNote}>{headerNote}</span>
+      ) : null}
+    </div>
+  );
+}
diff --git a/shared/common/newui/index.ts b/shared/common/newui/index.ts
@@ -1,7 +1,9 @@
 export * from "./button";
 export * from "./checkbox";
 export * from "./textInput";
+export * from "./fieldHeader";
 export * from "./select";
 export * from "./icons";
 export * from "./logos";
 export * from "./infoTooltip";
+export * from "./modal";
diff --git a/shared/common/newui/modal/index.tsx b/shared/common/newui/modal/index.tsx
@@ -0,0 +1,101 @@
+import {HTMLAttributes, PropsWithChildren} from "react";
+
+import cn from "@edgedb/common/utils/classNames";
+
+import styles from "./modal.module.scss";
+import {CrossIcon, WarningIcon} from "../icons";
+
+export interface ModalProps {
+  className?: string;
+  title: string;
+  subheading?: string;
+  onClose?: () => void;
+  noCloseOnOverlayClick?: boolean;
+  onSubmit?: () => void;
+  formError?: string | null;
+  footerButtons?: JSX.Element;
+  footerDetails?: JSX.Element;
+  footerExtra?: JSX.Element;
+}
+
+export function Modal({
+  className,
+  title,
+  subheading,
+  onClose,
+  noCloseOnOverlayClick,
+  onSubmit,
+  formError,
+  children,
+  footerDetails,
+  footerButtons,
+  footerExtra,
+}: PropsWithChildren<ModalProps>) {
+  const El = onSubmit ? "form" : "div";
+
+  return (
+    <div
+      className={styles.modalOverlay}
+      onClick={
+        onClose && !noCloseOnOverlayClick
+          ? (e) => {
+              if (e.target === e.currentTarget) {
+                onClose();
+              }
+            }
+          : undefined
+      }
+    >
+      <El
+        className={cn(styles.modal, className)}
+        onSubmit={
+          onSubmit
+            ? (e) => {
+                e.preventDefault();
+                onSubmit();
+              }
+            : undefined
+        }
+        autoComplete="off"
+      >
+        <div className={styles.header}>
+          <div className={styles.headings}>
+            <div className={styles.title}>{title}</div>
+            {subheading ? (
+              <div className={styles.subheading}>{subheading}</div>
+            ) : null}
+          </div>
+          <div
+            className={styles.closeButton}
+            onClick={onClose && (() => onClose())}
+          >
+            <CrossIcon />
+          </div>
+        </div>
+        {children}
+        {formError ? (
+          <div className={styles.formError}>
+            <WarningIcon />
+            <div>{formError}</div>
+          </div>
+        ) : null}
+        {footerButtons || footerDetails ? (
+          <div className={styles.footer}>
+            {footerExtra}
+            <div className={styles.footerMain}>
+              <div className={styles.footerDetails}>{footerDetails}</div>
+              {footerButtons}
+            </div>
+          </div>
+        ) : null}
+      </El>
+    </div>
+  );
+}
+
+export function ModalContent({
+  className,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) {
+  return <div className={cn(styles.content, className)} {...props} />;
+}