diff --git a/src/components/common/TicketEditor/TicketEditor.tsx b/src/components/common/TicketEditor/TicketEditor.tsx index 65f9bac2..45bf4982 100644 --- a/src/components/common/TicketEditor/TicketEditor.tsx +++ b/src/components/common/TicketEditor/TicketEditor.tsx @@ -11,6 +11,7 @@ import { EuiBadge } from '@elastic/eui'; import { renderMarkdown } from 'people/utils/RenderMarkdown.tsx'; +import styled from 'styled-components'; import { phaseTicketStore } from '../../../store/phase'; import { ActionButton, @@ -40,6 +41,39 @@ interface TicketEditorProps { getPhaseTickets: () => Promise; } +const SwitcherContainer = styled.div` + display: flex; + background-color: white; + border-radius: 20px; + padding: 4px; + width: fit-content; +`; + +const SwitcherButton = styled.button<{ isActive: boolean }>` + padding: 8px 16px; + border: none; + border-radius: 16px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + transition: all 0.3s ease; + + ${({ isActive }) => + isActive + ? ` + background-color: #007bff; + color: white; + box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2); + ` + : ` + background-color: transparent; + color: #333; + &:hover { + background-color: rgba(0, 123, 255, 0.1); + } + `} +`; + const TicketEditor = observer( ({ ticketData, @@ -56,7 +90,7 @@ const TicketEditor = observer( const [selectedVersion, setSelectedVersion] = useState(latestTicket?.version as number); const [versionTicketData, setVersionTicketData] = useState(latestTicket as Ticket); const [isCopying, setIsCopying] = useState(false); - const [isPreview, setIsPreview] = useState(false); + const [activeMode, setActiveMode] = useState<'preview' | 'edit'>('edit'); const { main } = useStores(); const ui = uiStore; @@ -243,10 +277,6 @@ const TicketEditor = observer( setIsCopying(false); } }; - - const handlePreview = () => { - setIsPreview(!isPreview); - }; return ( @@ -278,6 +308,20 @@ const TicketEditor = observer( Version {selectedVersion} + + setActiveMode('preview')} + > + Preview + + setActiveMode('edit')} + > + Edit + + Copy - - {isPreview ? 'Preview' : 'Edit'} - - {!isPreview ? ( + {activeMode === 'edit' ? ( diff --git a/src/people/WorkSpacePlanner/index.tsx b/src/people/WorkSpacePlanner/index.tsx index 7e341753..a856e0e1 100644 --- a/src/people/WorkSpacePlanner/index.tsx +++ b/src/people/WorkSpacePlanner/index.tsx @@ -33,7 +33,7 @@ const ColumnsContainer = styled.div` padding: 1rem; overflow-x: auto; background: whote; - height: 800px !important; + height: 600px !important; &::-webkit-scrollbar { height: 7px; diff --git a/src/people/widgetViews/workspace/style.ts b/src/people/widgetViews/workspace/style.ts index 3deda323..1f718ac1 100644 --- a/src/people/widgetViews/workspace/style.ts +++ b/src/people/widgetViews/workspace/style.ts @@ -1639,7 +1639,7 @@ export const Option = styled.option` export const CopyButtonGroup = styled.div` display: flex; gap: 10px; - align-items: center; + align-items: baseline; justify-content: flex-end; margin-left: auto; margin-top: calc(100px - 134px);