@digi-frontend/dgate-api-documentation 1.0.28 → 1.0.31

package/src/assets/icons/DownArrow.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.2013 14.9613C12.0024 14.9611 11.8118 14.882 11.6713 14.7413L8.20129 11.2613C8.06881 11.1191 7.99669 10.9311 8.00012 10.7368C8.00355 10.5424 8.08231 10.3571 8.21972 10.2197C8.35713 10.0822 8.54251 10.0035 8.73681 10.0001C8.93111 9.99669 9.11917 10.0688 9.26135 10.2013L12.2013 13.2013L15.1412 10.2013C15.2834 10.0688 15.4715 9.99669 15.6658 10.0001C15.8601 10.0035 16.0454 10.0822 16.1829 10.2197C16.3203 10.3571 16.399 10.5424 16.4025 10.7368C16.4059 10.9311 16.3338 11.1191 16.2013 11.2613L12.7313 14.7513C12.5892 14.8883 12.3987 14.9638 12.2013 14.9613Z" fill="#12131A"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2013 14.9613C12.0024 14.9611 11.8118 14.882 11.6713 14.7413L8.20129 11.2613C8.06881 11.1191 7.99669 10.9311 8.00012 10.7368C8.00355 10.5424 8.08231 10.3571 8.21972 10.2197C8.35713 10.0822 8.54251 10.0035 8.73681 10.0001C8.93111 9.99669 9.11917 10.0688 9.26135 10.2013L12.2013 13.2013L15.1412 10.2013C15.2834 10.0688 15.4715 9.99669 15.6658 10.0001C15.8601 10.0035 16.0454 10.0822 16.1829 10.2197C16.3203 10.3571 16.399 10.5424 16.4025 10.7368C16.4059 10.9311 16.3338 11.1191 16.2013 11.2613L12.7313 14.7513C12.5892 14.8883 12.3987 14.9638 12.2013 14.9613Z" fill="#12131A"/>
+</svg>

package/src/assets/icons/EditIcon.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.96867 13.9157L13.6592 4.41662C14.906 3.19446 16.9283 3.19446 18.175 4.41662L19.4694 5.6854C20.7162 6.90755 20.7162 8.88985 19.4694 10.112L9.74061 19.6486C9.1843 20.1939 8.43007 20.4999 7.64282 20.4999H3.65854C3.28841 20.4999 2.99098 20.201 3.00021 19.8383L3.10043 15.8975C3.12036 15.1526 3.43127 14.4425 3.96867 13.9157ZM18.5381 6.59831L17.2437 5.32953C16.5113 4.61156 15.323 4.61156 14.5905 5.32953L13.8382 6.06697L17.7862 9.93612L18.5381 9.19909C19.2705 8.48112 19.2705 7.31628 18.5381 6.59831ZM4.89998 14.8287L12.9069 6.97989L16.8549 10.849L8.8093 18.7357L8.70228 18.8317C8.4067 19.0745 8.03222 19.2088 7.64282 19.2088L4.33345 19.2084L4.41707 15.9305C4.42814 15.5169 4.60126 15.1215 4.89998 14.8287ZM21 19.8545C21 19.498 20.7052 19.2089 20.3415 19.2089H13.471L13.3816 19.2148C13.0602 19.2576 12.8125 19.5277 12.8125 19.8545C12.8125 20.211 13.1073 20.5 13.471 20.5H20.3415L20.4308 20.4941C20.7523 20.4514 21 20.1813 21 19.8545Z" fill="#3A6CD1"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.96867 13.9157L13.6592 4.41662C14.906 3.19446 16.9283 3.19446 18.175 4.41662L19.4694 5.6854C20.7162 6.90755 20.7162 8.88985 19.4694 10.112L9.74061 19.6486C9.1843 20.1939 8.43007 20.4999 7.64282 20.4999H3.65854C3.28841 20.4999 2.99098 20.201 3.00021 19.8383L3.10043 15.8975C3.12036 15.1526 3.43127 14.4425 3.96867 13.9157ZM18.5381 6.59831L17.2437 5.32953C16.5113 4.61156 15.323 4.61156 14.5905 5.32953L13.8382 6.06697L17.7862 9.93612L18.5381 9.19909C19.2705 8.48112 19.2705 7.31628 18.5381 6.59831ZM4.89998 14.8287L12.9069 6.97989L16.8549 10.849L8.8093 18.7357L8.70228 18.8317C8.4067 19.0745 8.03222 19.2088 7.64282 19.2088L4.33345 19.2084L4.41707 15.9305C4.42814 15.5169 4.60126 15.1215 4.89998 14.8287ZM21 19.8545C21 19.498 20.7052 19.2089 20.3415 19.2089H13.471L13.3816 19.2148C13.0602 19.2576 12.8125 19.5277 12.8125 19.8545C12.8125 20.211 13.1073 20.5 13.471 20.5H20.3415L20.4308 20.4941C20.7523 20.4514 21 20.1813 21 19.8545Z" fill="#3A6CD1"/>
+</svg>

package/src/assets/icons/UpArrow.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.6713 14.9814C15.4733 14.9771 15.2841 14.8986 15.1412 14.7614L12.2013 11.7614L9.26135 14.7614C9.11917 14.8939 8.93111 14.966 8.73681 14.9626C8.54251 14.9592 8.35713 14.8805 8.21972 14.743C8.08231 14.6056 8.00355 14.4203 8.00012 14.226C7.99669 14.0317 8.06881 13.8436 8.20129 13.7014L11.6713 10.2114C11.8143 10.0757 12.0041 10 12.2013 10C12.3985 10 12.5882 10.0757 12.7313 10.2114L16.2013 13.7014C16.3417 13.842 16.4206 14.0326 16.4206 14.2314C16.4206 14.4301 16.3417 14.6208 16.2013 14.7614C16.0584 14.8986 15.8693 14.9771 15.6713 14.9814V14.9814Z" fill="#12131A"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.6713 14.9814C15.4733 14.9771 15.2841 14.8986 15.1412 14.7614L12.2013 11.7614L9.26135 14.7614C9.11917 14.8939 8.93111 14.966 8.73681 14.9626C8.54251 14.9592 8.35713 14.8805 8.21972 14.743C8.08231 14.6056 8.00355 14.4203 8.00012 14.226C7.99669 14.0317 8.06881 13.8436 8.20129 13.7014L11.6713 10.2114C11.8143 10.0757 12.0041 10 12.2013 10C12.3985 10 12.5882 10.0757 12.7313 10.2114L16.2013 13.7014C16.3417 13.842 16.4206 14.0326 16.4206 14.2314C16.4206 14.4301 16.3417 14.6208 16.2013 14.7614C16.0584 14.8986 15.8693 14.9771 15.6713 14.9814V14.9814Z" fill="#12131A"/>
+</svg>

package/src/assets/icons/deleteOutlinedIcon.svg

@@ -1,8 +1,8 @@
-<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M33.5 66C51.4493 66 66 51.4493 66 33.5C66 15.5507 51.4493 1 33.5 1C15.5507 1 1 15.5507 1 33.5C1 51.4493 15.5507 66 33.5 66Z" stroke="#DA3F3F" stroke-width="1.5"/>
-<path d="M43 27.98C39.67 27.65 36.32 27.48 32.98 27.48C31 27.48 29.02 27.58 27.04 27.78L25 27.98" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M30.5 26.97L30.72 25.66C30.88 24.71 31 24 32.69 24H35.31C37 24 37.13 24.75 37.28 25.67L37.5 26.97" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M40.85 31.1401L40.2 41.2101C40.09 42.7801 40 44.0001 37.21 44.0001H30.79C28 44.0001 27.91 42.7801 27.8 41.2101L27.15 31.1401" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M32.33 38.5H35.66" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M31.5 34.5H36.5" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.5 66C51.4493 66 66 51.4493 66 33.5C66 15.5507 51.4493 1 33.5 1C15.5507 1 1 15.5507 1 33.5C1 51.4493 15.5507 66 33.5 66Z" stroke="#DA3F3F" stroke-width="1.5"/>
+<path d="M43 27.98C39.67 27.65 36.32 27.48 32.98 27.48C31 27.48 29.02 27.58 27.04 27.78L25 27.98" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.5 26.97L30.72 25.66C30.88 24.71 31 24 32.69 24H35.31C37 24 37.13 24.75 37.28 25.67L37.5 26.97" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40.85 31.1401L40.2 41.2101C40.09 42.7801 40 44.0001 37.21 44.0001H30.79C28 44.0001 27.91 42.7801 27.8 41.2101L27.15 31.1401" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.33 38.5H35.66" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.5 34.5H36.5" stroke="#DA3F3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/index.ts

@@ -1,8 +1,8 @@
-export { default as UpArrowIcon } from './UpArrow.svg'
-export { default as DownArrowIcon } from './DownArrow.svg'
-export { default as CloseIcon } from './CloseIcon.svg'
-export { default as CheckMarkSquare } from './CheckMarkSquare.svg'
-export { default as DeleteIcon } from './DeleteIcon.svg'
-export { default as EditIcon } from './EditIcon.svg'
-export { default as AddRow } from './AddRow.svg'
-export { default as deleteOutlinedIcon } from './deleteOutlinedIcon.svg'
+export { default as UpArrowIcon } from './UpArrow.svg'
+export { default as DownArrowIcon } from './DownArrow.svg'
+export { default as CloseIcon } from './CloseIcon.svg'
+export { default as CheckMarkSquare } from './CheckMarkSquare.svg'
+export { default as DeleteIcon } from './DeleteIcon.svg'
+export { default as EditIcon } from './EditIcon.svg'
+export { default as AddRow } from './AddRow.svg'
+export { default as deleteOutlinedIcon } from './deleteOutlinedIcon.svg'

package/src/components/Chips/Chips.tsx

@@ -1,87 +1,87 @@
-import React, { useEffect, useRef, useState } from 'react'
-import SVGLoader from '../../components/SVGLoader/SVGLoader'
-import { CloseIcon, DownArrowIcon, UpArrowIcon } from '../../assets/icons'
-import './style.scss'
-
-type ChipItemType = {
-  id: number | string
-  label: string
-  className?: string
-  disabled?: boolean
-  [key: string]: unknown
-}
-
-export type CustomChipsType = {
-  className?: string
-  items: ChipItemType[]
-  onDelete?: (items: ChipItemType[]) => void
-  onClick?: (item: ChipItemType) => void
-}
-
-const Chips = ({ className, items, onDelete, onClick }: CustomChipsType) => {
-  const showMoreAppearsAfterHeight = 58
-  const [showBtnVisible, setShowBtnVisible] = useState(false)
-  const [showBtnOpen, setShowBtnOpen] = useState(false) // Fixed typo
-  const dropdownList = useRef<HTMLDivElement | null>(null) // Specify the correct type for the ref
-
-  useEffect(() => {
-    if (dropdownList.current) {
-      const showMoreOrLess = setTimeout(() => {
-        const offsetHeight = dropdownList?.current?.offsetHeight as number // Correctly infer offsetHeight
-        setShowBtnVisible(offsetHeight > showMoreAppearsAfterHeight)
-      }, 0) // Pass 0 as a number, not an array
-
-      return () => clearTimeout(showMoreOrLess)
-    }
-  }, [items?.length, showMoreAppearsAfterHeight])
-
-  const showButtonHandler = (e: any) => {
-    e?.stopPropagation()
-    setShowBtnOpen(!showBtnOpen)
-  }
-
-  return (
-    <div className={`chips-container ${className ?? ''}`}>
-      {!!items?.length && (
-        <div className={`overflow-dropdown-div ${showBtnOpen && 'dropdown-max-height dropdown-overflow'}`}>
-          <div ref={dropdownList} className='dropdown-list'>
-            {items?.map((chip, index) => (
-              <div
-                key={chip.id}
-                className={`chip ${chip.disabled ? 'disabled' : ''}${!!onClick ? 'clickable' : ''}${chip?.className ?? ''}`}
-                onClick={() => !!onClick && chip.disabled === false && onClick(chip)}
-              >
-                <span className='chip-text'> {chip.label} </span>
-                {chip.disabled !== true && (
-                  <SVGLoader
-                    onClick={(e: any) => {
-                      e.stopPropagation()
-                      const filteredChips = items.filter((_, iIndex) => iIndex !== index)
-                      onDelete && onDelete(filteredChips)
-                    }}
-                    className='chip-close-icon'
-                    src={CloseIcon}
-                    width={'1.25rem'}
-                    height={'1.25rem'}
-                  />
-                )}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-      {showBtnVisible ? (
-        <button className='show-btn' onClick={showButtonHandler} type='button'>
-          <div className='show-btn-text-container'>
-            <span className='show-btn-text'>{showBtnOpen ? 'Show Less' : 'Show More'}</span>
-          </div>
-          <div className='show-btn-icon-container'>
-            <SVGLoader className='show-btn-icon' src={showBtnOpen ? UpArrowIcon : DownArrowIcon} width={'1.25rem'} height={'1.25rem'} />
-          </div>
-        </button>
-      ) : null}
-    </div>
-  )
-}
-
-export default Chips
+import React, { useEffect, useRef, useState } from 'react'
+import SVGLoader from '../../components/SVGLoader/SVGLoader'
+import { CloseIcon, DownArrowIcon, UpArrowIcon } from '../../assets/icons'
+import './style.scss'
+
+type ChipItemType = {
+  id: number | string
+  label: string
+  className?: string
+  disabled?: boolean
+  [key: string]: unknown
+}
+
+export type CustomChipsType = {
+  className?: string
+  items: ChipItemType[]
+  onDelete?: (items: ChipItemType[]) => void
+  onClick?: (item: ChipItemType) => void
+}
+
+const Chips = ({ className, items, onDelete, onClick }: CustomChipsType) => {
+  const showMoreAppearsAfterHeight = 58
+  const [showBtnVisible, setShowBtnVisible] = useState(false)
+  const [showBtnOpen, setShowBtnOpen] = useState(false) // Fixed typo
+  const dropdownList = useRef<HTMLDivElement | null>(null) // Specify the correct type for the ref
+
+  useEffect(() => {
+    if (dropdownList.current) {
+      const showMoreOrLess = setTimeout(() => {
+        const offsetHeight = dropdownList?.current?.offsetHeight as number // Correctly infer offsetHeight
+        setShowBtnVisible(offsetHeight > showMoreAppearsAfterHeight)
+      }, 0) // Pass 0 as a number, not an array
+
+      return () => clearTimeout(showMoreOrLess)
+    }
+  }, [items?.length, showMoreAppearsAfterHeight])
+
+  const showButtonHandler = (e: any) => {
+    e?.stopPropagation()
+    setShowBtnOpen(!showBtnOpen)
+  }
+
+  return (
+    <div className={`chips-container ${className ?? ''}`}>
+      {!!items?.length && (
+        <div className={`overflow-dropdown-div ${showBtnOpen && 'dropdown-max-height dropdown-overflow'}`}>
+          <div ref={dropdownList} className='dropdown-list'>
+            {items?.map((chip, index) => (
+              <div
+                key={chip.id}
+                className={`chip ${chip.disabled ? 'disabled' : ''}${!!onClick ? 'clickable' : ''}${chip?.className ?? ''}`}
+                onClick={() => !!onClick && chip.disabled === false && onClick(chip)}
+              >
+                <span className='chip-text'> {chip.label} </span>
+                {chip.disabled !== true && (
+                  <SVGLoader
+                    onClick={(e: any) => {
+                      e.stopPropagation()
+                      const filteredChips = items.filter((_, iIndex) => iIndex !== index)
+                      onDelete && onDelete(filteredChips)
+                    }}
+                    className='chip-close-icon'
+                    src={CloseIcon}
+                    width={'1.25rem'}
+                    height={'1.25rem'}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {showBtnVisible ? (
+        <button className='show-btn' onClick={showButtonHandler} type='button'>
+          <div className='show-btn-text-container'>
+            <span className='show-btn-text'>{showBtnOpen ? 'Show Less' : 'Show More'}</span>
+          </div>
+          <div className='show-btn-icon-container'>
+            <SVGLoader className='show-btn-icon' src={showBtnOpen ? UpArrowIcon : DownArrowIcon} width={'1.25rem'} height={'1.25rem'} />
+          </div>
+        </button>
+      ) : null}
+    </div>
+  )
+}
+
+export default Chips

package/src/components/Chips/style.scss

@@ -1,147 +1,147 @@
-.chips-container {
-  width: 100%;
-
-  .overflow-dropdown-div {
-    max-height: 4.25rem;
-    overflow: hidden;
-
-    .dropdown-list {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.625rem;
-      margin-top: 0.625rem;
-
-      .chip {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: #ebecf2;
-        border-radius: 3.125rem;
-        width: max-content;
-        height: 1.5rem;
-        overflow: hidden;
-        transition: all 0.4s ease-in-out;
-        padding-right: 0.9375rem;
-        cursor: default;
-
-        &:not(.disabled) {
-          &:hover {
-            background: #d8dae5;
-          }
-
-          &:active {
-            background: #696c80;
-            color: #fff;
-
-            .chip-close-icon {
-              path {
-                stroke: #fff;
-              }
-            }
-          }
-
-          .chip-close-icon {
-            cursor: pointer;
-          }
-        }
-
-        &.clickable {
-          cursor: pointer;
-        }
-
-        .chip-text {
-          display: flex;
-          align-items: center;
-          font-size: 0.95rem;
-          height: 100%;
-          padding-left: 0.9375rem;
-          margin-top: -0.125rem;
-        }
-
-        .chip-close-icon {
-          display: block;
-          height: 0.75rem;
-          width: 0.75rem;
-          margin-block: auto;
-          margin-left: 0.625rem;
-
-          path {
-            stroke: #12131a;
-          }
-        }
-      }
-    }
-  }
-
-  .dropdown-max-height {
-    max-height: -moz-fit-content;
-    max-height: fit-content !important;
-  }
-
-  .dropdown-overflow {
-    overflow: visible !important;
-  }
-
-  .show-btn {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: center;
-    align-items: center;
-    width: auto;
-    height: 1.25rem;
-    cursor: pointer;
-    border: none;
-    margin-top: 0.625rem;
-    color: #9a9eb2;
-    background-color: transparent;
-
-    .show-btn-text-container {
-      flex: 1 1 auto;
-
-      .show-btn-text {
-        font-size: 0.75rem;
-        text-decoration-line: underline;
-      }
-    }
-
-    .show-btn-icon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 1.25rem;
-      width: 1.25rem;
-      margin-top: 0.1875rem;
-      margin-left: 0.125rem;
-
-      .show-btn-icon {
-        height: 1.25rem;
-        width: 1.25rem;
-
-        path {
-          fill: #9a9eb2;
-        }
-      }
-    }
-
-    &:hover {
-      color: #7c9bea;
-
-      .show-btn-icon-container .show-btn-icon {
-        path {
-          fill: #7c9bea;
-        }
-      }
-    }
-
-    &:active {
-      color: #2c4fa4;
-
-      .show-btn-icon-container .show-btn-icon {
-        path {
-          fill: #2c4fa4;
-        }
-      }
-    }
-  }
-}
+.chips-container {
+  width: 100%;
+
+  .overflow-dropdown-div {
+    max-height: 4.25rem;
+    overflow: hidden;
+
+    .dropdown-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.625rem;
+      margin-top: 0.625rem;
+
+      .chip {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #ebecf2;
+        border-radius: 3.125rem;
+        width: max-content;
+        height: 1.5rem;
+        overflow: hidden;
+        transition: all 0.4s ease-in-out;
+        padding-right: 0.9375rem;
+        cursor: default;
+
+        &:not(.disabled) {
+          &:hover {
+            background: #d8dae5;
+          }
+
+          &:active {
+            background: #696c80;
+            color: #fff;
+
+            .chip-close-icon {
+              path {
+                stroke: #fff;
+              }
+            }
+          }
+
+          .chip-close-icon {
+            cursor: pointer;
+          }
+        }
+
+        &.clickable {
+          cursor: pointer;
+        }
+
+        .chip-text {
+          display: flex;
+          align-items: center;
+          font-size: 0.95rem;
+          height: 100%;
+          padding-left: 0.9375rem;
+          margin-top: -0.125rem;
+        }
+
+        .chip-close-icon {
+          display: block;
+          height: 0.75rem;
+          width: 0.75rem;
+          margin-block: auto;
+          margin-left: 0.625rem;
+
+          path {
+            stroke: #12131a;
+          }
+        }
+      }
+    }
+  }
+
+  .dropdown-max-height {
+    max-height: -moz-fit-content;
+    max-height: fit-content !important;
+  }
+
+  .dropdown-overflow {
+    overflow: visible !important;
+  }
+
+  .show-btn {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    height: 1.25rem;
+    cursor: pointer;
+    border: none;
+    margin-top: 0.625rem;
+    color: #9a9eb2;
+    background-color: transparent;
+
+    .show-btn-text-container {
+      flex: 1 1 auto;
+
+      .show-btn-text {
+        font-size: 0.75rem;
+        text-decoration-line: underline;
+      }
+    }
+
+    .show-btn-icon-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 1.25rem;
+      width: 1.25rem;
+      margin-top: 0.1875rem;
+      margin-left: 0.125rem;
+
+      .show-btn-icon {
+        height: 1.25rem;
+        width: 1.25rem;
+
+        path {
+          fill: #9a9eb2;
+        }
+      }
+    }
+
+    &:hover {
+      color: #7c9bea;
+
+      .show-btn-icon-container .show-btn-icon {
+        path {
+          fill: #7c9bea;
+        }
+      }
+    }
+
+    &:active {
+      color: #2c4fa4;
+
+      .show-btn-icon-container .show-btn-icon {
+        path {
+          fill: #2c4fa4;
+        }
+      }
+    }
+  }
+}