feat(mobile): manage docs/tags/collections in explorer (#8649)

close AF-1564, AF-1542

packages/frontend/component/src/ui/modal/confirm-modal.css.ts

@@ -0,0 +1,86 @@
+import { style } from '@vanilla-extract/css';
+
+// desktop
+export const desktopStyles = {
+  container: style({
+    display: 'flex',
+    flexDirection: 'column',
+  }),
+  description: style({}),
+  header: style({}),
+  content: style({
+    height: '100%',
+    overflowY: 'auto',
+    padding: '12px 4px 20px 4px',
+  }),
+  footer: style({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    paddingTop: '40px',
+    marginTop: 'auto',
+    gap: '20px',
+    selectors: {
+      '&.modalFooterWithChildren': {
+        paddingTop: '20px',
+      },
+      '&.reverse': {
+        flexDirection: 'row-reverse',
+        justifyContent: 'flex-start',
+      },
+    },
+  }),
+  action: style({}),
+};
+
+// mobile
+export const mobileStyles = {
+  container: style({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '12px 0 !important',
+    borderRadius: 22,
+  }),
+  description: style({
+    padding: '11px 22px',
+    fontSize: 17,
+    fontWeight: 400,
+    letterSpacing: -0.43,
+    lineHeight: '22px',
+  }),
+  header: style({
+    padding: '10px 16px',
+    marginBottom: '0px !important',
+    fontSize: 17,
+    fontWeight: 600,
+    letterSpacing: -0.43,
+    lineHeight: '22px',
+  }),
+  content: style({
+    padding: '11px 22px',
+    fontSize: 17,
+    fontWeight: 400,
+    letterSpacing: -0.43,
+    lineHeight: '22px',
+  }),
+  footer: style({
+    padding: '8px 16px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    selectors: {
+      '&.reverse': {
+        flexDirection: 'column-reverse',
+      },
+    },
+  }),
+  action: style({
+    width: '100%',
+    height: 44,
+    borderRadius: 8,
+    fontSize: 17,
+    fontWeight: 400,
+    letterSpacing: -0.43,
+    lineHeight: '22px',
+  }),
+};

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -5,9 +5,11 @@ import { createContext, useCallback, useContext, useState } from 'react';
 
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
+import { desktopStyles, mobileStyles } from './confirm-modal.css';
 import type { ModalProps } from './modal';
 import { Modal } from './modal';
-import * as styles from './styles.css';
+
+const styles = BUILD_CONFIG.isMobileEdition ? mobileStyles : desktopStyles;
 
 export interface ConfirmModalProps extends ModalProps {
   confirmButtonOptions?: Omit<ButtonProps, 'children'>;
@@ -36,6 +38,8 @@ export const ConfirmModal = ({
   onCancel,
   width = 480,
   autoFocusConfirm = true,
+  headerClassName,
+  descriptionClassName,
   ...props
 }: ConfirmModalProps) => {
   const onConfirmClick = useCallback(() => {
@@ -46,7 +50,7 @@ export const ConfirmModal = ({
   return (
     <Modal
       contentOptions={{
-        className: styles.confirmModalContainer,
+        className: styles.container,
         onPointerDownOutside: e => {
           e.stopPropagation();
           onCancel?.();
@@ -56,19 +60,20 @@ export const ConfirmModal = ({
       closeButtonOptions={{
         onClick: onCancel,
       }}
+      headerClassName={clsx(styles.header, headerClassName)}
+      descriptionClassName={clsx(styles.description, descriptionClassName)}
       {...props}
     >
-      {children ? (
-        <div className={styles.confirmModalContent}>{children}</div>
-      ) : null}
+      {children ? <div className={styles.content}>{children}</div> : null}
       <div
-        className={clsx(styles.modalFooter, {
+        className={clsx(styles.footer, {
           modalFooterWithChildren: !!children,
           reverse: reverseFooter,
         })}
       >
         <DialogTrigger asChild>
           <Button
+            className={styles.action}
             onClick={onCancel}
             data-testid="confirm-modal-cancel"
             {...cancelButtonOptions}
@@ -77,6 +82,7 @@ export const ConfirmModal = ({
           </Button>
         </DialogTrigger>
         <Button
+          className={styles.action}
           onClick={onConfirmClick}
           data-testid="confirm-modal-confirm"
           autoFocus={autoFocusConfirm}

packages/frontend/component/src/ui/modal/modal.tsx

@@ -23,7 +23,9 @@ export interface ModalProps extends DialogProps {
   height?: CSSProperties['height'];
   minHeight?: CSSProperties['minHeight'];
   title?: React.ReactNode;
+  headerClassName?: string;
   description?: React.ReactNode;
+  descriptionClassName?: string;
   withoutCloseButton?: boolean;
   /**
    * __Click outside__ or __Press `Esc`__ won't close the modal
@@ -130,7 +132,9 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
       height,
       minHeight = 194,
       title,
+      headerClassName,
       description,
+      descriptionClassName,
       withoutCloseButton = false,
       persistent,
       contentOptions: {
@@ -263,7 +267,9 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
                   </Dialog.Close>
                 )}
                 {title ? (
-                  <Dialog.Title className={styles.modalHeader}>
+                  <Dialog.Title
+                    className={clsx(styles.modalHeader, headerClassName)}
+                  >
                     {title}
                   </Dialog.Title>
                 ) : (
@@ -274,7 +280,12 @@ export const ModalInner = forwardRef<HTMLDivElement, ModalProps>(
                   </VisuallyHidden.Root>
                 )}
                 {description ? (
-                  <Dialog.Description className={styles.modalDescription}>
+                  <Dialog.Description
+                    className={clsx(
+                      styles.modalDescription,
+                      descriptionClassName
+                    )}
+                  >
                     {description}
                   </Dialog.Description>
                 ) : null}

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -178,32 +178,6 @@ export const modalDescription = style({
   whiteSpace: 'pre-wrap',
   overflowWrap: 'break-word',
 });
-export const modalFooter = style({
-  display: 'flex',
-  justifyContent: 'flex-end',
-  alignItems: 'center',
-  paddingTop: '40px',
-  marginTop: 'auto',
-  gap: '20px',
-  selectors: {
-    '&.modalFooterWithChildren': {
-      paddingTop: '20px',
-    },
-    '&.reverse': {
-      flexDirection: 'row-reverse',
-      justifyContent: 'flex-start',
-    },
-  },
-});
-export const confirmModalContent = style({
-  height: '100%',
-  overflowY: 'auto',
-  padding: '12px 4px 20px 4px',
-});
-export const confirmModalContainer = style({
-  display: 'flex',
-  flexDirection: 'column',
-});
 
 globalStyle(`[data-modal="false"]${modalContentWrapper}`, {
   pointerEvents: 'none',
@@ -212,9 +186,3 @@ globalStyle(`[data-modal="false"]${modalContentWrapper}`, {
 globalStyle(`[data-modal="false"] ${modalContent}`, {
   pointerEvents: 'auto',
 });
-
-export const promptModalContent = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '12px',
-});