Tweak note title and icon (#8082)

apps/client/src/stylesheets/theme-next-dark.css

@@ -199,6 +199,10 @@
     --badge-background-color: #ffffff1a;
     --badge-text-color: var(--muted-text-color);
 
+    --note-icon-button-background-color: #a6a6a6;
+    --note-icon-button-hover-background-color: #d0d0d0;
+    --note-icon-button-color: black;
+
     --promoted-attribute-card-background-color: #ffffff21;
     --promoted-attribute-card-shadow: none;
 

apps/client/src/stylesheets/theme-next-light.css

@@ -191,6 +191,10 @@
     --badge-background-color: #00000011;
     --badge-text-color: var(--muted-text-color);
 
+    --note-icon-button-background-color: #4f4f4f;
+    --note-icon-button-hover-background-color: #737373;
+    --note-icon-button-color: white;
+
     --promoted-attribute-card-background-color: #00000014;
     --promoted-attribute-card-shadow: none;
 

apps/client/src/stylesheets/theme-next/forms.css

@@ -56,7 +56,8 @@ button.btn.btn-primary:focus-visible,
 button.btn.btn-secondary:focus-visible,
 button.btn.btn-sm:not(.select-button):focus-visible,
 button.btn.btn-success:focus-visible,
-button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text:not(.ck-disabled):focus-visible {
+button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text:not(.ck-disabled):focus-visible,
+.tn-focusable-button:focus-visible {
     outline: 2px solid var(--input-focus-outline-color);
 }
 

apps/client/src/widgets/layout/InlineTitle.css

@@ -7,31 +7,60 @@
 }
 
 .inline-title {
+    margin-top: 2px; /* Allow space for the focus outline */
     max-width: var(--max-content-width);
+    container-type: inline-size;
     padding-inline-start: 24px;
 
     & > .inline-title-row {
+        --icon-size: 35px;
+        --icon-padding-size: 10px;
+        --title-size: 1.8em;
+
         display: flex;
         align-items: center;
+        gap: 16px;
         transition: var(--title-transition);
 
         &.hidden {
             opacity: 0;
             pointer-events: none;
         }
+
+        .note-icon-widget {
+            --note-icon-size: 35px;
+            --note-icon-container-padding-size: 10px;
+        }
+
+        .note-title-caption {
+            flex-grow: 1;
+        }
+
+        .note-title-widget {
+            --note-title-size: 1.8em;
+            --note-title-padding-inline: 0;
+        }
+
+        @container (max-width: 500px) {
+            .note-icon-widget {
+                --note-icon-size: 25px;
+                --note-icon-container-padding-size: 6px;
+            }
+
+            .note-title-widget {
+                --note-title-size: 1.5em;
+            }
+
+            .title-details {
+                display: none;
+            }
+        }
     }
 
     &.hidden {
         display: none;
     }
 
-    .note-icon-widget {
-        padding: 0;
-    }
-
-    .inline-title-row {
-        border-bottom: 2px solid gray;
-    }
 }
 
 .title-row {
@@ -59,28 +88,43 @@ body.prefers-centered-content .inline-title {
     display: flex;
     gap: 0.25em;
     margin: 0;
-    margin-top: 4px;
+    margin-top: .2rem;
     list-style-type: none;
     opacity: .5;
-    flex-wrap: wrap;
+    font-size: .85rem;
+    line-height: 1;
+    flex-wrap: nowrap;
+    white-space: nowrap;
 
     span.value {
         font-weight: 500;
     }
 }
 
+@keyframes note-type-switcher-intro {
+    from {
+        opacity: 0;
+    } to {
+        opacity: 1;
+    }
+}
+
 .note-type-switcher {
+    --badge-radius: 12px;
+    
+    position: relative;
+    top: 5px;
     padding: .25em 0;
     display: flex;
     align-items: center;
     overflow-x: auto;
     min-width: 0;
     gap: 5px;
-    min-height: 40px;
+    min-height: 35px;
-    --badge-radius: 12px;
     
     >* {
         flex-shrink: 0;
+        animation: note-type-switcher-intro 200ms ease-in;
     }
 
     .ext-badge {

apps/client/src/widgets/layout/InlineTitle.tsx

@@ -71,10 +71,12 @@ export default function InlineTitle() {
         >
             <div class={clsx("inline-title-row", titleHidden && "hidden")}>
                 <NoteIcon />
+                <div class="note-title-caption">
                     <NoteTitleWidget />
+                    <NoteTitleDetails />
+                </div>
             </div>
 
-            <NoteTitleDetails />
             <EditedNotes />
             <NoteTypeSwitcher />
         </div>

apps/client/src/widgets/note_icon.css

@@ -1,17 +1,22 @@
-.note-icon-widget {
+div.note-icon-widget {
-    padding-inline-start: 10px;
+    /* The size of the icon */
-    margin-inline-end: 0;
+    --note-icon-size: 30px;
-    width: 50px;
+    /* The padding size for the icon container */
-    height: 50px;
+    --note-icon-container-padding-size: 10px;
+    contain: unset;
 }
 
 .note-icon-widget button.note-icon {
-    font-size: 180%;
+    --size: calc(var(--note-icon-size) + var(--note-icon-container-padding-size) * 2);
-    background-color: transparent;
+
+    width: var(--size);
+    height: var(--size);
+    padding: 0;
     border: 1px solid transparent;
-    padding: 6px;
+    background-color: transparent;
-    cursor: pointer;
     color: var(--muted-text-color);
+    cursor: pointer;
+    font-size: var(--note-icon-size);
 }
 
 .note-icon-widget button.note-icon:disabled {
@@ -69,3 +74,41 @@
     width: 1em;
     height: 1em;
 }
+
+body.experimental-feature-new-layout {
+    .note-icon-widget button.note-icon {
+        --input-focus-outline-color: var(--note-icon-button-hover-background-color);
+
+        position: relative;
+        background: transparent !important;
+
+        &, &:hover {
+            border-radius: 50%;
+        }
+
+        /* The icon */
+        &::before {
+            position: relative;
+            z-index: 1;
+            color: var(--note-icon-button-color);
+        }
+
+        /* The background circle */
+        &:not(.bx-empty:disabled)::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 50%;
+            background: var(--note-icon-button-background-color);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--note-icon-button-color);
+        }
+
+        &:hover:not(.bx-empty:disabled)::after {
+            background: var(--note-icon-button-hover-background-color);
+            transition: background 200ms ease-out;
+        }
+    }
+}

apps/client/src/widgets/note_icon.tsx

@@ -42,7 +42,7 @@ export default function NoteIcon() {
             className="note-icon-widget"
             title={t("note_icon.change_note_icon")}
             dropdownContainerStyle={{ width: "610px" }}
-            buttonClassName={`note-icon ${icon ?? "bx bx-empty"}`}
+            buttonClassName={`note-icon tn-focusable-button ${icon ?? "bx bx-empty"}`}
             hideToggleArrow
             disabled={viewScope?.viewMode !== "default"}
         >

apps/client/src/widgets/note_title.css

@@ -1,15 +1,23 @@
-.note-title-widget {
+div.note-title-widget {
+    /* The font size for the title */
+    --note-title-size: 180%;
+    /* The horizontal padding of the title widget */
+    --note-title-padding-inline: 12px;
+
     flex-grow: 1000;
-    height: 100%;
+    height: auto;
+    contain: unset;
 }
 
 .note-title-widget input.note-title {
-    font-size: 110%;
+    font-size: var(--note-title-size);
     border: 0;
-    margin: 2px 0px;
+    border-radius: 0;
     min-width: 5em;
     width: 100%;
-    padding: 1px 12px;
+    line-height: 1;
+    padding-block: 0;
+    padding-inline: var(--note-title-padding-inline);
 }
 
 .note-title-widget input.note-title[readonly] {
@@ -22,11 +30,7 @@
 }
 
 body.mobile .note-title-widget input.note-title {
-    padding: 0;
+    --note-title-padding-inline: 0;
-}
-
-body.desktop .note-title-widget input.note-title {
-    font-size: 180%;
 }
 
 body.experimental-feature-new-layout {
@@ -40,9 +44,21 @@ body.experimental-feature-new-layout {
             transition: none;
         }
 
+        .note-icon-widget {
+            --note-icon-size: 16px;
+            --note-icon-container-padding-size: 6px;
+            margin-inline: 12px 8px;
+        }
+        
+        .note-title-widget {
+            --note-title-size: 18px;
+            --note-title-padding-inline: 0;
+        }
+
         @container (max-width: 700px) {
-            .note-icon-widget .note-icon {
+            .note-title-widget {
-                font-size: 1.3em;
+                --note-title-size: 1.25rem;
+                --note-title-padding-inline: 4px;
             }
 
             .note-title-widget {

apps/client/src/widgets/type_widgets/text/EditableText.css

@@ -1,7 +1,6 @@
 .note-detail-editable-text {
     font-family: var(--detail-font-family);
     padding-inline-start: 14px;
-    padding-top: 10px;
     height: 100%;
 }