@streamoid/ui 0.1.9 → 0.2.0

package/dist/index.css

@@ -1063,6 +1063,7 @@
   align-items: center;
   justify-content: flex-start;
   position: relative;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
 }
 .ScBillingHistoryTableList_invoiceNumber {
   color: var(--alias-text-and-icons-primary, #f5f5f5);
@@ -1106,6 +1107,7 @@
 .ScBillingHistoryTableList_scPairtextInstance {
   flex-shrink: 0 !important;
   width: 10rem !important;
+  cursor: pointer;
 }
 
 /* src/SC-Pairtext/ScPairtext.module.css */
@@ -1206,6 +1208,8 @@
   justify-content: center;
   height: 3rem;
   position: relative;
+  overflow: hidden;
+  cursor: pointer;
 }
 .ScButton_container {
   display: flex;
@@ -1216,6 +1220,7 @@
   flex-shrink: 0;
   height: 1.5rem;
   position: relative;
+  z-index: 1;
 }
 .ScButton_label {
   color: var(--alias-text-and-icons-inverse, #101010);
@@ -1267,6 +1272,8 @@
 }
 .ScButton_scButton.ScButton_state-disabled {
   opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 .ScButton_scButton.ScButton_state-default.ScButton_type-primary.ScButton_variant-error,
 .ScButton_scButton.ScButton_state-disabled.ScButton_type-primary.ScButton_variant-error {
@@ -1297,9 +1304,14 @@
 }
 .ScButton_scButton.ScButton_state-default.ScButton_variant-secondary,
 .ScButton_scButton.ScButton_state-disabled.ScButton_variant-secondary {
-  background: var(--alias-fill-neutral-neutralselected, #242424);
+  background: var(--alias-fill-base-base, #f5f5f5);
+}
+.ScButton_scButton.ScButton_variant-secondary .ScButton_label {
+  color: var(--alias-text-and-icons-inverse, #101010);
+}
+.ScButton_scButton.ScButton_variant-secondary .ScButton_container {
+  color: var(--alias-text-and-icons-inverse, #101010);
 }
-.ScButton_scButton.ScButton_variant-secondary .ScButton_label,
 .ScButton_scButton.ScButton_variant-tertiary .ScButton_label,
 .ScButton_scButton.ScButton_variant-outline .ScButton_label {
   color: var(--alias-text-and-icons-primary, #f5f5f5);
@@ -1335,7 +1347,7 @@
 }
 .ScButton_scButton.ScButton_variant-secondary:hover,
 .ScButton_scButton.ScButton_state-hover.ScButton_variant-secondary {
-  background: var(--alias-fill-neutral-neutralactive, #313131);
+  background: #c7c7c7;
 }
 .ScButton_scButton.ScButton_variant-primary:hover,
 .ScButton_scButton.ScButton_state-hover.ScButton_variant-primary {
@@ -1357,6 +1369,224 @@
   padding: var(--spacing-xs, 0.25rem);
   width: 2rem;
 }
+@keyframes ScButton_ani-animateMesh {
+  0% {
+    --x-0: 72%;
+    --s-start-0: 8%;
+    --s-end-0: 32%;
+    --c-0: #1030ff;
+    --y-0: 90%;
+    --x-1: 33%;
+    --s-start-1: 8.392%;
+    --s-end-1: 22.109%;
+    --c-1: #21bdff;
+    --y-1: -7%;
+    --s-start-2: 8%;
+    --s-end-2: 34%;
+    --x-2: 93%;
+    --c-2: #1030ff;
+    --y-2: 63%;
+    --s-start-3: 8%;
+    --s-end-3: 64%;
+    --x-3: 7%;
+    --c-3: #21bdff;
+    --y-3: -20%;
+    --c-4: #21bdff;
+    --s-start-4: 8.392%;
+    --s-end-4: 22.109%;
+    --x-4: 33%;
+    --y-4: -7%;
+    --y-5: -7%;
+    --c-5: #21bdff;
+    --s-start-5: 8.392%;
+    --s-end-5: 22.109%;
+    --x-5: 33%;
+  }
+  33% {
+    --x-0: 8%;
+    --s-start-0: 12%;
+    --s-end-0: 121%;
+    --c-0: #1030ff;
+    --y-0: 59%;
+    --x-1: 42%;
+    --s-start-1: 8.392%;
+    --s-end-1: 41.694%;
+    --c-1: #21bdff;
+    --y-1: 10%;
+    --s-start-2: 12%;
+    --s-end-2: 86%;
+    --x-2: 2%;
+    --c-2: #1030ff;
+    --y-2: 59%;
+    --s-start-3: 8%;
+    --s-end-3: 54%;
+    --x-3: 55%;
+    --c-3: #21bdff;
+    --y-3: 10%;
+    --c-4: #21bdff;
+    --s-start-4: 8.392%;
+    --s-end-4: 41.694%;
+    --x-4: 42%;
+    --y-4: 10%;
+    --y-5: 10%;
+    --c-5: #21bdff;
+    --s-start-5: 8.392%;
+    --s-end-5: 41.694%;
+    --x-5: 42%;
+  }
+  66% {
+    --x-0: 40%;
+    --s-start-0: 10%;
+    --s-end-0: 80%;
+    --c-0: #1030ff;
+    --y-0: 75%;
+    --x-1: 76%;
+    --s-start-1: 8.392%;
+    --s-end-1: 59.322%;
+    --c-1: #21bdff;
+    --y-1: -3%;
+    --s-start-2: 12%;
+    --s-end-2: 86%;
+    --x-2: 2%;
+    --c-2: #1030ff;
+    --y-2: 59%;
+    --s-start-3: 8%;
+    --s-end-3: 92%;
+    --x-3: 76%;
+    --c-3: #21bdff;
+    --y-3: -3%;
+    --c-4: #21bdff;
+    --s-start-4: 8.392%;
+    --s-end-4: 59.322%;
+    --x-4: 76%;
+    --y-4: -3%;
+    --y-5: -3%;
+    --c-5: #21bdff;
+    --s-start-5: 8.392%;
+    --s-end-5: 59.322%;
+    --x-5: 76%;
+  }
+  100% {
+    --x-0: 55%;
+    --s-start-0: 9%;
+    --s-end-0: 55%;
+    --c-0: #1030ff;
+    --y-0: 82%;
+    --x-1: 76%;
+    --s-start-1: 8.392%;
+    --s-end-1: 59.322%;
+    --c-1: #21bdff;
+    --y-1: -3%;
+    --s-start-2: 10%;
+    --s-end-2: 60%;
+    --x-2: 48%;
+    --c-2: #1030ff;
+    --y-2: 61%;
+    --s-start-3: 8%;
+    --s-end-3: 78%;
+    --x-3: 40%;
+    --c-3: #21bdff;
+    --y-3: -10%;
+    --c-4: #21bdff;
+    --s-start-4: 8.392%;
+    --s-end-4: 40%;
+    --x-4: 55%;
+    --y-4: -5%;
+    --y-5: -5%;
+    --c-5: #21bdff;
+    --s-start-5: 8.392%;
+    --s-end-5: 40%;
+    --x-5: 55%;
+  }
+}
+.ScButton_scButton.ScButton_state-default.ScButton_variant-primary.ScButton_type-primary,
+.ScButton_scButton.ScButton_state-disabled.ScButton_variant-primary.ScButton_type-primary {
+  --x-0: 72%;
+  --c-0: #1030ff;
+  --y-0: 90%;
+  --s-start-0: 8%;
+  --s-end-0: 32%;
+  --x-1: 33%;
+  --c-1: #21bdff;
+  --y-1: -7%;
+  --s-start-1: 8.392%;
+  --s-end-1: 22.109%;
+  --x-2: 93%;
+  --c-2: #1030ff;
+  --y-2: 63%;
+  --s-start-2: 8%;
+  --s-end-2: 34%;
+  --x-3: 7%;
+  --c-3: #21bdff;
+  --y-3: -20%;
+  --s-start-3: 8%;
+  --s-end-3: 64%;
+  --c-4: #21bdff;
+  --x-4: 33%;
+  --y-4: -7%;
+  --s-start-4: 8.392%;
+  --s-end-4: 22.109%;
+  --c-5: #21bdff;
+  --x-5: 33%;
+  --y-5: -7%;
+  --s-start-5: 8.392%;
+  --s-end-5: 22.109%;
+  background-color: #1661FF;
+  background-image:
+    radial-gradient(
+      circle at var(--x-0) var(--y-0),
+      var(--c-0) var(--s-start-0),
+      transparent var(--s-end-0)),
+    radial-gradient(
+      circle at var(--x-1) var(--y-1),
+      var(--c-1) var(--s-start-1),
+      transparent var(--s-end-1)),
+    radial-gradient(
+      circle at var(--x-2) var(--y-2),
+      var(--c-2) var(--s-start-2),
+      transparent var(--s-end-2)),
+    radial-gradient(
+      circle at var(--x-3) var(--y-3),
+      var(--c-3) var(--s-start-3),
+      transparent var(--s-end-3)),
+    radial-gradient(
+      circle at var(--x-4) var(--y-4),
+      var(--c-4) var(--s-start-4),
+      transparent var(--s-end-4)),
+    radial-gradient(
+      circle at var(--x-5) var(--y-5),
+      var(--c-5) var(--s-start-5),
+      transparent var(--s-end-5));
+  background-blend-mode: normal;
+  will-change: transform, opacity;
+  contain: paint;
+  animation: ScButton_ani-animateMesh 20s linear infinite alternate;
+  transition: transform 0.2s ease;
+}
+.ScButton_scButton.ScButton_state-default.ScButton_variant-primary.ScButton_type-primary .ScButton_noiseOverlay,
+.ScButton_scButton.ScButton_state-disabled.ScButton_variant-primary.ScButton_type-primary .ScButton_noiseOverlay {
+  position: absolute;
+  inset: 0;
+  opacity: 0.07;
+  mix-blend-mode: soft-light;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+  background-size: 128px 128px;
+  background-repeat: repeat;
+}
+.ScButton_scButton.ScButton_state-default.ScButton_variant-primary.ScButton_type-primary .ScButton_label,
+.ScButton_scButton.ScButton_state-disabled.ScButton_variant-primary.ScButton_type-primary .ScButton_label {
+  color: #fffafa;
+}
+.ScButton_scButton.ScButton_variant-primary.ScButton_type-primary:hover .ScButton_label,
+.ScButton_scButton.ScButton_state-hover.ScButton_variant-primary.ScButton_type-primary .ScButton_label {
+  color: #fffafa;
+}
+.ScButton_scButton.ScButton_variant-primary.ScButton_type-primary:hover,
+.ScButton_scButton.ScButton_state-hover.ScButton_variant-primary.ScButton_type-primary {
+  transform: scale(1.03);
+}
 
 /* src/SC-Calendar/ScCalendar.module.css */
 .ScCalendar_scCalendar,
@@ -1600,10 +1830,11 @@
   box-sizing: border-box;
 }
 .ScHDivider_scHDivider {
-  width: 8.9375rem;
-  height: 0rem;
+  align-self: stretch;
+  flex-shrink: 0;
+  height: 0.5px;
+  background-color: var(--alias-border-divider, #242424);
   position: relative;
-  overflow: visible;
 }
 
 /* src/SC-Calendar date comps/ScCalendarDateComps.module.css */
@@ -1684,6 +1915,7 @@
   align-self: stretch;
   flex-shrink: 0;
   position: relative;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
 }
 .ScCreditsUsageCard_scPairtextInstance {
   flex: 1 !important;
@@ -1720,14 +1952,16 @@
 .ScCreditsUsageCard_remainingText {
   color: var(--alias-text-and-icons-tertiary, #9e9e9e);
   text-align: right;
-  font-family: var( --text-text-sm-regular-font-family, "Inter-Regular", sans-serif );
-  font-size: var(--text-text-sm-regular-font-size, 0.875rem);
-  line-height: var(--text-text-sm-regular-line-height, 1.25rem);
-  font-weight: var(--text-text-sm-regular-font-weight, 400);
+  font-family: var( --text-text-md-regular-font-family, "Inter-Regular", sans-serif );
+  font-size: var(--font-size-font-size-md, 1rem);
+  line-height: var(--line-height-line-height-md, 1.5rem);
+  font-weight: var(--text-text-md-regular-font-weight, 400);
   position: relative;
+  white-space: nowrap;
 }
 .ScCreditsUsageCard_scButtonInstance {
   flex-shrink: 0 !important;
+  width: 7.5rem !important;
 }
 
 /* src/SC-Progress bar/ScProgressBar.module.css */
@@ -1987,7 +2221,7 @@
   border-style: solid;
   border-color: var(--alias-border-subtle, #242424);
   border-width: 0.0625rem;
-  padding: var(--spacing-6xl, 1.5rem);
+  padding: var(--spacing-6xl, 1.5rem) var(--spacing-6xl, 1.5rem) var(--spacing-8xl, 2rem) var(--spacing-6xl, 1.5rem);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-6xl, 1.5rem);
@@ -1996,16 +2230,6 @@
   position: relative;
   backdrop-filter: blur(0.25rem);
 }
-.ScPlanCard_planDetails {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: flex-start;
-  justify-content: flex-start;
-  align-self: stretch;
-  flex-shrink: 0;
-  position: relative;
-}
 .ScPlanCard_planHeader {
   display: flex;
   flex-direction: row;
@@ -2036,29 +2260,19 @@
   align-self: stretch;
 }
 .ScPlanCard_planPrice {
-  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  color: var(--alias-text-and-icons-secondary, #dadada);
   text-align: left;
-  font-family: var( --text-text-md-regular-font-family, "Inter-Regular", sans-serif );
-  font-size: var(--text-text-md-regular-font-size, 1rem);
-  line-height: var(--text-text-md-regular-line-height, 1.5rem);
-  font-weight: var(--text-text-md-regular-font-weight, 400);
+  font-family: var( --lead-text-lead-text-sm-medium-font-family, "Inter-Medium", sans-serif );
+  font-size: var(--lead-text-lead-text-sm-medium-font-size, 1.25rem);
+  line-height: var(--lead-text-lead-text-sm-medium-line-height, 1.75rem);
+  font-weight: var(--lead-text-lead-text-sm-medium-font-weight, 500);
   position: relative;
   align-self: stretch;
 }
-.ScPlanCard_cartContainer {
-  background: var(--alias-fill-neutral-neutral, transparent);
-  border-radius: var(--radius-md, 0.5rem);
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 3.5rem;
-  height: 3.5rem;
+.ScPlanCard_creditsWrapper {
   position: relative;
-  aspect-ratio: 1;
+  align-self: stretch;
+  flex-shrink: 0;
 }
 .ScPlanCard_creditsContainer {
   background: var(--alias-fill-neutral-neutralplus, #151515);
@@ -2072,6 +2286,19 @@
   align-self: stretch;
   flex-shrink: 0;
   position: relative;
+  height: 4rem;
+}
+.ScPlanCard_creditsContainerPopular {
+  background: var(--alias-fill-neutral-neutralactive, #313131);
+  padding-left: var(--spacing-3xl, 1rem);
+  padding-right: var(--spacing-xl, 0.75rem);
+}
+.ScPlanCard_siconCreditsInstance {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  position: relative;
+  overflow: visible;
 }
 .ScPlanCard_creditsText {
   color: var(--alias-text-and-icons-primary, #f5f5f5);
@@ -2083,84 +2310,97 @@
   position: relative;
   flex: 1;
 }
-.ScPlanCard_scHDividerInstance {
-  align-self: stretch !important;
-  flex-shrink: 0 !important;
-  width: unset !important;
-}
-.ScPlanCard_featuresSection {
+.ScPlanCard_increaseCreditsBtn {
+  background: var(--alias-fill-neutral-neutralselected, #242424);
+  border: none;
+  border-radius: var(--medium-5, 0.75rem);
+  padding: var(--spacing-xs, 0.25rem) var(--spacing-md, 0.5rem) var(--spacing-xs, 0.25rem) var(--spacing-lg, 0.625rem);
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  align-items: flex-start;
-  justify-content: flex-start;
-  align-self: stretch;
+  flex-direction: row;
+  gap: var(--spacing-xs, 0.25rem);
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
   flex-shrink: 0;
-  position: relative;
+  cursor: pointer;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
 }
-.ScPlanCard_vector {
-  flex-shrink: 0;
-  width: 3.4725rem;
-  height: 0.68rem;
-  position: relative;
-  overflow: visible;
-  aspect-ratio: 55.56/10.88;
+.ScPlanCard_increaseCreditsLabel {
+  font-family: var( --text-text-xs-regular-font-family, "Inter-Regular", sans-serif );
+  font-size: var(--text-text-xs-regular-font-size, 0.75rem);
+  line-height: var(--text-text-xs-regular-line-height, 1.125rem);
+  font-weight: var(--text-text-xs-regular-font-weight, 400);
+  white-space: nowrap;
 }
-.ScPlanCard_scPairtextInstance {
-  align-self: stretch !important;
-  flex-shrink: 0 !important;
+.ScPlanCard_increaseCreditsArrow {
+  flex-shrink: 0;
+  width: 0.75rem;
+  height: 0.75rem;
 }
-.ScPlanCard_scHDividerInstance2 {
+.ScPlanCard_scButtonInstance {
   align-self: stretch !important;
   flex-shrink: 0 !important;
-  width: unset !important;
 }
-.ScPlanCard_vector2 {
-  flex-shrink: 0;
-  width: 5.53rem;
-  height: 0.85rem;
-  position: relative;
-  overflow: visible;
-  aspect-ratio: 88.48/13.6;
-}
-.ScPlanCard_scHDividerInstance3 {
+.ScPlanCard_scHDividerInstance {
   align-self: stretch !important;
   flex-shrink: 0 !important;
   width: unset !important;
 }
-.ScPlanCard_vector3 {
-  flex-shrink: 0;
-  width: 4.54375rem;
-  height: 0.86rem;
-  position: relative;
-  overflow: visible;
-  aspect-ratio: 72.7/13.76;
-}
-.ScPlanCard_upgradeButtonContainer {
-  padding: var(--spacing-3xl, 1rem) 0rem 0rem 0rem;
+.ScPlanCard_featuresSection {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 1rem;
   align-items: flex-start;
   justify-content: flex-start;
   align-self: stretch;
   flex-shrink: 0;
   position: relative;
 }
-.ScPlanCard_scButtonInstance {
-  align-self: stretch !important;
-  flex-shrink: 0 !important;
+.ScPlanCard_sectionTitle {
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  text-align: left;
+  font-family: var( --text-text-sm-semibold-font-family, "Inter-SemiBold", sans-serif );
+  font-size: var(--text-text-sm-semibold-font-size, 0.875rem);
+  line-height: var(--text-text-sm-semibold-line-height, 1.25rem);
+  font-weight: var(--text-text-sm-semibold-font-weight, 600);
+  position: relative;
+  align-self: stretch;
 }
-.ScPlanCard_scPlanCard.ScPlanCard_type-popular .ScPlanCard_siconDoubleArrowInstance {
+.ScPlanCard_featureRow {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gp8, 0.5rem);
+  align-items: center;
+  align-self: stretch;
   flex-shrink: 0;
-  width: 1.5rem;
-  height: 1.5rem;
+}
+.ScPlanCard_featureText {
+  color: #9e9e9e;
+  text-align: left;
+  font-family: var( --text-text-sm-regular-font-family, "Inter-Regular", sans-serif );
+  font-size: var(--text-text-sm-regular-font-size, 0.875rem);
+  line-height: var(--text-text-sm-regular-line-height, 1.25rem);
+  font-weight: var(--text-text-sm-regular-font-weight, 400);
+}
+.ScPlanCard_description {
+  color: #9e9e9e;
+  text-align: left;
+  font-family: var( --lead-text-lead-text-xs-regular-font-family, "Inter-Regular", sans-serif );
+  font-size: var(--lead-text-lead-text-xs-regular-font-size, 1.125rem);
+  line-height: var(--lead-text-lead-text-xs-regular-line-height, 1.625rem);
+  font-weight: var(--lead-text-lead-text-xs-regular-font-weight, 400);
   position: relative;
-  overflow: visible;
+  align-self: stretch;
 }
 .ScPlanCard_scPlanCard.ScPlanCard_type-popular .ScPlanCard_planName {
   color: var(--alias-text-and-icons-warningcont, #ffba3a);
 }
+.ScPlanCard_scPlanCard.ScPlanCard_type-custom {
+  background: var(--alias-surface-base, #101010);
+}
+.ScPlanCard_scPlanCard .ScPlanCard_scButtonInstanceDisabled {
+  opacity: 0.5;
+}
 
 /* src/SC-Plan details card/ScPlanDetailsCard.module.css */
 .ScPlanDetailsCard_scPlanDetailsCard,
@@ -2191,6 +2431,7 @@
   align-self: stretch;
   flex-shrink: 0;
   position: relative;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
 }
 .ScPlanDetailsCard_scPairtextInstance {
   flex: 1 !important;
@@ -2224,15 +2465,35 @@
   height: 2.875rem;
   position: relative;
 }
+.ScPlanDetailsCard_planNameRow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
 .ScPlanDetailsCard_planName {
   color: var(--alias-text-and-icons-primary, #f5f5f5);
-  text-align: left;
   font-family: var( --lead-text-lead-text-xs-medium-font-family, "Inter-Medium", sans-serif );
-  font-size: var(--lead-text-lead-text-xs-medium-font-size, 1.125rem);
-  line-height: var(--lead-text-lead-text-xs-medium-line-height, 1.625rem);
-  font-weight: var(--lead-text-lead-text-xs-medium-font-weight, 500);
+  font-size: var(--font-size-font-size-lg, 1.125rem);
+  line-height: var(--line-height-line-height-lg, 1.625rem);
+  font-weight: 500;
+  white-space: nowrap;
+}
+.ScPlanDetailsCard_dotSeparator {
+  width: 1.5rem;
+  height: 1.5rem;
   position: relative;
-  align-self: stretch;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ScPlanDetailsCard_dotSeparator::after {
+  content: "";
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: var(--radius-full, 999px);
+  background: var(--alias-text-and-icons-tertiary, #9e9e9e);
 }
 .ScPlanDetailsCard_planPrice {
   color: var(--alias-text-and-icons-tertiary, #9e9e9e);
@@ -2246,6 +2507,7 @@
 }
 .ScPlanDetailsCard_scButtonInstance {
   flex-shrink: 0 !important;
+  width: 7.5rem !important;
 }
 
 /* src/SC-Profile/ScProfile.module.css */
@@ -2752,6 +3014,7 @@
   flex-shrink: 0;
   height: 3rem;
   position: relative;
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
 }
 .ScTextField_inputText {
   color: var(--alias-text-and-icons-muted, #7a7a7a);
@@ -3275,6 +3538,11 @@
   justify-content: flex-start;
   position: relative;
   backdrop-filter: blur(0.25rem);
+  cursor: pointer;
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease,
+    border-color 0.2s ease;
 }
 .ScAppListingCard_header {
   display: flex;
@@ -3290,6 +3558,7 @@
   background: var(--alias-fill-neutral-neutral, #1a1a1a);
   border-radius: var(--radius-md, 0.5rem);
   padding: 0.5rem;
+  transition: background 0.2s ease;
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
@@ -3318,6 +3587,18 @@
   position: relative;
   align-self: stretch;
 }
+.ScAppListingCard_scAppListingCard:hover {
+  background: var(--alias-surface-subtle, #1a1a1a);
+  border-color: #ffa16b;
+  transform: scale(1.03);
+}
+.ScAppListingCard_scAppListingCard:hover .ScAppListingCard_iconContainer {
+  background:
+    linear-gradient(
+      135deg,
+      #6d00db 0%,
+      #ffb88c 100%);
+}
 
 /* src/SC-appCard/ScAppCard.module.css */
 .ScAppCard_scAppCard,
@@ -3344,6 +3625,7 @@
   justify-content: flex-start;
   flex-shrink: 0;
   position: relative;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
 }
 .ScAppCard_textContainer {
   display: flex;
@@ -3666,6 +3948,7 @@
   flex-shrink: 0;
   height: 3rem;
   position: relative;
+  color: var(--alias-text-and-icons-muted, #7a7a7a);
 }
 .ScOnlyField_inputText {
   color: var(--alias-text-and-icons-muted, #7a7a7a);
@@ -4200,6 +4483,7 @@
   flex-shrink: 0;
   width: 11.25rem;
   position: relative;
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
 }
 .ScTableList_scAccessInstance {
   flex-shrink: 0 !important;
@@ -4298,7 +4582,11 @@
   line-height: var(--text-text-md-medium-line-height, 1.5rem);
   font-weight: var(--text-text-md-medium-font-weight, 500);
   position: relative;
-  width: 30.3125rem;
+  flex: 1;
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .ScWorkspaceCard_userInfo {
   padding: 0rem 1rem 0rem 1rem;