ugcinc-render 1.8.196 → 1.8.198

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -3612,7 +3612,7 @@ var IG_THEME_COLORS = {
3612
3612
  footerBg: "#d3d3d3",
3613
3613
  inputBg: "#EFEFEF",
3614
3614
  textPrimary: "#000000",
3615
- textSecondary: "#8E8E8E",
3615
+ textSecondary: "#6a6e77",
3616
3616
  recipientBubble: "#f4f5f7",
3617
3617
  divider: "#ecedef",
3618
3618
  activeGreen: "#1CD14F",
@@ -4578,6 +4578,7 @@ function generateMessageElements(props, calculatedMessages) {
4578
4578
  var STORY_REPLY_INPUT_ID_PREFIX = "story-reply-";
4579
4579
  function generateStoryReplyElements(props, calculatedMessages) {
4580
4580
  const elements = [];
4581
+ const themeColors = getThemeColors(props.theme);
4581
4582
  const storyReplyImageWidth = props.storyReplyImageWidth ?? STORY_REPLY_DEFAULTS.storyReplyImageWidth;
4582
4583
  const storyReplyImageRight = props.storyReplyImageRight ?? STORY_REPLY_DEFAULTS.storyReplyImageRight;
4583
4584
  const storyReplyImageBorderRadius = props.storyReplyImageBorderRadius ?? STORY_REPLY_DEFAULTS.storyReplyImageBorderRadius;
@@ -4611,6 +4612,8 @@ function generateStoryReplyElements(props, calculatedMessages) {
4611
4612
  borderRadius: storyReplyImageBorderRadius
4612
4613
  });
4613
4614
  const barWidth = storyReplyBarRight - storyReplyBarLeft;
4615
+ const isLightMode = props.theme === "light";
4616
+ const storyReplyBarColor = isLightMode ? "#c3c4c6" : "#2e3339";
4614
4617
  elements.push({
4615
4618
  id: `story-reply-bar-${cm.message.id}`,
4616
4619
  type: "text",
@@ -4620,7 +4623,7 @@ function generateStoryReplyElements(props, calculatedMessages) {
4620
4623
  height: imageHeight,
4621
4624
  zIndex: 3,
4622
4625
  text: "",
4623
- backgroundColor: "#2e3339",
4626
+ backgroundColor: storyReplyBarColor,
4624
4627
  backgroundOpacity: 100,
4625
4628
  backgroundBorderRadius: {
4626
4629
  topLeft: barWidth / 2,
@@ -4643,7 +4646,7 @@ function generateStoryReplyElements(props, calculatedMessages) {
4643
4646
  font: "apple",
4644
4647
  fontSize: storyReplyTextFontSize,
4645
4648
  fontWeight: "normal",
4646
- color: "#a3aab2",
4649
+ color: themeColors.textSecondary,
4647
4650
  letterSpacing: storyReplyTextLetterSpacing,
4648
4651
  textAlign: "left",
4649
4652
  verticalAlign: "middle"
package/dist/index.mjs CHANGED
@@ -2658,7 +2658,7 @@ var IG_THEME_COLORS = {
2658
2658
  footerBg: "#d3d3d3",
2659
2659
  inputBg: "#EFEFEF",
2660
2660
  textPrimary: "#000000",
2661
- textSecondary: "#8E8E8E",
2661
+ textSecondary: "#6a6e77",
2662
2662
  recipientBubble: "#f4f5f7",
2663
2663
  divider: "#ecedef",
2664
2664
  activeGreen: "#1CD14F",
@@ -3624,6 +3624,7 @@ function generateMessageElements(props, calculatedMessages) {
3624
3624
  var STORY_REPLY_INPUT_ID_PREFIX = "story-reply-";
3625
3625
  function generateStoryReplyElements(props, calculatedMessages) {
3626
3626
  const elements = [];
3627
+ const themeColors = getThemeColors(props.theme);
3627
3628
  const storyReplyImageWidth = props.storyReplyImageWidth ?? STORY_REPLY_DEFAULTS.storyReplyImageWidth;
3628
3629
  const storyReplyImageRight = props.storyReplyImageRight ?? STORY_REPLY_DEFAULTS.storyReplyImageRight;
3629
3630
  const storyReplyImageBorderRadius = props.storyReplyImageBorderRadius ?? STORY_REPLY_DEFAULTS.storyReplyImageBorderRadius;
@@ -3657,6 +3658,8 @@ function generateStoryReplyElements(props, calculatedMessages) {
3657
3658
  borderRadius: storyReplyImageBorderRadius
3658
3659
  });
3659
3660
  const barWidth = storyReplyBarRight - storyReplyBarLeft;
3661
+ const isLightMode = props.theme === "light";
3662
+ const storyReplyBarColor = isLightMode ? "#c3c4c6" : "#2e3339";
3660
3663
  elements.push({
3661
3664
  id: `story-reply-bar-${cm.message.id}`,
3662
3665
  type: "text",
@@ -3666,7 +3669,7 @@ function generateStoryReplyElements(props, calculatedMessages) {
3666
3669
  height: imageHeight,
3667
3670
  zIndex: 3,
3668
3671
  text: "",
3669
- backgroundColor: "#2e3339",
3672
+ backgroundColor: storyReplyBarColor,
3670
3673
  backgroundOpacity: 100,
3671
3674
  backgroundBorderRadius: {
3672
3675
  topLeft: barWidth / 2,
@@ -3689,7 +3692,7 @@ function generateStoryReplyElements(props, calculatedMessages) {
3689
3692
  font: "apple",
3690
3693
  fontSize: storyReplyTextFontSize,
3691
3694
  fontWeight: "normal",
3692
- color: "#a3aab2",
3695
+ color: themeColors.textSecondary,
3693
3696
  letterSpacing: storyReplyTextLetterSpacing,
3694
3697
  textAlign: "left",
3695
3698
  verticalAlign: "middle"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ugcinc-render",
3
- "version": "1.8.196",
3
+ "version": "1.8.198",
4
4
  "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",