Update document editor styles (#180) (#191)

* feat: update document editor styles (#180)

* fix: fix flexbox property

* fix: fix label name in the edit mode

* fix: change padding and bottom arrow as Figma size

* fix: change padding and bottom arrow as Figma size

* fix: add universal input, select directive

* fix: fix layout shift, class name

* fix: fix text cutting and change usage of svg in css

* fix: add missing css property

src/backend/views/pages/form.twig

@@ -13,14 +13,18 @@
       }
     </textarea>
     <header class="writing-header">
-      <span class="writing-header__left">
+      <div class="writing-header__inner-container">
-        <span>
-        New Page at the
         {% set currentPageId = 0 %}
         {% if page is not empty %}
           {% set currentPageId = page._id %}
         {% endif %}
-          <select name="parent">
+        <div class="select-wrapper">
+          {% if parentsChildrenOrdered is not empty %}
+            <label for="parent">Parent Page</label>
+          {% else %}
+            <label for="parent">New Page at the</label>
+          {% endif %}
+          <select id="parent" name="parent">
             <option value="0">Root</option>
             {% for _page in pagesAvailableGrouped %}
               {% if _page._id != currentPageId %}
@@ -34,24 +38,25 @@
               {% endif %}
             {% endfor %}
           </select>
-        </span>
+        </div>
-
         {% if parentsChildrenOrdered is not empty %}
-          <span>
+          <div class="select-wrapper">
-            Put Above
+            <label for="above">Put Above</label>
-            <select name="above">
+            <select id="above" name="above">
               <option value="0">—</option>
               {% for _page in parentsChildrenOrdered %}
                 <option value="{{ _page._id }}">{{ _page.title }}</option>
               {% endfor %}
             </select>
-          </span>
+          </div>
         {% endif %}
-      </span>
+        {% if page is not empty %}
-
+          <div class="uri-input-wrapper">
-      {% if page is not empty %}
+            <label for="uri-input">Alias</label>
-        <p><input type="text" class="uri-input" name="uri-input" placeholder="URI (Optional)" value="{{ page.uri }}"></p>
+            <input type="text" id="uri-input" class="uri-input" name="uri-input" placeholder="URI (Optional)" value="{{ page.uri }}">
-      {% endif %}
+          </div>
+        {% endif %}
+      </div>
     </header>
     <div class="writing-editor">
       <div id="editorjs"></div>

src/frontend/styles/components/writing.pcss

@@ -1,5 +1,4 @@
 .writing-header {
-  display: flex;
   position: sticky;
   top: 0;
   padding: 15px 0;
@@ -15,18 +14,32 @@
     margin: auto;
   }
 
-  &__left {
+  &__inner-container {
     margin: auto 0;
+    display: flex;
     color: var(--color-text-second);
+    gap: 10px;
 
-    & span {
+    @media(--mobile) {
-      margin-right: 10px;
+      flex-flow: column;
     }
-  }
 
-  select {
+    & > * {
-    max-width: 100px;
+      flex: 0 1 33.3%;
-    vertical-align: bottom;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 6px;
+    }
+
+    select {
+      @apply --select;
+    }
+
+    input {
+      @apply --input;
+    }
   }
 }
 
@@ -38,16 +51,6 @@
   }
 }
 
-.uri-input {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 3px;
-  border: 1px solid rgba(201, 201, 204, 0.48);
-  box-shadow: inset 0 1px 2px 0 rgba(35, 44, 72, 0.06);
-  outline: none;
-}
-
 .writing-editor {
   font-size: 15px;
   line-height: 1.6;

src/frontend/styles/vars.pcss

@@ -6,6 +6,8 @@
   --color-link-hover: #F3F6F8;
   --color-bg-light: #f8f7fa;
   --color-page-active: #ff1767;
+  --color-input-primary: #F3F6F8;
+  --color-input-border: #477CFF;
 
   --color-button-primary: #3389FF;
   --color-button-primary-hover: #2E7AE6;
@@ -77,6 +79,49 @@
     }
   }
 
+  --select {
+    position: relative;
+    padding: 10px 30px 10px 10px;
+    width: 100%;
+    border: solid 1px transparent;
+    border-radius: 8px;
+    background-color: var(--color-input-primary);
+    box-sizing: border-box;
+    appearance: none;
+    line-height: 18px;
+    background-image: url("../svg/arrow-down.svg");
+    background-repeat: no-repeat;
+    background-position: right 15px center;
+
+    &:focus {
+      border: solid 1px var(--color-input-border);
+      box-shadow: 0 0 0 3px rgba(18, 155, 255, 0.33);
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  --input {
+    padding: 10px;
+    width: 100%;
+    line-height: 18px;
+    border: solid 1px transparent;
+    border-radius: 8px;
+    background-color: var(--color-input-primary);
+    box-sizing: border-box;
+
+    &:focus {
+      border: solid 1px var(--color-input-border);
+      box-shadow: 0 0 0 3px rgba(18, 155, 255, 0.33);
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
   --squircle {
     border-radius: 8px;
     
@@ -95,4 +140,4 @@
 @custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
 @custom-media --mobile all and (max-width: 980px);
 @custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
-@custom-media --can-hover all and (hover:hover)
+@custom-media --can-hover all and (hover:hover);

src/frontend/svg/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.83053 0.193862C6.70562 0.0696944 6.53666 0 6.36053 0C6.18441 0 6.01544 0.0696944 5.89053 0.193862L3.4972 2.55386L1.1372 0.193862C1.01229 0.0696944 0.843323 0 0.667199 0C0.491075 0 0.322107 0.0696944 0.197199 0.193862C0.134713 0.255837 0.0851169 0.329571 0.0512711 0.410811C0.0174253 0.49205 0 0.579187 0 0.667195C0 0.755203 0.0174253 0.84234 0.0512711 0.92358C0.0851169 1.00482 0.134713 1.07855 0.197199 1.14053L3.02387 3.9672C3.08584 4.02968 3.15957 4.07928 3.24081 4.11312C3.32205 4.14697 3.40919 4.16439 3.4972 4.16439C3.58521 4.16439 3.67234 4.14697 3.75358 4.11312C3.83482 4.07928 3.90856 4.02968 3.97053 3.9672L6.83053 1.14053C6.89302 1.07855 6.94261 1.00482 6.97646 0.92358C7.0103 0.84234 7.02773 0.755203 7.02773 0.667195C7.02773 0.579187 7.0103 0.49205 6.97646 0.410811C6.94261 0.329571 6.89302 0.255837 6.83053 0.193862Z" fill="black"/>
+</svg>

webpack.config.js

@@ -40,7 +40,7 @@ module.exports = () => {
               options: {
                 // you can specify a publicPath here
                 // by default it use publicPath in webpackOptions.output
-                publicPath: '../',
+                // publicPath: '../',
               },
             },
             {