mirror of
https://github.com/Dictionarry-Hub/profilarr.git
synced 2026-01-22 10:51:02 +01:00
style: enhance ProfileGeneralTab and MarkdownEditor with improved UI components and styles
This commit is contained in:
Sam Chau
@@ -1,6 +1,7 @@
|
||||
import React, {useState} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import MarkdownEditor from '@ui/MarkdownEditor';
|
||||
import AddButton from '@ui/DataBar/AddButton';
|
||||
|
||||
const ProfileGeneralTab = ({
|
||||
name,
|
||||
@@ -79,7 +80,7 @@ const ProfileGeneralTab = ({
|
||||
onChange={e => onNameChange(e.target.value)}
|
||||
placeholder='Enter profile name'
|
||||
className='w-full rounded-md border border-gray-300 dark:border-gray-600
|
||||
bg-white dark:bg-gray-700 px-3 py-2 text-sm
|
||||
bg-white dark:bg-gray-800 px-3 py-2 text-sm
|
||||
text-gray-900 dark:text-gray-100
|
||||
placeholder-gray-500 dark:placeholder-gray-400
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
|
||||
@@ -122,31 +123,38 @@ const ProfileGeneralTab = ({
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder='Add a tag'
|
||||
className='w-full rounded-md border border-gray-300 dark:border-gray-600
|
||||
bg-white dark:bg-gray-700 px-3 py-2 text-sm
|
||||
bg-white dark:bg-gray-800 px-3 py-2 text-sm
|
||||
text-gray-900 dark:text-gray-100
|
||||
placeholder-gray-500 dark:placeholder-gray-400
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
|
||||
transition-colors duration-200'
|
||||
/>
|
||||
<button
|
||||
<AddButton
|
||||
onClick={handleAddTag}
|
||||
disabled={!newTag.trim()}
|
||||
className='px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-400 text-white rounded-md text-sm font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800'>
|
||||
Add
|
||||
</button>
|
||||
label='Add'
|
||||
/>
|
||||
</div>
|
||||
{tags.length > 0 ? (
|
||||
<div className='flex flex-wrap gap-2 rounded-md'>
|
||||
{tags.map(tag => (
|
||||
<span
|
||||
key={tag}
|
||||
className='inline-flex items-center p-1.5 rounded-md text-xs bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 group'>
|
||||
className='inline-flex items-center px-2.5 py-1 rounded-md
|
||||
text-xs font-semibold
|
||||
bg-blue-600/20 text-blue-400
|
||||
group'>
|
||||
{tag}
|
||||
<button
|
||||
onClick={() => onRemoveTag(tag)}
|
||||
className='ml-1.5 hover:text-blue-900 dark:hover:text-blue-200 focus:outline-none'>
|
||||
className='ml-1.5 p-0.5 rounded-md
|
||||
hover:bg-blue-500/20
|
||||
focus:outline-none focus:ring-2
|
||||
focus:ring-blue-500 focus:ring-offset-1
|
||||
transition-colors duration-200'>
|
||||
<svg
|
||||
className='w-3.5 h-3.5 opacity-60 group-hover:opacity-100 transition-opacity'
|
||||
className='w-3.5 h-3.5 text-blue-400
|
||||
opacity-60 group-hover:opacity-100 transition-opacity'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
viewBox='0 0 24 24'>
|
||||
@@ -162,7 +170,12 @@ const ProfileGeneralTab = ({
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className='flex items-center justify-center h-[2.5rem] text-sm text-gray-500 dark:text-gray-400 rounded-md border border-dashed border-dark-border'>
|
||||
<div
|
||||
className='flex items-center justify-center h-12
|
||||
text-sm text-gray-500 dark:text-gray-400
|
||||
rounded-md border border-dashed
|
||||
border-gray-300 dark:border-gray-700
|
||||
bg-gray-50 dark:bg-gray-800/50'>
|
||||
No tags added yet
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -86,9 +86,7 @@ const MarkdownEditor = ({value, onChange, placeholder}) => {
|
||||
{isPreview ? (
|
||||
<div className='flex items-center gap-2 text-gray-700 dark:text-gray-300 ml-2'>
|
||||
<Eye className='w-4 h-4' />
|
||||
<span className='text-sm font-medium'>
|
||||
Preview Mode
|
||||
</span>
|
||||
<span className='text-sm font-medium'>Preview</span>
|
||||
</div>
|
||||
) : (
|
||||
controls.map(control => (
|
||||
@@ -106,18 +104,34 @@ const MarkdownEditor = ({value, onChange, placeholder}) => {
|
||||
<div className='ml-auto'>
|
||||
<button
|
||||
onClick={() => setIsPreview(!isPreview)}
|
||||
className='flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors'>
|
||||
className='flex items-center gap-2 px-3 py-2 rounded-md
|
||||
bg-white text-gray-700 dark:bg-gray-800 dark:text-gray-300
|
||||
hover:bg-gray-50 dark:hover:bg-gray-750
|
||||
hover:border-blue-500/50 hover:text-blue-500
|
||||
dark:hover:border-blue-500/50 dark:hover:text-blue-400
|
||||
transition-all duration-150 ease-in-out
|
||||
group'
|
||||
title={
|
||||
isPreview
|
||||
? 'Switch to Edit Mode'
|
||||
: 'Switch to Preview Mode'
|
||||
}>
|
||||
{isPreview ? (
|
||||
<>
|
||||
<Edit2 className='w-4 h-4' />
|
||||
Edit
|
||||
</>
|
||||
<Edit2
|
||||
className='w-4 h-4 transition-transform duration-300 ease-out
|
||||
group-hover:rotate-12 group-hover:scale-110
|
||||
group-hover:text-blue-500 dark:group-hover:text-blue-400'
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Eye className='w-4 h-4' />
|
||||
Preview
|
||||
</>
|
||||
<Eye
|
||||
className='w-4 h-4 transition-transform duration-300 ease-out
|
||||
group-hover:animate-eye-blink
|
||||
group-hover:text-blue-500 dark:group-hover:text-blue-400'
|
||||
/>
|
||||
)}
|
||||
<span className='text-sm font-medium'>
|
||||
{isPreview ? 'Edit' : 'Preview'}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@ const Textarea = React.forwardRef(({className, ...props}, ref) => {
|
||||
return (
|
||||
<textarea
|
||||
className={`flex min-h-[300px] w-full border-none bg-white
|
||||
dark:bg-gray-700 px-4 py-3 text-sm text-gray-900 dark:text-gray-100
|
||||
dark:bg-gray-800 px-4 py-3 text-sm text-gray-900 dark:text-gray-100
|
||||
placeholder-gray-500 dark:placeholder-gray-400
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500
|
||||
focus:border-transparent disabled:cursor-not-allowed
|
||||
|
||||
@@ -36,6 +36,10 @@ module.exports = {
|
||||
'0%, 100%': {transform: 'scale(1) rotate(0deg)'},
|
||||
'30%': {transform: 'scale(1.15) rotate(-10deg)'},
|
||||
'60%': {transform: 'scale(0.9) rotate(5deg)'}
|
||||
},
|
||||
'eye-blink': {
|
||||
'0%, 100%': {transform: 'scale(1)', opacity: 1},
|
||||
'50%': {transform: 'scale(1.2)', opacity: 0.8}
|
||||
}
|
||||
},
|
||||
animation: {
|
||||
@@ -43,7 +47,8 @@ module.exports = {
|
||||
'fade-in': 'fade-in 0.5s ease-in-out forwards',
|
||||
'slide-down': 'slide-down 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
wiggle: 'wiggle 0.3s ease-in-out',
|
||||
'check-bounce': 'check-bounce 0.3s ease-in-out'
|
||||
'check-bounce': 'check-bounce 0.3s ease-in-out',
|
||||
'eye-blink': 'eye-blink 0.5s ease-in-out'
|
||||
},
|
||||
colors: {
|
||||
'dark-bg': '#1a1c23',
|
||||
|
||||
Reference in New Issue
Block a user