🐛 Fix Internal Error page: "go to your penpot" wrong design

CHANGES.md

@@ -36,6 +36,7 @@
 - Fix problem with precision on boolean calculation [Taiga #8482](https://tree.taiga.io/project/penpot/issue/8482)
 - Fix problem when translating multiple path points [Github #4459](https://github.com/penpot/penpot/issues/4459)
 - Fix problem on importing (and exporting) files with flows [Taiga #8914](https://tree.taiga.io/project/penpot/issue/8914)
+- Fix Internal Error page: "go to your penpot" wrong design [Taiga #8922](https://tree.taiga.io/project/penpot/issue/8922)
 
 ## 2.2.1
 

frontend/src/app/main/ui/static.cljs

@@ -20,6 +20,8 @@
    [app.main.ui.auth.recovery-request :refer [recovery-request-page recovery-sent-page]]
    [app.main.ui.auth.register :as register]
    [app.main.ui.dashboard.sidebar :refer [sidebar]]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
    [app.main.ui.icons :as i]
    [app.main.ui.viewer.header :as viewer.header]
    [app.util.dom :as dom]
@@ -43,9 +45,9 @@
      [:button
       {:class (stl/css :exception-header)
        :on-click on-nav-root}
-      i/logo-icon
+      [:> raw-svg* {:id "penpot-logo-icon" :class (stl/css :penpot-logo)}]
       (when profile-id
-        (str "< " (tr "not-found.no-permission.go-dashboard")))]
+        [:div {:class (stl/css :go-back-wrapper)} [:> icon* {:id "arrow" :class (stl/css :back-arrow)}] [:span (tr "not-found.no-permission.go-dashboard")]])]
      [:div {:class (stl/css :deco-before)} i/logo-error-screen]
      (when-not profile-id
        [:button {:class (stl/css :login-header)

frontend/src/app/main/ui/static.scss

@@ -66,6 +66,7 @@
     justify-content: flex-end;
     height: 100%;
     width: 25%;
+    padding-bottom: $s-28;
 
     &:first-child {
       text-align: right;
@@ -82,12 +83,25 @@
   cursor: pointer;
   display: flex;
   align-items: center;
+}
 
-  svg {
-    fill: var(--color-foreground-primary);
-    width: $s-48;
-    height: auto;
-  }
+.penpot-logo {
+  fill: var(--color-foreground-primary);
+  width: $s-48;
+  height: $s-48;
+}
+
+.back-arrow {
+  transform: rotate(180deg);
+}
+
+.go-back-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: $s-8;
+  margin-left: $s-12;
+  font-size: $fs-14;
 }
 
 .login-header {