-
+ {}} variant="text">
+
+
{icon} {titleComponent || label}{' '}
diff --git a/src/components/Elements/CardWithActions/CardItemWithActions.tsx b/src/components/Elements/CardWithActions/CardItemWithActions.tsx
index ca674a2f..ac2825e5 100644
--- a/src/components/Elements/CardWithActions/CardItemWithActions.tsx
+++ b/src/components/Elements/CardWithActions/CardItemWithActions.tsx
@@ -8,6 +8,7 @@ import { Attributes, trackLinkBookmark, trackLinkUnBookmark } from 'src/lib/anal
import { useBookmarks } from 'src/stores/bookmarks'
import { useUserPreferences } from 'src/stores/preferences'
import { BaseEntry } from 'src/types'
+import { CircleButton } from '../Button'
type CardItemWithActionsProps = {
item: BaseEntry
@@ -80,27 +81,31 @@ export const CardItemWithActions = ({
shareData={shareModalData}
/>
{cardItem}
-
+
{source === 'ai' && (
-
+
)}
-
-
+
)
diff --git a/src/components/Elements/ChipsSet/ChipsSet.tsx b/src/components/Elements/ChipsSet/ChipsSet.tsx
index b215c8e5..9f68ae64 100644
--- a/src/components/Elements/ChipsSet/ChipsSet.tsx
+++ b/src/components/Elements/ChipsSet/ChipsSet.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx'
import { useState } from 'react'
import { IoIosClose } from 'react-icons/io'
import { Option } from 'src/types'
+import { Button } from '../Button'
import './chipset.css'
type ChipProps = {
option: Option
@@ -12,17 +13,28 @@ type ChipProps = {
const Chip = ({ option, onSelect, onRemove, active = false }: ChipProps) => {
return (
-
-
- {option.removeable && onRemove && (
-
- )}
-
+
)
}
type ChangeAction = {
diff --git a/src/components/Elements/ChipsSet/chipset.css b/src/components/Elements/ChipsSet/chipset.css
index 04b0f690..ed863fa7 100644
--- a/src/components/Elements/ChipsSet/chipset.css
+++ b/src/components/Elements/ChipsSet/chipset.css
@@ -37,13 +37,13 @@
filter: brightness(95%);
}
-.chip .chipIcon {
+.chipIcon {
margin: 0;
padding: 0;
line-height: 14px;
}
-.chip .chipIcon > img,
-.chip .chipIcon > svg {
+.chipIcon > img,
+.chipIcon > svg {
background-color: white;
color: black;
padding: 2px;
diff --git a/src/components/Elements/Modal/ConfirmModal.tsx b/src/components/Elements/Modal/ConfirmModal.tsx
index a1e70b00..a6eab276 100644
--- a/src/components/Elements/Modal/ConfirmModal.tsx
+++ b/src/components/Elements/Modal/ConfirmModal.tsx
@@ -29,12 +29,8 @@ export const ConfirmModal = ({
{description}
-
- Cancel
-
-
- Confirm
-
+ Cancel
+ Confirm
diff --git a/src/components/Elements/Modal/Modal.tsx b/src/components/Elements/Modal/Modal.tsx
index 46515014..f97dbf66 100644
--- a/src/components/Elements/Modal/Modal.tsx
+++ b/src/components/Elements/Modal/Modal.tsx
@@ -1,6 +1,7 @@
import clsx from 'clsx'
import { VscClose } from 'react-icons/vsc'
import ReactModal from 'react-modal'
+import { CircleButton } from '../Button'
type ModalProps = {
showModal: boolean
onClose: () => void
@@ -34,12 +35,9 @@ export const Modal = ({ showModal, className, header, onClose, children }: Modal
{header.icon}
{header.title}
-
onClose()}
- aria-label="Close share modal">
+ onClose()} aria-label="Close share modal">
-
+
{children}
diff --git a/src/components/Elements/SearchBar/SearchBar.tsx b/src/components/Elements/SearchBar/SearchBar.tsx
index f493dbea..28ee15be 100644
--- a/src/components/Elements/SearchBar/SearchBar.tsx
+++ b/src/components/Elements/SearchBar/SearchBar.tsx
@@ -28,12 +28,14 @@ export const SearchBar = () => {
}, [])
return (
-
diff --git a/src/components/Elements/Steps/Steps.tsx b/src/components/Elements/Steps/Steps.tsx
index 7814cdfb..5c3d541f 100644
--- a/src/components/Elements/Steps/Steps.tsx
+++ b/src/components/Elements/Steps/Steps.tsx
@@ -1,4 +1,5 @@
import { createElement, useState } from 'react'
+import { CircleButton } from '../Button'
import './steps.css'
type StepStatus = {
@@ -68,8 +69,7 @@ export const Steps =
({
}
}
- const onStepClicked = (e: React.MouseEvent, index: number) => {
- e.preventDefault()
+ const onStepClicked = (index: number) => {
setCurrentStep(index)
}
@@ -93,34 +93,36 @@ export const Steps = ({
return (
{stepsStatuses[index] === 'completed' || stepsStatuses[index] === 'current' ? (
- onStepClicked(e, index)} className="step active">
- {index + 1}
-
+
+
onStepClicked(index)}>
+ {index + 1}
+
{index !== steps.length - 1 &&
}
-
+
) : (
- {
- e.preventDefault()
- if (skipSteps) {
- onStepClicked(e, index)
- }
- }}
- className="step">
- {index + 1}
+
+
{
+ if (skipSteps) {
+ onStepClicked(index)
+ }
+ }}>
+ {index + 1}
+
{index !== steps.length - 1 &&
}
-
+
)}
)
})}
- {renderStep()}
+ {renderStep()}
)
}
diff --git a/src/components/Elements/UserTags/UserTags.tsx b/src/components/Elements/UserTags/UserTags.tsx
index c07bccb7..0d6ea52b 100644
--- a/src/components/Elements/UserTags/UserTags.tsx
+++ b/src/components/Elements/UserTags/UserTags.tsx
@@ -6,14 +6,19 @@ export const UserTags = () => {
const { userSelectedTags } = useUserPreferences()
return (
-
+
{userSelectedTags.map((tag, index) => (
-
+
{tag.value}
))}
-
-
+
+
)
diff --git a/src/components/Layout/DNDLayout/DNDLayout.tsx b/src/components/Layout/DNDLayout/DNDLayout.tsx
index 333ce7e8..43ce3e3e 100644
--- a/src/components/Layout/DNDLayout/DNDLayout.tsx
+++ b/src/components/Layout/DNDLayout/DNDLayout.tsx
@@ -1,6 +1,6 @@
import { useLayoutEffect, useRef } from 'react'
import { BsChevronDown } from 'react-icons/bs'
-import { SearchBarWithLogo } from 'src/components/Elements'
+import { Button, SearchBarWithLogo } from 'src/components/Elements'
import './DNDLayout.css'
export const DNDLayout = () => {
@@ -23,10 +23,13 @@ export const DNDLayout = () => {
-