From 545e8460061e1bc38a7ff3f2cea07e3db99c0696 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Sat, 18 Jan 2025 14:56:37 +1030
Subject: [PATCH] style: enhance ProfileGeneralTab and MarkdownEditor with
 improved UI components and styles

---
 .../components/profile/ProfileGeneralTab.jsx  | 33 +++++++++++-----
 frontend/src/components/ui/MarkdownEditor.jsx | 38 +++++++++++++------
 frontend/src/components/ui/TextArea.jsx       |  2 +-
 frontend/tailwind.config.js                   |  7 +++-
 4 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/profile/ProfileGeneralTab.jsx b/frontend/src/components/profile/ProfileGeneralTab.jsx
index c0b60dc..4e360fe 100644
--- a/frontend/src/components/profile/ProfileGeneralTab.jsx
+++ b/frontend/src/components/profile/ProfileGeneralTab.jsx
@@ -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>
                     )}
diff --git a/frontend/src/components/ui/MarkdownEditor.jsx b/frontend/src/components/ui/MarkdownEditor.jsx
index f02a0d4..3dc9f80 100644
--- a/frontend/src/components/ui/MarkdownEditor.jsx
+++ b/frontend/src/components/ui/MarkdownEditor.jsx
@@ -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>
diff --git a/frontend/src/components/ui/TextArea.jsx b/frontend/src/components/ui/TextArea.jsx
index 09e0826..6b3ab63 100644
--- a/frontend/src/components/ui/TextArea.jsx
+++ b/frontend/src/components/ui/TextArea.jsx
@@ -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 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 63e2c4e..4219739 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -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',