From 022eb32adfb80f7826f20e3b0a31422b2f52b124 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Sun, 19 Jan 2025 18:12:43 +1030
Subject: [PATCH] style: enhance ConditionCard with gradient background and
 improved hover effects

---
 .../components/format/FormatGeneralTab.jsx    | 87 +++++++++++--------
 .../format/conditions/ConditionCard.jsx       | 29 ++++---
 2 files changed, 67 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/format/FormatGeneralTab.jsx b/frontend/src/components/format/FormatGeneralTab.jsx
index 5d0816e..e79ee11 100644
--- a/frontend/src/components/format/FormatGeneralTab.jsx
+++ b/frontend/src/components/format/FormatGeneralTab.jsx
@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import PropTypes from 'prop-types';
-import TextArea from '../ui/TextArea';
+import MarkdownEditor from '@ui/MarkdownEditor';
+import AddButton from '@ui/DataBar/AddButton';
 
 const FormatGeneralTab = ({
     name,
@@ -37,19 +38,24 @@ const FormatGeneralTab = ({
                     </p>
                 </div>
             )}
-            <div className='space-y-6'>
+            <div className='space-y-8'>
                 {/* Name Input */}
                 <div className='space-y-2'>
-                    <label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
-                        Format Name
-                    </label>
+                    <div className='space-y-1'>
+                        <label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                            Format Name
+                        </label>
+                        <p className='text-xs text-gray-500 dark:text-gray-400'>
+                            Give your format a descriptive name
+                        </p>
+                    </div>
                     <input
                         type='text'
                         value={name}
                         onChange={e => onNameChange(e.target.value)}
                         placeholder='Enter format 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-gray-50 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
@@ -59,28 +65,32 @@ const FormatGeneralTab = ({
 
                 {/* Description */}
                 <div className='space-y-2'>
-                    <label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
-                        Description
-                    </label>
-                    <TextArea
+                    <div className='space-y-1'>
+                        <label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                            Description
+                        </label>
+                        <p className='text-xs text-gray-500 dark:text-gray-400'>
+                            Describe the purpose of this format. Use markdown to
+                            format your description.
+                        </p>
+                    </div>
+                    <MarkdownEditor
                         value={description}
                         onChange={e => onDescriptionChange(e.target.value)}
                         placeholder='Describe the purpose of this format...'
-                        rows={3}
-                        className='w-full rounded-md border border-gray-300 dark:border-gray-600
-                        bg-white dark:bg-gray-700
-                        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'
                     />
                 </div>
 
                 {/* Tags */}
                 <div className='space-y-4'>
-                    <label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
-                        Tags
-                    </label>
+                    <div className='space-y-1'>
+                        <label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                            Tags
+                        </label>
+                        <p className='text-xs text-gray-500 dark:text-gray-400'>
+                            Add tags to organize and categorize this format
+                        </p>
+                    </div>
                     <div className='flex space-x-2'>
                         <input
                             type='text'
@@ -89,35 +99,38 @@ const FormatGeneralTab = ({
                             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-gray-50 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'>
+                        <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'>
@@ -134,9 +147,11 @@ const FormatGeneralTab = ({
                         </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-gray-300 dark:border-gray-600'>
+                            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/format/conditions/ConditionCard.jsx b/frontend/src/components/format/conditions/ConditionCard.jsx
index ce6fa66..a66ebcb 100644
--- a/frontend/src/components/format/conditions/ConditionCard.jsx
+++ b/frontend/src/components/format/conditions/ConditionCard.jsx
@@ -32,9 +32,9 @@ const ConditionCard = ({
     };
 
     return (
-        <div className='relative bg-gray-800 rounded-lg border border-gray-700 shadow-xl'>
+        <div className='relative bg-gradient-to-br from-gray-800/95 to-gray-900 rounded-lg border border-gray-700 shadow-lg hover:shadow-xl transition-shadow'>
             {/* Main content */}
-            <div className='p-4 pr-14 space-y-4  '>
+            <div className='p-4 pr-14 space-y-4'>
                 {/* Custom Name Input */}
                 <div className='mb-4'>
                     <input
@@ -48,11 +48,12 @@ const ConditionCard = ({
                         className='w-full px-3 py-2 text-sm rounded-md
                             bg-gray-700 border border-gray-700
                             text-gray-200 placeholder:text-gray-400
-                            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500'
+                            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+                            transition-colors'
                     />
                 </div>
 
-                <div className='flex items-center gap-4 '>
+                <div className='flex items-center gap-4'>
                     {/* Type Selection */}
                     <BrowserSelect
                         value={condition.type || ''}
@@ -86,10 +87,11 @@ const ConditionCard = ({
                                         required: e.target.checked
                                     })
                                 }
-                                className='rounded border-gray-700 bg-gray-900
-                                    text-blue-500 focus:ring-blue-500'
+                                className='rounded border-gray-700 bg-gray-800/50
+                                    text-blue-500 focus:ring-blue-500
+                                    transition-colors'
                             />
-                            <span className='text-sm font-medium text-gray-400'>
+                            <span className='text-sm font-medium text-gray-300'>
                                 Required
                             </span>
                         </label>
@@ -105,10 +107,11 @@ const ConditionCard = ({
                                         negate: e.target.checked
                                     })
                                 }
-                                className='rounded border-gray-700 bg-gray-900
-                                    text-blue-500 focus:ring-blue-500'
+                                className='rounded border-gray-700 bg-gray-800/50
+                                    text-blue-500 focus:ring-blue-500
+                                    transition-colors'
                             />
-                            <span className='text-sm font-medium text-gray-400'>
+                            <span className='text-sm font-medium text-gray-300'>
                                 Negate
                             </span>
                         </label>
@@ -119,12 +122,12 @@ const ConditionCard = ({
             {/* Control Buttons */}
             <div
                 className='absolute right-0 top-0 bottom-0 flex flex-col 
-                divide-y divide-gray-700 border-l border-gray-700'>
+                divide-y divide-gray-700/50 border-l border-gray-700/50 bg-gray-800/30'>
                 <button
                     onClick={onMoveUp}
                     disabled={isFirst}
                     className='flex items-center justify-center w-10 flex-1
-                        text-gray-400 hover:text-gray-200 hover:bg-gray-700
+                        text-gray-400 hover:text-gray-200 hover:bg-gray-700/50
                         disabled:opacity-50 disabled:pointer-events-none
                         transition-colors'>
                     <ArrowUp className='w-4 h-4' />
@@ -133,7 +136,7 @@ const ConditionCard = ({
                     onClick={onMoveDown}
                     disabled={isLast}
                     className='flex items-center justify-center w-10 flex-1
-                        text-gray-400 hover:text-gray-200 hover:bg-gray-700
+                        text-gray-400 hover:text-gray-200 hover:bg-gray-700/50
                         disabled:opacity-50 disabled:pointer-events-none
                         transition-colors'>
                     <ArrowDown className='w-4 h-4' />