+ {props.title && (
+
+ )}
+
);
});
diff --git a/src/components/Form/Settings/Radio/Radio.scss b/src/components/Form/Settings/Radio/Radio.scss
new file mode 100644
index 00000000..2bd09236
--- /dev/null
+++ b/src/components/Form/Settings/Radio/Radio.scss
@@ -0,0 +1,159 @@
+@use 'scss/variables' as *;
+@use 'scss/mixins' as *;
+
+@include keyframes(radioDotScale) {
+ 0% {
+ transform: scale(0);
+ opacity: 0;
+ }
+
+ 50% {
+ transform: scale(1.2);
+ }
+
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+.radio-group {
+ width: 100%;
+ margin-top: 10px;
+
+ .radio-title {
+ font-weight: bold;
+ font-size: 1.17rem;
+ margin-bottom: 12px;
+ display: block;
+
+ @include themed {
+ color: t($color);
+ }
+ }
+
+ .radio-title-small {
+ font-weight: bold;
+ font-size: 1rem;
+ margin-bottom: 10px;
+ display: block;
+
+ @include themed {
+ color: t($color);
+ }
+ }
+
+ .radio-options {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .radio-option {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ padding: 16px 20px;
+ transition: all 0.2s ease;
+
+ @include themed {
+ background: t($modal-sidebar);
+ border-radius: t($borderRadius);
+ box-shadow: 0 0 0 1px t($modal-sidebarActive);
+
+ &:hover:not(.disabled) {
+ background: t($modal-secondaryColour);
+ transform: translateY(-1px);
+ }
+ }
+
+ &:active:not(.disabled) {
+ transform: translateY(0);
+ }
+
+ &.selected .radio-circle {
+ @include themed {
+ border-color: t($link);
+ }
+ }
+
+ &.disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ pointer-events: none;
+ }
+ }
+
+ .radio-label {
+ flex: 1;
+ font-size: 15px;
+ pointer-events: none;
+
+ @include themed {
+ color: t($color);
+ }
+ }
+
+ .radio-circle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 22px;
+ height: 22px;
+ border-radius: 50%;
+ transition: all 0.2s ease;
+ cursor: pointer;
+ flex-shrink: 0;
+ margin-left: 20px;
+ pointer-events: none;
+
+ @include themed {
+ border: 2px solid t($modal-sidebarActive);
+ background: t($modal-secondaryColour);
+ }
+
+ &:hover:not(.disabled) {
+ transform: scale(1.1);
+ }
+
+ &:active:not(.disabled) {
+ @include themed {
+ box-shadow: 0 0 0 4px rgba(255, 92, 37, 0.1);
+ }
+ }
+ }
+
+ .radio-dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ @include animation(radioDotScale 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55));
+
+ @include themed {
+ background: t($link);
+ }
+ }
+
+ .radio-input {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ margin: 0;
+
+ &:focus-visible + .radio-circle {
+ @include themed {
+ box-shadow: 0 0 0 3px t($link);
+ }
+ }
+
+ &:disabled {
+ cursor: not-allowed;
+ }
+ }
+}
diff --git a/src/components/Form/Settings/SearchInput/SearchInput.jsx b/src/components/Form/Settings/SearchInput/SearchInput.jsx
new file mode 100644
index 00000000..ba2cebb2
--- /dev/null
+++ b/src/components/Form/Settings/SearchInput/SearchInput.jsx
@@ -0,0 +1,23 @@
+import { memo } from 'react';
+import { MdSearch } from 'react-icons/md';
+
+import './SearchInput.scss';
+
+const SearchInput = memo(({ value, onChange, placeholder, fullWidth }) => {
+ return (
+
{props.options.map((option) => (
-
+
+ {value === option.value && }
+
+
))}
-
-
+
+
+ );
+});
+
+SearchInput.displayName = 'SearchInput';
+
+export { SearchInput as default, SearchInput };
diff --git a/src/components/Form/Settings/SearchInput/SearchInput.scss b/src/components/Form/Settings/SearchInput/SearchInput.scss
new file mode 100644
index 00000000..123e25cb
--- /dev/null
+++ b/src/components/Form/Settings/SearchInput/SearchInput.scss
@@ -0,0 +1,48 @@
+@use 'scss/variables' as *;
+
+.search-input-container {
+ position: relative;
+ display: flex;
+ align-items: center;
+ width: 250px;
+
+ &.full-width {
+ width: 100%;
+ }
+
+ .search-input-icon {
+ position: absolute;
+ left: 16px;
+ font-size: 20px;
+ pointer-events: none;
+
+ @include themed {
+ color: t($subColor);
+ }
+ }
+
+ .search-input-field {
+ width: 100%;
+ height: 48px;
+ padding: 0 16px 0 44px;
+ font-size: 15px;
+ outline: none;
+ transition: 0.2s ease;
+
+ @include themed {
+ background: t($modal-sidebar);
+ border: 1px solid t($modal-sidebarActive);
+ border-radius: 24px;
+ color: t($color);
+
+ &:hover,
+ &:focus {
+ border-color: t($color);
+ }
+
+ &::placeholder {
+ color: t($subColor);
+ }
+ }
+ }
+}
diff --git a/src/components/Form/Settings/SearchInput/index.jsx b/src/components/Form/Settings/SearchInput/index.jsx
new file mode 100644
index 00000000..c068bf43
--- /dev/null
+++ b/src/components/Form/Settings/SearchInput/index.jsx
@@ -0,0 +1 @@
+export * from './SearchInput';
diff --git a/src/components/Form/Settings/Slider/Slider.jsx b/src/components/Form/Settings/Slider/Slider.jsx
index 4c88badb..49e42329 100644
--- a/src/components/Form/Settings/Slider/Slider.jsx
+++ b/src/components/Form/Settings/Slider/Slider.jsx
@@ -1,23 +1,20 @@
import variables from 'config/variables';
-import { memo, useState, useCallback } from 'react';
+import { memo, useState, useCallback, useRef } from 'react';
import { toast } from 'react-toastify';
-import { Slider } from '@mui/material';
import { MdRefresh } from 'react-icons/md';
import EventBus from 'utils/eventbus';
+import './Slider.scss';
+
const SliderComponent = memo((props) => {
const [value, setValue] = useState(localStorage.getItem(props.name) || props.default);
+ const animationRef = useRef(null);
- const handleChange = useCallback((e, text) => {
- let newValue = e.target.value;
- newValue = Number(newValue);
-
- if (text) {
- if (newValue === '') {
- setValue(0);
- return;
- }
+ const handleChange = useCallback(
+ (e) => {
+ let newValue = e.target.value;
+ newValue = Number(newValue);
if (newValue > props.max) {
newValue = props.max;
@@ -26,52 +23,104 @@ const SliderComponent = memo((props) => {
if (newValue < props.min) {
newValue = props.min;
}
- }
- localStorage.setItem(props.name, newValue);
- setValue(newValue);
+ localStorage.setItem(props.name, newValue);
+ setValue(newValue);
- if (props.element) {
- if (!document.querySelector(props.element)) {
- document.querySelector('.reminder-info').style.display = 'flex';
- return localStorage.setItem('showReminder', true);
+ if (props.element) {
+ if (!document.querySelector(props.element)) {
+ document.querySelector('.reminder-info').style.display = 'flex';
+ return localStorage.setItem('showReminder', true);
+ }
}
- }
- EventBus.emit('refresh', props.category);
- }, [props]);
+ EventBus.emit('refresh', props.category);
+ },
+ [props],
+ );
const resetItem = useCallback(() => {
- handleChange({
- target: {
- value: props.default || '',
- },
- });
+ if (animationRef.current) {
+ cancelAnimationFrame(animationRef.current);
+ }
+
+ const startValue = Number(value);
+ const endValue = Number(props.default || 0);
+ const duration = 300; // milliseconds
+ const startTime = performance.now();
+
+ const animate = (currentTime) => {
+ const elapsed = currentTime - startTime;
+ const progress = Math.min(elapsed / duration, 1);
+
+ // Easing function for smooth animation
+ const easeOutCubic = 1 - Math.pow(1 - progress, 3);
+
+ const currentValue = startValue + (endValue - startValue) * easeOutCubic;
+ const roundedValue = Math.round(currentValue / (Number(props.step) || 1)) * (Number(props.step) || 1);
+
+ localStorage.setItem(props.name, roundedValue);
+ setValue(roundedValue);
+
+ if (progress < 1) {
+ animationRef.current = requestAnimationFrame(animate);
+ } else {
+ // Ensure we end exactly at the target value
+ localStorage.setItem(props.name, endValue);
+ setValue(endValue);
+ EventBus.emit('refresh', props.category);
+ }
+ };
+
+ animationRef.current = requestAnimationFrame(animate);
toast(variables.getMessage('toasts.reset'));
- }, [handleChange, props.default]);
+ }, [value, props]);
+
+ const percentage =
+ ((Number(value) - Number(props.min)) / (Number(props.max) - Number(props.min))) * 100;
return (
- <>
-
- {props.title}
- {Number(value)}
-
+
+
);
});
diff --git a/src/components/Form/Settings/Slider/Slider.scss b/src/components/Form/Settings/Slider/Slider.scss
new file mode 100644
index 00000000..252bf342
--- /dev/null
+++ b/src/components/Form/Settings/Slider/Slider.scss
@@ -0,0 +1,174 @@
+@use 'scss/variables' as *;
+
+.slider-container {
+ width: 300px;
+ margin-bottom: 30px;
+
+ .slider-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+ }
+
+ .slider-value {
+ font-size: 16px;
+ font-weight: 600;
+
+ @include themed {
+ color: t($color);
+ }
+ }
+
+ .slider-reset {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ cursor: pointer;
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+
+ @include themed {
+ color: t($link);
+ }
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ svg {
+ font-size: 12px;
+ }
+ }
+
+ .slider-wrapper {
+ position: relative;
+ width: 100%;
+ }
+
+ .slider-input {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: 6px;
+ border-radius: 3px;
+ outline: none;
+ cursor: pointer;
+ transition: background 0.3s ease;
+
+ @include themed {
+ background: linear-gradient(
+ to right,
+ t($link) 0%,
+ t($link) var(--slider-percentage),
+ t($modal-sidebarActive) var(--slider-percentage),
+ t($modal-sidebarActive) 100%
+ );
+ }
+
+ &::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+
+ @include themed {
+ background: t($color);
+ border: 2px solid t($link);
+ }
+
+ &:hover {
+ transform: scale(1.1);
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
+ }
+ }
+
+ &::-moz-range-thumb {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+ border: none;
+
+ @include themed {
+ background: t($color);
+ border: 2px solid t($link);
+ }
+
+ &:hover {
+ transform: scale(1.1);
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
+ }
+ }
+
+ &:focus-visible {
+ outline: none;
+
+ &::-webkit-slider-thumb {
+ @include themed {
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 3px t($link);
+ }
+
+ transform: scale(1.15);
+ }
+
+ &::-moz-range-thumb {
+ @include themed {
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 3px t($link);
+ }
+
+ transform: scale(1.15);
+ }
+ }
+
+ &:active:not(:disabled) {
+ &::-webkit-slider-thumb {
+ transform: scale(1.2);
+ }
+
+ &::-moz-range-thumb {
+ transform: scale(1.2);
+ }
+ }
+
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+
+ &::-webkit-slider-thumb {
+ cursor: not-allowed;
+ transform: scale(1) !important;
+ }
+
+ &::-moz-range-thumb {
+ cursor: not-allowed;
+ transform: scale(1) !important;
+ }
+ }
+ }
+
+ .slider-marks {
+ position: relative;
+ width: 100%;
+ height: 20px;
+ margin-top: 8px;
+
+ .slider-mark {
+ position: absolute;
+ transform: translateX(-50%);
+ font-size: 12px;
+
+ @include themed {
+ color: t($subColor);
+ }
+ }
+ }
+}
diff --git a/src/components/Form/Settings/Switch/Switch.jsx b/src/components/Form/Settings/Switch/Switch.jsx
index 841ca65e..56e9cfdd 100644
--- a/src/components/Form/Settings/Switch/Switch.jsx
+++ b/src/components/Form/Settings/Switch/Switch.jsx
@@ -1,9 +1,10 @@
import variables from 'config/variables';
import { memo, useState, useCallback } from 'react';
-import { Switch as SwitchUI, FormControlLabel } from '@mui/material';
import EventBus from 'utils/eventbus';
+import './Switch.scss';
+
const Switch = memo((props) => {
const [checked, setChecked] = useState(localStorage.getItem(props.name) === 'true');
@@ -32,18 +33,20 @@ const Switch = memo((props) => {
}, [checked, props]);
return (
-
+ {Number(value)}
+
`${value}`}
- marks={props.marks || []}
- />
-
+
+
+
+ {props.marks && props.marks.length > 0 && (
+
+
+ {props.marks.map((mark) => (
+
+ {mark.label}
+
+ ))}
+
+ )}
+
+ {!props.header && {props.text}}
+
);
});
diff --git a/src/components/Form/Settings/Switch/Switch.scss b/src/components/Form/Settings/Switch/Switch.scss
new file mode 100644
index 00000000..2a7bf5d3
--- /dev/null
+++ b/src/components/Form/Settings/Switch/Switch.scss
@@ -0,0 +1,63 @@
+@use 'scss/variables' as *;
+
+.switch-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ cursor: pointer;
+ padding: 8px 0;
+
+ .switch-label {
+ flex: 1;
+
+ @include themed {
+ color: t($color);
+ }
+ }
+
+ .switch-track {
+ position: relative;
+ width: 52px;
+ height: 32px;
+ border-radius: 16px;
+ cursor: pointer;
+ transition: 0.2s ease;
+ flex-shrink: 0;
+
+ @include themed {
+ background: t($modal-sidebarActive);
+ }
+
+ &.checked {
+ @include themed {
+ background: t($link);
+ }
+
+ .switch-thumb {
+ transform: translateX(20px);
+ }
+ }
+ }
+
+ .switch-thumb {
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ transition: 0.2s ease;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+ @include themed {
+ background: t($color);
+ }
+ }
+
+ .switch-input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+ }
+}
diff --git a/src/components/Form/Settings/Text/Text.jsx b/src/components/Form/Settings/Text/Text.jsx
index 11efbef0..6e53d729 100644
--- a/src/components/Form/Settings/Text/Text.jsx
+++ b/src/components/Form/Settings/Text/Text.jsx
@@ -1,79 +1,95 @@
import variables from 'config/variables';
import { memo, useState, useCallback } from 'react';
import { toast } from 'react-toastify';
-import { TextField } from '@mui/material';
import { MdRefresh } from 'react-icons/md';
import EventBus from 'utils/eventbus';
+import './Text.scss';
+
const Text = memo((props) => {
- const [value, setValue] = useState(localStorage.getItem(props.name) || '');
+ const { name, upperCaseFirst, element, category, onChange, title, textarea, customcss, placeholder } = props;
+ const defaultValue = props.default;
+ const [value, setValue] = useState(localStorage.getItem(name) || '');
- const handleChange = useCallback((e) => {
- let { value } = e.target;
+ const handleChange = useCallback(
+ (e) => {
+ let newValue = e.target.value;
- // Alex wanted font to work with montserrat and Montserrat, so I made it work
- if (props.upperCaseFirst === true) {
- value = value.charAt(0).toUpperCase() + value.slice(1);
- }
-
- localStorage.setItem(props.name, value);
- setValue(value);
-
- // Call parent onChange if provided
- if (props.onChange) {
- props.onChange(value);
- }
-
- if (props.element) {
- if (!document.querySelector(props.element)) {
- document.querySelector('.reminder-info').style.display = 'flex';
- return localStorage.setItem('showReminder', true);
+ if (upperCaseFirst === true) {
+ newValue = newValue.charAt(0).toUpperCase() + newValue.slice(1);
}
- }
- EventBus.emit('refresh', props.category);
- }, [props.name, props.upperCaseFirst, props.element, props.category, props.onChange]);
+ localStorage.setItem(name, newValue);
+ setValue(newValue);
+
+ if (onChange) {
+ onChange(newValue);
+ }
+
+ if (element) {
+ if (!document.querySelector(element)) {
+ document.querySelector('.reminder-info').style.display = 'flex';
+ return localStorage.setItem('showReminder', true);
+ }
+ }
+
+ EventBus.emit('refresh', category);
+ },
+ [name, upperCaseFirst, element, category, onChange],
+ );
const resetItem = useCallback(() => {
handleChange({
target: {
- value: props.default || '',
+ value: defaultValue || '',
},
});
toast(variables.getMessage('toasts.reset'));
- }, [handleChange, props.default]);
+ }, [handleChange, defaultValue]);
return (
- <>
- {props.textarea === true ? (
-
+
+
+
+
+ {textarea === true ? (
+
);
});
diff --git a/src/components/Form/Settings/Text/Text.scss b/src/components/Form/Settings/Text/Text.scss
new file mode 100644
index 00000000..eb44c009
--- /dev/null
+++ b/src/components/Form/Settings/Text/Text.scss
@@ -0,0 +1,110 @@
+@use 'scss/variables' as *;
+
+.text-field-container {
+ display: flex;
+ flex-direction: column;
+ width: 300px;
+ margin-top: 10px;
+}
+
+.text-field {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .text-field-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 8px;
+ }
+
+ .text-field-label {
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+
+ @include themed {
+ color: t($subColor);
+ }
+ }
+
+ .text-field-reset {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ cursor: pointer;
+ font-size: 12px;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+
+ @include themed {
+ color: t($link);
+ }
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ svg {
+ font-size: 12px;
+ }
+ }
+
+ .text-field-input {
+ height: 56px;
+ padding: 0 16px;
+ font-size: 16px;
+ outline: none;
+ transition: 0.2s ease;
+
+ @include themed {
+ background: t($modal-sidebar);
+ border: 1px solid t($modal-sidebarActive);
+ border-radius: t($borderRadius);
+ color: t($color);
+
+ &:hover,
+ &:focus {
+ border-color: t($color);
+ }
+
+ &::placeholder {
+ color: t($subColor);
+ }
+ }
+ }
+
+ .text-field-textarea {
+ padding: 16px;
+ font-size: 16px;
+ outline: none;
+ resize: vertical;
+ min-height: 100px;
+ transition: 0.2s ease;
+
+ @include themed {
+ background: t($modal-sidebar);
+ border: 1px solid t($modal-sidebarActive);
+ border-radius: t($borderRadius);
+ color: t($color);
+
+ &:hover,
+ &:focus {
+ border-color: t($color);
+ }
+
+ &::placeholder {
+ color: t($subColor);
+ }
+ }
+ }
+
+ &.customcss .text-field-textarea {
+ font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
+ 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
+ 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace !important;
+ }
+}
diff --git a/src/components/Form/Settings/Textarea/Textarea.jsx b/src/components/Form/Settings/Textarea/Textarea.jsx
new file mode 100644
index 00000000..e60312e1
--- /dev/null
+++ b/src/components/Form/Settings/Textarea/Textarea.jsx
@@ -0,0 +1,57 @@
+import { memo, useRef, useEffect, useCallback } from 'react';
+
+import './Textarea.scss';
+
+const Textarea = memo(({ value, onChange, placeholder, minRows = 1, maxRows, className, style, readOnly }) => {
+ const textareaRef = useRef(null);
+
+ const adjustHeight = useCallback(() => {
+ const textarea = textareaRef.current;
+ if (!textarea) return;
+
+ // Reset height to auto to get the correct scrollHeight
+ textarea.style.height = 'auto';
+
+ // Calculate line height
+ const computedStyle = window.getComputedStyle(textarea);
+ const lineHeight = parseInt(computedStyle.lineHeight) || 24;
+ const paddingTop = parseInt(computedStyle.paddingTop) || 0;
+ const paddingBottom = parseInt(computedStyle.paddingBottom) || 0;
+
+ // Calculate min and max heights
+ const minHeight = (minRows * lineHeight) + paddingTop + paddingBottom;
+ const maxHeight = maxRows ? (maxRows * lineHeight) + paddingTop + paddingBottom : Infinity;
+
+ // Set the height based on content, clamped between min and max
+ const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+ textarea.style.height = `${newHeight}px`;
+ }, [minRows, maxRows]);
+
+ useEffect(() => {
+ adjustHeight();
+ }, [value, adjustHeight]);
+
+ // Adjust on mount and window resize
+ useEffect(() => {
+ adjustHeight();
+ window.addEventListener('resize', adjustHeight);
+ return () => window.removeEventListener('resize', adjustHeight);
+ }, [adjustHeight]);
+
+ return (
+
+ );
+});
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea as default, Textarea };
diff --git a/src/components/Form/Settings/Textarea/Textarea.scss b/src/components/Form/Settings/Textarea/Textarea.scss
new file mode 100644
index 00000000..4d49584d
--- /dev/null
+++ b/src/components/Form/Settings/Textarea/Textarea.scss
@@ -0,0 +1,34 @@
+@use 'scss/variables' as *;
+
+.textarea-autosize {
+ width: 100%;
+ padding: 12px 16px;
+ font-size: 15px;
+ line-height: 24px;
+ outline: none;
+ resize: none;
+ overflow: hidden;
+ transition: 0.2s ease;
+ font-family: inherit;
+
+ @include themed {
+ background: t($modal-sidebar);
+ border: 1px solid t($modal-sidebarActive);
+ border-radius: t($borderRadius);
+ color: t($color);
+
+ &:hover,
+ &:focus {
+ border-color: t($color);
+ }
+
+ &::placeholder {
+ color: t($subColor);
+ }
+ }
+
+ &[readonly] {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+}
diff --git a/src/components/Form/Settings/Textarea/index.jsx b/src/components/Form/Settings/Textarea/index.jsx
new file mode 100644
index 00000000..6449a419
--- /dev/null
+++ b/src/components/Form/Settings/Textarea/index.jsx
@@ -0,0 +1 @@
+export * from './Textarea';
diff --git a/src/components/Form/Settings/index.jsx b/src/components/Form/Settings/index.jsx
index 75eddedb..e3179fc6 100644
--- a/src/components/Form/Settings/index.jsx
+++ b/src/components/Form/Settings/index.jsx
@@ -3,6 +3,8 @@ export * from './ChipSelect';
export * from './Dropdown';
export * from './FileUpload';
export * from './Radio';
+export * from './SearchInput';
export * from './Slider';
export * from './Switch';
export * from './Text';
+export * from './Textarea';
diff --git a/src/config/constants.js b/src/config/constants.js
index e4793f61..52c44a77 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -25,4 +25,4 @@ export const EMAIL = 'hello@muetab.com';
export const TWITTER_HANDLE = 'getmue';
export const DISCORD_SERVER = 'zv8C9F8';
-export const VERSION = '7.5.0';
+export const VERSION = '7.6.0';
diff --git a/src/features/greeting/options/GreetingOptions.jsx b/src/features/greeting/options/GreetingOptions.jsx
index bf1e5beb..dceb037b 100644
--- a/src/features/greeting/options/GreetingOptions.jsx
+++ b/src/features/greeting/options/GreetingOptions.jsx
@@ -10,7 +10,6 @@ import {
Section,
} from 'components/Layout/Settings';
import { Checkbox, Switch, Text } from 'components/Form/Settings';
-import { TextareaAutosize } from '@mui/material';
import { Button } from 'components/Elements';
import { toast } from 'react-toastify';
@@ -192,15 +191,15 @@ const GreetingOptions = ({ currentSubSection, onSubSectionChange, sectionName })
{variables.getMessage(`${GREETING_SECTION}.event_name`)}
-
+ {title && (
+
) : (
-
+
+
+
+ )}
+
+
+ {title && (
+
)}
-
-
+
+
+
+ )}
+
+ toggleFunction(item)}
+ className={`item ${isSideloaded ? 'item-sideloaded' : ''}`}
+ onClick={isSideloaded ? undefined : () => toggleFunction(item)}
key={item.name}
style={getGradientStyle()}
>
- {isInstalled && item.colour && (
+ {isAdded && onUninstall && (
+
+
+
+ )}
+ {isSideloaded && (
+
+
+ )}
+ {isInstalled && item.colour && !isSideloaded && (
{
- e.target.onerror = null;
- e.target.src = placeholderIcon;
- }}
- />
+ {item.icon_url ? (
+ {
+ e.target.onerror = null;
+ e.target.src = placeholderIcon;
+ }}
+ />
+ ) : (
+
@@ -136,6 +196,8 @@ function Items({
showCreateYourOwn,
filterOptions = false,
onSortChange,
+ isAdded = false,
+ onUninstall,
}) {
const [selectedCategory, setSelectedCategory] = useState('all');
const [sortType, setSortType] = useState(localStorage.getItem('sortMarketplace') || 'a-z');
@@ -239,6 +301,8 @@ function Items({
type={type}
onCollection={onCollection}
isInstalled={installedNames.has(item.name)}
+ isAdded={isAdded}
+ onUninstall={onUninstall}
key={index}
/>
))}
diff --git a/src/features/marketplace/views/Added.jsx b/src/features/marketplace/views/Added.jsx
index 908455e3..7a210c78 100644
--- a/src/features/marketplace/views/Added.jsx
+++ b/src/features/marketplace/views/Added.jsx
@@ -84,27 +84,24 @@ const Added = memo(() => {
const sortAddons = useCallback((value, sendEvent) => {
const installedItems = JSON.parse(localStorage.getItem('installed'));
-
+
switch (value) {
case 'newest':
installedItems.reverse();
break;
- case 'oldest':
- break;
case 'a-z':
installedItems.sort((a, b) => {
- if (a.display_name < b.display_name) {
- return -1;
- }
- if (a.display_name > b.display_name) {
- return 1;
- }
- return 0;
+ const nameA = (a.display_name || a.name || '').toLowerCase();
+ const nameB = (b.display_name || b.name || '').toLowerCase();
+ return nameA.localeCompare(nameB);
});
break;
- case 'z-a':
- installedItems.sort();
- installedItems.reverse();
+ case 'recently-updated':
+ installedItems.sort((a, b) => {
+ const dateA = a.updated_at ? new Date(a.updated_at) : new Date(0);
+ const dateB = b.updated_at ? new Date(b.updated_at) : new Date(0);
+ return dateB - dateA;
+ });
break;
default:
break;
@@ -154,6 +151,12 @@ const Added = memo(() => {
setInstalled([]);
}, [installed]);
+ const handleUninstall = useCallback((type, name) => {
+ uninstall(type, name);
+ toast(variables.getMessage('toasts.uninstalled'));
+ setInstalled(JSON.parse(localStorage.getItem('installed')));
+ }, []);
+
useEffect(() => {
sortAddons(localStorage.getItem('sortAddons'), false);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -243,9 +246,8 @@ const Added = memo(() => {
onChange={(value) => sortAddons(value)}
items={[
{ value: 'newest', text: variables.getMessage('modals.main.addons.sort.newest') },
- { value: 'oldest', text: variables.getMessage('modals.main.addons.sort.oldest') },
{ value: 'a-z', text: variables.getMessage('modals.main.addons.sort.a_z') },
- { value: 'z-a', text: variables.getMessage('modals.main.addons.sort.z_a') },
+ { value: 'recently-updated', text: 'Recently Updated' },
]}
/>
+
+
+ {getInitials(item.display_name || item.name)}
+
+ )}
{item.display_name || item.name}
{!isCurator ? (
@@ -106,17 +169,14 @@ function ItemCard({ item, toggleFunction, type, onCollection, isCurator, isInsta
)}
- {type === 'all' && !onCollection ? (
+ {item.type && (
- {variables.getMessage('modals.main.marketplace.' + item.type)}
+ {variables.getMessage('modals.main.marketplace.' + getTypeTranslationKey(item.type))}
- ) : null}
-
- {/* {item.in_collections && item.in_collections.length > 0 && !onCollection ? (
-
- {item.in_collections[0]}
-
- ) : null} */}
+ )}
+ {item.in_collections && item.in_collections.length > 0 && !onCollection && (
+ {item.in_collections[0]}
+ )}
Send Event
-
+
+ setEventType(e.target.value)}
+ spellCheck={false}
+ />
+
+
+
+ setEventName(e.target.value)}
+ spellCheck={false}
+ />
+
- updateTodo('done', index)}
- />
-
+ {todoItem.done &&
+