From 031bef1cd8109e596b75468ea12e5f2fbf276d97 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Sun, 19 Jan 2025 12:56:32 +1030
Subject: [PATCH] feat: enhance RegexGeneralTab with MarkdownEditor and
 improved styling for inputs and tags

---
 .../src/components/regex/RegexGeneralTab.jsx  | 111 +++++++++++-------
 1 file changed, 66 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/regex/RegexGeneralTab.jsx b/frontend/src/components/regex/RegexGeneralTab.jsx
index 4041220..b18db9f 100644
--- a/frontend/src/components/regex/RegexGeneralTab.jsx
+++ b/frontend/src/components/regex/RegexGeneralTab.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';
 import {InfoIcon} from 'lucide-react';
 
 const RegexGeneralTab = ({
@@ -41,19 +42,24 @@ const RegexGeneralTab = ({
                     </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'>
-                        Pattern Name
-                    </label>
+                    <div className='space-y-1'>
+                        <label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                            Pattern Name
+                        </label>
+                        <p className='text-xs text-gray-500 dark:text-gray-400'>
+                            Give your regex pattern a descriptive name
+                        </p>
+                    </div>
                     <input
                         type='text'
                         value={name}
                         onChange={e => onNameChange(e.target.value)}
                         placeholder='Enter pattern 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
@@ -63,33 +69,37 @@ const RegexGeneralTab = ({
 
                 {/* 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 what this pattern matches. Use markdown to
+                            format your description.
+                        </p>
+                    </div>
+                    <MarkdownEditor
                         value={description}
                         onChange={e => onDescriptionChange(e.target.value)}
                         placeholder='Describe what this pattern matches...'
-                        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>
 
                 {/* Pattern Input */}
                 <div className='space-y-2'>
-                    <div className='flex items-center justify-between'>
-                        <label className='block text-sm font-medium text-gray-700 dark:text-gray-300'>
-                            Pattern
-                        </label>
-                        <div className='flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400'>
-                            <InfoIcon className='h-4 w-4' />
-                            <span>Case insensitive PCRE2</span>
+                    <div className='space-y-1'>
+                        <div className='flex items-center justify-between'>
+                            <label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+                                Pattern
+                            </label>
+                            <div className='flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400'>
+                                <InfoIcon className='h-4 w-4' />
+                                <span>Case insensitive PCRE2</span>
+                            </div>
                         </div>
+                        <p className='text-xs text-gray-500 dark:text-gray-400'>
+                            Enter your regular expression pattern
+                        </p>
                     </div>
                     {patternError && (
                         <p className='text-sm text-red-600 dark:text-red-400'>
@@ -100,19 +110,24 @@ const RegexGeneralTab = ({
                         value={pattern}
                         onChange={e => onPatternChange(e.target.value)}
                         className='w-full h-24 rounded-md border border-gray-300 dark:border-gray-600
-                        bg-white dark:bg-gray-700 px-3 py-2
+                        bg-gray-50 dark:bg-gray-800 px-3 py-2
                         text-gray-900 dark:text-gray-100 font-mono text-sm
-                        focus:border-blue-500 dark:focus:border-blue-400
-                        focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:ring-blue-400'
+                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+                        transition-colors duration-200'
                         placeholder='Enter your regex pattern here...'
                     />
                 </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 pattern
+                        </p>
+                    </div>
                     <div className='flex space-x-2'>
                         <input
                             type='text'
@@ -121,35 +136,38 @@ const RegexGeneralTab = ({
                             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'>
@@ -166,8 +184,11 @@ const RegexGeneralTab = ({
                         </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>
                     )}