From 7301c8538f320556b87fbe86f5ce842bb7a0d583 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Mon, 10 Oct 2022 09:24:41 +0530 Subject: [PATCH] feat: Change dialogue component import to design system repository (#17302) * feat: Change dialogue component import to design system repository * design system version changed --- .../src/components/ads/DialogComponent.tsx | 200 ------------------ app/client/src/components/ads/index.ts | 3 - .../form/FormDialogComponent.tsx | 8 +- .../formControls/FilePickerControl.tsx | 2 +- .../src/pages/Applications/ForkModalStyles.ts | 7 +- .../Applications/ImportApplicationModal.tsx | 10 +- .../ProductUpdatesModal/index.tsx | 3 +- app/client/src/pages/Applications/index.tsx | 2 +- .../GeneratePage/components/CrudInfoModal.tsx | 10 +- .../Editor/GuidedTour/DeviationModal.tsx | 3 +- .../UnsupportedPluginDialog.tsx | 2 +- .../pages/Editor/RequestConfirmationModal.tsx | 2 +- .../ThemePropertyPane/DeleteThemeModal.tsx | 8 +- .../ThemePropertyPane/SaveThemeModal.tsx | 10 +- .../Editor/gitSync/DisconnectGitModal.tsx | 2 +- .../src/pages/Editor/gitSync/GitSyncModal.tsx | 3 +- .../gitSync/ImportedAppSuccessModal.tsx | 3 +- .../gitSync/ReconnectDatasourceModal.tsx | 2 +- .../gitSync/RepoLimitExceededErrorModal.tsx | 2 +- .../src/pages/Templates/ForkTemplate.tsx | 9 +- .../pages/Templates/TemplatesModal/index.tsx | 2 +- .../workspace/DeleteConfirmationModal.tsx | 10 +- 22 files changed, 66 insertions(+), 237 deletions(-) delete mode 100644 app/client/src/components/ads/DialogComponent.tsx diff --git a/app/client/src/components/ads/DialogComponent.tsx b/app/client/src/components/ads/DialogComponent.tsx deleted file mode 100644 index 8641bfef77..0000000000 --- a/app/client/src/components/ads/DialogComponent.tsx +++ /dev/null @@ -1,200 +0,0 @@ -import React, { ReactNode, useState, useEffect } from "react"; -import styled from "styled-components"; -import { Dialog, Classes } from "@blueprintjs/core"; -import { Colors } from "constants/Colors"; -import { Icon, IconName, IconSize } from "design-system"; - -const StyledDialog = styled(Dialog)<{ - setMaxWidth?: boolean; - width?: string; - maxHeight?: string; - maxWidth?: string; - showHeaderUnderline?: boolean; - noModalBodyMarginTop?: boolean; -}>` - && { - border-radius: 0; - padding: 24px; - background: ${(props) => props.theme.colors.modal.bg}; - ${(props) => (props.maxHeight ? `max-height: ${props.maxHeight};` : "")} - width: ${(props) => props.width || "640px"}; - ${(props) => props.setMaxWidth && `width: 100vh;`} - ${(props) => props.maxWidth && `max-width: ${props.maxWidth};`} - - & .${Classes.DIALOG_HEADER} { - position: relative; - padding: 0; - background: ${(props) => props.theme.colors.modal.bg}; - box-shadow: none; - min-height: unset; - svg { - color: ${Colors.GREY_800}; - } - - .${Classes.BUTTON}.${Classes.MINIMAL}:hover { - background-color: ${(props) => props.theme.colors.modal.bg}; - } - } - - .${Classes.HEADING} { - color: ${(props) => props.theme.colors.modal.headerText}; - font-weight: ${(props) => props.theme.typography.h1.fontWeight}; - font-size: ${(props) => props.theme.typography.h1.fontSize}px; - line-height: unset; - letter-spacing: ${(props) => props.theme.typography.h1.letterSpacing}; - } - - .${Classes.DIALOG_CLOSE_BUTTON} { - color: ${Colors.SCORPION}; - min-width: 0; - padding: 0; - - svg { - fill: ${Colors.SCORPION}; - width: 24px; - height: 24px; - - &:hover { - fill: ${Colors.COD_GRAY}; - } - } - } - - ${(props) => - props.showHeaderUnderline - ? ` - & .${Classes.DIALOG_HEADER}:after { - content: ""; - width: calc(100% - 40px); - height: 1px; - position: absolute; - background: white; - left: 50%; - bottom: 0; - transform: translateX(-50%); - background-color: ${props.theme.colors.modal.separator}; - } - - .${Classes.HEADING} { - margin-bottom: ${props.theme.spaces[7]}px; - } - ` - : ""} - - & .${Classes.DIALOG_BODY} { - margin: 0; - margin-top: ${(props) => (props.noModalBodyMarginTop ? "0px" : "16px")}; - overflow: auto; - } - - & .${Classes.DIALOG_FOOTER_ACTIONS} { - display: block; - } - } -`; - -const HeaderIconWrapper = styled.div<{ bgColor?: string }>` - padding: 5px; - border-radius: 50%; - margin-right: 10px; - background: ${(props) => props.bgColor || props.theme.colors.modal.iconBg}; - cursor: default; - .cs-icon svg { - cursor: default; - } -`; - -type DialogComponentProps = { - isOpen?: boolean; - canOutsideClickClose?: boolean; - title?: string; - headerIcon?: { - clickable?: boolean; - name: IconName; - fillColor?: string; - hoverColor?: string; - bgColor?: string; - }; - trigger?: ReactNode; - setMaxWidth?: boolean; - children: ReactNode; - width?: string; - maxHeight?: string; - onOpening?: () => void; - onClose?: () => void; - setModalClose?: (close: boolean) => void; - triggerZIndex?: number; - showHeaderUnderline?: boolean; - getHeader?: () => ReactNode; - canEscapeKeyClose?: boolean; - className?: string; - maxWidth?: string; - noModalBodyMarginTop?: boolean; -}; - -export function DialogComponent(props: DialogComponentProps) { - const [isOpen, setIsOpen] = useState(!!props.isOpen); - - const { onClose: onCloseProp, setModalClose } = props; - const onClose = () => { - setModalClose ? setModalClose(false) : null; - setIsOpen(false); - onCloseProp && onCloseProp(); - }; - - useEffect(() => { - setIsOpen(!!props.isOpen); - }, [props.isOpen]); - - const getHeader = props.getHeader; - const headerIcon = props.headerIcon ? ( - - - - ) : null; - - return ( - <> - {props.trigger && ( -
{ - setIsOpen(true); - }} - style={{ zIndex: props.triggerZIndex }} - > - {props.trigger} -
- )} - - {getHeader && getHeader()} -
- {props.children} -
- - - ); -} - -export default DialogComponent; diff --git a/app/client/src/components/ads/index.ts b/app/client/src/components/ads/index.ts index 3706414820..bb98975595 100644 --- a/app/client/src/components/ads/index.ts +++ b/app/client/src/components/ads/index.ts @@ -3,9 +3,6 @@ export * from "./Callout"; export * from "./common"; -export { default as DialogComponent } from "./DialogComponent"; -export * from "./DialogComponent"; - export { default as EditableText } from "./EditableText"; export * from "./EditableText"; diff --git a/app/client/src/components/editorComponents/form/FormDialogComponent.tsx b/app/client/src/components/editorComponents/form/FormDialogComponent.tsx index 1deaa6af7a..1f8b03c369 100644 --- a/app/client/src/components/editorComponents/form/FormDialogComponent.tsx +++ b/app/client/src/components/editorComponents/form/FormDialogComponent.tsx @@ -1,10 +1,14 @@ import React, { ReactNode, useState, useEffect } from "react"; import { isPermitted } from "pages/Applications/permissionHelpers"; -import Dialog from "components/ads/DialogComponent"; import { useDispatch } from "react-redux"; import { setShowAppInviteUsersDialog } from "actions/applicationActions"; import { TabComponent, TabProp } from "components/ads/Tabs"; -import { Text, TextType, IconName } from "design-system"; +import { + DialogComponent as Dialog, + Text, + TextType, + IconName, +} from "design-system"; import styled from "styled-components"; import { Colors } from "constants/Colors"; import { INVITE_USERS_TO_WORKSPACE_FORM } from "@appsmith/constants/forms"; diff --git a/app/client/src/components/formControls/FilePickerControl.tsx b/app/client/src/components/formControls/FilePickerControl.tsx index 6702dddbb2..5406b8ab05 100644 --- a/app/client/src/components/formControls/FilePickerControl.tsx +++ b/app/client/src/components/formControls/FilePickerControl.tsx @@ -13,7 +13,7 @@ import { WrappedFieldInputProps, WrappedFieldMetaProps, } from "redux-form"; -import DialogComponent from "components/ads/DialogComponent"; +import { DialogComponent } from "design-system"; import { useEffect, useCallback } from "react"; import { replayHighlightClass } from "globalStyles/portals"; diff --git a/app/client/src/pages/Applications/ForkModalStyles.ts b/app/client/src/pages/Applications/ForkModalStyles.ts index eec5c5d183..58d431e306 100644 --- a/app/client/src/pages/Applications/ForkModalStyles.ts +++ b/app/client/src/pages/Applications/ForkModalStyles.ts @@ -1,7 +1,10 @@ import styled from "styled-components"; -import { Button, RadioComponent } from "design-system"; +import { + Button, + DialogComponent as Dialog, + RadioComponent, +} from "design-system"; import { getTypographyByKey } from "constants/DefaultTheme"; -import Dialog from "components/ads/DialogComponent"; import { Classes } from "@blueprintjs/core"; const TriggerButton = styled(Button)` diff --git a/app/client/src/pages/Applications/ImportApplicationModal.tsx b/app/client/src/pages/Applications/ImportApplicationModal.tsx index 6a13ea85d0..88272933af 100644 --- a/app/client/src/pages/Applications/ImportApplicationModal.tsx +++ b/app/client/src/pages/Applications/ImportApplicationModal.tsx @@ -20,14 +20,18 @@ import { } from "@appsmith/constants/messages"; import FilePickerV2 from "components/ads/FilePickerV2"; import { Colors } from "constants/Colors"; -import { Text, TextType } from "design-system"; -import { Icon, IconSize } from "design-system"; +import { + DialogComponent as Dialog, + Icon, + IconSize, + Text, + TextType, +} from "design-system"; import { Theme } from "constants/DefaultTheme"; import { setIsGitSyncModalOpen } from "actions/gitSyncActions"; import { GitSyncModalTab } from "entities/GitSync"; import { getIsImportingApplication } from "selectors/applicationSelectors"; import { ReduxActionTypes } from "@appsmith/constants/ReduxActionConstants"; -import Dialog from "components/ads/DialogComponent"; import { Classes } from "@blueprintjs/core"; import { selectFeatureFlags } from "selectors/usersSelectors"; import Statusbar from "pages/Editor/gitSync/components/Statusbar"; diff --git a/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx b/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx index 30d12548da..3628e0619b 100644 --- a/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx +++ b/app/client/src/pages/Applications/ProductUpdatesModal/index.tsx @@ -2,14 +2,13 @@ import React, { useState, useCallback, useContext, useRef } from "react"; import { useSelector, useDispatch } from "react-redux"; import styled from "styled-components"; import "@github/g-emoji-element"; -import Dialog from "components/ads/DialogComponent"; import UpdatesButton from "./UpdatesButton"; import { AppState } from "@appsmith/reducers"; import { LayersContext } from "constants/Layers"; import ReleasesAPI from "api/ReleasesAPI"; import { resetReleasesCount } from "actions/releasesActions"; import ReleaseComponent, { Release } from "./ReleaseComponent"; -import { ScrollIndicator } from "design-system"; +import { DialogComponent as Dialog, ScrollIndicator } from "design-system"; const StyledDialog = styled(Dialog)` .bp3-dialog-body { diff --git a/app/client/src/pages/Applications/index.tsx b/app/client/src/pages/Applications/index.tsx index 301ddc4b79..33e6cc0cef 100644 --- a/app/client/src/pages/Applications/index.tsx +++ b/app/client/src/pages/Applications/index.tsx @@ -38,7 +38,6 @@ import ApplicationCard from "./ApplicationCard"; import WorkspaceInviteUsersForm from "@appsmith/pages/workspace/WorkspaceInviteUsersForm"; import { isPermitted, PERMISSION_TYPE } from "./permissionHelpers"; import FormDialogComponent from "components/editorComponents/form/FormDialogComponent"; -import Dialog from "components/ads/DialogComponent"; import { User } from "constants/userConstants"; import { getCurrentUser, selectFeatureFlags } from "selectors/usersSelectors"; import { CREATE_WORKSPACE_FORM_NAME } from "@appsmith/constants/forms"; @@ -50,6 +49,7 @@ import { AppIconCollection, Button, Category, + DialogComponent as Dialog, Icon, IconName, IconSize, diff --git a/app/client/src/pages/Editor/GeneratePage/components/CrudInfoModal.tsx b/app/client/src/pages/Editor/GeneratePage/components/CrudInfoModal.tsx index a965420ec8..512ea5606d 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/CrudInfoModal.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/CrudInfoModal.tsx @@ -3,12 +3,18 @@ import styled from "styled-components"; import { connect, useDispatch } from "react-redux"; import { AppState } from "@appsmith/reducers"; import AnalyticsUtil from "utils/AnalyticsUtil"; -import { Button, Category, Size, Text, TextType } from "design-system"; +import { + Button, + Category, + DialogComponent as Dialog, + Size, + Text, + TextType, +} from "design-system"; import { getCrudInfoModalData } from "selectors/crudInfoModalSelectors"; import { setCrudInfoModalData } from "actions/crudInfoModalActions"; import { Colors } from "constants/Colors"; -import Dialog from "components/ads/DialogComponent"; import { GenerateCRUDSuccessInfoData } from "reducers/uiReducers/crudInfoModalReducer"; import { GEN_CRUD_INFO_DIALOG_SUBTITLE, diff --git a/app/client/src/pages/Editor/GuidedTour/DeviationModal.tsx b/app/client/src/pages/Editor/GuidedTour/DeviationModal.tsx index c8c183628f..6e7b4526e4 100644 --- a/app/client/src/pages/Editor/GuidedTour/DeviationModal.tsx +++ b/app/client/src/pages/Editor/GuidedTour/DeviationModal.tsx @@ -3,8 +3,7 @@ import { toggleShowDeviationDialog, toggleShowEndTourDialog, } from "actions/onboardingActions"; -import { Button, Category, Size } from "design-system"; -import DialogComponent from "components/ads/DialogComponent"; +import { Button, Category, DialogComponent, Size } from "design-system"; import { CANCEL_DIALOG, createMessage, diff --git a/app/client/src/pages/Editor/IntegrationEditor/UnsupportedPluginDialog.tsx b/app/client/src/pages/Editor/IntegrationEditor/UnsupportedPluginDialog.tsx index 9f2024a620..69b3374632 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/UnsupportedPluginDialog.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/UnsupportedPluginDialog.tsx @@ -3,10 +3,10 @@ import { HelpIcons } from "icons/HelpIcons"; import { withTheme } from "styled-components"; import styled from "styled-components"; import { Color } from "constants/Colors"; -import Dialog from "components/ads/DialogComponent"; import { Button, Category, + DialogComponent as Dialog, Icon, IconSize, Size, diff --git a/app/client/src/pages/Editor/RequestConfirmationModal.tsx b/app/client/src/pages/Editor/RequestConfirmationModal.tsx index 6a2053f675..7a4c604d2b 100644 --- a/app/client/src/pages/Editor/RequestConfirmationModal.tsx +++ b/app/client/src/pages/Editor/RequestConfirmationModal.tsx @@ -7,7 +7,7 @@ import { cancelActionConfirmationModal, acceptActionConfirmationModal, } from "actions/pluginActionActions"; -import DialogComponent from "components/ads/DialogComponent"; +import { DialogComponent } from "design-system"; import styled from "styled-components"; import { Button, Category, Size } from "design-system"; import { diff --git a/app/client/src/pages/Editor/ThemePropertyPane/DeleteThemeModal.tsx b/app/client/src/pages/Editor/ThemePropertyPane/DeleteThemeModal.tsx index 0a984ee6ab..7c333392ae 100644 --- a/app/client/src/pages/Editor/ThemePropertyPane/DeleteThemeModal.tsx +++ b/app/client/src/pages/Editor/ThemePropertyPane/DeleteThemeModal.tsx @@ -7,8 +7,12 @@ import { DELETE_CONFIRMATION_MODAL_TITLE, } from "@appsmith/constants/messages"; import { Colors } from "constants/Colors"; -import Dialog from "components/ads/DialogComponent"; -import { Button, Category, Size } from "design-system"; +import { + Button, + Category, + DialogComponent as Dialog, + Size, +} from "design-system"; interface DeleteThemeModalProps { isOpen: boolean; diff --git a/app/client/src/pages/Editor/ThemePropertyPane/SaveThemeModal.tsx b/app/client/src/pages/Editor/ThemePropertyPane/SaveThemeModal.tsx index 85358bafd6..b52c9fc7ab 100644 --- a/app/client/src/pages/Editor/ThemePropertyPane/SaveThemeModal.tsx +++ b/app/client/src/pages/Editor/ThemePropertyPane/SaveThemeModal.tsx @@ -2,9 +2,13 @@ import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import AnalyticsUtil from "utils/AnalyticsUtil"; -import { TextInput } from "design-system"; -import Dialog from "components/ads/DialogComponent"; -import { Button, Category, Size } from "design-system"; +import { + Button, + Category, + DialogComponent as Dialog, + Size, + TextInput, +} from "design-system"; import { saveSelectedThemeAction } from "actions/appThemingActions"; import { getCurrentApplicationId } from "selectors/editorSelectors"; import { getAppThemes } from "selectors/appThemingSelectors"; diff --git a/app/client/src/pages/Editor/gitSync/DisconnectGitModal.tsx b/app/client/src/pages/Editor/gitSync/DisconnectGitModal.tsx index 2d0c05d972..f501dd16f4 100644 --- a/app/client/src/pages/Editor/gitSync/DisconnectGitModal.tsx +++ b/app/client/src/pages/Editor/gitSync/DisconnectGitModal.tsx @@ -1,5 +1,4 @@ import React, { useCallback, useState } from "react"; -import Dialog from "components/ads/DialogComponent"; import { getDisconnectDocUrl, getDisconnectingGitApplication, @@ -14,6 +13,7 @@ import { Classes, MENU_HEIGHT } from "./constants"; import { Button, Category, + DialogComponent as Dialog, Icon, IconSize, Size, diff --git a/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx b/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx index 1c5cea6dca..51b44b26a8 100644 --- a/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx +++ b/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx @@ -1,5 +1,4 @@ import React, { useCallback, useEffect } from "react"; -import Dialog from "components/ads/DialogComponent"; import { getActiveGitSyncModalTab, getIsGitConnected, @@ -13,7 +12,7 @@ import { Classes, MENU_HEIGHT, MENU_ITEM, MENU_ITEMS_MAP } from "./constants"; import Deploy from "./Tabs/Deploy"; import Merge from "./Tabs/Merge"; import GitConnection from "./Tabs/GitConnection"; -import { Icon, IconSize } from "design-system"; +import { DialogComponent as Dialog, Icon, IconSize } from "design-system"; import GitErrorPopup from "./components/GitErrorPopup"; import styled, { useTheme } from "styled-components"; diff --git a/app/client/src/pages/Editor/gitSync/ImportedAppSuccessModal.tsx b/app/client/src/pages/Editor/gitSync/ImportedAppSuccessModal.tsx index 3bb50be763..deace8606f 100644 --- a/app/client/src/pages/Editor/gitSync/ImportedAppSuccessModal.tsx +++ b/app/client/src/pages/Editor/gitSync/ImportedAppSuccessModal.tsx @@ -1,8 +1,7 @@ import React, { useState } from "react"; import { useSelector } from "react-redux"; -import Dialog from "components/ads/DialogComponent"; import styled, { useTheme } from "styled-components"; -import { Text, TextType } from "design-system"; +import { DialogComponent as Dialog, Text, TextType } from "design-system"; import { Colors } from "constants/Colors"; import { createMessage, diff --git a/app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx b/app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx index 9e92708f13..b3d1ab2cd3 100644 --- a/app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx +++ b/app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx @@ -1,5 +1,4 @@ import React, { useCallback, useEffect, useState } from "react"; -import Dialog from "components/ads/DialogComponent"; import { getImportedApplication, @@ -15,6 +14,7 @@ import { Classes, MENU_HEIGHT } from "./constants"; import { Button, Category, + DialogComponent as Dialog, Icon, IconSize, Size, diff --git a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx index 1e63d94cca..b931351c68 100644 --- a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx +++ b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx @@ -1,6 +1,5 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; -import Dialog from "components/ads/DialogComponent"; import { getDisconnectDocUrl, getShowRepoLimitErrorModal, @@ -14,6 +13,7 @@ import styled, { useTheme } from "styled-components"; import { Button, Category, + DialogComponent as Dialog, Icon, IconSize, Size, diff --git a/app/client/src/pages/Templates/ForkTemplate.tsx b/app/client/src/pages/Templates/ForkTemplate.tsx index fe85a58afd..57d4b7f1bf 100644 --- a/app/client/src/pages/Templates/ForkTemplate.tsx +++ b/app/client/src/pages/Templates/ForkTemplate.tsx @@ -1,6 +1,11 @@ import React, { ReactNode, useState } from "react"; -import Dialog from "components/ads/DialogComponent"; -import { Button, Category, Dropdown, Size } from "design-system"; +import { + Button, + Category, + DialogComponent as Dialog, + Dropdown, + Size, +} from "design-system"; import { useDispatch, useSelector } from "react-redux"; import { noop } from "lodash"; import { diff --git a/app/client/src/pages/Templates/TemplatesModal/index.tsx b/app/client/src/pages/Templates/TemplatesModal/index.tsx index aba66e1d9d..e9a5e826e8 100644 --- a/app/client/src/pages/Templates/TemplatesModal/index.tsx +++ b/app/client/src/pages/Templates/TemplatesModal/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import DialogComponent from "components/ads/DialogComponent"; +import { DialogComponent } from "design-system"; import { useDispatch, useSelector } from "react-redux"; import { templateModalOpenSelector, diff --git a/app/client/src/pages/workspace/DeleteConfirmationModal.tsx b/app/client/src/pages/workspace/DeleteConfirmationModal.tsx index e19b69df65..257148c367 100644 --- a/app/client/src/pages/workspace/DeleteConfirmationModal.tsx +++ b/app/client/src/pages/workspace/DeleteConfirmationModal.tsx @@ -1,12 +1,18 @@ import React from "react"; import styled from "styled-components"; -import { Button, Category, Size, Text, TextType } from "design-system"; +import { + Button, + Category, + DialogComponent as Dialog, + Size, + Text, + TextType, +} from "design-system"; import { Variant } from "components/ads/common"; import { DELETE_CONFIRMATION_MODAL_TITLE, DELETE_CONFIRMATION_MODAL_SUBTITLE, } from "@appsmith/constants/messages"; -import Dialog from "components/ads/DialogComponent"; import { Classes } from "@blueprintjs/core"; import { Colors } from "constants/Colors";