binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

choe: icon list sectoin improvement (#4890)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2024-06-20 17:08:49 +05:30 • committed by GitHub
parent 00de199a8d
commit d638ed8882
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 142 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/ui/src/emoji/emoji-icon-picker-new.tsx
View file

@ -112,7 +112,7 @@ export const EmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
}} }}
/> />
</Tab.Panel> </Tab.Panel>
<Tab.Panel className="h-80 w-full"> <Tab.Panel className="h-80 w-full relative overflow-hidden overflow-y-auto">
<LucideIconsList <LucideIconsList
defaultColor={defaultIconColor} defaultColor={defaultIconColor}
onChange={(val) => { onChange={(val) => {

2
packages/ui/src/emoji/emoji-icon-picker.tsx
View file

@ -112,7 +112,7 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
}} }}
/> />
</Tab.Panel> </Tab.Panel>
<Tab.Panel className="h-80 w-full"> <Tab.Panel className="h-80 w-full relative overflow-hidden overflow-y-auto">
<IconsList <IconsList
defaultColor={defaultIconColor} defaultColor={defaultIconColor}
onChange={(val) => { onChange={(val) => {

2
packages/ui/src/emoji/icons-list.tsx
View file

@ -41,6 +41,7 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
return ( return (
<> <>
<div className="flex flex-col sticky top-0 bg-custom-background-100">
<div className="flex items-center px-2 py-[15px] w-full "> <div className="flex items-center px-2 py-[15px] w-full ">
<div <div
className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`} className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
@ -116,6 +117,7 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
<InfoIcon className="h-3 w-3" /> <InfoIcon className="h-3 w-3" />
<p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p> <p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p>
</div> </div>
</div>
<div className="grid grid-cols-8 gap-1 px-2.5 justify-items-center mt-2"> <div className="grid grid-cols-8 gap-1 px-2.5 justify-items-center mt-2">
{filteredArray.map((icon) => ( {filteredArray.map((icon) => (
<button <button

2
packages/ui/src/emoji/lucide-icons-list.tsx
View file

@ -31,6 +31,7 @@ export const LucideIconsList: React.FC<TIconsListProps> = (props) => {
return ( return (
<> <>
<div className="flex flex-col sticky top-0 bg-custom-background-100">
<div className="flex items-center px-2 py-[15px] w-full "> <div className="flex items-center px-2 py-[15px] w-full ">
<div <div
className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`} className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
@ -106,6 +107,7 @@ export const LucideIconsList: React.FC<TIconsListProps> = (props) => {
<InfoIcon className="h-3 w-3" /> <InfoIcon className="h-3 w-3" />
<p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p> <p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p>
</div> </div>
</div>
<div className="grid grid-cols-8 gap-1 px-2.5 justify-items-center mt-2"> <div className="grid grid-cols-8 gap-1 px-2.5 justify-items-center mt-2">
{filteredArray.map((icon) => ( {filteredArray.map((icon) => (
<button <button