diff --git a/src/parent-style.css b/src/parent-style.css index ed205f26c6a9b084bdc9fc97480eea41e102e70e..87f19c559ff5a221384e6ec2bb0cbd8cc75a354f 100644 --- a/src/parent-style.css +++ b/src/parent-style.css @@ -24,13 +24,16 @@ bottom: 15px; } -.start button { +.start-chat-btn { width: 64px; height: 64px; border: none; border-radius: 100%; - background: no-repeat center url('./ui/res/chat-bubbles.svg'), #295dbd; cursor: pointer; background: no-repeat center url('./ui/res/chat-bubbles.svg'), linear-gradient(180deg, #7657F2 0%, #5C56F5 100%); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 12px 32px -2px rgba(0, 0, 0, 0.2); } + +.start-background-minimized { + background: no-repeat center url("./ui/res/chevron-down-button.svg"), linear-gradient(180deg, #7657F2 0%, #5C56F5 100%); +} diff --git a/src/parent.ts b/src/parent.ts index b41441809b392c6b71070788a7202ae208383254..af78fcfda1330649988bac920dc5d40bc81e0472 100644 --- a/src/parent.ts +++ b/src/parent.ts @@ -37,7 +37,7 @@ function renderStartButton() { const container = document.createElement("div"); container.className = "start"; const button = document.createElement("button"); - button.className = "StartChat"; + button.className = "start-chat-btn"; button.onclick = () => isIframeLoaded? minimizeIframe() : loadChatterboxIframe(); container.appendChild(button); document.body.appendChild(container); @@ -60,24 +60,27 @@ function loadChatterboxIframe() { iframe.className = "chatterbox-iframe"; document.body.appendChild(iframe); isIframeLoaded = true; + document.querySelector(".start-chat-btn").classList.add("start-background-minimized"); if (isMobile()) { - (document.querySelector(".start") as HTMLButtonElement).style.display = "none"; + (document.querySelector(".start") as HTMLDivElement).style.display = "none"; } } function minimizeIframe() { const iframeElement = document.querySelector(".chatterbox-iframe") as HTMLIFrameElement; - const startButton = document.querySelector(".start") as HTMLButtonElement; + const startButtonDiv = document.querySelector(".start") as HTMLDivElement; if (iframeElement.style.display !== "none") { iframeElement.style.display = "none"; + document.querySelector(".start-chat-btn").classList.remove("start-background-minimized"); if (isMobile()) { - startButton.style.display = "block"; + startButtonDiv.style.display = "block"; } } else { iframeElement.style.display = "block"; + document.querySelector(".start-chat-btn").classList.add("start-background-minimized"); if (isMobile()) { - startButton.style.display = "none"; + startButtonDiv.style.display = "none"; } } } diff --git a/src/ui/res/chevron-down-button.svg b/src/ui/res/chevron-down-button.svg new file mode 100644 index 0000000000000000000000000000000000000000..777f2ef99ad7c96a6169d52e57b96e7395ae71b4 --- /dev/null +++ b/src/ui/res/chevron-down-button.svg @@ -0,0 +1,10 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_102_4136)"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M2.56066 8.04481C3.14645 7.45902 4.09773 7.45748 4.68541 8.04137L12.134 15.4419L19.5586 8.01731C20.1444 7.43153 21.0957 7.42999 21.6834 8.01388C22.2711 8.59776 22.2726 9.54597 21.6868 10.1318L13.2015 18.617C12.6157 19.2028 11.6645 19.2044 11.0768 18.6205L2.56409 10.1627C1.97641 9.5788 1.97487 8.6306 2.56066 8.04481Z" fill="white"/> +</g> +<defs> +<clipPath id="clip0_102_4136"> +<rect width="24" height="24" fill="white"/> +</clipPath> +</defs> +</svg>