From 88eb27291a2ea76de92eb22bee0d3577ca7e9a3a Mon Sep 17 00:00:00 2001 From: lisofffa Date: Sun, 22 Dec 2024 21:57:01 +0300 Subject: [PATCH 1/4] feat: added dropdown version to active mutation for overlay --- .../assets/icons/icon-dropdown.tsx | 17 ++ .../src/mini-overlay/assets/icons/index.ts | 2 + .../assets/styles-dropdown.tsx | 56 ++++- .../multitable-panel/components/dropdown.tsx | 17 ++ .../components/mutation-version-dropdown.tsx | 207 ++++++++++++++++++ 5 files changed, 291 insertions(+), 8 deletions(-) create mode 100644 libs/shared-components/src/mini-overlay/assets/icons/icon-dropdown.tsx create mode 100644 libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx diff --git a/libs/shared-components/src/mini-overlay/assets/icons/icon-dropdown.tsx b/libs/shared-components/src/mini-overlay/assets/icons/icon-dropdown.tsx new file mode 100644 index 00000000..d7d29436 --- /dev/null +++ b/libs/shared-components/src/mini-overlay/assets/icons/icon-dropdown.tsx @@ -0,0 +1,17 @@ +import React from 'react' + +const IconDropdown = () => ( + + + + + +) + +export default IconDropdown diff --git a/libs/shared-components/src/mini-overlay/assets/icons/index.ts b/libs/shared-components/src/mini-overlay/assets/icons/index.ts index de426a00..ce32893b 100644 --- a/libs/shared-components/src/mini-overlay/assets/icons/index.ts +++ b/libs/shared-components/src/mini-overlay/assets/icons/index.ts @@ -13,6 +13,7 @@ import OpenOverlay from './open-overlay' import OpenOverlayWithCircle from './open-overlay-with-circle' import Logo from './logo' import PersonAddAlt from './person-add-alt' +import IconDropdown from './icon-dropdown' export { MutationFallbackIcon, @@ -30,4 +31,5 @@ export { OpenOverlayWithCircle, Logo, PersonAddAlt, + IconDropdown, } diff --git a/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx b/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx index 548014e2..1caf6cd6 100644 --- a/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx @@ -103,14 +103,6 @@ export const ButtonMutation = styled.div` } ` -export const ListMutations = styled.div` - width: 100%; - display: flex; - flex-direction: column; - gap: 3px; - z-index: 1; -` - export const InputBlock = styled.div<{ isActive?: boolean }>` display: flex; @@ -206,6 +198,53 @@ export const ImageBlock = styled.div` } ` +export const ListMutations = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 3px; + z-index: 1; + + .active-mutation { + background: #384bff; + + div, + span, + p { + color: #fff; + } + + svg path { + fill: #fff; + } + } +` + +export const SpanStyled = styled.span<{ $isWhite?: boolean }>` + display: flex; + align-items: center; + gap: 2px; + position: relative; + top: ${({ $isWhite }) => ($isWhite ? `0` : '-6px')}; + cursor: pointer; + left: ${({ $isWhite }) => ($isWhite ? `0` : '2px')}; + justify-content: center; + padding: 2px 0; + padding-left: 4px; + width: 100%; + height: 100%; + border-radius: 4px; + font-size: 10px; + font-weight: 400; + text-align: left; + color: #ffffff; + background: ${({ $isWhite }) => ($isWhite ? `#FFFFFF` : '#384bff')}; + + svg path { + stroke: ${({ $isWhite }) => ($isWhite ? ` #7a818b` : '#FFFFFF')}; + } +` + export const AvalibleMutations = styled.div` width: 100%; background: #f8f9ff; @@ -278,6 +317,7 @@ export const InputMutation = styled.span` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + column-gap: 8px; width: 180px; display: inline-flex; align-items: center; diff --git a/libs/shared-components/src/multitable-panel/components/dropdown.tsx b/libs/shared-components/src/multitable-panel/components/dropdown.tsx index 7f38169f..52b6c913 100644 --- a/libs/shared-components/src/multitable-panel/components/dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/dropdown.tsx @@ -22,6 +22,7 @@ import { MutationsList, MutationsListWrapper, WrapperDropdown, + SpanStyled, } from '../assets/styles-dropdown' import { AvailableIcon, @@ -33,6 +34,7 @@ import { import { Badge } from './badge' import { Image } from './image' import { ModalDelete } from './modal-delete' +import { MutationVersionDropdown } from './mutation-version-dropdown' const ModalConfirmBackground = styled.div` position: absolute; @@ -65,6 +67,8 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro } = useMutableWeb() const { deleteLocalMutation } = useDeleteLocalMutation() + const [expandedVersion, setExpandedVersion] = useState(false) + const toggleDropdown = () => setExpandedVersion(!expandedVersion) const recentlyUsedMutations = useMemo( () => @@ -170,9 +174,22 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro handleMutationClick(mut.id)}> {/* todo: mocked classname */} + + {selectedMutation && selectedMutation.metadata ? ( + + ) : ( + selectedMutation && + selectedMutation.metadata && ( + v{selectedMutation.version} + ) + )}{' '} {mut.metadata ? mut.metadata.name : ''}{' '} {recentlyUsedMutations[mut.id]?.length === 2 ? ( mut.source === EntitySourceType.Local ? ( diff --git a/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx b/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx new file mode 100644 index 00000000..f43cd336 --- /dev/null +++ b/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx @@ -0,0 +1,207 @@ +import { useMutableWeb, useMutationVersions } from '@mweb/engine' +import React, { useState } from 'react' +import { FC } from 'react' +import { IconDropdown } from '../../mini-overlay/assets/icons' +import styled from 'styled-components' + +export const SpanStyled = styled.span<{ $isWhite?: boolean }>` + display: flex; + align-items: center; + gap: 2px; + position: relative; + top: ${({ $isWhite }) => ($isWhite ? `0` : '-6px')}; + cursor: pointer; + left: ${({ $isWhite }) => ($isWhite ? `0` : '2px')}; + justify-content: center; + padding: 2px 0; + padding-left: 4px; + width: 100%; + height: 100%; + border-radius: 4px; + font-size: 10px; + font-weight: 400; + text-align: left; + color: #ffffff; + background: ${({ $isWhite }) => ($isWhite ? `#FFFFFF` : '#384bff')}; + + svg path { + stroke: ${({ $isWhite }) => ($isWhite ? ` #7a818b` : '#FFFFFF')}; + } +` + +export const OpenListDefault = styled.span` + cursor: pointer; + display: flex; + align-items: center; + justify-content: flex-end; + @keyframes rotateIsClose { + 0% { + transform: rotate(180deg); + } + + 50% { + transform: rotate(90deg); + } + + 100% { + transform: rotate(0deg); + } + } + animation: rotateIsClose 0.2s ease forwards; + transition: all 0.3s; + &:hover { + svg { + transform: scale(1.2); + } + } +` + +export const OpenList = styled.span` + cursor: pointer; + + display: flex; + align-items: center; + justify-content: flex-end; + @keyframes rotateIsOpen { + 0% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(90deg); + } + + 100% { + transform: rotate(180deg); + } + } + animation: rotateIsOpen 0.2s ease forwards; + transition: all 0.3s; + &:hover { + svg { + transform: scale(1.2); + } + } +` + +export const DropdownContainer = styled.div<{ $expanded?: boolean }>` + position: absolute; + width: 100%; + width: 50px; + height: auto; + top: 24px; + left: 2px; + padding: 2px; + border-radius: 4px; + background: #fff; + display: flex; + flex-direction: column; + z-index: 2; + + box-shadow: ${({ $expanded }) => + $expanded + ? `0px 3px 7px 0px #2222221A, + 0px 12px 12px 0px #22222217, + 0px 27px 16px 0px #2222220D, + 0px 48px 19px 0px #22222203, + 0px 76px 21px 0px #22222200` + : 'none'}; + + cursor: pointer; +` + +export const DropdownItem = styled.div<{ $isActiveVersion?: boolean }>` + font-size: 10px; + font-weight: 400; + text-align: right; + color: ${({ $isActiveVersion }) => ($isActiveVersion ? `#384BFF` : '#7a818b')}; + padding: 4px; + + &:hover { + background: #1879ce1a; + color: #384bff; + } +` + +const LatestKey = 'latest' + +export const MutationVersionDropdown: FC<{ + mutationId: string | null + toggleDropdown: () => void + expanded: boolean + isWhite?: boolean +}> = ({ mutationId, isWhite, toggleDropdown, expanded }) => { + const { + switchMutationVersion, + selectedMutation, + mutationVersions: currentMutationVersions, + } = useMutableWeb() + const { mutationVersions, areMutationVersionsLoading } = useMutationVersions(mutationId) + + if (!mutationId) { + return null + } + + if (!selectedMutation || areMutationVersionsLoading) { + return + } + + const handleChange = (key: string) => { + if (selectedMutation?.id) { + switchMutationVersion(selectedMutation?.id, key === LatestKey ? null : key?.toString()) + } + } + + return ( + <> + + + {currentMutationVersions[mutationId] + ? `v${currentMutationVersions[mutationId]}` + : LatestKey} + {mutationVersions && mutationVersions.length > 0 ? ( + expanded ? ( + + + + ) : ( + + + + ) + ) : null} + + + {mutationVersions && mutationVersions.length > 0 + ? expanded && ( + + {mutationVersions.map((version) => ( + handleChange(version.version)} + key={version.version} + > + v{version.version} + + ))} + + ) + : null} + + + ) +} From 3365a982491e9f0b4acdba189d15ae32ff5d1ec1 Mon Sep 17 00:00:00 2001 From: lisofffa Date: Tue, 24 Dec 2024 00:49:38 +0300 Subject: [PATCH 2/4] fix: removed notch --- .../multitable-panel/multitable-panel.tsx | 133 +----------------- .../assets/styles-dropdown.tsx | 23 +-- .../multitable-panel/components/dropdown.tsx | 4 +- .../components/mutation-version-dropdown.tsx | 3 +- 4 files changed, 11 insertions(+), 152 deletions(-) diff --git a/apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx b/apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx index 683e83cc..7800280e 100644 --- a/apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx +++ b/apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx @@ -2,12 +2,8 @@ import { EntitySourceType } from '@mweb/backend' import { useMutableWeb } from '@mweb/engine' import { EventEmitter as NEventEmitter } from 'events' import React, { FC, useEffect, useRef, useState } from 'react' -import Draggable from 'react-draggable' import styled from 'styled-components' import { NearNetworkId } from '../../common/networks' -import { getIsPanelUnpinned, removePanelUnpinnedFlag, setPanelUnpinnedFlag } from '../storage' -import { PinOutlineIcon, PinSolidIcon } from './assets/vectors' -import { Dropdown } from './components/dropdown' import { MutationEditorModal } from './components/mutation-editor-modal' import MutableOverlayContainer from './mutable-overlay-container' @@ -54,62 +50,6 @@ const WrapperPanel = styled.div<{ $isAnimated?: boolean }>` } ` -const Notch = styled.div<{ $isAnimated?: boolean; $isOpen?: boolean }>` - position: relative; - display: flex; - align-items: stretch; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - -webkit-tap-highlight-color: transparent; - user-select: none; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: none; - -webkit-overflow-scrolling: touch; - - width: 318px; - height: 45px; - border-radius: ${(props) => (props.$isOpen ? '0' : '0 0 6px 6px')}; - background: #384bff; - box-shadow: 0 4px 5px rgb(45 52 60 / 10%), 0 4px 20px rgb(11 87 111 / 15%); - opacity: 0; - transform: translateY(-100%); - transition: ${(props) => - props.$isAnimated ? 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out' : 'initial'}; - - justify-content: space-between; - padding: 4px 5px; - padding-top: 0; -` - -const NotchButtonWrapper = styled.div` - width: 16px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - - &:hover, - &:focus { - opacity: 0.5; - } -` - -const IconWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; -` - -const DragIcon = () => ( - - - - - -) - interface MultitablePanelProps { eventEmitter: NEventEmitter } @@ -117,20 +57,9 @@ interface MultitablePanelProps { export const MultitablePanel: FC = ({ eventEmitter }) => { const { mutations, allApps, selectedMutation, config } = useMutableWeb() const [isOverlayOpened, setIsOverlayOpened] = useState(false) - const [isPin, setPin] = useState(!getIsPanelUnpinned()) - const [isDragging, setIsDragging] = useState(false) - const [isNotchDisplayed, setIsNotchDisplayed] = useState(true) const [isModalOpen, setIsModalOpen] = useState(false) const notchRef = useRef(null) - useEffect(() => { - const timer = setTimeout(() => { - setIsNotchDisplayed(false) - }, 5000) - - return () => clearTimeout(timer) - }, [isPin]) - useEffect(() => { const openMutationPopupCallback = () => { setIsModalOpen(true) @@ -141,23 +70,6 @@ export const MultitablePanel: FC = ({ eventEmitter }) => { } }, [eventEmitter]) - const handleStartDrag = () => { - setIsDragging(true) - } - - const handleStopDrag = () => { - setIsDragging(false) - } - - const handlePin = () => { - if (isPin) { - setPanelUnpinnedFlag('unpin') - } else { - removePanelUnpinnedFlag() - } - setPin(!isPin) - } - const handleMutateButtonClick = () => { setIsModalOpen(true) setIsOverlayOpened(false) @@ -180,7 +92,7 @@ export const MultitablePanel: FC = ({ eventEmitter }) => { open={isOverlayOpened} handleMutateButtonClick={handleMutateButtonClick} /> - + {isModalOpen ? ( = ({ eventEmitter }) => { localMutations={mutations.filter((m) => m.source === EntitySourceType.Local)} onClose={handleModalClose} /> - ) : ( - - - - - - - - - - {isPin ? : } - - - - )} + ) : null} ) diff --git a/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx b/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx index 1caf6cd6..c3ad5345 100644 --- a/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx @@ -123,10 +123,6 @@ export const InputBlock = styled.div<{ isActive?: boolean }>` background: #384bff; div, - span { - color: #fff; - } - svg { fill: #fff; @@ -176,11 +172,11 @@ export const InputInfoWrapper = styled.div` flex: 1; .inputMutationSelected { - color: rgba(34, 34, 34, 1); + color: #fff; } .authorMutationSelected { - color: #384bff; + color: #fff; } ` export const ImageBlock = styled.div` @@ -207,12 +203,7 @@ export const ListMutations = styled.div` .active-mutation { background: #384bff; - - div, - span, - p { - color: #fff; - } + color: #fff; svg path { fill: #fff; @@ -225,9 +216,9 @@ export const SpanStyled = styled.span<{ $isWhite?: boolean }>` align-items: center; gap: 2px; position: relative; - top: ${({ $isWhite }) => ($isWhite ? `0` : '-6px')}; + top: 0; cursor: pointer; - left: ${({ $isWhite }) => ($isWhite ? `0` : '2px')}; + left: ${({ $isWhite }) => ($isWhite ? `0` : '-6px')}; justify-content: center; padding: 2px 0; padding-left: 4px; @@ -254,7 +245,6 @@ export const AvalibleMutations = styled.div` flex-direction: column; box-sizing: border-box; padding: 10px; - z-index: 1; .avalibleMutationsInput { background: rgba(248, 249, 255, 1); @@ -275,6 +265,7 @@ export const AvalibleLableBlock = styled.div` align-items: center; justify-content: space-between; width: 100%; + .iconRotate { svg { transform: rotate(0deg); @@ -296,6 +287,7 @@ export const AvalibleArrowBlock = styled.div` justify-content: space-between; transition: all 0.2s ease; cursor: pointer; + svg { margin-left: 10px; transform: rotate(180deg); @@ -315,7 +307,6 @@ export const InputMutation = styled.span` color: rgba(34, 34, 34, 0.6); white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; column-gap: 8px; width: 180px; diff --git a/libs/shared-components/src/multitable-panel/components/dropdown.tsx b/libs/shared-components/src/multitable-panel/components/dropdown.tsx index 52b6c913..1e1e49b9 100644 --- a/libs/shared-components/src/multitable-panel/components/dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/dropdown.tsx @@ -205,9 +205,7 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro {mut.authorId ? ( by {mut.authorId} diff --git a/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx b/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx index f43cd336..09711e95 100644 --- a/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx @@ -9,9 +9,8 @@ export const SpanStyled = styled.span<{ $isWhite?: boolean }>` align-items: center; gap: 2px; position: relative; - top: ${({ $isWhite }) => ($isWhite ? `0` : '-6px')}; cursor: pointer; - left: ${({ $isWhite }) => ($isWhite ? `0` : '2px')}; + left: ${({ $isWhite }) => ($isWhite ? `0` : '-6px')}; justify-content: center; padding: 2px 0; padding-left: 4px; From f2739110f58a3a3af79a15788915d3c6b93a4b97 Mon Sep 17 00:00:00 2001 From: lisofffa Date: Thu, 26 Dec 2024 02:52:30 +0300 Subject: [PATCH 3/4] fix: update logic to dropdown version --- .../src/multitable-panel/components/dropdown.tsx | 10 ++-------- .../components/mutation-version-dropdown.tsx | 13 ++++++++----- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/libs/shared-components/src/multitable-panel/components/dropdown.tsx b/libs/shared-components/src/multitable-panel/components/dropdown.tsx index 1e1e49b9..90da45bc 100644 --- a/libs/shared-components/src/multitable-panel/components/dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/dropdown.tsx @@ -22,7 +22,6 @@ import { MutationsList, MutationsListWrapper, WrapperDropdown, - SpanStyled, } from '../assets/styles-dropdown' import { AvailableIcon, @@ -178,18 +177,13 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro - {selectedMutation && selectedMutation.metadata ? ( + {mut.id === selectedMutation?.id ? ( - ) : ( - selectedMutation && - selectedMutation.metadata && ( - v{selectedMutation.version} - ) - )}{' '} + ) : null} {mut.metadata ? mut.metadata.name : ''}{' '} {recentlyUsedMutations[mut.id]?.length === 2 ? ( mut.source === EntitySourceType.Local ? ( diff --git a/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx b/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx index 09711e95..5369c315 100644 --- a/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx @@ -4,16 +4,16 @@ import { FC } from 'react' import { IconDropdown } from '../../mini-overlay/assets/icons' import styled from 'styled-components' -export const SpanStyled = styled.span<{ $isWhite?: boolean }>` +export const SpanStyled = styled.span<{ $isWhite?: boolean; $isExpanded?: boolean }>` display: flex; align-items: center; gap: 2px; position: relative; cursor: pointer; left: ${({ $isWhite }) => ($isWhite ? `0` : '-6px')}; - justify-content: center; + justify-content: ${({ $isExpanded }) => ($isExpanded ? `center` : 'flex-start')}; padding: 2px 0; - padding-left: 4px; + padding-left: ${({ $isExpanded }) => ($isExpanded ? `4px` : '6px')}; width: 100%; height: 100%; border-radius: 4px; @@ -155,7 +155,7 @@ export const MutationVersionDropdown: FC<{ <> 0 ? '50px' : '40px', width: '100%', display: 'inline-flex', flexDirection: 'column', @@ -168,7 +168,10 @@ export const MutationVersionDropdown: FC<{ }} onClick={toggleDropdown} > - + 0} + > {currentMutationVersions[mutationId] ? `v${currentMutationVersions[mutationId]}` : LatestKey} From 16b5b7645c44ef73120c60e628c8dbd42871731b Mon Sep 17 00:00:00 2001 From: lisofffa Date: Thu, 26 Dec 2024 21:57:51 +0300 Subject: [PATCH 4/4] fix: update states --- .../assets/styles-dropdown.tsx | 62 +++++++++++++++---- .../multitable-panel/components/dropdown.tsx | 15 ++++- .../components/mutation-version-dropdown.tsx | 4 +- 3 files changed, 62 insertions(+), 19 deletions(-) diff --git a/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx b/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx index c3ad5345..52ba14dd 100644 --- a/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx @@ -69,9 +69,11 @@ export const ButtonBack = styled.div` padding-bottom: 10px; padding-top: 10px; transition: all 0.2s ease; + svg { margin-right: 5px; } + &:hover { background: rgba(56, 75, 255, 0.1); border-radius: 4px; @@ -94,9 +96,11 @@ export const ButtonMutation = styled.div` padding-bottom: 10px; padding-top: 10px; transition: all 0.2s ease; + svg { margin-left: 5px; } + &:hover { background: rgba(56, 75, 255, 0.1); border-radius: 4px; @@ -105,22 +109,24 @@ export const ButtonMutation = styled.div` export const InputBlock = styled.div<{ isActive?: boolean }>` display: flex; - padding: 2px 4px; cursor: pointer; - align-items: center; width: 100%; - color: ${(props) => (props.isActive ? '#384BFF' : '#7A818B')}; border-radius: 4px; - .inputMutation { - color: ${(props) => (props.isActive ? '#384BFF' : '#7A818B')}; - } - &:hover { background: #384bff; + color: #fff; + + .inputMutation { + color: #fff; + } + + .authorMutation { + color: #fff; + } div, svg { @@ -131,6 +137,10 @@ export const InputBlock = styled.div<{ isActive?: boolean }>` } } } + + .inputMutation { + color: ${(props) => (props.isActive ? '#384BFF' : '#7A818B')}; + } ` export const InputIconWrapper = styled.div` display: flex; @@ -160,13 +170,10 @@ export const InputIconWrapper = styled.div` export const InputInfoWrapper = styled.div` display: flex; - padding: 4px; - padding-left: 6px; + margin-left: 10px; cursor: pointer; - position: relative; - flex-direction: column; align-items: flex-start; flex: 1; @@ -206,9 +213,38 @@ export const ListMutations = styled.div` color: #fff; svg path { - fill: #fff; + stroke: #fff; + fill: #384bff; + } + + &:hover { + background: #fff; + color: #384bff; + + svg path { + stroke: #384bff; + fill: #384bff; + } + + .infoSelected{ + .inputMutationSelected { + color: #384bff; + } + + .authorMutationSelected { + color: #384bff; + } + } + + .mutation-version-dropdown { + background: rgba(56, 75, 255, 0.1); + color: #384bff; + + svg path { + stroke: #384bff; + } + } } - } ` export const SpanStyled = styled.span<{ $isWhite?: boolean }>` diff --git a/libs/shared-components/src/multitable-panel/components/dropdown.tsx b/libs/shared-components/src/multitable-panel/components/dropdown.tsx index 90da45bc..5549e096 100644 --- a/libs/shared-components/src/multitable-panel/components/dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/dropdown.tsx @@ -171,11 +171,18 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro // fallbackUrl={defaultIcon} /> - handleMutationClick(mut.id)}> + handleMutationClick(mut.id)} + > {/* todo: mocked classname */} {mut.id === selectedMutation?.id ? ( = ({ onMutateButtonClick }: DropdownPro {mut.authorId ? ( by {mut.authorId} diff --git a/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx b/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx index 5369c315..9bddd354 100644 --- a/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/mutation-version-dropdown.tsx @@ -8,11 +8,8 @@ export const SpanStyled = styled.span<{ $isWhite?: boolean; $isExpanded?: boolea display: flex; align-items: center; gap: 2px; - position: relative; cursor: pointer; - left: ${({ $isWhite }) => ($isWhite ? `0` : '-6px')}; justify-content: ${({ $isExpanded }) => ($isExpanded ? `center` : 'flex-start')}; - padding: 2px 0; padding-left: ${({ $isExpanded }) => ($isExpanded ? `4px` : '6px')}; width: 100%; height: 100%; @@ -171,6 +168,7 @@ export const MutationVersionDropdown: FC<{ 0} + className="mutation-version-dropdown" > {currentMutationVersions[mutationId] ? `v${currentMutationVersions[mutationId]}`