updating text style on theme change

This commit is contained in:
Roland Osborne 2024-03-02 22:25:54 -08:00
parent 3629f30029
commit 06618102c9
3 changed files with 6 additions and 5 deletions

View File

@ -19,6 +19,7 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
update={(text) => actions.updateTopic(topic, text)} update={(text) => actions.updateTopic(topic, text)}
sealed={state.sealed && !state.contentKey} sealed={state.sealed && !state.contentKey}
strings={state.strings} strings={state.strings}
colors={state.colors}
menuStyle={state.menuStyle} menuStyle={state.menuStyle}
/>) />)
} }

View File

@ -9,7 +9,7 @@ import { ExclamationCircleOutlined, DeleteOutlined, EditOutlined, FireOutlined,
import { Carousel } from 'carousel/Carousel'; import { Carousel } from 'carousel/Carousel';
import { useTopicItem } from './useTopicItem.hook'; import { useTopicItem } from './useTopicItem.hook';
export function TopicItem({ host, contentKey, sealed, topic, update, remove, strings, menuStyle }) { export function TopicItem({ host, contentKey, sealed, topic, update, remove, strings, colors, menuStyle }) {
const [ modal, modalContext ] = Modal.useModal(); const [ modal, modalContext ] = Modal.useModal();
const { state, actions } = useTopicItem(topic, contentKey); const { state, actions } = useTopicItem(topic, contentKey);
@ -106,7 +106,7 @@ export function TopicItem({ host, contentKey, sealed, topic, update, remove, str
<> <>
{ topic.transform === 'error' && ( { topic.transform === 'error' && (
<div className="asset-placeholder"> <div className="asset-placeholder">
<FireOutlined style={{ fontSize: 32, color: '#ff8888' }} /> <FireOutlined style={{ fontSize: 32, color: colors.alertText }} />
</div> </div>
)} )}
{ topic.transform === 'incomplete' && ( { topic.transform === 'incomplete' && (
@ -126,7 +126,7 @@ export function TopicItem({ host, contentKey, sealed, topic, update, remove, str
)} )}
{ !sealed && !state.editing && ( { !sealed && !state.editing && (
<div className="message"> <div className="message">
<div style={{ color: topic.textColor, fontSize: topic.textSize }}>{ topic.clickable }</div> <div style={{ color: topic.textColor ? topic.textColor : colors.mainText, fontSize: topic.textSize }}>{ topic.clickable }</div>
</div> </div>
)} )}
{ state.editing && ( { state.editing && (

View File

@ -239,7 +239,7 @@ export function useConversation(cardId, channelId) {
item.assets = message.assets; item.assets = message.assets;
item.text = message.text; item.text = message.text;
item.clickable = clickableText(message.text); item.clickable = clickableText(message.text);
item.textColor = message.textColor ? message.textColor : state.colors.mainText; item.textColor = message.textColor ? message.textColor : null;
item.textSize = message.textSize ? message.textSize : 14; item.textSize = message.textSize ? message.textSize : 14;
} }
if (detail.dataType === 'sealedtopic' && state.contentKey) { if (detail.dataType === 'sealedtopic' && state.contentKey) {
@ -247,7 +247,7 @@ export function useConversation(cardId, channelId) {
item.assets = subject.message.assets; item.assets = subject.message.assets;
item.text = subject.message.text; item.text = subject.message.text;
item.clickable = clickableText(subject.message.text); item.clickable = clickableText(subject.message.text);
item.textColor = subject.message.textColor ? subject.message.textColor : state.colors.mainText; item.textColor = subject.message.textColor ? subject.message.textColor : null;
item.textSize = subject.message.textSize ? subject.message.textSize : 14; item.textSize = subject.message.textSize ? subject.message.textSize : 14;
} }
} }