chore(ui): a bunch of style updates (#235)

* chore(styles): typography updating started

* page styles updated

* page header nav fix, inline code style fix, table, navigator

* use arrow-right icon instead of "»" in bread crumbs

* a bunch of updates

* make content and write page styles more consistent

* rollback layout change

* upd color text second

* upd sidebar logo text color

* resovle someone's ts errors

* remove duplicated variables

src/backend/routes/aliases.ts

@@ -1,10 +1,10 @@
 import express, { Request, Response } from 'express';
-import Aliases from '../controllers/aliases';
+import Aliases from '../controllers/aliases.js';
-import Pages from '../controllers/pages';
+import Pages from '../controllers/pages.js';
-import Alias from '../models/alias';
+import Alias from '../models/alias.js';
-import verifyToken from './middlewares/token';
+import verifyToken from './middlewares/token.js';
-import PagesFlatArray from '../models/pagesFlatArray';
+import PagesFlatArray from '../models/pagesFlatArray.js';
-import HttpException from '../exceptions/httpException';
+import HttpException from '../exceptions/httpException.js';
 
 
 const router = express.Router();
@@ -48,7 +48,7 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
       }
     }
   } catch (err) {
-    if (err instanceof HttpException && err.status === 404) {
+    if (err instanceof HttpException && (err as HttpException).status === 404) {
       res.status(404).render('error', {
         message: 'Page not found',
         status: 404,

src/backend/views/pages/page.twig

@@ -3,11 +3,13 @@
 {% block body %}
   <article class="page" data-module="page">
     <header class="page__header">
-      <a href="/" class="page__header-nav">
+      <div class="page__header-nav">
+        <a href="/" class="page__header-nav-item">
           Documentation
         </a>
+        {{ svg('arrow-right') }}
         {% if page._parent %}
-        <a class="page__header-nav"
+          <a class="page__header-nav-item"
             {% if pageParent.uri %}
               href="/{{ pageParent.uri }}"
             {% else %}
@@ -16,6 +18,7 @@
             {{ pageParent.title }}
           </a>
         {% endif %}
+      </div>
       <time class="page__header-time">
         Last edit {{ (page.body.time / 1000)  | date("M d Y") }}
       </time>
@@ -34,7 +37,9 @@
         {# Skip first header, because it is already showed as a Title #}
         {% if not (loop.first and block.type == 'header') %}
           {% if block.type in ['paragraph', 'header', 'image', 'code', 'list', 'delimiter', 'table', 'warning', 'checklist', 'linkTool', 'raw', 'embed'] %}
+            <div class="page__content-block">
               {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
+            </div>
           {% endif %}
         {% endif %}
       {%  endfor %}

src/frontend/styles/components/header.pcss

@@ -10,15 +10,14 @@ html {
   border-bottom: 1px solid var(--color-line-gray);
   font-size: 18px;
   flex-wrap: wrap;
-  height: var(--layout-height-header);
   box-sizing: border-box;
   position: sticky;
   top: 0;
   background: white;
   z-index: 10;
 
-  @media (--mobile){
+  @media (--not-mobile){
-    line-height: 40px;
+    height: var(--layout-height-header);
   }
 
   &__menu-link,
@@ -36,11 +35,13 @@ html {
   }
 
   &__menu-link {
-    padding: 4px 10px;
     font-weight: 500;
     transition: background-color .13s;
 
+    @media (--not-mobile) {
+      padding: 4px 10px;
       @apply --squircle;
+    }
 
     &:hover {
       background-color: var(--color-link-hover);
@@ -55,8 +56,9 @@ html {
     font-size: 16px;
 
     @media (--mobile) {
+      margin-top: 6px;
       flex-basis: 100%;
-      font-size: 12px;
+      font-size: 14px;
     }
 
     li {
@@ -85,8 +87,8 @@ html {
         @media (--mobile) {
           display: block;
           position: absolute;
-          right: 15px;
+          right: 0;
-          top: 15px;
+          top: 13px;
           line-height: 1em;
         }
       }

src/frontend/styles/components/navigator.pcss

@@ -10,13 +10,13 @@
   flex-direction: column;
   justify-content: space-between;
   background-color: var(--color-link-hover);
-  border-radius: 10px;
   padding: 12px 16px 12px 16px;
   color: black;
   width: max-content;
-  font-weight: 500;
   font-size: 14px;
 
+  @apply --squircle;
+
   &--previous {
     align-items: flex-start;
     margin-left: 0;
@@ -29,13 +29,15 @@
 
   &-direction {
     text-transform: capitalize;
-    color: var(--color-direction-navigation);
+    color: var(--color-text-second);
     font-size: 12px;
-    font-weight: 400;
+    line-height: 140%;
+    margin-bottom: 2px;
   }
 
   &-label {
     width: 100%;
+    font-weight: 500;
   }
 }
 

src/frontend/styles/components/page.pcss

@@ -1,18 +1,21 @@
 .page {
-  font-size: 15px;
-  line-height: 1.6;
-  letter-spacing: 0.005em;
-
   &__header {
     display: flex;
     align-items: center;
+    margin-bottom: 20px;
+    font-size: 14px;
     color: var(--color-text-second);
+    line-height: 1.5em;
 
     @media (--mobile) {
       font-size: 13px;
     }
 
     &-nav {
+      display: flex;
+      align-items: center;
+
+      &-item {
         color: inherit;
         text-decoration: none;
 
@@ -23,11 +26,13 @@
         &:hover {
           color: var(--color-link-active);
         }
+      }
 
-      &:not(:last-of-type) {
+      svg {
-        &::after {
+        margin: 0 6px;
-          content: '»';
+
-          margin: 0 0.7em 0 0.45em;
+        @media (--mobile) {
+          display: none;
         }
       }
     }
@@ -47,11 +52,7 @@
   }
 
   &__title {
-    @apply --font-serif;
+    @apply --text-content-title;
-    font-size: 35px;
-    font-weight: 900;
-    letter-spacing: -0.04em;
-    margin-bottom: -0.1em;
   }
 
   .cdx-marker {
@@ -61,55 +62,29 @@
 
   .inline-code,
   .block-header a .inline-code {
-    display: inline-block;
+    @apply --text-inline-code;
-    background: rgba(251,241,241,0.78);
-    color: #C44545;
-    padding: 0.1em 0.5em;
-    border-radius: 2px;
-    margin: 0 2px;
-    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
-    font-size: 0.84em;
-    line-height: 1.4em;
-    border-bottom: 0;
-
-    &:hover {
-      background: rgba(251,241,241,0.78);
-    }
   }
 
   &__content {
+    @apply --text-content-main;
+
     a {
-      text-decoration: none;
+      @apply --text-inline-link;
-      border-bottom: 1px solid #000;
-      padding-bottom: 1px;
-      color: inherit;
-
-      &:hover {
-        color: var(--color-link-active);
-        border-bottom-color: var(--color-link-active);
     }
 
-      .inline-code {
+    &-block {
-        margin: 0;
+      @apply --content-block;
-        padding: 0.15em .5em;
-        border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
-        color: #1f6fd8;
-        background-color: #daf1fe;
-
-        &:hover {
-          background-color: #c8edfe;
     }
   }
 }
-  }
-
-}
 
 /**
  * Paragraph
  * ==================
  */
 .block-paragraph {
+  margin: 0;
+
   .inline-code {
     -webkit-font-smoothing: initial;
     -moz-osx-font-smoothing: initial;
@@ -121,21 +96,14 @@
  * ==================
  */
 .block-header {
-  @apply --font-serif;
+  @apply --text-header;
-  margin: 2.1em 0 0.5em;
 
   &--2 {
-    font-size: 22px;
+    @apply --text-header-2;
-    font-weight: 600;
   }
 
   &--3 {
-    font-size: 18px;
+    @apply --text-header-3;
-    font-weight: 600;
-  }
-
-  & + p {
-    margin-top: 0.5em;
   }
 
   a {
@@ -185,14 +153,8 @@
  * ==================
  */
 .block-code {
-  background: var(--color-bg-light);
+  @apply --text-code-block;
-  border: 1px solid #f1f1f4;
+  @apply --squircle;
-  border-radius: 5px;
-  font-family: var(--font-mono);
-  line-height: 1.7em;
-  font-size: 13px;
-  overflow-x: auto;
-  margin: 15px 0;
 
   &__content {
     display: inline-block !important;
@@ -200,7 +162,7 @@
     word-wrap: normal;
     background: transparent !important;
     padding: 15px !important;
-    color: #41314e !important;
+    color: var(--color-code-main) !important;
     min-width: 100%;
     box-sizing: border-box;
 
@@ -211,13 +173,31 @@
     }
   }
 
+  .hljs-params {
+    color: var(--color-code-params);
+  }
+
+  .hljs-number {
+    color: var(--color-code-number);
+  }
+
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_  {
+    color: var(--color-code-class);
+  }
+
+
   .hljs-name,
-  .hljs-section{
+  .hljs-section,
-    color: #359f3f;
+  .hljs-selector-tag {
+    color: var(--color-code-tag);
   }
 
   .hljs-tag {
-    color: #718c77;
+    color: var(--color-code-main);
   }
 
   .hljs-attr,
@@ -226,7 +206,13 @@
   .hljs-selector-id,
   .hljs-selector-pseudo,
   .hljs-title {
-    color: #904eb3;
+    color: var(--color-code-class);
+  }
+
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-operator {
+    color: var(--color-code-variable);
   }
 
   .hljs-emphasis,
@@ -235,8 +221,33 @@
   .hljs-strong,
   .hljs-template-variable,
   .hljs-variable {
-    color: #c21f04;
+    color: var(--color-code-string);
   }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type {
+    color: var(--color-code-keyword);
+  }
+
+  .hljs-variable.language_ {
+    color: var(--color-code-variable) ;
+  }
+
+  .hljs-code,
+  .hljs-comment,
+  .hljs-formula {
+    color: var(--color-code-comment);
+  }
+
+  .hljs-regexp {
+    color: var(--color-code-tag);
+  }
+
+
 }
 
 /**
@@ -244,10 +255,12 @@
  * ==================
  */
 .block-list {
-  margin: 20px 0;
+  margin: 0;
+  list-style: outside;
+  padding-left: 26px;
 
-  li {
+  li:not(:last-of-type) {
-    margin: 10px 0;
+    margin-bottom: 8px;
   }
 }
 
@@ -323,7 +336,6 @@
  * ==================
  */
 .block-table {
-  margin: 20px 0;
   table-layout: fixed;
   width: 100%;
   border-radius: 3px;
@@ -331,11 +343,12 @@
   border: 1px solid var(--color-line-gray);
 
   td {
-    padding: 8px 10px;
+    padding: 6px 8px;
     border: 1px solid var(--color-line-gray);
   }
 }
 
+
 /**
  * Warning
  * ==================
@@ -343,10 +356,9 @@
 .block-warning {
   display: flex;
   padding: 20px;
-  margin: 30px 0;
+  background: #fffad0;
-  border-radius: 7px;
+
-  background: #fff9ef;
+  @apply --squircle;
-  color: #392e2f;
 
   &__icon {
     margin-right: 15px;

src/frontend/styles/components/sidebar.pcss

@@ -50,6 +50,10 @@
       padding-bottom: 0;
     }
 
+    @media (--mobile){
+      margin: 0 -8px;
+    }
+
     &--hidden {
       display: none;
     }
@@ -106,6 +110,11 @@
     font-size: 14px;
     line-height: 21px;
     height: 29px;
+
+    @media (--mobile){
+      font-size: 16px;
+      line-height: 21px;
+    }
   }
 
   &__section-title,
@@ -116,6 +125,7 @@
     padding: 0 8px;
     transition-property: background-color;
     transition-duration: 0.1s;
+
     @apply --squircle;
   }
 
@@ -201,8 +211,6 @@
 
 
   &__toggler {
-    font-size: 13px;
-    cursor: pointer;
     color: var(--color-text-second);
     padding: 20px 15px;
     border-bottom: 1px solid var(--color-line-gray);
@@ -242,6 +250,7 @@
     padding-bottom: 20px;
     padding-top: 60px;
     font-size: 14px;
+    color: var(--color-text-second);
 
     @media (--desktop) {
       display: block;

src/frontend/styles/components/table-of-content.pcss

@@ -1,12 +1,13 @@
 .table-of-content {
   border-left: 1px solid var(--color-line-gray);
-  padding-left: var(--layout-padding-horizontal);
+  max-height: 100%;
-
-  height: 100%;
   overflow: auto;
-  padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
+  padding: 0 var(--layout-padding-horizontal);
+  margin: var(--layout-padding-vertical) 0;
   box-sizing: border-box;
 
+  --padding-x: 8px;
+
   &__header {
     font-size: 16px;
     font-weight: 600;
@@ -14,7 +15,7 @@
     letter-spacing: -0.01em;
 
     margin-bottom: 12px;
-    padding: 0 6px;
+    padding: 0 var(--padding-x);
   }
 
   &__list {
@@ -27,7 +28,7 @@
 
     list-style: none;
 
-    gap: 6px;
+    gap: 2px;
 
     &-item {
       @apply --squircle;
@@ -47,7 +48,7 @@
       &--indent-4x { margin-left: 24px; }
 
       & > a {
-        padding: 4px 8px;
+        padding: 4px var(--padding-x);
         display: block;
         font-size: 14px;
         letter-spacing: -0.01em;

src/frontend/styles/components/writing.pcss

@@ -52,28 +52,56 @@
 }
 
 .writing-editor {
-  font-size: 15px;
+  @apply --text-content-main;
-  line-height: 1.6;
-  letter-spacing: 0.005em;
 
   .ce-code__textarea {
-    color: #41314e;
+    @apply --text-code-block;
-    line-height: 1.6em;
+
-    font-size: 12px;
+    border: 0;
-    background: var(--color-bg-light);
+    border-radius: 8px;
-    border: 1px solid #f1f1f4;
-    box-shadow: none;
   }
 
   .ce-paragraph a {
-    color: inherit;
+    @apply --text-inline-link;
   }
 
   .ce-header {
-    @apply --font-serif;
+    @apply --text-header;
+    padding: 0;
+  }
+
+  h2.ce-header {
+    @apply --text-header-2;
+  }
+
+  h3.ce-header {
+    @apply --text-header-3;
+  }
+
+  .cdx-block {
+    padding: 0;
+  }
+
+  .inline-code {
+    @apply  --text-inline-code;
+  }
+
+  .tc-table {
+    @apply --text-content-main;
+  }
+
+  .tc-cell {
+    padding: 6px 8px;
   }
 }
 
 .codex-editor__redactor .ce-block:first-of-type .ce-header {
-  font-size: 32px;
+  @apply --text-content-title;
 }
+
+
+.ce-block {
+  @apply --content-block;
+}
+
+

src/frontend/styles/diff.pcss

@@ -2,27 +2,23 @@
   display: inline-block;
   width: 100%;
 
-  span {
-    color: inherit !important;
-  }
-
   &--added {
-    color: #277030;
+    color: #70b979;
-    background-color: #e2fce7;
+    background-color: #25f84d21;
 
     &::before {
       content: '+';
-      opacity: 0.4;
+      opacity: 0.8;
     }
   }
 
   &--removed {
-    color: rgb(174, 54, 60);
+    color: #f1acaf;
-    background-color: rgba(255, 230, 230, 1);
+    background-color: #95000069;
 
     &::before {
       content: '-';
-      opacity: 0.4;
+      opacity: 0.8;
     }
   }
 }

src/frontend/styles/vars.pcss

@@ -1,7 +1,6 @@
 :root {
-  --color-text-main: #313649;
+  --color-text-main: #060C26;
-  --color-text-second: #5d6068;
+  --color-text-second: #717682;
-  --color-direction-navigation: #717682;
   --color-line-gray: #E8E8EB;
   --color-link-active: #2071cc;
   --color-link-hover: #F3F6F8;
@@ -10,6 +9,19 @@
   --color-input-primary: #F3F6F8;
   --color-input-border: #477CFF;
 
+
+  /* Code Block styles */
+  --color-code-bg: #252935;
+  --color-code-main: #E1EBFE;
+  --color-code-keyword: #ff6675;
+  --color-code-class: #bf9dff;
+  --color-code-variable: #69c6ff;
+  --color-code-string: #81bcff;
+  --color-code-params: #ffa259;
+  --color-code-tag: #74e59d;
+  --color-code-number: #ff6262;
+  --color-code-comment: #6c7f93;
+
   --color-button-primary: #3389FF;
   --color-button-primary-hover: #2E7AE6;
   --color-button-primary-active: #296DCC;
@@ -29,7 +41,7 @@
   --layout-padding-horizontal: 22px;
   --layout-padding-vertical: 30px;
   --layout-sidebar-width: 290px;
-  --layout-width-main-col: 650px;
+  --layout-width-main-col: 700px;
   --layout-height-header: 56px;
 
   @media (--mobile) {
@@ -44,11 +56,6 @@
 
   --font-mono: Menlo,Monaco,Consolas,Courier New,monospace;
 
-  --font-serif {
-    font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans", Geneva, Arial, sans-serif;
-    letter-spacing: -0.03em;
-  }
-
   --button {
     display: inline-block;
     padding: 9px 15px;
@@ -131,6 +138,120 @@
       -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
     }
   }
+
+  /**
+   * The common styles for the Page blocks as well as Editor blocks
+   */
+  --content-block {
+    padding: 10px 0;
+  }
+
+  /**
+   * Main page H1 title
+   */
+  --text-content-title {
+    font-size: 36px;
+    font-weight: 800;
+    margin: 0;
+  }
+
+  /**
+   * Page body font
+   */
+  --text-content-main {
+    font-size: 16px;
+    line-height: 150%;
+  }
+
+  /**
+   * Code on page and in the Editor
+   */
+  --text-code-block {
+    background: var(--color-code-bg);
+    color: var(--color-code-main);
+    font-family: var(--font-mono);
+    line-height: 1.5em;
+    font-size: 13px;
+    overflow-x: auto;
+  }
+
+  /**
+   * Common styles for text headings (H2, H3, H4)
+   */
+  --text-header {
+    margin: 18px 0 0;
+    line-height: 1.35em;
+  }
+
+  /**
+   * Styles for the H2 at the Page and Editor
+   */
+  --text-header-2 {
+    font-size: 24px;
+    font-weight: 700;
+  }
+
+  /**
+   * Styles for the H3 at the Page and Editor
+   */
+  --text-header-3 {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  /**
+   * Styles for the inline code element at the Page and Editor
+   */
+  --text-inline-code {
+    display: inline-block;
+    background: rgba(251,241,241,0.78);
+    color: #C44545;
+    font-size: 14px;
+    line-height: 1.4em;
+    letter-spacing: 0;
+
+    padding: 3px 4px 2px;
+    margin: -1px 2px 0;
+    font-family: var(--font-mono);
+    font-size: 0.84em;
+    border-bottom: 0;
+
+    &:hover {
+      background: rgba(251,241,241,0.78);
+    }
+  }
+
+  /**
+   * Styles for regular links inside a text
+   */
+  --text-inline-link {
+    text-decoration: none;
+    border-bottom: 1px solid #000;
+    padding-bottom: 1px;
+    color: inherit;
+
+    &:hover {
+      color: var(--color-link-active);
+      border-bottom-color: var(--color-link-active);
+    }
+
+    /**
+     * When a link contain an inline code, highlight it by its own way
+     */
+    .inline-code {
+      margin: 0;
+      padding: 2px 5px;
+      border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
+      color: #1f6fd8;
+      background-color: #daf1fe;
+      border-radius: 3px !important;
+
+      &:hover {
+        background-color: #c8edfe;
+      }
+    }
+  }
+
 }
 
 /**
@@ -140,5 +261,6 @@
 @custom-media --desktop all and (min-width: 1050px);
 @custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
 @custom-media --mobile all and (max-width: 980px);
+@custom-media --not-mobile all and (min-width: 981px);
 @custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
 @custom-media --can-hover all and (hover:hover);

src/frontend/svg/arrow-right.svg

@@ -0,0 +1 @@
+<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.037 6.08a.833.833 0 0 0 0 1.175l2.95 2.992-2.95 2.95a.833.833 0 1 0 1.183 1.175l3.533-3.534a.832.832 0 0 0 0-1.183L9.22 6.08a.833.833 0 0 0-1.183 0Z" fill="#717682"/></svg>