From c1b09dc3a2107465a2fb2c34fc9b298aab46a57e Mon Sep 17 00:00:00 2001
From: Ladislav Martincik <ladislav.martincik@gmail.com>
Date: Wed, 10 Jul 2024 22:04:09 +0200
Subject: [PATCH] Extract styles for external overriding

---
 src/components/dialect/icons/DialectLogo.tsx  |  67 -------
 src/components/dialect/icons/HeliusLogo.tsx   | 158 ----------------
 src/components/dialect/icons/PhantomLogo.tsx  |  38 ----
 src/components/dialect/ui/ActionContainer.tsx |  10 +-
 src/components/dialect/ui/ActionLayout.tsx    |  60 ++++---
 .../dialect/ui/ActionLayoutSkeleton.tsx       |   2 +-
 src/components/dialect/ui/Badge.tsx           |  15 +-
 src/components/dialect/ui/Button.tsx          |   8 +-
 src/components/dialect/ui/PulseLoader.tsx     |   2 +-
 src/components/dialect/ui/Snackbar.tsx        |   6 +-
 .../dialect/ui/SolanaWalletButton.tsx         |  12 +-
 src/main.css                                  | 168 ++++++++++++++++++
 12 files changed, 222 insertions(+), 324 deletions(-)
 delete mode 100644 src/components/dialect/icons/DialectLogo.tsx
 delete mode 100644 src/components/dialect/icons/HeliusLogo.tsx
 delete mode 100644 src/components/dialect/icons/PhantomLogo.tsx

diff --git a/src/components/dialect/icons/DialectLogo.tsx b/src/components/dialect/icons/DialectLogo.tsx
deleted file mode 100644
index ff5fa30..0000000
--- a/src/components/dialect/icons/DialectLogo.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { SVGProps } from 'react';
-const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    width={127}
-    height={24}
-    viewBox="0 0 127 24"
-    fill="none"
-    preserveAspectRatio={'xMidYMid meet'}
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g clipPath="url(#clip0_1349_5762)">
-      <g clipPath="url(#clip1_1349_5762)">
-        <path
-          d="M.606 17.374c-.693-2.455-.602-6.988-.602-6.988s2.536 4.09 6.91 5.37c3.223.943 7.658 1.015 10.449-.247 3.38-1.109 5.479-4.557 4.489-7.022-1.454-3.624-5.687-5.059-10.1-4.715-3.382.263-6.17 1.884-7.837 3.479-1.648 1.577-2.065 2.846-2.065 2.846S.564 8.726.407 7.25C.047 3.867 3.089 1.233 7.423.32c5.873-1.234 12.77 1.164 16.535 5.854 2.605 3.244 3.328 7.641 1.176 11.427-3.223 5.67-10.399 6.792-15.046 6.252s-8.697-3.699-9.482-6.48z"
-          fill="currentColor"
-        />
-      </g>
-      <g clipPath="url(#clip2_1349_5762)">
-        <path d="M52.778 23.69V7.015h5.253V23.69h-5.253z" fill="currentColor" />
-        <path
-          d="M55.418 5.068c-.74 0-1.369-.24-1.9-.734-.53-.494-.796-1.101-.796-1.807 0-.692.265-1.285.796-1.779a2.691 2.691 0 011.9-.748c.74 0 1.383.254 1.9.748.531.494.797 1.087.797 1.78 0 .705-.266 1.298-.797 1.806-.53.494-1.16.734-1.9.734z"
-          fill="currentColor"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M40.53 23.69H32.4V1.453h8.117c2.235 0 4.177.452 5.784 1.341a9.14 9.14 0 013.758 3.826c.88 1.652 1.327 3.643 1.327 5.944 0 2.315-.447 4.306-1.327 5.972-.88 1.665-2.124 2.936-3.744 3.825-1.621.876-3.549 1.327-5.784 1.327zM37.724 19.1h2.612c1.23 0 2.277-.212 3.13-.635.866-.424 1.508-1.115 1.941-2.075.448-.96.671-2.245.671-3.84 0-1.596-.223-2.866-.67-3.826-.447-.96-1.104-1.638-1.97-2.061-.866-.424-1.914-.636-3.186-.636h-2.528v13.073z"
-          fill="currentColor"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M61.691 23.435c.81.353 1.746.537 2.808.537.769 0 1.453-.1 2.068-.297a4.798 4.798 0 001.607-.875 4.89 4.89 0 001.131-1.426h.126v2.33h4.945V12.352c0-.89-.181-1.666-.544-2.358a4.882 4.882 0 00-1.523-1.736c-.657-.48-1.44-.833-2.32-1.087a10.57 10.57 0 00-2.905-.381c-1.481 0-2.739.225-3.786.691-1.048.452-1.872 1.087-2.473 1.892-.6.79-.964 1.694-1.104 2.71l4.848.17c.112-.536.377-.96.81-1.256.42-.31.978-.452 1.677-.452.642 0 1.16.155 1.537.452.41.338.572.818.572 1.34 0 .34-.125.608-.39.791-.252.184-.671.325-1.244.424-.573.099-1.327.183-2.263.268-.839.07-1.621.212-2.361.424a6.237 6.237 0 00-1.956.903c-.573.396-1.006.918-1.328 1.553-.32.636-.488 1.412-.488 2.344 0 1.1.237 2.018.698 2.753.405.734 1.048 1.27 1.858 1.637zm5.952-3.29a3.364 3.364 0 01-1.523.354c-.6 0-1.104-.141-1.495-.438-.391-.296-.587-.706-.587-1.256 0-.367.084-.678.266-.932.181-.268.447-.48.796-.65.35-.169.768-.296 1.271-.366.238-.043.503-.071.769-.113.265-.043.517-.1.768-.156.251-.056.475-.113.685-.183.21-.07.39-.142.544-.212v1.581c0 .537-.14 1.017-.405 1.426-.265.395-.628.72-1.09.946z"
-          fill="currentColor"
-        />
-        <path d="M81.096 1.454V23.69h-5.253V1.454h5.253z" fill="currentColor" />
-        <path
-          d="M103.643 22.913c1.244.72 2.739 1.087 4.485 1.087 1.551 0 2.878-.282 4.01-.847 1.131-.579 2.011-1.37 2.626-2.4.629-1.03.964-2.23 1.02-3.6h-4.904c-.07.593-.223 1.087-.461 1.496a2.44 2.44 0 01-.936.918c-.377.212-.796.31-1.285.31-.615 0-1.146-.169-1.607-.508-.461-.352-.81-.86-1.075-1.524-.252-.678-.378-1.51-.378-2.5 0-.987.126-1.806.378-2.47.251-.677.614-1.186 1.075-1.524.461-.353.992-.523 1.607-.523.754 0 1.355.24 1.83.734.475.48.754 1.158.866 2.005h4.904c-.042-1.37-.377-2.555-1.02-3.572-.643-1.016-1.523-1.807-2.668-2.371-1.132-.551-2.459-.833-3.982-.833-1.732 0-3.213.367-4.457 1.087-1.243.72-2.193 1.736-2.864 3.035-.67 1.285-1.005 2.781-1.005 4.49 0 1.693.335 3.204 1.005 4.489a7.022 7.022 0 002.836 3.02z"
-          fill="currentColor"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M90.689 24c-1.732 0-3.213-.339-4.47-1.03a7.06 7.06 0 01-2.878-2.965c-.671-1.285-1.006-2.824-1.006-4.588 0-1.723.335-3.233 1.006-4.518a7.305 7.305 0 012.85-3.021c1.229-.72 2.668-1.087 4.33-1.087 1.174 0 2.25.183 3.228.55a6.95 6.95 0 012.528 1.638c.713.72 1.258 1.623 1.649 2.682s.587 2.273.587 3.643v1.327H87.518v.14c0 .678.125 1.271.39 1.794.266.508.644.903 1.132 1.186.49.282 1.062.423 1.747.423.46 0 .894-.07 1.271-.197.377-.128.699-.325.978-.58.266-.253.475-.564.615-.931l4.82.141a5.967 5.967 0 01-1.328 2.852c-.67.805-1.55 1.426-2.654 1.878-1.104.437-2.361.663-3.8.663zm2.948-10.475c-.014-.565-.098-1.003-.35-1.44a2.93 2.93 0 00-1.103-1.087c-.447-.255-.95-.381-1.537-.381s-1.118.126-1.579.395a2.891 2.891 0 00-1.103 1.073 3.1 3.1 0 00-.433 1.44h6.105z"
-          fill="currentColor"
-        />
-        <path
-          d="M126.578 7.016v3.911h-2.976v7.525c0 .324.056.593.154.79a.964.964 0 00.461.424c.196.085.447.113.727.113.195 0 .405-.014.628-.057.224-.042.405-.084.517-.113l.797 3.826c-.252.07-.601.17-1.062.269a8.253 8.253 0 01-1.621.211c-1.229.057-2.291-.084-3.171-.437-.88-.353-1.537-.904-2.012-1.652-.461-.748-.684-1.68-.67-2.81v-8.103h-2.18V7.016h2.18V3.021h5.252v3.995h2.976z"
-          fill="currentColor"
-        />
-      </g>
-    </g>
-    <defs>
-      <clipPath id="clip0_1349_5762">
-        <path d="M0 0H127V24H0z" />
-      </clipPath>
-      <clipPath id="clip1_1349_5762">
-        <path d="M0 0H26.4V24H0z" />
-      </clipPath>
-      <clipPath id="clip2_1349_5762">
-        <path transform="translate(32.4)" d="M0 0H94.5V24H0z" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-export default SvgComponent;
diff --git a/src/components/dialect/icons/HeliusLogo.tsx b/src/components/dialect/icons/HeliusLogo.tsx
deleted file mode 100644
index 5cdae34..0000000
--- a/src/components/dialect/icons/HeliusLogo.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { SVGProps } from 'react';
-
-const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    width={127}
-    height={24}
-    viewBox="0 0 600 150"
-    fill="none"
-    preserveAspectRatio={'xMidYMid meet'}
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <defs>
-      <style>
-        {`.cls-1 {
-        fill: url(#linear-gradient);
-      }
-
-      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15 {
-        stroke-width: 0px;
-      }
-
-      .cls-2 {
-        fill: url(#linear-gradient-11);
-      }
-
-      .cls-3 {
-        fill: url(#linear-gradient-12);
-      }
-
-      .cls-4 {
-        fill: url(#linear-gradient-13);
-      }
-
-      .cls-5 {
-        fill: url(#linear-gradient-10);
-      }
-
-      .cls-6 {
-        fill: url(#linear-gradient-14);
-      }
-
-      .cls-7 {
-        fill: url(#linear-gradient-4);
-      }
-
-      .cls-8 {
-        fill: url(#linear-gradient-2);
-      }
-
-      .cls-9 {
-        fill: url(#linear-gradient-3);
-      }
-
-      .cls-10 {
-        fill: url(#linear-gradient-8);
-      }
-
-      .cls-11 {
-        fill: url(#linear-gradient-9);
-      }
-
-      .cls-12 {
-        fill: url(#linear-gradient-7);
-      }
-
-      .cls-13 {
-        fill: url(#linear-gradient-5);
-      }
-
-      .cls-14 {
-        fill: url(#linear-gradient-6);
-      }
-
-      .cls-15 {
-        fill: #e84125;
-      }`}
-      </style>
-      <linearGradient id="linear-gradient" x1="41.88" y1="12.37" x2="74.65" y2="12.37" gradientUnits="userSpaceOnUse">
-        <stop offset="0" stopColor="#e35930" />
-        <stop offset="1" stopColor="#e84125" />
-      </linearGradient>
-      <linearGradient id="linear-gradient-2" x1="9.62" y1="36.47" x2="40.76" y2="36.47"
-                      xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-3" x1="-.92" y1="69.3" x2="29" y2="69.3" xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-4" x1="29.48" y1="101" x2="58.97" y2="101" xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-5" x1="59.1" y1="101.04" x2="88.98" y2="101.04"
-                      xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-6" x1="88.37" y1="69.19" x2="119.07" y2="69.19"
-                      xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-7" x1="75.95" y1="36.51" x2="107.49" y2="36.51"
-                      xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-8" x1="481.76" y1="-11070.2" x2="497.32" y2="-11070.2"
-                      gradientTransform="translate(-9282.07 -5843.57) rotate(120)" xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-9" x1="3349.93" y1="-6303.65" x2="3365.49" y2="-6303.65"
-                      gradientTransform="translate(-6990.63 -727.6) rotate(68.57)" xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-10" x1="1406.14" y1="-1084.43" x2="1421.7" y2="-1084.43"
-                      gradientTransform="translate(-1557.33 667.73) rotate(17.14)" xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-11" x1="-3879.44" y1="777.89" x2="-3863.88" y2="777.89"
-                      gradientTransform="translate(2843.77 -2812.35) rotate(-34.29)" xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-12" x1="-8633.65" y1="-2326.99" x2="-8618.09" y2="-2326.99"
-                      gradientTransform="translate(2998.57 -8415.92) rotate(-85.72)" xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-13" x1="-9174.18" y1="-7973.67" x2="-9158.62" y2="-7973.67"
-                      gradientTransform="translate(-1291.52 -12030.17) rotate(-137.15)"
-                      xlinkHref="#linear-gradient" />
-      <linearGradient id="linear-gradient-14" x1="-5117.29" y1="-12089.66" x2="-5101.73" y2="-12089.66"
-                      gradientTransform="translate(-6838.28 -11096.14) rotate(171.42)" xlinkHref="#linear-gradient" />
-    </defs>
-    <g id="Layer_1-2" data-name="Layer 1">
-      <g>
-        <g>
-          <path className="cls-1"
-                d="M74.65,24.74c-4.64-1.96-9.74-3.04-15.1-3.04s-10.46,1.08-15.1,3.04L58.32.71c.54-.94,1.9-.94,2.44,0l13.88,24.03Z" />
-          <path className="cls-8"
-                d="M40.76,26.54c-9.14,5.06-16.01,13.7-18.74,24.03l-10.31-26.27c-.4-1.01.45-2.07,1.52-1.91l27.53,4.15Z" />
-          <path className="cls-9"
-                d="M29,84.46L1,75.82c-1.04-.32-1.34-1.65-.55-2.38l20.8-19.3c-.34,2.07-.52,4.2-.52,6.37,0,9.04,3.09,17.36,8.27,23.95Z" />
-          <path className="cls-7"
-                d="M58.97,99.32l-24.55,16.73c-.9.61-2.12.03-2.2-1.06l-2.19-29.29c7,8.2,17.36,13.44,28.94,13.61Z" />
-          <path className="cls-13"
-                d="M88.98,85.82l-2.18,29.14c-.08,1.08-1.3,1.67-2.2,1.06l-24.5-16.7c11.55-.16,21.88-5.36,28.88-13.5Z" />
-          <path className="cls-14"
-                d="M118.08,75.73l-27.88,8.6c5.12-6.57,8.17-14.84,8.17-23.82,0-2.2-.19-4.36-.54-6.46l20.79,19.29c.8.74.49,2.07-.54,2.38Z" />
-          <path className="cls-12"
-                d="M107.39,24.35l-10.3,26.26c-2.72-10.32-9.57-18.95-18.68-24.03l27.46-4.14c1.07-.16,1.92.9,1.52,1.91Z" />
-          <path className="cls-10"
-                d="M59.55,107.7c-5.73,0-10.37,4.64-10.37,10.37h20.75c0-5.73-4.64-10.37-10.37-10.37Z" />
-          <path className="cls-11"
-                d="M97.47,90.71c-3.57,4.48-2.84,11.01,1.64,14.58l12.93-16.22c-4.48-3.57-11.01-2.84-14.58,1.64Z" />
-          <path className="cls-5"
-                d="M105.97,50.6c1.27,5.59,6.84,9.08,12.42,7.8l-4.62-20.23c-5.59,1.27-9.08,6.84-7.8,12.42Z" />
-          <path className="cls-2"
-                d="M80.52,18.87c5.16,2.49,11.36.32,13.85-4.85l-18.69-9c-2.49,5.16-.32,11.36,4.85,13.85Z" />
-          <path className="cls-3"
-                d="M38.11,18.87c5.16-2.49,7.33-8.69,4.84-13.85l-18.69,9c2.49,5.16,8.69,7.33,13.85,4.84Z" />
-          <path className="cls-4"
-                d="M13.4,50.6c1.27-5.59-2.22-11.15-7.81-12.42L.98,58.41c5.59,1.27,11.15-2.22,12.42-7.81Z" />
-          <path className="cls-6"
-                d="M8.5,89.07l12.94,16.22c4.48-3.57,5.21-10.1,1.64-14.58-3.57-4.48-10.1-5.21-14.58-1.64Z" />
-        </g>
-        <g>
-          <path className="cls-15"
-                d="M177.83,30.15v29.7h34.85v-27.98h15.88v66.6h-15.88v-24.46h-34.85v24.46h-15.88V34.44l15.88-4.29Z" />
-          <path className="cls-15"
-                d="M257.31,84.3h48.58l-4.29,14.16h-60.16V31.86h64.46l-4.29,14.16h-44.29v12.1h41.28v14.16h-41.28v12.02Z" />
-          <path className="cls-15" d="M331.38,31.86v52.44h46.86l-4.29,14.16h-58.45V31.86h15.88Z" />
-          <path className="cls-15" d="M400.99,31.86v66.6h-15.88V31.86h15.88Z" />
-          <path className="cls-15"
-                d="M467.59,31.86h15.88v40.17c0,19.4-15.88,27.89-36.39,27.89s-35.28-9.1-35.28-27.89v-37.59l15.88-4.29v41.88c0,9.78,6.52,13.48,20.17,13.48s19.74-3.95,19.74-13.48V31.86Z" />
-          <path className="cls-15"
-                d="M491.54,52.12c0-10.21,8.07-20.26,23.86-20.26h45.32l-4.29,14.16h-40.86c-4.89,0-7.3,3.09-7.3,6.09s2.49,6.01,7.3,6.01h23c15.53,0,23.6,10.04,23.6,20.26s-7.64,20.08-23.6,20.08h-47.03l4.29-14.16h42.57c4.81,0,7.3-2.83,7.3-5.92s-2.4-6.18-7.3-6.18h-23c-16.05,0-23.86-10.04-23.86-20.08Z" />
-        </g>
-      </g>
-    </g>
-  </svg>
-);
-
-export default SvgComponent;
\ No newline at end of file
diff --git a/src/components/dialect/icons/PhantomLogo.tsx b/src/components/dialect/icons/PhantomLogo.tsx
deleted file mode 100644
index bce59f8..0000000
--- a/src/components/dialect/icons/PhantomLogo.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { SVGProps } from 'react';
-
-const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    width={127}
-    height={24}
-    viewBox="0 0 1139 224"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      d="M31.8292 224C66.1548 224 91.951 194.147 107.345 170.557C105.473 175.776 104.433 180.995 104.433 186.006C104.433 199.784 112.338 209.596 127.941 209.596C149.368 209.596 172.252 190.807 184.11 170.557C183.278 173.48 182.862 176.194 182.862 178.699C182.862 188.302 188.271 194.356 199.296 194.356C234.038 194.356 268.988 132.772 268.988 78.9115C268.988 36.9506 247.768 0 194.512 0C100.896 0 0 114.401 0 188.302C0 217.32 15.6025 224 31.8292 224ZM162.266 74.3187C162.266 63.8807 168.091 56.5741 176.621 56.5741C184.942 56.5741 190.767 63.8807 190.767 74.3187C190.767 84.7568 184.942 92.2721 176.621 92.2721C168.091 92.2721 162.266 84.7568 162.266 74.3187ZM206.786 74.3187C206.786 63.8807 212.611 56.5741 221.14 56.5741C229.461 56.5741 235.286 63.8807 235.286 74.3187C235.286 84.7568 229.461 92.2721 221.14 92.2721C212.611 92.2721 206.786 84.7568 206.786 74.3187Z"
-      fill="#3A3259" />
-    <path
-      d="M310.588 201.245H341.793V170.557C341.793 156.153 340.545 150.725 333.264 136.112L337.216 134.024C347.826 158.867 362.805 167.843 378.199 167.843C402.955 167.843 422.718 146.132 422.718 112.522C422.718 80.3728 404.619 56.7828 378.615 56.7828C363.221 56.7828 347.826 65.5508 337.216 90.6021L333.264 88.5144C338.257 78.4939 341.793 69.0997 341.793 60.123H310.588V201.245ZM341.793 112.313C341.793 98.535 352.195 83.2954 367.589 83.2954C380.071 83.2954 390.265 93.5247 390.265 112.104C390.265 130.475 380.487 141.331 367.381 141.331C352.819 141.331 341.793 126.509 341.793 112.313Z"
-      fill="#3A3259" />
-    <path
-      d="M434.108 164.503H465.313V127.761C465.313 101.875 474.467 83.5042 491.525 83.5042C502.343 83.5042 505.672 90.8108 505.672 108.973V164.503H536.877V103.963C536.877 70.9786 525.019 56.7828 502.343 56.7828C479.043 56.7828 471.346 72.4399 462.401 91.4371L458.448 89.3495C463.857 77.6589 465.313 70.5611 465.313 60.123V24.0075H434.108V164.503Z"
-      fill="#3A3259" />
-    <path
-      d="M582.482 167.843C602.661 167.843 614.519 154.483 623.464 137.364L627.209 139.243C623.256 147.385 619.512 156.779 619.512 164.503H650.093V107.72C650.093 73.9012 635.946 56.7828 602.869 56.7828C570.416 56.7828 554.397 73.0662 551.277 90.1845L581.234 95.4035C582.274 86.4268 589.555 80.3728 601.205 80.3728C612.855 80.3728 619.512 86.2181 619.512 93.3159C619.512 100.414 612.647 103.754 594.34 103.963C567.295 104.38 547.324 114.192 547.324 135.068C547.324 152.186 560.846 167.843 582.482 167.843ZM578.321 132.98C578.321 116.488 604.533 127.97 618.888 115.236V118.993C618.888 133.815 605.782 144.671 592.675 144.671C585.81 144.671 578.321 141.748 578.321 132.98Z"
-      fill="#3A3259" />
-    <path
-      d="M662.458 164.503H693.663V127.761C693.663 101.875 702.816 83.5042 719.875 83.5042C730.693 83.5042 734.021 90.8108 734.021 108.973V164.503H765.227V103.963C765.227 70.9786 753.369 56.7828 730.693 56.7828C707.393 56.7828 699.696 72.4399 690.75 91.4371L686.798 89.3495C692.207 77.6589 693.663 70.5611 693.663 60.123H662.458V164.503Z"
-      fill="#3A3259" />
-    <path
-      d="M848.341 164.921V139.034C841.684 141.331 823.169 145.297 823.169 130.058V85.1743H848.133V60.123H823.169V32.1491L791.756 41.5433V60.123H773.033V85.1743H791.756L791.964 132.563C791.964 167.426 822.961 172.436 848.341 164.921Z"
-      fill="#3A3259" />
-    <path
-      d="M911.728 167.843C943.349 167.843 967.481 143.627 967.481 112.104C967.481 80.7903 943.349 56.7828 911.728 56.7828C880.107 56.7828 855.767 80.7903 855.767 112.104C855.767 143.627 880.107 167.843 911.728 167.843ZM888.012 112.313C888.012 94.986 897.79 82.8779 911.728 82.8779C925.666 82.8779 935.236 94.986 935.236 112.313C935.236 129.64 925.666 141.748 911.728 141.748C897.79 141.748 888.012 129.64 888.012 112.313Z"
-      fill="#3A3259" />
-    <path
-      d="M977.15 164.503H1008.35V127.761C1008.35 100.831 1016.88 83.5042 1030.61 83.5042C1039.56 83.5042 1042.47 90.6021 1042.47 108.973V164.503H1073.68V127.761C1073.68 102.501 1082.83 83.5042 1095.94 83.5042C1104.67 83.5042 1107.79 91.6459 1107.79 108.973V164.503H1139V103.963C1139 70.7698 1128.18 56.7828 1106.96 56.7828C1084.91 56.7828 1077.01 72.4399 1069.31 91.6459L1065.56 89.767C1072.85 67.8472 1057.03 56.7828 1041.43 56.7828C1020.84 56.7828 1013.35 72.4399 1005.03 91.4371L1001.28 89.3495C1006.48 77.6589 1008.35 70.5611 1008.35 60.123H977.15V164.503Z"
-      fill="#3A3259" />
-  </svg>
-);
-export default SvgComponent;
diff --git a/src/components/dialect/ui/ActionContainer.tsx b/src/components/dialect/ui/ActionContainer.tsx
index 44996cc..a84e6b1 100644
--- a/src/components/dialect/ui/ActionContainer.tsx
+++ b/src/components/dialect/ui/ActionContainer.tsx
@@ -226,8 +226,6 @@ export const ActionContainer = ({
     init();
   }, [initialApiUrl]);
 
-  console.log("Actions: ", action)
-
   const buttons = useMemo(
     () =>
       toSpliced(action?.actions
@@ -240,8 +238,6 @@ export const ActionContainer = ({
     [action, executionState.executingAction],
   );
 
-  console.log("Buttons: ", buttons)
-
   const inputs = useMemo(
     () =>
       toSpliced(action?.actions
@@ -264,7 +260,7 @@ export const ActionContainer = ({
             please{' '}
             <a
               href="#"
-              className="cursor-pointer underline"
+              className="action-container-unsafe-submit-issue-link"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -273,7 +269,7 @@ export const ActionContainer = ({
             .
           </p>
           <button
-            className="mt-3 font-semibold transition-colors hover:text-accent-error-lighter motion-reduce:transition-none"
+            className="action-container-unsafe-ignore-button"
             onClick={() => dispatch({ type: ExecutionType.UNBLOCK })}
           >
             Ignore warning & proceed
@@ -290,7 +286,7 @@ export const ActionContainer = ({
             the source.
           </p>
           <a
-            className="mt-3 inline-block font-semibold transition-colors hover:text-accent-warning-lighter motion-reduce:transition-none"
+            className="action-container-unknown-report-link"
             href="https://discord.gg/saydialect"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/src/components/dialect/ui/ActionLayout.tsx b/src/components/dialect/ui/ActionLayout.tsx
index a199ced..0cddc16 100644
--- a/src/components/dialect/ui/ActionLayout.tsx
+++ b/src/components/dialect/ui/ActionLayout.tsx
@@ -78,11 +78,11 @@ const ActionContent = ({
   }
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="action-content">
       {buttons && buttons.length > 0 && (
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="action-content-buttons">
           {buttons?.map((it, index) => (
-            <div key={index} className="flex-auto">
+            <div key={index} className="action-content-button-wrapper">
               <ActionButton {...it} />
             </div>
           ))}
@@ -105,7 +105,7 @@ const ActionForm = ({ form }: Required<Pick<LayoutProps, 'form'>>) => {
   const disabled = form.inputs.some((i) => i.required && values[i.name] === '');
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="action-form">
       {form.inputs.map((input) => (
         <ActionInput
           key={input.name}
@@ -137,34 +137,34 @@ export const ActionLayout = ({
   success,
 }: LayoutProps) => {
   return (
-    <div className="w-full max-w-[448px] overflow-hidden rounded-2xl bg-primary p-4 shadow-action">
+    <div className="action-layout">
       {image && (
         <Linkable url={websiteUrl}>
           <img
-            className={clsx('w-full object-cover object-left', {
-              'aspect-square': !form,
-              'aspect-[2/1] rounded-xl': form,
+            className={clsx('action-layout-image-base', {
+              'action-layout-image-no-form': !form,
+              'action-layout-image-form': form,
             })}
             src={image}
             alt="action-image"
           />
         </Linkable>
       )}
-      <div className="mt-4 flex flex-col">
-        <div className="mb-2 flex items-center gap-2">
+      <div className="action-layout-info">
+        <div className="action-layout-external-info">
           {websiteUrl && (
-            <div
-              // href={websiteUrl}
-              // target="_blank"
-              className="inline-flex items-center truncate text-subtext text-quaternary transition-colors motion-reduce:transition-none"
+            <a
+              href={websiteUrl}
+              target="_blank"
+              className="action-layout-website-link"
               rel="noopener noreferrer"
             >
-              <LinkIcon className="mr-2" />
+              <LinkIcon className="action-layout-website-link-icon" />
               {websiteText ?? websiteUrl}
-            </div>
+            </a>
           )}
           {websiteText && !websiteUrl && (
-            <span className="inline-flex items-center truncate text-subtext text-quaternary">
+            <span className="action-layout-website-text">
               {websiteText}
             </span>
           )}
@@ -172,7 +172,7 @@ export const ActionLayout = ({
             href="https://docs.dialect.to/documentation/actions/security"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center"
+            className="action-layout-security-link"
           >
             {type === 'malicious' && (
               <Badge
@@ -196,19 +196,21 @@ export const ActionLayout = ({
             )}
           </a>
         </div>
-        <span className="mb-0.5 text-text font-semibold text-primary">
+        <span className="action-layout-title">
           {title}
         </span>
-        <span className="mb-4 text-subtext text-secondary">{description}</span>
-        {disclaimer && <div className="mb-4">{disclaimer}</div>}
+        <span className="action-layout-description">
+          {description}
+        </span>
+        {disclaimer && <div className="action-layout-disclaimer">{disclaimer}</div>}
         <ActionContent form={form} inputs={inputs} buttons={buttons} />
         {success && (
-          <span className="mt-4 flex justify-center text-subtext text-accent-success">
+          <span className="action-layout-success">
             {success}
           </span>
         )}
         {error && !success && (
-          <span className="mt-4 flex justify-center text-subtext text-accent-error">
+          <span className="action-layout-error">
             {error}
           </span>
         )}
@@ -236,16 +238,16 @@ const ActionInput = ({
     (placeholder || 'Type here...') + (required ? '*' : '');
 
   return (
-    <div className="flex items-center gap-2 rounded-lg border border-input-primary transition-colors focus-within:border-input-checked motion-reduce:transition-none">
+    <div className="action-input-wrapper">
       <input
         placeholder={placeholderWithRequired}
         value={value}
         disabled={disabled}
         onChange={extendedChange}
-        className="bg-transparent my-3 ml-4 flex-1 truncate outline-none placeholder:text-quaternary disabled:text-tertiary"
+        className="action-input"
       />
       {button && (
-        <div className="my-2 mr-2">
+        <div className="action-input-button-wrapper">
           <ActionButton
             {...button}
             onClick={() => button.onClick({ [name]: value })}
@@ -268,18 +270,18 @@ export const ActionButton = ({
   const ButtonContent = () => {
     if (loading)
       return (
-        <span className="flex flex-row items-center justify-center gap-2">
+        <span className="action-button-loading">
           {text} <SpinnerDots />
         </span>
       );
     if (variant === 'success')
       return (
-        <span className="flex flex-row items-center justify-center gap-2 text-accent-success">
+        <span className="action-button-success">
           {text}
           <CheckIcon />
         </span>
       );
-    return <Fragment>text</Fragment>;
+    return <Fragment>{text}</Fragment>;
   };
 
   return (
diff --git a/src/components/dialect/ui/ActionLayoutSkeleton.tsx b/src/components/dialect/ui/ActionLayoutSkeleton.tsx
index a0950ed..5d78c93 100644
--- a/src/components/dialect/ui/ActionLayoutSkeleton.tsx
+++ b/src/components/dialect/ui/ActionLayoutSkeleton.tsx
@@ -3,7 +3,7 @@ import React, { h } from 'preact';
 
 const ActionLayoutSkeleton = () => {
   return (
-    <div className="mt-3 w-full text-center overflow-hidden rounded-2xl bg-primary p-4 shadow-action">
+    <div className="action-layout-skeleton">
       Loading...
     </div>
   );
diff --git a/src/components/dialect/ui/Badge.tsx b/src/components/dialect/ui/Badge.tsx
index 3c77e5e..850f1ba 100644
--- a/src/components/dialect/ui/Badge.tsx
+++ b/src/components/dialect/ui/Badge.tsx
@@ -12,12 +12,9 @@ interface Props {
 }
 
 const variantClasses: Record<BadgeVariant, string> = {
-  error:
-    'bg-accent-error/10 text-accent-error hover:text-accent-error-lighter hover:bg-[#F62D2D1A] transition-colors motion-reduce:transition-none',
-  warning:
-    'bg-accent-warning/10 text-accent-warning hover:text-accent-warning-lighter transition-colors motion-reduce:transition-none',
-  default:
-    'bg-[#B3B3B31A] text-[#888989] hover:text-[#949CA4] transition-colors motion-reduce:transition-none',
+  error: 'action-badge-error',
+  warning: 'action-badge-warning',
+  default: 'action-badge-default'
 };
 
 export const Badge = ({
@@ -30,11 +27,11 @@ export const Badge = ({
     <div
       className={clsx(
         variantClasses[variant],
-        'inline-flex items-center justify-center gap-1 rounded-full text-subtext font-semibold leading-none',
+        'action-badge-wrap',
         className,
         {
-          'aspect-square p-1': !children && icon,
-          'px-1.5 py-1': children,
+          'action-badge-no-children-icon': !children && icon,
+          'action-badge-children': children,
         },
       )}
     >
diff --git a/src/components/dialect/ui/Button.tsx b/src/components/dialect/ui/Button.tsx
index 3b84f7d..177d43d 100644
--- a/src/components/dialect/ui/Button.tsx
+++ b/src/components/dialect/ui/Button.tsx
@@ -18,12 +18,12 @@ export const Button = ({
   return (
     <button
       className={clsx(
-        'flex h-10 w-full flex-row items-center justify-center gap-2 rounded-lg px-6 py-3 text-text font-semibold',
+        'action-button',
         {
-          'bg-accent-success/10 text-accent-success': variant === 'success',
-          'bg-button-primary/50 text-inverse':
+          'action-button-success': variant === 'success',
+          'action-button-disabled-not-success':
             disabled && variant !== 'success',
-          'cursor-pointer bg-button-primary text-inverse':
+          'action-button-not-disabled-not-success':
             !disabled && variant !== 'success',
         },
         className,
diff --git a/src/components/dialect/ui/PulseLoader.tsx b/src/components/dialect/ui/PulseLoader.tsx
index 3aacd8a..f4997da 100644
--- a/src/components/dialect/ui/PulseLoader.tsx
+++ b/src/components/dialect/ui/PulseLoader.tsx
@@ -12,7 +12,7 @@ type PulseLoaderProps = {
 
 const PulseLoader = ({ children, className, style }: PulseLoaderProps) => {
   return (
-    <div className={clsx('animate-pulse', className)} style={style}>
+    <div className={clsx('action-pulse-loader', className)} style={style}>
       {children}
     </div>
   );
diff --git a/src/components/dialect/ui/Snackbar.tsx b/src/components/dialect/ui/Snackbar.tsx
index af16709..e749d50 100644
--- a/src/components/dialect/ui/Snackbar.tsx
+++ b/src/components/dialect/ui/Snackbar.tsx
@@ -10,8 +10,8 @@ interface Props {
 }
 
 const variantClasses: Record<SnackbarVariant, string> = {
-  error: 'bg-accent-error/10 text-accent-error border-accent-error',
-  warning: 'bg-accent-warning/10 text-accent-warning border-accent-warning',
+  error: 'action-snackbar-error',
+  warning: 'action-snackbar-warning'
 };
 
 export const Snackbar = ({ variant = 'warning', children }: Props) => {
@@ -19,7 +19,7 @@ export const Snackbar = ({ variant = 'warning', children }: Props) => {
     <div
       className={clsx(
         variantClasses[variant],
-        'rounded-lg border p-3 text-subtext',
+        'action-snackbar-default',
       )}
     >
       {children}
diff --git a/src/components/dialect/ui/SolanaWalletButton.tsx b/src/components/dialect/ui/SolanaWalletButton.tsx
index b359e57..085317d 100644
--- a/src/components/dialect/ui/SolanaWalletButton.tsx
+++ b/src/components/dialect/ui/SolanaWalletButton.tsx
@@ -12,12 +12,10 @@ const WalletIcon = () => (
 );
 
 const CONNECT_WALLET = (
-  <Fragment>
-    <div className="flex flex-row items-center justify-center gap-3">
-      <WalletIcon />
-      Connect Wallet
-    </div>
-  </Fragment>
+  <div className="solana-wallet-button-connect-wallet">
+    <WalletIcon />
+    Connect Wallet
+  </div>
 );
 const LABELS = {
   'change-wallet': 'Change wallet',
@@ -31,7 +29,7 @@ const LABELS = {
 
 export const SolanaWalletButton = () => {
   return (
-    <div className="flex items-center justify-center">
+    <div className="solana-wallet-button-connect-wallet-wrap">
       {/*@ts-expect-error labels type*/}
       <BaseWalletMultiButton labels={LABELS} />
     </div>
diff --git a/src/main.css b/src/main.css
index bdb67ef..fefd049 100644
--- a/src/main.css
+++ b/src/main.css
@@ -30,3 +30,171 @@ html {
 .wallet-adapter-modal-title {
   @apply text-highlight font-bold;
 }
+
+.action-button-loading {
+  @apply flex flex-row items-center justify-center gap-2;
+}
+
+.action-button-success {
+  @apply flex flex-row items-center justify-center gap-2 text-accent-success;
+}
+
+.action-input-wrapper {
+  @apply flex items-center gap-2 rounded-lg border border-input-primary transition-colors focus-within:border-input-checked motion-reduce:transition-none;
+}
+
+.action-input {
+  @apply bg-transparent my-3 ml-4 flex-1 truncate outline-none placeholder:text-quaternary disabled:text-tertiary;
+}
+
+.action-input-button-wrapper {
+  @apply my-2 mr-2;
+}
+
+.action-layout-error {
+  @apply mt-4 flex justify-center text-subtext text-accent-error;
+}
+
+.action-layout-success {
+  @apply mt-4 flex justify-center text-subtext text-accent-success;
+}
+
+.action-layout-disclaimer {
+  @apply mb-4;
+}
+
+.action-layout-description {
+  @apply mb-4 text-subtext text-secondary;
+}
+
+.action-layout-title {
+  @apply mb-0.5 text-text font-semibold text-primary;
+}
+
+.action-layout-security-link {
+  @apply flex items-center;
+}
+
+.action-layout-website-text {
+  @apply inline-flex items-center truncate text-subtext text-quaternary;
+}
+
+.action-layout-website-link {
+  @apply inline-flex items-center truncate text-subtext text-quaternary transition-colors motion-reduce:transition-none;
+}
+
+.action-layout-website-link-icon {
+  @apply mr-2;
+}
+
+.action-layout-external-info {
+  @apply mb-2 flex items-center gap-2;
+}
+
+.action-layout-info {
+  @apply mt-4 flex flex-col;
+}
+
+.action-layout-image-base {
+  @apply w-full object-cover object-left;
+}
+
+.action-layout-image-no-form {
+  @apply aspect-square;
+}
+
+.action-layout-image-form {
+  @apply aspect-[2/1] rounded-xl;
+}
+
+.action-layout {
+  @apply w-full max-w-[448px] overflow-hidden rounded-2xl bg-primary p-4 shadow-action;
+}
+
+.action-form {
+  @apply flex flex-col gap-3;
+}
+
+.action-content {
+  @apply flex flex-col gap-3;
+}
+
+.action-content-buttons {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+.action-content-button-wrapper {
+  @apply flex-auto;
+}
+
+.action-container-unknown-report-link {
+  @apply mt-3 inline-block font-semibold transition-colors hover:text-accent-warning-lighter motion-reduce:transition-none;
+}
+
+.action-container-unsafe-submit-issue-link {
+  @apply cursor-pointer underline;
+}
+
+.action-container-unsafe-ignore-button {
+  @apply mt-3 font-semibold transition-colors hover:text-accent-error-lighter motion-reduce:transition-none;
+}
+
+.action-layout-skeleton {
+  @apply mt-3 w-full text-center overflow-hidden rounded-2xl bg-primary p-4 shadow-action;
+}
+
+.action-badge-error {
+  @apply bg-accent-error/10 text-accent-error hover:text-accent-error-lighter hover:bg-[#F62D2D1A] transition-colors motion-reduce:transition-none;
+}
+
+.action-badge-warning {
+  @apply bg-accent-warning/10 text-accent-warning hover:text-accent-warning-lighter transition-colors motion-reduce:transition-none;
+}
+
+.action-badge-default {
+  @apply bg-[#B3B3B31A] text-[#888989] hover:text-[#949CA4] transition-colors motion-reduce:transition-none;
+}
+
+.action-badge-wrap {
+  @apply inline-flex items-center justify-center gap-1 rounded-full text-subtext font-semibold leading-none;
+}
+
+.action-badge-no-children-icon {
+  @apply aspect-square p-1;
+}
+
+.action-badge-children {
+  @apply px-1.5 py-1;
+}
+
+.action-button {
+  @apply flex h-10 w-full flex-row items-center justify-center gap-2 rounded-lg px-6 py-3 text-text font-semibold;
+}
+
+.action-button-success {
+  @apply bg-accent-success/10 text-accent-success;
+}
+
+.action-button-disabled-not-success {
+  @apply bg-button-primary/50 text-inverse;
+}
+
+.action-button-not-disabled-not-success {
+  @apply cursor-pointer bg-button-primary text-inverse;
+}
+
+.action-pulse-loader {
+  @apply animate-pulse;
+}
+
+.action-snackbar-error {
+  @apply bg-accent-error/10 text-accent-error border-accent-error;
+}
+
+.action-snackbar-warning {
+  @apply bg-accent-warning/10 text-accent-warning border-accent-warning;
+}
+
+.action-snackbar-default {
+  @apply rounded-lg border p-3 text-subtext;
+}