From f5f86d7e609eef9e792c07b043f5efe089d9e478 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina.teudan.ext@knecon.com>
Date: Wed, 23 Aug 2023 18:43:36 +0300
Subject: [PATCH] Circle button variable radius, dark-bg type

---
 src/assets/styles/_common-variables.scss | 1 +
 src/assets/styles/common-buttons.scss    | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/src/assets/styles/_common-variables.scss b/src/assets/styles/_common-variables.scss
index 4cf4582..f887b94 100644
--- a/src/assets/styles/_common-variables.scss
+++ b/src/assets/styles/_common-variables.scss
@@ -61,6 +61,7 @@ body {
     --iqser-textarea-padding-y: 7px;
     --iqser-font-family: Inter, sans-serif;
     --iqser-app-name-font-family: Inter, sans-serif;
+    --iqser-circle-button-radius: 50%;
 }
 
 $required-variables: 'iqser-primary';
diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss
index 073d129..d6360fd 100644
--- a/src/assets/styles/common-buttons.scss
+++ b/src/assets/styles/common-buttons.scss
@@ -111,12 +111,17 @@ iqser-circle-button {
         display: flex;
         align-items: center;
         justify-content: center;
+        border-radius: var(--iqser-circle-button-radius);
 
         .mat-mdc-button-touch-target {
             width: var(--circle-button-size);
             height: var(--circle-button-size);
         }
 
+        .mat-mdc-button-persistent-ripple {
+            border-radius: var(--iqser-circle-button-radius);
+        }
+
         &.mat-mdc-button-base {
             height: var(--circle-button-size);
             width: var(--circle-button-size);
@@ -139,6 +144,10 @@ iqser-circle-button {
             background: var(--iqser-primary);
         }
 
+        &.dark-bg {
+            background: var(--iqser-btn-bg);
+        }
+
         &.warn:not([disabled]) {
             --mdc-icon-button-icon-color: var(--iqser-accent);
             background-color: var(--iqser-warn);