Merge pull request #3988 from penpot/ladybenko-fix-your-account-ui

🐛 Fix "Your Account/Give Feedback" UI

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -38,10 +38,12 @@
   @include buttonStyle;
   @include flexCenter;
   @include focusPrimary;
+  @include tabTitleTipography;
   background-color: var(--button-primary-background-color-rest);
   border: $s-1 solid var(--button-primary-border-color-rest);
   color: var(--button-primary-foreground-color-rest);
   border-radius: $br-8;
+  min-height: $s-32;
   svg,
   span svg {
     stroke: var(--button-primary-foreground-color-rest);
@@ -54,6 +56,7 @@
     span svg {
       stroke: var(--button-primary-foreground-color-hover);
     }
+    text-decoration: none;
   }
   &:active {
     background-color: var(--button-primary-background-color-active);

frontend/src/app/main/ui/settings/feedback.cljs

@@ -80,6 +80,7 @@
 
      [:> fm/submit-button*
       {:label (if @loading (tr "labels.sending") (tr "labels.send"))
+       :class (stl/css :feedback-button-link)
        :disabled @loading}]
 
      [:hr]
@@ -88,7 +89,7 @@
      [:p {:class (stl/css :field-text)} (tr "feedback.discourse-subtitle1")]
 
      [:a
-      {:class (stl/css :btn-secondary :btn-large)
+      {:class (stl/css :feedback-button-link)
        :href "https://community.penpot.app"
        :target "_blank"}
       (tr "feedback.discourse-go-to")]
@@ -98,7 +99,7 @@
      [:p {:class (stl/css :field-text)} (tr "feedback.twitter-subtitle1")]
 
      [:a
-      {:class (stl/css :btn-secondary :btn-large)
+      {:class (stl/css :feedback-button-link)
        :href "https://twitter.com/penpotapp"
        :target "_blank"}
       (tr "feedback.twitter-go-to")]]))

frontend/src/app/main/ui/settings/feedback.scss

@@ -23,3 +23,7 @@
     }
   }
 }
+
+.feedback-button-link {
+  @extend .button-primary;
+}

frontend/src/app/main/ui/settings/profile.scss

@@ -11,7 +11,7 @@
   width: 100%;
   justify-content: center;
   align-items: center;
-  a {
+  a:not(.button-primary) {
     color: $df-secondary;
   }
 }
@@ -211,7 +211,7 @@
     text-transform: uppercase;
   }
 
-  a {
+  a:not(.button-primary) {
     &:hover {
       text-decoration: underline;
     }

frontend/src/app/main/ui/settings/sidebar.scss

@@ -49,6 +49,7 @@
     display: flex;
     flex-shrink: 0;
     padding: $s-8 $s-8 $s-8 $s-24;
+    color: $df-secondary;
 
     a {
       font-weight: $fw400;
@@ -59,14 +60,13 @@
     }
 
     svg {
-      fill: $db-secondary;
+      fill: currentColor;
       margin-right: $s-8;
       height: $s-12;
       width: $s-12;
     }
 
     span {
-      color: $df-secondary;
       font-size: $fs-14;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -119,12 +119,11 @@
 
     &.current {
       background-color: $db-cuaternary;
+      color: $da-primary;
+
       a {
         font-weight: $fw400;
-        color: $da-primary;
-      }
-      span {
-        color: $da-primary;
+        color: currentColor;
       }
 
       &::before {