diff --git a/frontend/src/app/main/ui/dashboard/subscription.cljs b/frontend/src/app/main/ui/dashboard/subscription.cljs index 5548a5159e..c93644d90c 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.cljs +++ b/frontend/src/app/main/ui/dashboard/subscription.cljs @@ -252,12 +252,12 @@ subscription-type (if nitrate? (:type nitrate-license) (get-subscription-type subscription)) subscription-is-trial (= "trialing" (:status (if nitrate? nitrate-license subscription))) go-to-subscription (mf/use-fn #(st/emit! (rt/nav :settings-subscription)))] - [:div {:class (stl/css :nitrate-current-plan)} - [:div {:class (stl/css :nitrate-current-plan-label)} + [:button {:class (stl/css :nitrate-current-plan) + :type "button" + :on-click go-to-subscription} + [:span {:class (stl/css :nitrate-current-plan-label)} (tr "subscription.current-plan.title")] - [:button {:class (stl/css :nitrate-current-plan-text) - :type "button" - :on-click go-to-subscription} + [:span {:class (stl/css :nitrate-current-plan-text)} (case subscription-type "professional" (tr "subscription.current-plan.professional") "unlimited" (if subscription-is-trial diff --git a/frontend/src/app/main/ui/dashboard/subscription.scss b/frontend/src/app/main/ui/dashboard/subscription.scss index c4635b94f1..43a6d9419b 100644 --- a/frontend/src/app/main/ui/dashboard/subscription.scss +++ b/frontend/src/app/main/ui/dashboard/subscription.scss @@ -255,12 +255,19 @@ } .nitrate-current-plan { + display: flex; + flex-direction: column; + align-items: flex-start; + box-sizing: border-box; + inline-size: calc(100% - 2 * var(--sp-m)); border-radius: var(--sp-s); margin-block: var(--sp-s) var(--sp-m); margin-inline: var(--sp-m); background: var(--color-background-tertiary); border: $b-1 solid var(--color-background-quaternary); padding: var(--sp-m) var(--sp-l); + text-align: start; + cursor: pointer; } .nitrate-current-plan-label { @@ -273,9 +280,5 @@ .nitrate-current-plan-text { @include t.use-typography("body-medium"); - background: none; - border: none; - padding: 0; - cursor: pointer; color: var(--color-foreground-primary); }