From ac086bc2a4781014f360afece95eeb7fe6e3150a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 25 Dec 2025 01:22:35 +0200
Subject: [PATCH] style/UI switcher illustration: improve

---
 .../type_widgets/options/appearance.css       | 61 +++++++++++++++++--
 .../type_widgets/options/appearance.tsx       | 30 +++++++--
 2 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/appearance.css b/apps/client/src/widgets/type_widgets/options/appearance.css
index 04643120d..deda76db3 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.css
+++ b/apps/client/src/widgets/type_widgets/options/appearance.css
@@ -54,6 +54,7 @@
         }
 
         .content {
+            padding-inline-start: 6px;
             background-color: var(--main-background-color);
             flex-grow: 1;
             border-top-left-radius: 6px;
@@ -68,7 +69,9 @@
                 padding: 5px;
 
                 .title {
+                    margin-inline-start: 4px;
                     flex-grow: 1;
+                    font-size: 12px;
                 }
             }
 
@@ -81,13 +84,63 @@
 
                 .ribbon-header {
                     display: flex;
+                    gap: 3px;
                 }
 
                 .ribbon-body {
-                    height: 20px;
-                    background-color: rgba(0, 0, 0, 0.05);
-                    border-radius: 6px;
-                    margin: 1px 0;
+                    border: 0 solid var(--main-text-color);
+                    border-top-width: 1px;
+                    border-bottom-width: 1px;
+                    margin: 2px 0;
+
+                    .ribbon-body-content {
+                        height: 4px;
+                        margin-block: 4px;
+                        background: repeating-linear-gradient(90deg, currentColor, currentColor 10px, transparent 10px, transparent 22px);
+                        opacity: .5;
+                    }
+                }
+            }
+
+            .note-header {
+                display: flex;
+                flex-direction: column;
+                padding-inline: 2px;
+
+                .note-toolbar {
+                    align-self: flex-end;
+                }
+
+                .note-inline-title {
+                    display: flex;
+                    align-items: center;
+                    padding-bottom: 4px;
+
+                    .note-icon {
+                        display: flex;
+                        width: 22px;
+                        height: 22px;
+                        justify-content: center;
+                        align-items: center;
+                        border-radius: 50%;
+                        background: var(--note-icon-hover-background-color);
+                        font-size: 12px;
+                        color: var(--note-icon-color);
+                    }
+
+                    .note-title-row {
+                        margin-inline-start: 4px;
+                        line-height: 1;
+
+                        .title {
+                            font-size: 11px;
+                        }
+
+                        .subtitle {
+                            font-size: 6px;
+                            opacity: .5;
+                        }
+                    }
                 }
             }
 
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index feecb56f5..fd8412a69 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -159,11 +159,29 @@ function LayoutIllustration({ isNewLayout }: { isNewLayout?: boolean }) {
                 <div className="tab-bar" />
 
                 <div className="content">
-                    <div className="title-bar">
-                        <Icon icon="bx bx-note" />
-                        <span className="title">Title</span>
-                        <Icon icon="bx bx-dock-right" />
+
+                    {(isNewLayout) ? (
+                        <div className="note-header">
+                            <div className="note-toolbar">
+                                <Icon icon="bx bx-dock-right" />
+                            </div>
+                            <div className="note-inline-title">
+                                <Icon className="note-icon" icon="bx bx-leaf" />
+                                <div className="note-title-row">
+                                    <div className="title">Title</div>
+                                    <div className="subtitle">Just a sample note</div>
+                                </div>
+                            </div>
+                        </div>
+                    ) : (
+                    <div>
+                        <div className="title-bar">
+                            <Icon icon="bx bx-leaf" />
+                            <span className="title">Title</span>
+                            <Icon icon="bx bx-dock-right" />
+                        </div>
                     </div>
+                    )}
 
                     {!isNewLayout && <div className="ribbon">
                         <div className="ribbon-header">
@@ -173,7 +191,9 @@ function LayoutIllustration({ isNewLayout }: { isNewLayout?: boolean }) {
                             <Icon icon="bx bx-collection" />
                         </div>
 
-                        <div className="ribbon-body" />
+                        <div className="ribbon-body">
+                            <div className="ribbon-body-content"></div>
+                        </div>
                     </div>}
 
                     {isNewLayout && <div className="note-title-actions">