Primary and Secondary button styles have been aggregated

src/assets/styles/.index.css

@@ -25214,6 +25214,143 @@ p {
   display: none !important;
 }
 
+.btn-primary {
+  -webkit-appearance: none;
+          appearance: none;
+  display: flex;
+  position: relative;
+  width: 100%;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-width: 0;
+  border-radius: 0.375rem;
+  --border-opacity: 1;
+  border-color: #333684;
+  border-color: rgba(51, 54, 132, var(--border-opacity));
+  --bg-opacity: 1;
+  background-color: #333684;
+  background-color: rgba(51, 54, 132, var(--bg-opacity));
+  --text-opacity: 1;
+  color: #fff;
+  color: rgba(255, 255, 255, var(--text-opacity));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  --transform-translate-x: 0;
+  --transform-translate-y: 0;
+  --transform-rotate: 0;
+  --transform-skew-x: 0;
+  --transform-skew-y: 0;
+  --transform-scale-x: 1;
+  --transform-scale-y: 1;
+  transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.btn-primary:hover {
+  --bg-opacity: 1;
+  background-color: #6c6fc6;
+  background-color: rgba(108, 111, 198, var(--bg-opacity));
+}
+
+.btn-primary:focus {
+  --bg-opacity: 1;
+  background-color: #6c6fc6;
+  background-color: rgba(108, 111, 198, var(--bg-opacity));
+  outline: 0;
+}
+
+.btn-primary:active {
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --bg-opacity: 1;
+  background-color: #333684;
+  background-color: rgba(51, 54, 132, var(--bg-opacity));
+  --transform-scale-x: .98;
+  --transform-scale-y: .98;
+}
+
+.btn-primary:disabled {
+  --bg-opacity: 1;
+  background-color: #333684;
+  background-color: rgba(51, 54, 132, var(--bg-opacity));
+  opacity: 0.5;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --transform-scale-x: 1;
+  --transform-scale-y: 1;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  -webkit-appearance: none;
+          appearance: none;
+  display: flex;
+  position: relative;
+  width: 100%;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-width: 2px;
+  border-radius: 0.375rem;
+  --border-opacity: 1;
+  border-color: #333684;
+  border-color: rgba(51, 54, 132, var(--border-opacity));
+  --bg-opacity: 1;
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, var(--bg-opacity));
+  --text-opacity: 1;
+  color: #333684;
+  color: rgba(51, 54, 132, var(--text-opacity));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  --transform-translate-x: 0;
+  --transform-translate-y: 0;
+  --transform-rotate: 0;
+  --transform-skew-x: 0;
+  --transform-skew-y: 0;
+  --transform-scale-x: 1;
+  --transform-scale-y: 1;
+  transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.btn-secondary:hover {
+  --bg-opacity: 1;
+  background-color: #6c6fc6;
+  background-color: rgba(108, 111, 198, var(--bg-opacity));
+  --text-opacity: 1;
+  color: #fff;
+  color: rgba(255, 255, 255, var(--text-opacity));
+}
+
+.btn-secondary:focus {
+  --bg-opacity: 1;
+  background-color: #6c6fc6;
+  background-color: rgba(108, 111, 198, var(--bg-opacity));
+  outline: 0;
+}
+
+.btn-secondary:active {
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --bg-opacity: 1;
+  background-color: #6c6fc6;
+  background-color: rgba(108, 111, 198, var(--bg-opacity));
+  --transform-scale-x: .98;
+  --transform-scale-y: .98;
+}
+
+.btn-secondary:disabled {
+  --bg-opacity: 1;
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, var(--bg-opacity));
+  opacity: 0.5;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --transform-scale-x: 1;
+  --transform-scale-y: 1;
+  cursor: not-allowed;
+}
+
 @media (min-width: 640px) {
   .sm\:container {
     width: 100%;

src/assets/styles/index.tailwind.css

@@ -50,4 +50,85 @@ p {
 
 .grecaptcha-badge {
     display: none !important;
+}
+
+.btn-primary {
+    @apply appearance-none;
+    @apply flex;
+    @apply relative;
+    @apply w-full;
+    @apply py-3;
+    @apply border-0;
+    @apply rounded-md;
+    @apply border-primary-800;
+    @apply bg-primary-800;
+    @apply text-white;
+    @apply truncate;
+    @apply cursor-pointer;
+    @apply transform;
+    @apply shadow-md;
+}
+
+.btn-primary:hover {
+    @apply bg-primary-500;
+}
+
+.btn-primary:focus {
+    @apply bg-primary-500;
+    @apply outline-none;
+}
+
+.btn-primary:active {
+    @apply shadow-inner;
+    @apply bg-primary-800;
+    @apply scale-98;
+}
+
+.btn-primary:disabled {
+    @apply bg-primary-800;
+    @apply opacity-50;
+    @apply shadow-md;
+    @apply scale-100;
+    @apply cursor-not-allowed;
+}
+
+.btn-secondary {
+    @apply appearance-none;
+    @apply flex;
+    @apply relative;
+    @apply w-full;
+    @apply py-3;
+    @apply border-2;
+    @apply rounded-md;
+    @apply border-primary-800;
+    @apply bg-white;
+    @apply text-primary-800;
+    @apply truncate;
+    @apply cursor-pointer;
+    @apply transform;
+    @apply shadow-md;
+}
+
+.btn-secondary:hover {
+    @apply bg-primary-500;
+    @apply text-white;
+}
+
+.btn-secondary:focus {
+    @apply bg-primary-500;
+    @apply outline-none;
+}
+
+.btn-secondary:active {
+    @apply shadow-inner;
+    @apply bg-primary-500;
+    @apply scale-98;
+}
+
+.btn-secondary:disabled {
+    @apply bg-white;
+    @apply opacity-50;
+    @apply shadow-md;
+    @apply scale-100;
+    @apply cursor-not-allowed;
 }

src/components/controls/ButtonPrimary.jsx

@@ -5,33 +5,7 @@ function PrimaryButton(props) {
     return <>
         <button
             type={type||'button'}
-            className="
-                appearance-none
-                flex
-                relative
-                w-full
-                py-3
-                border-0
-                rounded-md
-                border-primary-800
-                bg-primary-800
-                text-white
-                truncate
-                cursor-pointer
-                transform
-                shadow-md
-                hover:bg-primary-500
-                focus:bg-primary-500
-                focus:outline-none
-                active:shadow-inner
-                active:bg-primary-800
-                active:scale-98
-                disabled:bg-primary-800
-                disabled:opacity-50
-                disabled:shadow-md
-                disabled:scale-100
-                disabled:cursor-not-allowed
-            "
+            className="btn-primary"
             onClick={action}
             disabled={disabled}
             aria-disabled={disabled}

src/components/controls/ButtonSecondary.jsx

@@ -5,34 +5,7 @@ function ButtonSecondary(props) {
     return <>
         <button
             type={type||'button'}
-            className="
-                appearance-none
-                flex
-                relative
-                w-full
-                py-3
-                border-2
-                rounded-md
-                border-primary-800
-                bg-white
-                text-primary-800
-                truncate
-                cursor-pointer
-                transform
-                shadow-md
-                hover:bg-primary-500
-                hover:text-white
-                focus:bg-primary-500
-                focus:outline-none
-                active:shadow-inner
-                active:bg-primary-500
-                active:scale-98
-                disabled:bg-white
-                disabled:opacity-50
-                disabled:shadow-md
-                disabled:scale-100
-                disabled:cursor-not-allowed
-            "
+            className="btn-secondary"
             onClick={action}
             disabled={disabled}
         >