sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

React-Icons değişiklikleri

Browse source
This commit is contained in:
Sedat Öztürk 2025-08-17 00:17:18 +03:00
parent 8ddede546d
commit 8549c8fc8a
62 changed files with 266 additions and 319 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/src/components/codeLayout/ComponentLibrary.tsx
View file

@ -1,6 +1,5 @@
import React, { useMemo, useState } from "react"; import React, { useMemo, useState } from "react";
import { FaSquare } from 'react-icons/fa'; import { FaSearch, FaSquare } from 'react-icons/fa';
import { AiOutlineSearch } from 'react-icons/ai';
import { ComponentDefinition, HookInfo, PropertyInfo } from "../../@types/componentInfo"; import { ComponentDefinition, HookInfo, PropertyInfo } from "../../@types/componentInfo";
import { getAllComponentDefinitions } from "./data/componentDefinitions"; import { getAllComponentDefinitions } from "./data/componentDefinitions";
import navigationIcon from "@/configs/navigation-icon.config"; import navigationIcon from "@/configs/navigation-icon.config";
@ -96,7 +95,7 @@ export const ComponentLibrary: React.FC<ComponentLibraryProps> = ({
{/* Arama kutusu */} {/* Arama kutusu */}
<div className="p-4 border-b border-gray-700"> <div className="p-4 border-b border-gray-700">
<div className="relative"> <div className="relative">
<AiOutlineSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" /> <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
<input <input
type="text" type="text"
placeholder="Search Components..." placeholder="Search Components..."

6
ui/src/components/layouts/AuthLayout/Simple.tsx
View file

@ -4,7 +4,7 @@ import Card from '@/components/ui/Card'
import Logo from '@/components/template/Logo' import Logo from '@/components/template/Logo'
import type { ReactNode, ReactElement } from 'react' import type { ReactNode, ReactElement } from 'react'
import type { CommonProps } from '@/@types/common' import type { CommonProps } from '@/@types/common'
import { HiArrowLeft, HiCheck } from 'react-icons/hi' import { FaArrowLeft, FaCheck } from 'react-icons/fa';
import { Avatar, Select } from '@/components/ui' import { Avatar, Select } from '@/components/ui'
import { useStoreActions, useStoreState } from '@/store' import { useStoreActions, useStoreState } from '@/store'
import appConfig from '@/configs/app.config' import appConfig from '@/configs/app.config'
@ -66,7 +66,7 @@ const Simple = ({ children, content, ...rest }: SimpleProps) => {
<div className="flex items-center"> <div className="flex items-center">
<Avatar shape="circle" size={24} src={data.imgPath} title={data.label} /> <Avatar shape="circle" size={24} src={data.imgPath} title={data.label} />
</div> </div>
{isSelected && <HiCheck className="text-emerald-500 text-xl" />} {isSelected && <FaCheck className="text-emerald-500 text-xl" />}
</div> </div>
) )
} }
@ -98,7 +98,7 @@ const Simple = ({ children, content, ...rest }: SimpleProps) => {
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-gray-500 hover:text-gray-700" className="text-gray-500 hover:text-gray-700"
> >
<HiArrowLeft className="text-2xl" /> <FaArrowLeft className="text-2xl" />
</a> </a>
)} )}

4
ui/src/components/layouts/BlankLayout.tsx
View file

@ -1,7 +1,7 @@
import View from '@/views/Views' import View from '@/views/Views'
import SidePanel from '@/components/template/SidePanel' import SidePanel from '@/components/template/SidePanel'
import { useStoreState, useStoreActions } from '@/store' import { useStoreState, useStoreActions } from '@/store'
import { HiOutlineCog } from 'react-icons/hi' import { FaCog } from 'react-icons/fa';
import classNames from 'classnames' import classNames from 'classnames'
const ConfiguratorToggle = () => { const ConfiguratorToggle = () => {
@ -19,7 +19,7 @@ const ConfiguratorToggle = () => {
setPanelExpand(true) setPanelExpand(true)
}} }}
> >
<HiOutlineCog /> <FaCog />
</div> </div>
) )
} }

15
ui/src/components/shared/ConfirmDialog.tsx
View file

@ -1,9 +1,4 @@
import { import { FaCheckCircle, FaInfoCircle, FaExclamationCircle } from 'react-icons/fa';
HiCheckCircle,
HiOutlineInformationCircle,
HiOutlineExclamation,
HiOutlineExclamationCircle,
} from 'react-icons/hi'
import Avatar from '@/components/ui/Avatar' import Avatar from '@/components/ui/Avatar'
import Button from '@/components/ui/Button' import Button from '@/components/ui/Button'
import Dialog from '@/components/ui/Dialog' import Dialog from '@/components/ui/Dialog'
@ -31,7 +26,7 @@ const StatusIcon = ({ status }: { status: StatusType }) => {
shape="circle" shape="circle"
> >
<span className="text-2xl"> <span className="text-2xl">
<HiOutlineInformationCircle /> <FaInfoCircle />
</span> </span>
</Avatar> </Avatar>
) )
@ -42,7 +37,7 @@ const StatusIcon = ({ status }: { status: StatusType }) => {
shape="circle" shape="circle"
> >
<span className="text-2xl"> <span className="text-2xl">
<HiCheckCircle /> <FaCheckCircle />
</span> </span>
</Avatar> </Avatar>
) )
@ -53,7 +48,7 @@ const StatusIcon = ({ status }: { status: StatusType }) => {
shape="circle" shape="circle"
> >
<span className="text-2xl"> <span className="text-2xl">
<HiOutlineExclamationCircle /> <FaExclamationCircle />
</span> </span>
</Avatar> </Avatar>
) )
@ -64,7 +59,7 @@ const StatusIcon = ({ status }: { status: StatusType }) => {
shape="circle" shape="circle"
> >
<span className="text-2xl"> <span className="text-2xl">
<HiOutlineExclamation /> <FaExclamationCircle />
</span> </span>
</Avatar> </Avatar>
) )

4
ui/src/components/shared/EllipsisButton.tsx
View file

@ -1,5 +1,5 @@
import Button from '@/components/ui/Button' import Button from '@/components/ui/Button'
import { VscEllipsis } from 'react-icons/vsc' import { FaEllipsisH } from 'react-icons/fa'
import type { ButtonProps } from '@/components/ui/Button' import type { ButtonProps } from '@/components/ui/Button'
type EllipsisButtonProps = ButtonProps type EllipsisButtonProps = ButtonProps
@ -12,7 +12,7 @@ const EllipsisButton = (props: EllipsisButtonProps) => {
shape={shape} shape={shape}
variant={variant} variant={variant}
size={size} size={size}
icon={<VscEllipsis />} icon={<FaEllipsisH />}
{...props} {...props}
/> />
) )

4
ui/src/components/shared/GrowShrinkTag.tsx
View file

@ -1,7 +1,7 @@
import { forwardRef } from 'react' import { forwardRef } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import Tag from '@/components/ui/Tag' import Tag from '@/components/ui/Tag'
import { HiArrowUp, HiArrowDown } from 'react-icons/hi' import { FaArrowUp, FaArrowDown } from 'react-icons/fa'
import growShrinkColor from '@/utils/growShrinkColor' import growShrinkColor from '@/utils/growShrinkColor'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
@ -30,7 +30,7 @@ const GrowShrinkTag = forwardRef<HTMLDivElement, GrowShrinkTagProps>(
{value !== 0 && ( {value !== 0 && (
<span> <span>
{showIcon && {showIcon &&
(value > 0 ? <HiArrowUp /> : <HiArrowDown />)} (value > 0 ? <FaArrowUp /> : <FaArrowDown />)}
</span> </span>
)} )}
<span> <span>

4
ui/src/components/shared/NavToggle.tsx
View file

@ -1,4 +1,4 @@
import { HiOutlineMenuAlt2, HiOutlineMenu } from 'react-icons/hi' import { FaAlignLeft, FaAlignJustify } from 'react-icons/fa'
import type { CommonProps } from '@/@types/common' import type { CommonProps } from '@/@types/common'
export interface NavToggleProps extends CommonProps { export interface NavToggleProps extends CommonProps {
@ -8,7 +8,7 @@ export interface NavToggleProps extends CommonProps {
const NavToggle = ({ toggled, className }: NavToggleProps) => { const NavToggle = ({ toggled, className }: NavToggleProps) => {
return ( return (
<div className={className}> <div className={className}>
{toggled ? <HiOutlineMenu /> : <HiOutlineMenuAlt2 />} {toggled ? <FaAlignJustify /> : <FaAlignLeft />}
</div> </div>
) )
} }

6
ui/src/components/shared/PasswordInput.tsx
View file

@ -1,6 +1,6 @@
import { useState } from 'react' import { useState } from 'react'
import { Input, InputProps } from '@/components/ui/Input' import { Input, InputProps } from '@/components/ui/Input'
import { HiOutlineEyeOff, HiOutlineEye } from 'react-icons/hi' import { FaEye, FaEyeSlash } from 'react-icons/fa';
import type { MouseEvent } from 'react' import type { MouseEvent } from 'react'
interface PasswordInputProps extends InputProps { interface PasswordInputProps extends InputProps {
@ -29,9 +29,9 @@ const PasswordInput = (props: PasswordInputProps) => {
onClick={onPasswordVisibleClick} onClick={onPasswordVisibleClick}
> >
{pwInputType === 'password' ? ( {pwInputType === 'password' ? (
<HiOutlineEyeOff /> <FaEyeSlash />
) : ( ) : (
<HiOutlineEye /> <FaEye />
)} )}
</span> </span>
} }

4
ui/src/components/shared/SegmentItemOption.tsx
View file

@ -1,7 +1,7 @@
import { forwardRef } from 'react' import { forwardRef } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import useThemeClass from '@/utils/hooks/useThemeClass' import useThemeClass from '@/utils/hooks/useThemeClass'
import { HiCheckCircle } from 'react-icons/hi' import { FaCheckCircle } from 'react-icons/fa'
import type { CommonProps } from '@/@types/common' import type { CommonProps } from '@/@types/common'
interface SegmentItemOptionProps extends CommonProps { interface SegmentItemOptionProps extends CommonProps {
@ -54,7 +54,7 @@ const SegmentItemOption = forwardRef<HTMLDivElement, SegmentItemOptionProps>(
> >
{children} {children}
{active && !customCheck && ( {active && !customCheck && (
<HiCheckCircle <FaCheckCircle
className={classNames(textTheme, 'text-2xl')} className={classNames(textTheme, 'text-2xl')}
/> />
)} )}

5
ui/src/components/template/AiAssistant.tsx
View file

@ -2,8 +2,7 @@ import Tooltip from '@/components/ui/Tooltip'
import { ROUTES_ENUM } from '@/routes/route.constant' import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { usePermission } from '@/utils/hooks/usePermission' import { usePermission } from '@/utils/hooks/usePermission'
import { Helmet } from 'react-helmet' import { FaHeadset } from 'react-icons/fa';
import { FcAssistant } from 'react-icons/fc'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
const AiAssistant = () => { const AiAssistant = () => {
@ -24,7 +23,7 @@ const AiAssistant = () => {
onClick={() => navigate(ROUTES_ENUM.protected.admin.ai)} onClick={() => navigate(ROUTES_ENUM.protected.admin.ai)}
className="flex items-center justify-center w-9 h-9 m-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200" className="flex items-center justify-center w-9 h-9 m-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-200"
> >
<FcAssistant size={28} /> <FaHeadset size={28} />
</div> </div>
</Tooltip> </Tooltip>
</> </>

4
ui/src/components/template/LanguageSelector.tsx
View file

@ -6,7 +6,7 @@ import classNames from 'classnames'
import withHeaderItem from '@/utils/hoc/withHeaderItem' import withHeaderItem from '@/utils/hoc/withHeaderItem'
import { useStoreState, useStoreActions } from '@/store' import { useStoreState, useStoreActions } from '@/store'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { HiCheck } from 'react-icons/hi' import { FaCheck } from 'react-icons/fa'
import type { CommonProps } from '@/@types/common' import type { CommonProps } from '@/@types/common'
import appConfig from '@/configs/app.config' import appConfig from '@/configs/app.config'
import { dateLocales } from '@/constants/dateLocales.constant' import { dateLocales } from '@/constants/dateLocales.constant'
@ -74,7 +74,7 @@ const _LanguageSelector = ({ className }: CommonProps) => {
/> />
<span className="ltr:ml-2 rtl:mr-2">{lang.displayName}</span> <span className="ltr:ml-2 rtl:mr-2">{lang.displayName}</span>
</span> </span>
{currentLang === lang.cultureName && <HiCheck className="text-emerald-500 text-lg" />} {currentLang === lang.cultureName && <FaCheck className="text-emerald-500 text-lg" />}
</Dropdown.Item> </Dropdown.Item>
))} ))}
</Dropdown> </Dropdown>

8
ui/src/components/template/Notification.tsx
View file

@ -19,7 +19,7 @@ import classNames from 'classnames'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime' import relativeTime from 'dayjs/plugin/relativeTime'
import { useCallback, useEffect, useRef, useState } from 'react' import { useCallback, useEffect, useRef, useState } from 'react'
import { HiOutlineBell, HiOutlineMailOpen } from 'react-icons/hi' import { FaBell, FaEnvelopeOpen } from 'react-icons/fa';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { Notification as Notify, toast } from '../ui' import { Notification as Notify, toast } from '../ui'
@ -57,10 +57,10 @@ const NotificationToggle = ({
content={unreadCount} content={unreadCount}
innerClass="py-0 px-1" innerClass="py-0 px-1"
> >
<HiOutlineBell /> <FaBell />
</Badge> </Badge>
) : ( ) : (
<HiOutlineBell /> <FaBell />
)} )}
</div> </div>
) )
@ -266,7 +266,7 @@ const _Notification = ({ className }: { className?: string }) => {
variant="plain" variant="plain"
shape="circle" shape="circle"
size="sm" size="sm"
icon={<HiOutlineMailOpen className="text-xl" />} icon={<FaEnvelopeOpen className="text-xl" />}
onClick={onMarkAllAsRead} onClick={onMarkAllAsRead}
/> />
</Tooltip> </Tooltip>

10
ui/src/components/template/Search.tsx
View file

@ -6,7 +6,7 @@ import useThemeClass from '@/utils/hooks/useThemeClass'
import classNames from 'classnames' import classNames from 'classnames'
import { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import Highlighter from 'react-highlight-words' import Highlighter from 'react-highlight-words'
import { HiChevronRight, HiOutlineSearch } from 'react-icons/hi' import { FaChevronRight, FaSearch } from 'react-icons/fa';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { PermissionCheck } from '../shared' import { PermissionCheck } from '../shared'
import { Badge, Checkbox, Pagination } from '../ui' import { Badge, Checkbox, Pagination } from '../ui'
@ -70,7 +70,7 @@ const ListItem = (props: {
/> />
</div> </div>
</div> </div>
<HiChevronRight className="text-lg" /> <FaChevronRight className="text-lg" />
</div> </div>
</Link> </Link>
) )
@ -174,7 +174,7 @@ const _Search = ({ className }: { className?: string }) => {
return ( return (
<PermissionCheck permissions={[GLOBAL_SEARCH]}> <PermissionCheck permissions={[GLOBAL_SEARCH]}>
<div className={classNames(className, 'text-2xl')} onClick={handleSearchOpen}> <div className={classNames(className, 'text-2xl')} onClick={handleSearchOpen}>
<HiOutlineSearch /> <FaSearch />
</div> </div>
<Dialog <Dialog
contentClassName="p-0" contentClassName="p-0"
@ -185,7 +185,7 @@ const _Search = ({ className }: { className?: string }) => {
<div> <div>
<div className="px-4 flex items-center border-b border-gray-200 dark:border-gray-600"> <div className="px-4 flex items-center border-b border-gray-200 dark:border-gray-600">
<div className="flex items-center flex-1"> <div className="flex items-center flex-1">
<HiOutlineSearch className="text-xl" /> <FaSearch className="text-xl" />
<input <input
ref={inputRef} ref={inputRef}
className="ring-0 outline-none block w-full p-4 text-base bg-transparent text-gray-900 dark:text-gray-100" className="ring-0 outline-none block w-full p-4 text-base bg-transparent text-gray-900 dark:text-gray-100"
@ -194,7 +194,7 @@ const _Search = ({ className }: { className?: string }) => {
/> />
</div> </div>
<Button size="xs" onClick={handleSearch}> <Button size="xs" onClick={handleSearch}>
<HiOutlineSearch /> <FaSearch />
</Button> </Button>
</div> </div>
<div> <div>

4
ui/src/components/template/SidePanel/SidePanel.tsx
View file

@ -1,6 +1,6 @@
import classNames from 'classnames' import classNames from 'classnames'
import Drawer from '@/components/ui/Drawer' import Drawer from '@/components/ui/Drawer'
import { HiOutlineCog } from 'react-icons/hi' import { FaCog } from 'react-icons/fa';
import SidePanelContent, { SidePanelContentProps } from './SidePanelContent' import SidePanelContent, { SidePanelContentProps } from './SidePanelContent'
import withHeaderItem from '@/utils/hoc/withHeaderItem' import withHeaderItem from '@/utils/hoc/withHeaderItem'
import { useStoreState, useStoreActions } from '@/store' import { useStoreState, useStoreActions } from '@/store'
@ -35,7 +35,7 @@ const _SidePanel = (props: SidePanelProps) => {
return ( return (
<> <>
<div className={classNames('text-2xl', className)} onClick={openPanel} {...rest}> <div className={classNames('text-2xl', className)} onClick={openPanel} {...rest}>
<HiOutlineCog /> <FaCog />
</div> </div>
<Drawer <Drawer
title={translate('::SidePanel.Title')} title={translate('::SidePanel.Title')}

6
ui/src/components/template/StackedSideNav/StackedSideNavSecondary.tsx
View file

@ -7,7 +7,7 @@ import {
DIR_RTL, DIR_RTL,
} from '@/constants/theme.constant' } from '@/constants/theme.constant'
import VerticalMenuContent from '@/components/template/VerticalMenuContent' import VerticalMenuContent from '@/components/template/VerticalMenuContent'
import { HiOutlineArrowSmLeft, HiOutlineArrowSmRight } from 'react-icons/hi' import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
import type { NavigationTree } from '@/@types/navigation' import type { NavigationTree } from '@/@types/navigation'
import type { Direction, NavMode } from '@/@types/theme' import type { Direction, NavMode } from '@/@types/theme'
@ -51,8 +51,8 @@ const StackedSideNavSecondary = (props: StackedSideNavSecondaryProps) => {
size="sm" size="sm"
icon={ icon={
<> <>
{direction === DIR_LTR && <HiOutlineArrowSmLeft />} {direction === DIR_LTR && <FaArrowLeft />}
{direction === DIR_RTL && <HiOutlineArrowSmRight />} {direction === DIR_RTL && <FaArrowRight />}
</> </>
} }
onClick={handleCollpase} onClick={handleCollpase}

4
ui/src/components/template/ThemeConfigurator/LayoutSwitcher.tsx
View file

@ -2,7 +2,7 @@ import classNames from 'classnames'
import Segment from '@/components/ui/Segment' import Segment from '@/components/ui/Segment'
import SegmentItemOption from '@/components/shared/SegmentItemOption' import SegmentItemOption from '@/components/shared/SegmentItemOption'
import DoubleSidedImage from '@/components/shared/DoubleSidedImage' import DoubleSidedImage from '@/components/shared/DoubleSidedImage'
import { HiCheckCircle } from 'react-icons/hi' import { FaCheckCircle } from 'react-icons/fa'
import useThemeClass from '@/utils/hooks/useThemeClass' import useThemeClass from '@/utils/hooks/useThemeClass'
import { useStoreState, useStoreActions } from '@/store' import { useStoreState, useStoreActions } from '@/store'
import { import {
@ -87,7 +87,7 @@ const LayoutSwitcher = () => {
defaultGutter={false} defaultGutter={false}
className="relative min-h-[80px] w-full" className="relative min-h-[80px] w-full"
customCheck={ customCheck={
<HiCheckCircle <FaCheckCircle
className={classNames(textTheme, 'absolute top-2 right-2 text-lg')} className={classNames(textTheme, 'absolute top-2 right-2 text-lg')}
/> />
} }

4
ui/src/components/template/ThemeConfigurator/ThemeSwitcher.tsx
View file

@ -2,7 +2,7 @@ import classNames from 'classnames'
import Select from '@/components/ui/Select' import Select from '@/components/ui/Select'
import Badge from '@/components/ui/Badge' import Badge from '@/components/ui/Badge'
import { useStoreState, useStoreActions } from '@/store' import { useStoreState, useStoreActions } from '@/store'
import { HiCheck } from 'react-icons/hi' import { FaCheck } from 'react-icons/fa'
import { components } from 'react-select' import { components } from 'react-select'
import type { ColorLevel } from '@/@types/theme' import type { ColorLevel } from '@/@types/theme'
import type { ControlProps, OptionProps } from 'react-select' import type { ControlProps, OptionProps } from 'react-select'
@ -68,7 +68,7 @@ const CustomSelectOption = ({ innerProps, label, data, isSelected }: OptionProps
<ColorBadge themeColor={data.value} /> <ColorBadge themeColor={data.value} />
<span>{label}</span> <span>{label}</span>
</div> </div>
{isSelected && <HiCheck className="text-emerald-500 text-xl" />} {isSelected && <FaCheck className="text-emerald-500 text-xl" />}
</div> </div>
) )
} }

10
ui/src/components/template/UserDropdown.tsx
View file

@ -6,8 +6,8 @@ import withHeaderItem from '@/utils/hoc/withHeaderItem'
import useAuth from '@/utils/hooks/useAuth' import useAuth from '@/utils/hooks/useAuth'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import classNames from 'classnames' import classNames from 'classnames'
import { FiActivity } from 'react-icons/fi' import { FaChartLine } from 'react-icons/fa';
import { HiOutlineLogout, HiOutlineUser } from 'react-icons/hi' import { FaSignOutAlt, FaUser } from 'react-icons/fa';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { Avatar } from '../ui' import { Avatar } from '../ui'
@ -27,12 +27,12 @@ const _UserDropdown = ({ className }: CommonProps) => {
{ {
label: translate('::Abp.Identity.Profile'), label: translate('::Abp.Identity.Profile'),
path: ROUTES_ENUM.protected.admin.profile.general, path: ROUTES_ENUM.protected.admin.profile.general,
icon: <HiOutlineUser />, icon: <FaUser />,
}, },
{ {
label: translate('::Abp.Identity.ActivityLogs'), label: translate('::Abp.Identity.ActivityLogs'),
path: ROUTES_ENUM.protected.admin.activityLog, path: ROUTES_ENUM.protected.admin.activityLog,
icon: <FiActivity />, icon: <FaChartLine />,
}, },
] ]
@ -73,7 +73,7 @@ const _UserDropdown = ({ className }: CommonProps) => {
{/* <Dropdown.Item variant="divider" /> */} {/* <Dropdown.Item variant="divider" /> */}
<Dropdown.Item eventKey="Sign Out" className="gap-2" onClick={signOut}> <Dropdown.Item eventKey="Sign Out" className="gap-2" onClick={signOut}>
<span className="text-xl opacity-50"> <span className="text-xl opacity-50">
<HiOutlineLogout /> <FaSignOutAlt />
</span> </span>
<span>{translate('::Abp.Identity.SignOut')} </span> <span>{translate('::Abp.Identity.SignOut')} </span>
</Dropdown.Item> </Dropdown.Item>

15
ui/src/components/ui/Alert/Alert.tsx
View file

@ -1,12 +1,7 @@
import { useState, forwardRef } from 'react' import { useState, forwardRef } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import useTimeout from '../hooks/useTimeout' import useTimeout from '../hooks/useTimeout'
import { import { FaCheckCircle, FaInfoCircle, FaExclamation, FaTimesCircle } from 'react-icons/fa';
HiCheckCircle,
HiInformationCircle,
HiExclamation,
HiXCircle,
} from 'react-icons/hi'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import CloseButton from '../CloseButton' import CloseButton from '../CloseButton'
import StatusIcon from '../StatusIcon' import StatusIcon from '../StatusIcon'
@ -34,28 +29,28 @@ const TYPE_MAP = {
titleColor: 'text-emerald-700 dark:text-emerald-50', titleColor: 'text-emerald-700 dark:text-emerald-50',
textColor: 'text-emerald-500 dark:text-emerald-50', textColor: 'text-emerald-500 dark:text-emerald-50',
iconColor: 'text-emerald-400 dark:text-emerald-50', iconColor: 'text-emerald-400 dark:text-emerald-50',
icon: <HiCheckCircle />, icon: <FaCheckCircle />,
}, },
info: { info: {
backgroundColor: 'bg-blue-50 dark:bg-blue-500', backgroundColor: 'bg-blue-50 dark:bg-blue-500',
titleColor: 'text-blue-700 dark:text-blue-100', titleColor: 'text-blue-700 dark:text-blue-100',
textColor: 'text-blue-500 dark:text-blue-100', textColor: 'text-blue-500 dark:text-blue-100',
iconColor: 'text-blue-400 dark:text-blue-100', iconColor: 'text-blue-400 dark:text-blue-100',
icon: <HiInformationCircle />, icon: <FaInfoCircle />,
}, },
warning: { warning: {
backgroundColor: 'bg-yellow-50 dark:bg-yellow-500', backgroundColor: 'bg-yellow-50 dark:bg-yellow-500',
titleColor: 'text-yellow-700 dark:text-yellow-50', titleColor: 'text-yellow-700 dark:text-yellow-50',
textColor: 'text-yellow-500 dark:text-yellow-50', textColor: 'text-yellow-500 dark:text-yellow-50',
iconColor: 'text-yellow-400 dark:text-yellow-50', iconColor: 'text-yellow-400 dark:text-yellow-50',
icon: <HiExclamation />, icon: <FaExclamation />,
}, },
danger: { danger: {
backgroundColor: 'bg-red-50 dark:bg-red-500', backgroundColor: 'bg-red-50 dark:bg-red-500',
titleColor: 'text-red-700 dark:text-red-100', titleColor: 'text-red-700 dark:text-red-100',
textColor: 'text-red-500 dark:text-red-100', textColor: 'text-red-500 dark:text-red-100',
iconColor: 'text-red-400 dark:text-red-100', iconColor: 'text-red-400 dark:text-red-100',
icon: <HiXCircle />, icon: <FaTimesCircle />,
}, },
} }

4
ui/src/components/ui/CloseButton/CloseButton.tsx
View file

@ -1,5 +1,5 @@
import { forwardRef } from 'react' import { forwardRef } from 'react'
import { HiX } from 'react-icons/hi' import { FaTimes } from 'react-icons/fa';
import classNames from 'classnames' import classNames from 'classnames'
import type { CommonProps } from '../@types/common' import type { CommonProps } from '../@types/common'
import type { MouseEvent } from 'react' import type { MouseEvent } from 'react'
@ -23,7 +23,7 @@ const CloseButton = forwardRef<HTMLElement, CloseButtonProps>((props, ref) => {
return ( return (
<span className={closeButtonClass} role="button" {...rest} ref={ref}> <span className={closeButtonClass} role="button" {...rest} ref={ref}>
<HiX /> <FaTimes />
</span> </span>
) )
}) })

6
ui/src/components/ui/DatePicker/BasePicker.tsx
View file

@ -2,10 +2,8 @@ import { forwardRef } from 'react'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import localizedFormat from 'dayjs/plugin/localizedFormat' import localizedFormat from 'dayjs/plugin/localizedFormat'
import { Input } from '../Input' import { Input } from '../Input'
import useMergedRef from '../hooks/useMergeRef' import useMergedRef from '../hooks/useMergeRef'
import { HiOutlineCalendar } from 'react-icons/hi' import { FaCalendarAlt } from 'react-icons/fa';
import CloseButton from '../CloseButton' import CloseButton from '../CloseButton'
import type { CommonProps, TypeAttributes } from '../@types/common' import type { CommonProps, TypeAttributes } from '../@types/common'
import type { import type {
@ -76,7 +74,7 @@ const BasePicker = forwardRef<HTMLInputElement, BasePickerProps>(
inputtableBlurClose = true, inputtableBlurClose = true,
inputLabel, inputLabel,
inputPrefix, inputPrefix,
inputSuffix = <HiOutlineCalendar className="text-lg" />, inputSuffix = <FaCalendarAlt className="text-lg" />,
name, name,
onDropdownOpen, onDropdownOpen,
onDropdownClose, onDropdownClose,

6
ui/src/components/ui/DatePicker/tables/Header.tsx
View file

@ -1,6 +1,6 @@
import classNames from 'classnames' import classNames from 'classnames'
import { Button } from '../../Button' import { Button } from '../../Button'
import { HiChevronRight, HiChevronLeft } from 'react-icons/hi' import { FaChevronRight, FaChevronLeft } from 'react-icons/fa';
import type { CommonProps } from '../../@types/common' import type { CommonProps } from '../../@types/common'
export interface HeaderProps extends CommonProps { export interface HeaderProps extends CommonProps {
@ -76,7 +76,7 @@ const Header = (props: HeaderProps) => {
'opacity-0 cursor-default' 'opacity-0 cursor-default'
)} )}
size="sm" size="sm"
icon={<HiChevronLeft />} icon={<FaChevronLeft />}
disabled={!hasPrevious} disabled={!hasPrevious}
aria-label={previousLabel} aria-label={previousLabel}
onClick={onPrevious} onClick={onPrevious}
@ -92,7 +92,7 @@ const Header = (props: HeaderProps) => {
!hasNext && renderCenter && 'opacity-0 cursor-default' !hasNext && renderCenter && 'opacity-0 cursor-default'
)} )}
size="sm" size="sm"
icon={<HiChevronRight />} icon={<FaChevronRight />}
disabled={!hasNext} disabled={!hasNext}
aria-label={nextLabel} aria-label={nextLabel}
onClick={onNext} onClick={onNext}

6
ui/src/components/ui/Dropdown/DropdownItem.tsx
View file

@ -19,7 +19,7 @@ import DropdownMenuContext, {
DropdownMenuContextProvider, DropdownMenuContextProvider,
} from './context/dropdownMenuContext' } from './context/dropdownMenuContext'
import classNames from 'classnames' import classNames from 'classnames'
import { HiChevronRight, HiChevronLeft } from 'react-icons/hi' import { FaChevronRight, FaChevronLeft } from 'react-icons/fa';
import MenuItem from '../MenuItem' import MenuItem from '../MenuItem'
import { DROPDOWN_ITEM_TYPE } from '../utils/constants' import { DROPDOWN_ITEM_TYPE } from '../utils/constants'
import type { CommonProps } from '../@types/common' import type { CommonProps } from '../@types/common'
@ -214,9 +214,9 @@ const DropdownItem = forwardRef<HTMLElement, DropdownItemProps>(
> >
<span>{children}</span> <span>{children}</span>
{direction === 'rtl' ? ( {direction === 'rtl' ? (
<HiChevronLeft /> <FaChevronLeft />
) : ( ) : (
<HiChevronRight /> <FaChevronRight />
)} )}
</MenuItem> </MenuItem>
{renderSubmenu()} {renderSubmenu()}

15
ui/src/components/ui/Dropdown/DropdownToggle.tsx
View file

@ -1,11 +1,6 @@
import { forwardRef } from 'react' import { forwardRef } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import { import { FaChevronDown, FaChevronUp, FaChevronRight, FaChevronLeft } from 'react-icons/fa';
HiChevronDown,
HiChevronUp,
HiChevronRight,
HiChevronLeft,
} from 'react-icons/hi'
import type { CommonProps } from '../@types/common' import type { CommonProps } from '../@types/common'
import type { DropdownPlacement } from '../@types/placement' import type { DropdownPlacement } from '../@types/placement'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
@ -32,7 +27,7 @@ const DropdownToggleDefaultContent = ({
return ( return (
<> <>
{children} {children}
<HiChevronRight /> <FaChevronRight />
</> </>
) )
} }
@ -40,7 +35,7 @@ const DropdownToggleDefaultContent = ({
if (placement && placement.includes('middle-end')) { if (placement && placement.includes('middle-end')) {
return ( return (
<> <>
<HiChevronLeft /> <FaChevronLeft />
{children} {children}
</> </>
) )
@ -50,7 +45,7 @@ const DropdownToggleDefaultContent = ({
return ( return (
<> <>
{children} {children}
<HiChevronUp /> <FaChevronUp />
</> </>
) )
} }
@ -58,7 +53,7 @@ const DropdownToggleDefaultContent = ({
return ( return (
<> <>
{children} {children}
<HiChevronDown /> <FaChevronDown />
</> </>
) )
} }

4
ui/src/components/ui/Menu/MenuCollapse.tsx
View file

@ -4,7 +4,7 @@ import { CollapseContextProvider } from './context/collapseContext'
import classNames from 'classnames' import classNames from 'classnames'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import MenuContext from './context/menuContext' import MenuContext from './context/menuContext'
import { HiChevronDown } from 'react-icons/hi' import { FaChevronDown } from 'react-icons/fa';
import type { CommonProps } from '../@types/common' import type { CommonProps } from '../@types/common'
import type { ReactNode, MouseEvent } from 'react' import type { ReactNode, MouseEvent } from 'react'
@ -59,7 +59,7 @@ const MenuCollapse = (props: MenuCollapseProps) => {
}} }}
transition={{ duration: 0.15 }} transition={{ duration: 0.15 }}
> >
{sideCollapsed ? null : <HiChevronDown />} {sideCollapsed ? null : <FaChevronDown />}
</motion.span> </motion.span>
</div> </div>
<CollapseContextProvider value={isExpanded}> <CollapseContextProvider value={isExpanded}>

4
ui/src/components/ui/Pagination/Next.tsx
View file

@ -1,5 +1,5 @@
import classNames from 'classnames' import classNames from 'classnames'
import { HiChevronRight } from 'react-icons/hi' import { FaChevronRight } from 'react-icons/fa';
import type { CommonProps } from '../@types/common' import type { CommonProps } from '../@types/common'
import type { MouseEvent } from 'react' import type { MouseEvent } from 'react'
@ -40,7 +40,7 @@ const Next = (props: NextProps) => {
role="presentation" role="presentation"
onClick={onNextClick} onClick={onNextClick}
> >
<HiChevronRight /> <FaChevronRight />
</span> </span>
) )
} }

14
ui/src/components/ui/Pagination/Pagers.tsx
View file

@ -1,10 +1,6 @@
import { useState, useEffect, useCallback, useMemo } from 'react' import { useState, useEffect, useCallback, useMemo } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import { import { FaChevronCircleLeft, FaEllipsisH, FaChevronCircleRight } from 'react-icons/fa';
HiOutlineChevronDoubleLeft,
HiOutlineDotsHorizontal,
HiChevronDoubleRight,
} from 'react-icons/hi'
const PAGER_COUNT = 7 const PAGER_COUNT = 7
@ -31,9 +27,9 @@ const NextMore = ({ className, onArrow }: MoreProps) => {
onClick={() => onArrow('nextMore')} onClick={() => onArrow('nextMore')}
> >
{quickNextArrowIcon ? ( {quickNextArrowIcon ? (
<HiChevronDoubleRight /> <FaChevronCircleRight />
) : ( ) : (
<HiOutlineDotsHorizontal /> <FaEllipsisH />
)} )}
</li> </li>
) )
@ -55,9 +51,9 @@ const PrevMore = ({ className, onArrow }: MoreProps) => {
onClick={() => onArrow('prevMore')} onClick={() => onArrow('prevMore')}
> >
{quickPrevArrowIcon ? ( {quickPrevArrowIcon ? (
<HiOutlineChevronDoubleLeft /> <FaChevronCircleLeft />
) : ( ) : (
<HiOutlineDotsHorizontal /> <FaEllipsisH />
)} )}
</li> </li>
) )

4
ui/src/components/ui/Pagination/Prev.tsx
View file

@ -1,5 +1,5 @@
import classNames from 'classnames' import classNames from 'classnames'
import { HiChevronLeft } from 'react-icons/hi' import { FaChevronLeft } from 'react-icons/fa';
import type { CommonProps } from '../@types/common' import type { CommonProps } from '../@types/common'
import type { MouseEvent } from 'react' import type { MouseEvent } from 'react'
@ -38,7 +38,7 @@ const Prev = (props: PrevProps) => {
role="presentation" role="presentation"
onClick={onPrevClick} onClick={onPrevClick}
> >
<HiChevronLeft /> <FaChevronLeft />
</span> </span>
) )
} }

8
ui/src/components/ui/Select/Select.tsx
View file

@ -9,7 +9,7 @@ import get from 'lodash/get'
import { useConfig } from '../ConfigProvider' import { useConfig } from '../ConfigProvider'
import { useForm } from '../Form/context' import { useForm } from '../Form/context'
import { useInputGroup } from '../InputGroup/context' import { useInputGroup } from '../InputGroup/context'
import { HiCheck, HiChevronDown, HiX } from 'react-icons/hi' import { FaCheck, FaChevronDown, FaTimes } from 'react-icons/fa';
import Spinner from '../Spinner/Spinner' import Spinner from '../Spinner/Spinner'
import { CONTROL_SIZES } from '../utils/constants' import { CONTROL_SIZES } from '../utils/constants'
import type { CommonProps, TypeAttributes } from '../@types/common' import type { CommonProps, TypeAttributes } from '../@types/common'
@ -52,7 +52,7 @@ const DefaultOption = ({
> >
<span className="ml-2">{label}</span> <span className="ml-2">{label}</span>
{isSelected && ( {isSelected && (
<HiCheck <FaCheck
className={`text-${themeColor} dark:text-white text-xl`} className={`text-${themeColor} dark:text-white text-xl`}
/> />
)} )}
@ -63,7 +63,7 @@ const DefaultOption = ({
const DefaultDropdownIndicator = () => { const DefaultDropdownIndicator = () => {
return ( return (
<div className="select-dropdown-indicator"> <div className="select-dropdown-indicator">
<HiChevronDown /> <FaChevronDown />
</div> </div>
) )
} }
@ -79,7 +79,7 @@ const DefaultClearIndicator = ({
return ( return (
<div {...restInnerProps} ref={ref}> <div {...restInnerProps} ref={ref}>
<div className="select-clear-indicator"> <div className="select-clear-indicator">
<HiX /> <FaTimes />
</div> </div>
</div> </div>
) )

4
ui/src/components/ui/Spinner/Spinner.tsx
View file

@ -1,7 +1,7 @@
import { forwardRef } from 'react' import { forwardRef } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import { useConfig } from '../ConfigProvider' import { useConfig } from '../ConfigProvider'
import { CgSpinner } from 'react-icons/cg' import { FaSpinner } from 'react-icons/fa';
import type { CommonProps } from '../@types/common' import type { CommonProps } from '../@types/common'
import type { ElementType } from 'react' import type { ElementType } from 'react'
@ -18,7 +18,7 @@ const Spinner = forwardRef((props: SpinnerProps, ref) => {
className, className,
color, color,
enableTheme = true, enableTheme = true,
indicator: Component = CgSpinner, indicator: Component = FaSpinner,
isSpining = true, isSpining = true,
size = 20, size = 20,
style, style,

15
ui/src/components/ui/StatusIcon/StatusIcon.tsx
View file

@ -1,9 +1,4 @@
import { import { FaCheckCircle, FaInfoCircle, FaExclamation, FaTimesCircle } from 'react-icons/fa';
HiCheckCircle,
HiInformationCircle,
HiExclamation,
HiXCircle,
} from 'react-icons/hi'
import type { TypeAttributes, CommonProps } from '../@types/common' import type { TypeAttributes, CommonProps } from '../@types/common'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
@ -22,19 +17,19 @@ const ICONS: Record<
> = { > = {
success: { success: {
color: 'text-emerald-400', color: 'text-emerald-400',
icon: <HiCheckCircle />, icon: <FaCheckCircle />,
}, },
info: { info: {
color: 'text-blue-400', color: 'text-blue-400',
icon: <HiInformationCircle />, icon: <FaInfoCircle />,
}, },
warning: { warning: {
color: 'text-yellow-400', color: 'text-yellow-400',
icon: <HiExclamation />, icon: <FaExclamation />,
}, },
danger: { danger: {
color: 'text-red-400', color: 'text-red-400',
icon: <HiXCircle />, icon: <FaTimesCircle />,
}, },
} }

6
ui/src/components/ui/Steps/StepItem.tsx
View file

@ -1,7 +1,7 @@
import { forwardRef } from 'react' import { forwardRef } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import { useConfig } from '../ConfigProvider' import { useConfig } from '../ConfigProvider'
import { HiCheck, HiX } from 'react-icons/hi' import { FaCheck, FaTimes } from 'react-icons/fa';
import { STEPS_STATUS } from '../utils/constants' import { STEPS_STATUS } from '../utils/constants'
import type { CommonProps, StepStatus } from '../@types/common' import type { CommonProps, StepStatus } from '../@types/common'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
@ -9,10 +9,10 @@ import type { ReactNode } from 'react'
const { COMPLETE, PENDING, IN_PROGRESS, ERROR } = STEPS_STATUS const { COMPLETE, PENDING, IN_PROGRESS, ERROR } = STEPS_STATUS
const STEP_STATUS_ICON = { const STEP_STATUS_ICON = {
[COMPLETE]: <HiCheck />, [COMPLETE]: <FaCheck />,
[PENDING]: null, [PENDING]: null,
[IN_PROGRESS]: null, [IN_PROGRESS]: null,
[ERROR]: <HiX />, [ERROR]: <FaTimes />,
} }
export interface StepItemProps extends CommonProps { export interface StepItemProps extends CommonProps {

4
ui/src/components/ui/TimeInput/TimeInput.tsx
View file

@ -12,7 +12,7 @@ import {
createAmPmHandler, createAmPmHandler,
createTimeHandler, createTimeHandler,
} from './utils' } from './utils'
import { HiOutlineClock } from 'react-icons/hi' import { FaClock } from 'react-icons/fa';
import type { CommonProps, TypeAttributes } from '../@types/common' import type { CommonProps, TypeAttributes } from '../@types/common'
import type { ReactNode, RefObject, Ref } from 'react' import type { ReactNode, RefObject, Ref } from 'react'
@ -66,7 +66,7 @@ const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>((props, ref) => {
showSeconds = false, showSeconds = false,
size = 'md', size = 'md',
style, style,
suffix = <HiOutlineClock className="text-lg" />, suffix = <FaClock className="text-lg" />,
timeFieldPlaceholder = '--', timeFieldPlaceholder = '--',
timeFieldClass, timeFieldClass,
value, value,

4
ui/src/components/ui/TimeInput/TimeInputRange.tsx
View file

@ -4,7 +4,7 @@ import useMergedRef from '../hooks/useMergeRef'
import useDidUpdate from '../hooks/useDidUpdate' import useDidUpdate from '../hooks/useDidUpdate'
import TimeInput from './TimeInput' import TimeInput from './TimeInput'
import CloseButton from '../CloseButton' import CloseButton from '../CloseButton'
import { HiOutlineClock } from 'react-icons/hi' import { FaClock } from 'react-icons/fa';
import Input from '../Input/Input' import Input from '../Input/Input'
import type { CommonProps, TypeAttributes } from '../@types/common' import type { CommonProps, TypeAttributes } from '../@types/common'
import type { RefObject, Ref, ReactNode } from 'react' import type { RefObject, Ref, ReactNode } from 'react'
@ -56,7 +56,7 @@ const TimeInputRange = forwardRef<HTMLInputElement, TimeInputRangeProps>(
showSeconds = false, showSeconds = false,
size, size,
style, style,
suffix = <HiOutlineClock className="text-lg" />, suffix = <FaClock className="text-lg" />,
timeFieldPlaceholder = '--', timeFieldPlaceholder = '--',
value, value,
...rest ...rest

34
ui/src/components/ui/Tooltip/Arrow.tsx
View file

@ -1,10 +1,10 @@
import classNames from 'classnames' import classNames from 'classnames'
import { import {
BsFillCaretDownFill, FaCaretDown,
BsFillCaretLeftFill, FaCaretLeft,
BsFillCaretUpFill, FaCaretUp,
BsFillCaretRightFill, FaCaretRight,
} from 'react-icons/bs' } from 'react-icons/fa';
export type ArrowPlacement = export type ArrowPlacement =
| 'top' | 'top'
@ -33,7 +33,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
switch (placement) { switch (placement) {
case 'top': case 'top':
return ( return (
<BsFillCaretDownFill <FaCaretDown
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-bottom-2 w-full left-0' '-bottom-2 w-full left-0'
@ -42,7 +42,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'top-start': case 'top-start':
return ( return (
<BsFillCaretDownFill <FaCaretDown
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-bottom-2 left-0 ml-3' '-bottom-2 left-0 ml-3'
@ -51,7 +51,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'top-end': case 'top-end':
return ( return (
<BsFillCaretDownFill <FaCaretDown
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-bottom-2 right-0 mr-3' '-bottom-2 right-0 mr-3'
@ -60,7 +60,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'right': case 'right':
return ( return (
<BsFillCaretLeftFill <FaCaretLeft
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-left-2 top-1/2 transform -translate-y-1/2' '-left-2 top-1/2 transform -translate-y-1/2'
@ -69,7 +69,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'right-start': case 'right-start':
return ( return (
<BsFillCaretLeftFill <FaCaretLeft
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-left-2 top-2' '-left-2 top-2'
@ -78,7 +78,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'right-end': case 'right-end':
return ( return (
<BsFillCaretLeftFill <FaCaretLeft
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-left-2 bottom-2' '-left-2 bottom-2'
@ -87,7 +87,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'bottom': case 'bottom':
return ( return (
<BsFillCaretUpFill <FaCaretUp
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-top-2 w-full left-0' '-top-2 w-full left-0'
@ -96,7 +96,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'bottom-start': case 'bottom-start':
return ( return (
<BsFillCaretUpFill <FaCaretUp
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-top-2 left-0 ml-3' '-top-2 left-0 ml-3'
@ -105,7 +105,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'bottom-end': case 'bottom-end':
return ( return (
<BsFillCaretUpFill <FaCaretUp
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-top-2 right-0 mr-3' '-top-2 right-0 mr-3'
@ -114,7 +114,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'left': case 'left':
return ( return (
<BsFillCaretRightFill <FaCaretRight
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-right-2 top-1/2 transform -translate-y-1/2' '-right-2 top-1/2 transform -translate-y-1/2'
@ -123,7 +123,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'left-start': case 'left-start':
return ( return (
<BsFillCaretRightFill <FaCaretRight
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-right-2 top-2' '-right-2 top-2'
@ -132,7 +132,7 @@ const Arrow = ({ placement, color, colorDark }: ArrowProps) => {
) )
case 'left-end': case 'left-end':
return ( return (
<BsFillCaretRightFill <FaCaretRight
className={classNames( className={classNames(
arrowDefaultClass, arrowDefaultClass,
'-right-2 bottom-2' '-right-2 bottom-2'

8
ui/src/components/ui/Upload/FileItem.tsx
View file

@ -1,4 +1,4 @@
import { VscFilePdf, VscFileZip, VscFile } from 'react-icons/vsc' import { FaFilePdf, FaFileArchive, FaFile } from 'react-icons/fa';
import type { CommonProps } from '../@types/common' import type { CommonProps } from '../@types/common'
const BYTE = 1000 const BYTE = 1000
@ -32,7 +32,7 @@ const FileItem = (props: FileItemProps) => {
if (type === 'application/zip') { if (type === 'application/zip') {
return ( return (
<FileIcon> <FileIcon>
<VscFileZip /> <FaFileArchive />
</FileIcon> </FileIcon>
) )
} }
@ -40,14 +40,14 @@ const FileItem = (props: FileItemProps) => {
if (type === 'application/pdf') { if (type === 'application/pdf') {
return ( return (
<FileIcon> <FileIcon>
<VscFilePdf /> <FaFilePdf />
</FileIcon> </FileIcon>
) )
} }
return ( return (
<FileIcon> <FileIcon>
<VscFile /> <FaFile />
</FileIcon> </FileIcon>
) )
} }

4
ui/src/views/AccessDenied.tsx
View file

@ -4,7 +4,7 @@ import { Button } from '@/components/ui'
import { ROUTES_ENUM } from '@/routes/route.constant' import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { MdArrowBack } from 'react-icons/md' import { FaArrowLeft } from 'react-icons/fa';
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
const AccessDenied = () => { const AccessDenied = () => {
@ -39,7 +39,7 @@ const AccessDenied = () => {
navigate(isAdminPath ? ROUTES_ENUM.protected.dashboard : ROUTES_ENUM.public.home) navigate(isAdminPath ? ROUTES_ENUM.protected.dashboard : ROUTES_ENUM.public.home)
} }
> >
<MdArrowBack /> <FaArrowLeft />
</Button> </Button>
</div> </div>
</Container> </Container>

4
ui/src/views/Views.tsx
View file

@ -4,7 +4,7 @@ import { Alert, Button } from '@/components/ui'
import { store, useStoreState } from '@/store' import { store, useStoreState } from '@/store'
import { Suspense, useEffect } from 'react' import { Suspense, useEffect } from 'react'
import { ErrorBoundary } from 'react-error-boundary' import { ErrorBoundary } from 'react-error-boundary'
import { MdArrowBack } from 'react-icons/md' import { FaArrowLeft } from 'react-icons/fa';
import { Navigate, useLocation } from 'react-router-dom' import { Navigate, useLocation } from 'react-router-dom'
import DialogProvider from './shared/DialogContext' import DialogProvider from './shared/DialogContext'
import DialogShowComponent from './shared/DialogContext/DialogShowComponent' import DialogShowComponent from './shared/DialogContext/DialogShowComponent'
@ -23,7 +23,7 @@ function fallbackRender({ error, resetErrorBoundary }: { error: Error; resetErro
<h5>{error.name ?? 'Hata!'}</h5> <h5>{error.name ?? 'Hata!'}</h5>
<div>{error.message}</div> <div>{error.message}</div>
<Button size="xs" className="mt-2" variant="default" onClick={resetErrorBoundary}> <Button size="xs" className="mt-2" variant="default" onClick={resetErrorBoundary}>
<MdArrowBack /> <FaArrowLeft />
</Button> </Button>
</Alert> </Alert>
) )

18
ui/src/views/admin/chart/ChartEdit.tsx
View file

@ -38,9 +38,7 @@ import setNull from '@/utils/setNull'
import { Field, FieldArray, FieldProps, Form, Formik, FormikProps, getIn } from 'formik' import { Field, FieldArray, FieldProps, Form, Formik, FormikProps, getIn } from 'formik'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaMinus, FaFileMedical, FaTrash } from 'react-icons/fa';
import { HiMinus, HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import { Link, useParams } from 'react-router-dom' import { Link, useParams } from 'react-router-dom'
import { object, string } from 'yup' import { object, string } from 'yup'
import { import {
@ -1909,7 +1907,7 @@ function ChartEdit() {
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setDatabaseOperationsModalData({ setDatabaseOperationsModalData({
@ -1937,7 +1935,7 @@ function ChartEdit() {
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setDatabaseOperationsModalData({ setDatabaseOperationsModalData({
@ -1955,7 +1953,7 @@ function ChartEdit() {
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setConfirmDelete({ setConfirmDelete({
@ -2811,7 +2809,7 @@ function ChartEdit() {
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setDatabaseOperationsModalData({ setDatabaseOperationsModalData({
@ -2842,7 +2840,7 @@ function ChartEdit() {
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setDatabaseOperationsModalData({ setDatabaseOperationsModalData({
@ -2860,7 +2858,7 @@ function ChartEdit() {
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setConfirmDelete({ setConfirmDelete({
@ -3991,7 +3989,7 @@ function ChartEdit() {
shape="circle" shape="circle"
type="button" type="button"
size="sm" size="sm"
icon={<HiMinus />} icon={<FaMinus />}
onClick={() => remove(index)} onClick={() => remove(index)}
/> />
</div> </div>

10
ui/src/views/admin/listForm/edit/FormCustomization.tsx
View file

@ -24,9 +24,7 @@ import { SelectBoxOption } from '@/shared/types'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldProps, Form, Formik } from 'formik' import { Field, FieldProps, Form, Formik } from 'formik'
import { useState } from 'react' import { useState } from 'react'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import * as Yup from 'yup' import * as Yup from 'yup'
import { listFormCustomizationOptions } from './options' import { listFormCustomizationOptions } from './options'
import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin/models' import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin/models'
@ -69,7 +67,7 @@ function FormCustomization({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setRow({} as ListFormCustomizationDto) setRow({} as ListFormCustomizationDto)
@ -93,7 +91,7 @@ function FormCustomization({
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
if (row.id) { if (row.id) {
@ -108,7 +106,7 @@ function FormCustomization({
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
if (row.id) { if (row.id) {

10
ui/src/views/admin/listForm/edit/FormTabCommands.tsx
View file

@ -9,9 +9,7 @@ import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
import { useStoreState } from '@/store' import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { useState } from 'react' import { useState } from 'react'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import JsonRowOpDialogCommand from './json-row-operations/JsonRowOpDialogCommand' import JsonRowOpDialogCommand from './json-row-operations/JsonRowOpDialogCommand'
import { JsonRowDialogData } from './json-row-operations/types' import { JsonRowDialogData } from './json-row-operations/types'
import { UiCommandButtonPositionTypeEnum } from '@/proxy/form/models' import { UiCommandButtonPositionTypeEnum } from '@/proxy/form/models'
@ -44,7 +42,7 @@ function FormTabCommands() {
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setJsonRowOpModalData({ setJsonRowOpModalData({
@ -77,7 +75,7 @@ function FormTabCommands() {
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={async (e) => { onClick={async (e) => {
setJsonRowOpModalData({ setJsonRowOpModalData({
tabName: ListFormEditTabs.CommandColumnsJsonRow, tabName: ListFormEditTabs.CommandColumnsJsonRow,
@ -95,7 +93,7 @@ function FormTabCommands() {
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={async () => { onClick={async () => {
setJsonRowOpModalData({ setJsonRowOpModalData({
tabName: ListFormEditTabs.CommandColumnsJsonRow, tabName: ListFormEditTabs.CommandColumnsJsonRow,

10
ui/src/views/admin/listForm/edit/FormTabDatabaseDelete.tsx
View file

@ -10,9 +10,7 @@ import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, Form, Formik } from 'formik' import { Field, Form, Formik } from 'formik'
import { Dispatch, SetStateAction, useState } from 'react' import { Dispatch, SetStateAction, useState } from 'react'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import { object, string } from 'yup' import { object, string } from 'yup'
import { FormEditProps } from './FormEdit' import { FormEditProps } from './FormEdit'
import { JsonRowDialogData } from './json-row-operations/types' import { JsonRowDialogData } from './json-row-operations/types'
@ -125,7 +123,7 @@ function FormTabDatabaseDelete({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setData({ setData({
@ -168,7 +166,7 @@ function FormTabDatabaseDelete({
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={() => { onClick={() => {
setData({ setData({
tabName: tabName:
@ -187,7 +185,7 @@ function FormTabDatabaseDelete({
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={() => { onClick={() => {
setData({ setData({
tabName: tabName:

16
ui/src/views/admin/listForm/edit/FormTabDatabaseInsert.tsx
View file

@ -10,9 +10,7 @@ import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, Form, Formik } from 'formik' import { Field, Form, Formik } from 'formik'
import { Dispatch, SetStateAction, useState } from 'react' import { Dispatch, SetStateAction, useState } from 'react'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import { object, string } from 'yup' import { object, string } from 'yup'
import { FormEditProps } from './FormEdit' import { FormEditProps } from './FormEdit'
import { JsonRowDialogData } from './json-row-operations/types' import { JsonRowDialogData } from './json-row-operations/types'
@ -125,7 +123,7 @@ function FormTabDatabaseInsert({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setData({ setData({
@ -168,7 +166,7 @@ function FormTabDatabaseInsert({
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={() => { onClick={() => {
setData({ setData({
tabName: tabName:
@ -187,7 +185,7 @@ function FormTabDatabaseInsert({
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={() => { onClick={() => {
setData({ setData({
tabName: tabName:
@ -229,7 +227,7 @@ function FormTabDatabaseInsert({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setData({ setData({
@ -278,7 +276,7 @@ function FormTabDatabaseInsert({
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={() => { onClick={() => {
setData({ setData({
tabName: ListFormEditTabs.Database.Insert.FormFieldsDefaultValuesJsonRow, tabName: ListFormEditTabs.Database.Insert.FormFieldsDefaultValuesJsonRow,
@ -296,7 +294,7 @@ function FormTabDatabaseInsert({
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={() => { onClick={() => {
setData({ setData({
tabName: ListFormEditTabs.Database.Insert.FormFieldsDefaultValuesJsonRow, tabName: ListFormEditTabs.Database.Insert.FormFieldsDefaultValuesJsonRow,

10
ui/src/views/admin/listForm/edit/FormTabDatabaseSelect.tsx
View file

@ -10,9 +10,7 @@ import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, Form, Formik } from 'formik' import { Field, Form, Formik } from 'formik'
import { Dispatch, SetStateAction, useState } from 'react' import { Dispatch, SetStateAction, useState } from 'react'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import { object, string } from 'yup' import { object, string } from 'yup'
import { FormEditProps } from './FormEdit' import { FormEditProps } from './FormEdit'
import { JsonRowDialogData } from './json-row-operations/types' import { JsonRowDialogData } from './json-row-operations/types'
@ -112,7 +110,7 @@ function FormTabDatabaseSelect({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setData({ setData({
@ -161,7 +159,7 @@ function FormTabDatabaseSelect({
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={() => { onClick={() => {
setData({ setData({
tabName: tabName:
@ -180,7 +178,7 @@ function FormTabDatabaseSelect({
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={() => { onClick={() => {
setData({ setData({
tabName: tabName:

10
ui/src/views/admin/listForm/edit/FormTabDatabaseUpdate.tsx
View file

@ -10,9 +10,7 @@ import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, Form, Formik } from 'formik' import { Field, Form, Formik } from 'formik'
import { Dispatch, SetStateAction, useState } from 'react' import { Dispatch, SetStateAction, useState } from 'react'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import { object, string } from 'yup' import { object, string } from 'yup'
import { FormEditProps } from './FormEdit' import { FormEditProps } from './FormEdit'
import { JsonRowDialogData } from './json-row-operations/types' import { JsonRowDialogData } from './json-row-operations/types'
@ -125,7 +123,7 @@ function FormTabDatabaseUpdate({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setData({ setData({
@ -168,7 +166,7 @@ function FormTabDatabaseUpdate({
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={() => { onClick={() => {
setData({ setData({
tabName: tabName:
@ -187,7 +185,7 @@ function FormTabDatabaseUpdate({
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={() => { onClick={() => {
setData({ setData({
tabName: tabName:

10
ui/src/views/admin/listForm/edit/FormTabEditForm.tsx
View file

@ -9,9 +9,7 @@ import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
import { useStoreState } from '@/store' import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { useState } from 'react' import { useState } from 'react'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import JsonRowOpDialogEditForm from './json-row-operations/JsonRowOpDialogEditForm' import JsonRowOpDialogEditForm from './json-row-operations/JsonRowOpDialogEditForm'
import { JsonRowDialogData } from './json-row-operations/types' import { JsonRowDialogData } from './json-row-operations/types'
@ -43,7 +41,7 @@ function FormTabEditForm(props: { listFormCode: string }) {
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setJsonRowOpModalData({ setJsonRowOpModalData({
@ -75,7 +73,7 @@ function FormTabEditForm(props: { listFormCode: string }) {
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={() => { onClick={() => {
setJsonRowOpModalData({ setJsonRowOpModalData({
tabName: ListFormEditTabs.Edit.EditingFormFieldsJsonRow, tabName: ListFormEditTabs.Edit.EditingFormFieldsJsonRow,
@ -93,7 +91,7 @@ function FormTabEditForm(props: { listFormCode: string }) {
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={() => { onClick={() => {
setJsonRowOpModalData({ setJsonRowOpModalData({
tabName: ListFormEditTabs.Edit.EditingFormFieldsJsonRow, tabName: ListFormEditTabs.Edit.EditingFormFieldsJsonRow,

10
ui/src/views/admin/listForm/edit/FormTabSubForm.tsx
View file

@ -9,9 +9,7 @@ import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
import { useStoreState } from '@/store' import { useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { useState } from 'react' import { useState } from 'react'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import JsonRowOpDialogSubForm from './json-row-operations/JsonRowOpDialogSubForm' import JsonRowOpDialogSubForm from './json-row-operations/JsonRowOpDialogSubForm'
import { JsonRowDialogData } from './json-row-operations/types' import { JsonRowDialogData } from './json-row-operations/types'
@ -43,7 +41,7 @@ function FormTabSubForm() {
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setJsonRowOpModalData({ setJsonRowOpModalData({
@ -73,7 +71,7 @@ function FormTabSubForm() {
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={() => { onClick={() => {
setJsonRowOpModalData({ setJsonRowOpModalData({
tabName: ListFormEditTabs.SubForm, tabName: ListFormEditTabs.SubForm,
@ -91,7 +89,7 @@ function FormTabSubForm() {
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrash />}
onClick={() => { onClick={() => {
setJsonRowOpModalData({ setJsonRowOpModalData({
tabName: ListFormEditTabs.SubForm, tabName: ListFormEditTabs.SubForm,

12
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabConditionalFormatting.tsx
View file

@ -22,9 +22,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
import setNull from '@/utils/setNull' import setNull from '@/utils/setNull'
import { Field, FieldProps, Form, Formik } from 'formik' import { Field, FieldProps, Form, Formik } from 'formik'
import { useState } from 'react' import { useState } from 'react'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaPlusSquare, FaCheck, FaTrashAlt } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdCheck, MdDelete } from 'react-icons/md'
import { object, string } from 'yup' import { object, string } from 'yup'
import { columnRowTypeListOptions, columnValidationComparisonTypeListOptions } from '../options' import { columnRowTypeListOptions, columnValidationComparisonTypeListOptions } from '../options'
import { FormFieldEditProps } from './FormFields' import { FormFieldEditProps } from './FormFields'
@ -91,7 +89,7 @@ function FormFieldTabConditionalFormatting({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaPlusSquare />}
onClick={() => setItemIndex(-1)} onClick={() => setItemIndex(-1)}
/> />
</Th> </Th>
@ -113,7 +111,7 @@ function FormFieldTabConditionalFormatting({
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setItemIndex(index) setItemIndex(index)
@ -125,7 +123,7 @@ function FormFieldTabConditionalFormatting({
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrashAlt />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
try { try {
@ -159,7 +157,7 @@ function FormFieldTabConditionalFormatting({
/> />
</Td> </Td>
<Td>{row.rowType}</Td> <Td>{row.rowType}</Td>
<Td>{row.useRow && <MdCheck />}</Td> <Td>{row.useRow && <FaCheck />}</Td>
<Td>{row.condition}</Td> <Td>{row.condition}</Td>
<Td>{row.conditionValue}</Td> <Td>{row.conditionValue}</Td>
<Td>{row.cssClassName}</Td> <Td>{row.cssClassName}</Td>

16
ui/src/views/admin/listForm/edit/form-fields/FormFieldTabValidationRules.tsx
View file

@ -23,9 +23,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
import setNull from '@/utils/setNull' import setNull from '@/utils/setNull'
import { Field, FieldProps, Form, Formik } from 'formik' import { Field, FieldProps, Form, Formik } from 'formik'
import { useState } from 'react' import { useState } from 'react'
import { FiEdit3 } from 'react-icons/fi' import { FaEdit, FaPlusSquare, FaCheck, FaTrashAlt } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdCheck, MdDelete } from 'react-icons/md'
import { bool, object, string } from 'yup' import { bool, object, string } from 'yup'
import { import {
columnValidationComparisonTypeListOptions, columnValidationComparisonTypeListOptions,
@ -105,7 +103,7 @@ function FormFieldTabValidationRules({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaPlusSquare />}
onClick={() => setItemIndex(-1)} onClick={() => setItemIndex(-1)}
/> />
</Th> </Th>
@ -129,7 +127,7 @@ function FormFieldTabValidationRules({
type="button" type="button"
size="xs" size="xs"
title="Edit" title="Edit"
icon={<FiEdit3 />} icon={<FaEdit />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setItemIndex(index) setItemIndex(index)
@ -141,7 +139,7 @@ function FormFieldTabValidationRules({
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrashAlt />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
try { try {
@ -168,12 +166,12 @@ function FormFieldTabValidationRules({
</Td> </Td>
<Td>{row.type}</Td> <Td>{row.type}</Td>
<Td>{row.message}</Td> <Td>{row.message}</Td>
<Td>{row.ignoreEmptyValue && <MdCheck />}</Td> <Td>{row.ignoreEmptyValue && <FaCheck />}</Td>
<Td>{row.reevaluate && <MdCheck />}</Td> <Td>{row.reevaluate && <FaCheck />}</Td>
<Td>{row.pattern}</Td> <Td>{row.pattern}</Td>
<Td>{row.min?.toString()}</Td> <Td>{row.min?.toString()}</Td>
<Td>{row.max?.toString()}</Td> <Td>{row.max?.toString()}</Td>
<Td>{row.trim && <MdCheck />}</Td> <Td>{row.trim && <FaCheck />}</Td>
</Tr> </Tr>
))} ))}
</TBody> </TBody>

14
ui/src/views/admin/listForm/edit/form-fields/FormFields.tsx
View file

@ -36,9 +36,7 @@ import setNull from '@/utils/setNull'
import classNames from 'classnames' import classNames from 'classnames'
import { Field, FieldProps, Form, Formik, FormikHelpers } from 'formik' import { Field, FieldProps, Form, Formik, FormikHelpers } from 'formik'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { FiCopy, FiEyeOff, FiX } from 'react-icons/fi' import { FaFileMedical, FaCopy, FaEyeSlash, FaMinus, FaTimes } from 'react-icons/fa';
import { HiOutlineDocumentAdd } from 'react-icons/hi'
import { MdDelete } from 'react-icons/md'
import { number, object, string } from 'yup' import { number, object, string } from 'yup'
import FormFieldEdit from './FormFieldEdit' import FormFieldEdit from './FormFieldEdit'
import { dbSourceTypeOptions } from '../options' import { dbSourceTypeOptions } from '../options'
@ -305,7 +303,7 @@ function FormFields({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileMedical />}
onClick={() => { onClick={() => {
setIsNewField(true) setIsNewField(true)
setRow({} as ColumnFormatEditDto) setRow({} as ColumnFormatEditDto)
@ -317,7 +315,7 @@ function FormFields({
type="button" type="button"
size="xs" size="xs"
title="Copy" title="Copy"
icon={<FiCopy />} icon={<FaCopy />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
setIsCopyField(true) setIsCopyField(true)
@ -350,7 +348,7 @@ function FormFields({
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaMinus />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
if (field.id) { if (field.id) {
@ -359,8 +357,8 @@ function FormFields({
}} }}
/> />
<span>{field.listOrderNo}</span> <span>{field.listOrderNo}</span>
<span>{!field?.visible && <FiEyeOff />}</span> <span>{!field?.visible && <FaEyeSlash />}</span>
<span>{!field?.isActive && <FiX />}</span> <span>{!field?.isActive && <FaTimes />}</span>
</Td> </Td>
<Td>{field.fieldName}</Td> <Td>{field.fieldName}</Td>
<Td className="flex items-center space-x-1"> <Td className="flex items-center space-x-1">

19
ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogEditForm.tsx
View file

@ -19,11 +19,10 @@ import { Field, FieldArray, FieldProps, Form, Formik } from 'formik'
import groupBy from 'lodash/groupBy' import groupBy from 'lodash/groupBy'
import { Dispatch, SetStateAction, useEffect, useState } from 'react' import { Dispatch, SetStateAction, useEffect, useState } from 'react'
import { import {
HiOutlineDocumentAdd, FaCalendarPlus,
HiOutlineDocumentRemove, FaCalendarMinus,
HiOutlineFolderOpen, FaTag,
HiTag, } from 'react-icons/fa'
} from 'react-icons/hi'
import { number, object, string } from 'yup' import { number, object, string } from 'yup'
import { import {
columnEditorTypeListOptions, columnEditorTypeListOptions,
@ -369,7 +368,7 @@ function JsonRowOpDialogEditForm({
type="button" type="button"
size="xs" size="xs"
title="Options" title="Options"
icon={<HiTag />} icon={<FaTag />}
onClick={() => onClick={() =>
setIsOpenOptionsDialog({ setIsOpenOptionsDialog({
...isOpenOptionsDialog, ...isOpenOptionsDialog,
@ -523,7 +522,7 @@ function JsonRowOpDialogEditForm({
type="button" type="button"
size="xs" size="xs"
title="Options" title="Options"
icon={<HiTag />} icon={<FaTag />}
onClick={() => onClick={() =>
setIsOpenOptionsDialog({ setIsOpenOptionsDialog({
...isOpenOptionsDialog, ...isOpenOptionsDialog,
@ -699,7 +698,7 @@ function JsonRowOpDialogEditForm({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentRemove />} icon={<FaCalendarMinus />}
onClick={() => { onClick={() => {
arrayHelpers.remove(index) arrayHelpers.remove(index)
}} }}
@ -710,7 +709,7 @@ function JsonRowOpDialogEditForm({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaCalendarPlus />}
onClick={() => { onClick={() => {
arrayHelpers.insert(index + 1, '') arrayHelpers.insert(index + 1, '')
}} }}
@ -725,7 +724,7 @@ function JsonRowOpDialogEditForm({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaCalendarPlus />}
onClick={() => { onClick={() => {
arrayHelpers.push('') arrayHelpers.push('')
}} }}

11
ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogSubForm.tsx
View file

@ -14,7 +14,10 @@ import { useStoreActions } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import { Field, FieldArray, FieldProps, Form, Formik } from 'formik' import { Field, FieldArray, FieldProps, Form, Formik } from 'formik'
import { Dispatch, SetStateAction } from 'react' import { Dispatch, SetStateAction } from 'react'
import { HiOutlineDocumentAdd, HiOutlineDocumentRemove } from 'react-icons/hi' import {
FaCalendarPlus,
FaCalendarMinus,
} from 'react-icons/fa'
import { object, string } from 'yup' import { object, string } from 'yup'
import { tabTypeOptions } from '../options' import { tabTypeOptions } from '../options'
import { JsonRowDialogData } from './types' import { JsonRowDialogData } from './types'
@ -209,7 +212,7 @@ function JsonRowOpDialogSubForm({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentRemove />} icon={<FaCalendarMinus />}
onClick={() => { onClick={() => {
arrayHelpers.remove(index) arrayHelpers.remove(index)
}} }}
@ -220,7 +223,7 @@ function JsonRowOpDialogSubForm({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaCalendarPlus />}
onClick={() => { onClick={() => {
arrayHelpers.insert(index + 1, '') arrayHelpers.insert(index + 1, '')
}} }}
@ -235,7 +238,7 @@ function JsonRowOpDialogSubForm({
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaCalendarPlus />}
onClick={() => { onClick={() => {
arrayHelpers.push('') arrayHelpers.push('')
}} }}

43
ui/src/views/admin/organization-unit/OrganizationUnits.tsx
View file

@ -52,18 +52,21 @@ import { memo, Suspense, useEffect, useMemo, useState } from 'react'
import { NodeApi, NodeRendererProps } from 'react-arborist' import { NodeApi, NodeRendererProps } from 'react-arborist'
import { Tree } from 'react-arborist/dist/module/components/tree' import { Tree } from 'react-arborist/dist/module/components/tree'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { FaFolder, FaMinusCircle, FaPlusCircle, FaTrash } from 'react-icons/fa'
import { HiBadgeCheck, HiUser } from 'react-icons/hi'
import { import {
MdAccountTree, FaCheckCircle,
MdAddModerator, FaUser,
MdAdUnits, FaFolder,
MdDelete, FaMinusCircle,
MdEdit, FaPlusCircle,
MdGroup, FaTrash,
MdPersonAdd, FaSitemap,
MdSupervisedUserCircle, FaCogs,
} from 'react-icons/md' FaTrashAlt,
FaEdit,
FaUsers,
FaUserPlus,
FaUserShield,
} from 'react-icons/fa'
import { object, string } from 'yup' import { object, string } from 'yup'
const schema = object().shape({ const schema = object().shape({
@ -429,19 +432,19 @@ const OrganizationUnits = () => {
onClick={() => setIsMoveAllUsersOpen(true)} onClick={() => setIsMoveAllUsersOpen(true)}
title={translate('::Abp.Identity.OrganizationUnit.MoveAllUsers')} title={translate('::Abp.Identity.OrganizationUnit.MoveAllUsers')}
> >
<MdSupervisedUserCircle size="20" color="#2d6da3" /> <FaUserPlus size="20" color="#2d6da3" />
</button> </button>
<button <button
onClick={() => node.edit()} onClick={() => node.edit()}
title={translate('::Abp.Identity.OrganizationUnit.Rename')} title={translate('::Abp.Identity.OrganizationUnit.Rename')}
> >
<MdEdit size="20" className="text-teal-900" /> <FaEdit size="20" className="text-teal-900" />
</button> </button>
<button <button
onClick={() => setDeleteRow({ id: node.data.id, name: 'Organization Unit' })} onClick={() => setDeleteRow({ id: node.data.id, name: 'Organization Unit' })}
title={translate('::Delete')} title={translate('::Delete')}
> >
<MdDelete size="20" className="text-red-500" /> <FaTrashAlt size="20" className="text-red-500" />
</button> </button>
</div> </div>
</div> </div>
@ -476,7 +479,7 @@ const OrganizationUnits = () => {
}) })
}} }}
> >
{activeOu ? <MdAccountTree /> : <MdAdUnits />} {activeOu ? <FaSitemap /> : <FaCogs />}
</Button> </Button>
<Button <Button
@ -488,7 +491,7 @@ const OrganizationUnits = () => {
setIsMoveAllUsersOpen(true) setIsMoveAllUsersOpen(true)
}} }}
> >
<MdGroup /> <FaUsers />
</Button> </Button>
</div> </div>
} }
@ -528,10 +531,10 @@ const OrganizationUnits = () => {
<Card className="md:w-9/12 w-full"> <Card className="md:w-9/12 w-full">
<Tabs defaultValue="users"> <Tabs defaultValue="users">
<TabList> <TabList>
<TabNav value="users" icon={<HiUser />}> <TabNav value="users" icon={<FaUser />}>
{translate('::AbpIdentity.Users')} {translate('::AbpIdentity.Users')}
</TabNav> </TabNav>
<TabNav value="roles" icon={<HiBadgeCheck />}> <TabNav value="roles" icon={<FaCheckCircle />}>
{translate('::AbpIdentity.Roles')} {translate('::AbpIdentity.Roles')}
</TabNav> </TabNav>
</TabList> </TabList>
@ -549,7 +552,7 @@ const OrganizationUnits = () => {
setUserSelectionList(response.data?.items ?? []) setUserSelectionList(response.data?.items ?? [])
}} }}
> >
<MdPersonAdd /> <FaUserPlus />
</Button> </Button>
} }
> >
@ -619,7 +622,7 @@ const OrganizationUnits = () => {
setRoleSelectionList(response.data?.items ?? []) setRoleSelectionList(response.data?.items ?? [])
}} }}
> >
<MdPersonAdd /> <FaUserPlus />
</Button> </Button>
} }
> >

17
ui/src/views/admin/profile/components/General.tsx
View file

@ -19,8 +19,7 @@ import {
CropperRef, CropperRef,
} from 'react-advanced-cropper' } from 'react-advanced-cropper'
import 'react-advanced-cropper/dist/style.css' import 'react-advanced-cropper/dist/style.css'
import { BsWhatsapp } from 'react-icons/bs' import { FaFacebookMessenger, FaEnvelope, FaTrashAlt, FaUserCircle, FaPhone, FaPlus } from 'react-icons/fa';
import { HiMail, HiOutlineTrash, HiOutlineUserCircle, HiPhone, HiPlus } from 'react-icons/hi'
import * as Yup from 'yup' import * as Yup from 'yup'
import isEmpty from 'lodash/isEmpty' import isEmpty from 'lodash/isEmpty'
import FormRow from '@/views/shared/FormRow' import FormRow from '@/views/shared/FormRow'
@ -175,7 +174,7 @@ const General = () => {
<Input <Input
type="text" type="text"
disabled disabled
prefix={<HiMail className="text-xl" />} prefix={<FaEnvelope className="text-xl" />}
value={profileData?.email} value={profileData?.email}
></Input> ></Input>
</FormRow> </FormRow>
@ -187,7 +186,7 @@ const General = () => {
<Input <Input
type="text" type="text"
disabled disabled
prefix={<HiPhone className="text-xl" />} prefix={<FaPhone className="text-xl" />}
value={profileData?.phoneNumber} value={profileData?.phoneNumber}
></Input> ></Input>
</FormRow> </FormRow>
@ -195,7 +194,7 @@ const General = () => {
<Input <Input
type="text" type="text"
disabled disabled
prefix={<BsWhatsapp className="text-xl" />} prefix={<FaFacebookMessenger className="text-xl" />}
value={profileData?.extraProperties?.['RocketUsername'] as string | undefined} value={profileData?.extraProperties?.['RocketUsername'] as string | undefined}
></Input> ></Input>
</FormRow> </FormRow>
@ -210,7 +209,7 @@ const General = () => {
name="name" name="name"
placeholder="Name" placeholder="Name"
component={Input} component={Input}
prefix={<HiOutlineUserCircle className="text-xl" />} prefix={<FaUserCircle className="text-xl" />}
/> />
</FormRow> </FormRow>
<FormRow <FormRow
@ -224,7 +223,7 @@ const General = () => {
name="surname" name="surname"
placeholder="Last Name" placeholder="Last Name"
component={Input} component={Input}
prefix={<HiOutlineUserCircle className="text-xl" />} prefix={<FaUserCircle className="text-xl" />}
/> />
</FormRow> </FormRow>
<FormRow name="avatar" label="Avatar" alignCenter={false} {...validatorProps}> <FormRow name="avatar" label="Avatar" alignCenter={false} {...validatorProps}>
@ -264,12 +263,12 @@ const General = () => {
beforeUpload={beforeUpload} beforeUpload={beforeUpload}
onChange={onChooseImage} onChange={onChooseImage}
> >
<Button icon={<HiPlus />} type="button"></Button> <Button icon={<FaPlus />} type="button"></Button>
</Upload> </Upload>
<Button <Button
type="button" type="button"
className="my-2" className="my-2"
icon={<HiOutlineTrash />} icon={<FaTrashAlt />}
onClick={() => setImage(undefined)} onClick={() => setImage(undefined)}
></Button> ></Button>
</div> </div>

4
ui/src/views/admin/profile/components/NotificationSettings.tsx
View file

@ -10,7 +10,7 @@ import {
import classNames from 'classnames' import classNames from 'classnames'
import isEmpty from 'lodash/isEmpty' import isEmpty from 'lodash/isEmpty'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { MdRestore } from 'react-icons/md' import { FaHistory } from 'react-icons/fa';
const { Tr, Th, Td, THead, TBody } = Table const { Tr, Th, Td, THead, TBody } = Table
@ -101,7 +101,7 @@ const NotificationSettings = () => {
type="button" type="button"
size="xs" size="xs"
title="Reset" title="Reset"
icon={<MdRestore />} icon={<FaHistory />}
onClick={async (e) => { onClick={async (e) => {
e.preventDefault() e.preventDefault()
resetMyNotifications(a) resetMyNotifications(a)

14
ui/src/views/admin/profile/components/Password.tsx
View file

@ -8,11 +8,7 @@ import { useLocalization } from '@/utils/hooks/useLocalization'
import FormDesription from '@/views/shared/FormDesription' import FormDesription from '@/views/shared/FormDesription'
import FormRow from '@/views/shared/FormRow' import FormRow from '@/views/shared/FormRow'
import { Field, Form, Formik } from 'formik' import { Field, Form, Formik } from 'formik'
import { import { FaDesktop, FaMobileAlt, FaTabletAlt } from 'react-icons/fa';
HiOutlineDesktopComputer,
HiOutlineDeviceMobile,
HiOutlineDeviceTablet,
} from 'react-icons/hi'
import * as Yup from 'yup' import * as Yup from 'yup'
type LoginHistory = { type LoginHistory = {
@ -31,13 +27,13 @@ type PasswordFormModel = {
const LoginHistoryIcon = ({ type }: { type: string }) => { const LoginHistoryIcon = ({ type }: { type: string }) => {
switch (type) { switch (type) {
case 'Desktop': case 'Desktop':
return <HiOutlineDesktopComputer /> return <FaDesktop />
case 'Mobile': case 'Mobile':
return <HiOutlineDeviceMobile /> return <FaMobileAlt />
case 'Tablet': case 'Tablet':
return <HiOutlineDeviceTablet /> return <FaTabletAlt />
default: default:
return <HiOutlineDesktopComputer /> return <FaDesktop />
} }
} }

13
ui/src/views/admin/user-management/Details.tsx
View file

@ -33,8 +33,7 @@ import dayjs from 'dayjs'
import { Field, FieldArray, FieldProps, Form, Formik, FormikHelpers } from 'formik' import { Field, FieldArray, FieldProps, Form, Formik, FormikHelpers } from 'formik'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { HiOutlineLockOpen, HiOutlineUser, HiOutlineDocumentAdd } from 'react-icons/hi' import { FaLockOpen, FaUser, FaFileAlt, FaTrashAlt } from 'react-icons/fa';
import { MdDelete } from 'react-icons/md'
import { useParams } from 'react-router-dom' import { useParams } from 'react-router-dom'
import * as Yup from 'yup' import * as Yup from 'yup'
import { SelectBoxOption } from '@/shared/types' import { SelectBoxOption } from '@/shared/types'
@ -112,13 +111,13 @@ function UserDetails() {
<Container> <Container>
<Tabs defaultValue="user"> <Tabs defaultValue="user">
<TabList> <TabList>
<TabNav value="user" icon={<HiOutlineUser />}> <TabNav value="user" icon={<FaUser />}>
{translate('::Abp.Identity.User.UserInformation')} {translate('::Abp.Identity.User.UserInformation')}
</TabNav> </TabNav>
<TabNav value="lockout" icon={<HiOutlineLockOpen />}> <TabNav value="lockout" icon={<FaLockOpen />}>
{translate('::Abp.Identity.User.LockoutManagement')} {translate('::Abp.Identity.User.LockoutManagement')}
</TabNav> </TabNav>
<TabNav value="claimTypes" icon={<HiOutlineLockOpen />}> <TabNav value="claimTypes" icon={<FaFileAlt />}>
{translate('::Abp.Identity.User.ClaimTypes')} {translate('::Abp.Identity.User.ClaimTypes')}
</TabNav> </TabNav>
</TabList> </TabList>
@ -637,7 +636,7 @@ function UserDetails() {
type="button" type="button"
size="xs" size="xs"
title="Add" title="Add"
icon={<HiOutlineDocumentAdd />} icon={<FaFileAlt />}
onClick={async (e) => { onClick={async (e) => {
setOpen(true) setOpen(true)
}} }}
@ -659,7 +658,7 @@ function UserDetails() {
type="button" type="button"
size="xs" size="xs"
title="Delete" title="Delete"
icon={<MdDelete />} icon={<FaTrashAlt />}
onClick={() => setConfirmDeleteClaim(claim)} onClick={() => setConfirmDeleteClaim(claim)}
/> />
</Td> </Td>

4
ui/src/views/dashboard/WidgetFilter.tsx
View file

@ -1,6 +1,6 @@
import DatePickerRange from '@/components/ui/DatePicker/DatePickerRange' import DatePickerRange from '@/components/ui/DatePicker/DatePickerRange'
import Button from '@/components/ui/Button' import Button from '@/components/ui/Button'
import { HiOutlineFilter } from 'react-icons/hi' import { FaFilter } from 'react-icons/fa';
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import dayjs from 'dayjs' import dayjs from 'dayjs'
@ -34,7 +34,7 @@ const WidgetFilter = ({
style={{ width: '100%' }} style={{ width: '100%' }}
onChange={handleDateChange} onChange={handleDateChange}
/> />
<Button size="sm" icon={<HiOutlineFilter />} onClick={onFilter}> <Button size="sm" icon={<FaFilter />} onClick={onFilter}>
Filter Filter
</Button> </Button>
</div> </div>

12
ui/src/views/form/FormButtons.tsx
View file

@ -3,7 +3,7 @@ import navigationIcon from '@/configs/navigation-icon.config'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import CustomStore from 'devextreme/data/custom_store' import CustomStore from 'devextreme/data/custom_store'
import { useState } from 'react' import { useState } from 'react'
import { MdAdd, MdDelete, MdEdit, MdOutlineArticle, MdSave } from 'react-icons/md' import { FaPlus, FaTrash, FaEdit, FaFileAlt, FaSave } from 'react-icons/fa';
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { GridColumnData } from '../list/GridColumnData' import { GridColumnData } from '../list/GridColumnData'
import { useToolbar } from '../list/useToolbar' import { useToolbar } from '../list/useToolbar'
@ -170,7 +170,7 @@ const FormButtons = (props: {
}} }}
{...(permissions.d ? {} : { disabled: true })} {...(permissions.d ? {} : { disabled: true })}
> >
<MdDelete /> <FaTrash />
</Button> </Button>
)} )}
{mode != 'new' && ( {mode != 'new' && (
@ -187,7 +187,7 @@ const FormButtons = (props: {
}} }}
{...(permissions.c ? {} : { disabled: true })} {...(permissions.c ? {} : { disabled: true })}
> >
<MdAdd /> <FaPlus />
</Button> </Button>
)} )}
{mode == 'view' && ( {mode == 'view' && (
@ -204,7 +204,7 @@ const FormButtons = (props: {
}} }}
{...(permissions.u ? {} : { disabled: true })} {...(permissions.u ? {} : { disabled: true })}
> >
<MdEdit /> <FaEdit />
</Button> </Button>
)} )}
{(mode == 'edit' || (onActionView && mode == 'new')) && ( {(mode == 'edit' || (onActionView && mode == 'new')) && (
@ -221,7 +221,7 @@ const FormButtons = (props: {
}} }}
{...(permissions.r ? {} : { disabled: true })} {...(permissions.r ? {} : { disabled: true })}
> >
<MdOutlineArticle /> <FaFileAlt />
</Button> </Button>
)} )}
{(mode == 'edit' || mode == 'new') && ( {(mode == 'edit' || mode == 'new') && (
@ -232,7 +232,7 @@ const FormButtons = (props: {
onClick={handleSubmit} onClick={handleSubmit}
{...(permissions.c || permissions.u ? {} : { disabled: true })} {...(permissions.c || permissions.u ? {} : { disabled: true })}
> >
<MdSave /> <FaSave />
</Button> </Button>
)} )}
</div> </div>

4
ui/src/views/form/SubForms.tsx
View file

@ -3,7 +3,7 @@ import TabContent from '@/components/ui/Tabs/TabContent'
import TabList from '@/components/ui/Tabs/TabList' import TabList from '@/components/ui/Tabs/TabList'
import TabNav from '@/components/ui/Tabs/TabNav' import TabNav from '@/components/ui/Tabs/TabNav'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { MdBarChart, MdList } from 'react-icons/md' import { FaChartBar, FaList } from 'react-icons/fa';
import { useLocation, useNavigate } from 'react-router-dom' import { useLocation, useNavigate } from 'react-router-dom'
import Grid from '../list/Grid' import Grid from '../list/Grid'
import Chart from '../chart/Chart' import Chart from '../chart/Chart'
@ -81,7 +81,7 @@ const SubForms = (props: {
<TabNav <TabNav
key={subForm.code} key={subForm.code}
value={subForm.code} value={subForm.code}
icon={subForm.tabType == SubFormTabTypeEnum.List ? <MdList /> : <MdBarChart />} icon={subForm.tabType == SubFormTabTypeEnum.List ? <FaList /> : <FaChartBar />}
> >
{subForm.tabTitle} {subForm.tabTitle}
</TabNav> </TabNav>

4
ui/src/views/settings/Settings.tsx
View file

@ -21,7 +21,7 @@ import { Field, FieldProps, Form, Formik } from 'formik'
import isEmpty from 'lodash/isEmpty' import isEmpty from 'lodash/isEmpty'
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useState } from 'react'
import { Helmet } from 'react-helmet' import { Helmet } from 'react-helmet'
import { HiOutlineQuestionMarkCircle } from 'react-icons/hi' import { FaQuestionCircle } from 'react-icons/fa';
type Option = { type Option = {
value: string value: string
@ -178,7 +178,7 @@ const Settings = () => {
label={translate('::' + setting.name) + ' (' + setting.providers + ')'} label={translate('::' + setting.name) + ' (' + setting.providers + ')'}
extra={ extra={
<Tooltip title={translate('::' + setting.description)}> <Tooltip title={translate('::' + setting.description)}>
<HiOutlineQuestionMarkCircle className="text-lg cursor-pointer ml-1" /> <FaQuestionCircle className="text-lg cursor-pointer ml-1" />
</Tooltip> </Tooltip>
} }
> >

18
ui/src/views/shared/UiDialog.tsx
View file

@ -5,11 +5,11 @@ import Dialog from '@/components/ui/Dialog'
import { useLocalization } from '@/utils/hooks/useLocalization' import { useLocalization } from '@/utils/hooks/useLocalization'
import type { ReactNode } from 'react' import type { ReactNode } from 'react'
import { import {
HiCheckCircle, FaCheckCircle,
HiOutlineExclamation, FaExclamationTriangle,
HiOutlineExclamationCircle, FaExclamationCircle,
HiOutlineInformationCircle, FaInfoCircle,
} from 'react-icons/hi' } from 'react-icons/fa';
type StatusType = 'info' | 'success' | 'warning' | 'danger' type StatusType = 'info' | 'success' | 'warning' | 'danger'
@ -32,7 +32,7 @@ const StatusIcon = ({ status }: { status: StatusType }) => {
shape="circle" shape="circle"
> >
<span className="text-2xl"> <span className="text-2xl">
<HiOutlineInformationCircle /> <FaInfoCircle />
</span> </span>
</Avatar> </Avatar>
) )
@ -43,7 +43,7 @@ const StatusIcon = ({ status }: { status: StatusType }) => {
shape="circle" shape="circle"
> >
<span className="text-2xl"> <span className="text-2xl">
<HiCheckCircle /> <FaCheckCircle />
</span> </span>
</Avatar> </Avatar>
) )
@ -51,7 +51,7 @@ const StatusIcon = ({ status }: { status: StatusType }) => {
return ( return (
<Avatar className="text-amber-600 bg-amber-100 dark:text-amber-100" shape="circle"> <Avatar className="text-amber-600 bg-amber-100 dark:text-amber-100" shape="circle">
<span className="text-2xl"> <span className="text-2xl">
<HiOutlineExclamationCircle /> <FaExclamationCircle />
</span> </span>
</Avatar> </Avatar>
) )
@ -59,7 +59,7 @@ const StatusIcon = ({ status }: { status: StatusType }) => {
return ( return (
<Avatar className="text-red-600 bg-red-100 dark:text-red-100" shape="circle"> <Avatar className="text-red-600 bg-red-100 dark:text-red-100" shape="circle">
<span className="text-2xl"> <span className="text-2xl">
<HiOutlineExclamation /> <FaExclamationTriangle />
</span> </span>
</Avatar> </Avatar>
) )