ramseyinhouse / feedback-component Goto Github PK

Proposed Feature or Bug

The --feedback-component-font-size and presumably all other font-related CSS custom properties are not taking effect correctly. Instead, more specific rules on the parent are winning out.

Example Code:

<style>
body {
     font-size: 16px;
}

:root {
     --feedback-component-font-size: 32px;
}
</style>

<!-- The rendered font size is still 16px, even though it should be 32px. -->
<feedback-component></feedback-component>

Hi, I'm new in development.

I need to refactor the code, add some style and remove bugs, but I don't understand how.
I have to errors within:

1. stylelint: Could not find "@ramseyinhouse/stylelint-config". Do you need a configBasedir?
2. ⨯ node_modules@ramseyinhouse\feedback-component\dist\index.umd.js (1:1453) @ HTMLElement
   ⨯ ReferenceError: HTMLElement is not defined
   at webpack_require (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\webpack-runtime.js:33:42)
   at eval (./app/components/Feedback/Feedback.tsx:18:25)
   at (ssr)/./app/components/Feedback/Feedback.tsx (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\app\page.js:250:1)
   at webpack_require (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\webpack-runtime.js:33:42)
   at eval (./app/page.tsx:14:87)
   at (ssr)/./app/page.tsx (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\app\page.js:327:1)
   at webpack_require (C:\Users\RudenkoSerhii\Documents\GitHub\nextjs-template.next\server\webpack-runtime.js:33:42)
   at JSON.parse ()
   null
   when I remove component, everything is Ok.
3. I need to change background color buttons. When I changed "background: var(--feedback-component-button-background-color, #e8eced);" nothing happening

Feedback.tsx component:

"use client";

import { useState } from "react";
import LikeIconSvg from "../SVGs/LikeIconSvg";
import DislikeIconSvg from "../SVGs/DislikeIconSvg";
import Script from "next/script";
let feedbackComponent = require("@ramseyinhouse/feedback-component");

declare global {
namespace JSX {
interface IntrinsicElements {
["feedback-component"]: React.DetailedHTMLProps<
React.HTMLAttributes,
HTMLElement
>;
}
}
}
export const Feedback = () => {
const [sadFeedback, setSadFeedback] = useState(false);
const [changeColor, setChangeColor] = useState(false);

const handleFeedback = () => {
setChangeColor(!changeColor);
};

const handleBadFeedback = () => {
setSadFeedback(true);
};

return (
<>
{sadFeedback ? (

Hope You help me)