diff --git a/packages/nicolium/src/components/statuses/tombstone.tsx b/packages/nicolium/src/components/statuses/tombstone.tsx index cf52fcf49..0d15e9925 100644 --- a/packages/nicolium/src/components/statuses/tombstone.tsx +++ b/packages/nicolium/src/components/statuses/tombstone.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; -import Text from '@/components/ui/text'; import { Hotkeys } from '@/features/ui/components/hotkeys'; interface ITombstone { @@ -19,24 +18,16 @@ const Tombstone: React.FC = ({ id, onMoveUp, onMoveDown, deleted }) }; return ( - -
- - {deleted ? ( - - ) : ( - - )} - + +
+ {deleted ? ( + + ) : ( + + )}
); diff --git a/packages/nicolium/src/components/statuses/translate-button.tsx b/packages/nicolium/src/components/statuses/translate-button.tsx index 733d61034..02a0bfc58 100644 --- a/packages/nicolium/src/components/statuses/translate-button.tsx +++ b/packages/nicolium/src/components/statuses/translate-button.tsx @@ -2,7 +2,6 @@ import React, { useEffect } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import Icon from '@/components/ui/icon'; -import Text from '@/components/ui/text'; import { useAppSelector } from '@/hooks/use-app-selector'; import { useFeatures } from '@/hooks/use-features'; import { useInstance } from '@/hooks/use-instance'; @@ -180,16 +179,16 @@ const TranslateButton: React.FC = ({ status }) => { }; const button = ( - @@ -201,9 +200,9 @@ const TranslateButton: React.FC = ({ status }) => { const provider = translationQuery.data.provider; return ( -
+
{button} - +

= ({ status }) => { ) : undefined, }} /> - +

); } diff --git a/packages/nicolium/src/styles/new/statuses.scss b/packages/nicolium/src/styles/new/statuses.scss index dd0e0ebcf..8d8488966 100644 --- a/packages/nicolium/src/styles/new/statuses.scss +++ b/packages/nicolium/src/styles/new/statuses.scss @@ -902,3 +902,63 @@ div:has(> .⁂-timeline-status:not(.⁂-timeline-status--connected-bottom)) } } } + +.⁂-status-tombstone { + @include mixins.text($theme: muted, $align: center); + display: flex; + height: 42px; + align-items: center; + justify-content: center; + border-radius: 0.5rem; + border: 2px solid rgb(var(--color-gray-200)); + text-align: center; + + .dark & { + border-color: rgb(var(--color-gray-800)); + } + + &__container { + height: 4rem; + } +} + +.⁂-translate-button { + display: flex; + width: fit-content; + align-items: center; + gap: 0.25rem; + color: rgb(var(--color-primary-600)); + + .dark & { + color: rgb(var(--color-gray-600)); + } + + &:hover { + text-decoration: underline; + } + + &__container { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + } + + &__icon { + width: 1rem; + height: 1rem; + + &--loading { + @keyframes spin { + to { + transform: rotate(360deg); + } + } + animation: spin 1s linear infinite; + } + } + + &__info { + @include mixins.text($theme: muted); + } +}