CMS UI/UX improvements (#393)

* Left Arrow to go back from the page editor

* Make content for small screens (desktop) a bit wider

* Improve margins in Setup and CMS screens for different screen sizes

* Moving Lexical icons again to a better place

web/frontoffice/src/lib/components/settings/PageEditor.svelte

@@ -21,6 +21,7 @@
     import BuilderSectionSetup from "$sharedLib/components/pagebuilder/BuilderSectionSetup.svelte";
     import {onMount} from "svelte";
     import AlertInfo from "$sharedLib/components/icons/AlertInfo.svelte";
+    import ArrowLeft from "$sharedLib/components/icons/ArrowLeft.svelte";
 
     // General
     let logoURL = '';
@@ -134,7 +135,14 @@
             {/if}
 
             {#if selectedPageId}
-                <a class="underline" on:click={() => selectedPageId = null} href={null}>- Back -</a>
+                <div class="flex items-start justify-start text-left align-middle ml-4 lg:ml-14 2xl:ml-28 3xl:ml-32">
+                    <div class="w-10 mr-2 cursor-pointer" on:click={() => selectedPageId = null}>
+                        <ArrowLeft />
+                    </div>
+                    <div class="w-10 cursor-pointer" on:click={() => selectedPageId = null}>
+                        <span class="inline-block align-middle text-lg mt-1">Back</span>
+                    </div>
+                </div>
                 <h2>Editing <span class="font-bold">{getPage(selectedPageId, $NostrGlobalConfig).title}</span> page content.</h2>
 
                 {#if selectedPageId && selectedPageId !== '0'}
@@ -163,7 +171,7 @@
                     <p>Add sections here, and set them up to display what you need to show in each of them.</p>
                 </div>
 
-                <div class="mt-5 2xl:w-11/12 3xl:w-9/12 mx-auto text-xs md:text-base">
+                <div class="mt-5 mx-auto text-xs md:text-base">
                     <div class="mb-4">
                         <input type="text" bind:value={newSection} placeholder="Title of the new section" class="input input-bordered input-success w-full max-w-xs input-sm" />
                         <button class="btn btn-sm btn-success ml-1" class:btn-disabled={!newSection}

web/frontoffice/src/routes/+layout.svelte

@@ -119,7 +119,7 @@
 <div class="h-screen pt-12 lg:pt-20 pb-20 { $page.url.pathname === '/messages' ? '' : 'mt-2' }">
     <Navbar />
 
-    <div class="mx-auto mb-6 min-h-[80%] { $page.url.pathname === '/messages' ? 'h-full' : '' } { $page.url.pathname === '/' ? 'w-screen' : 'w-11/12 lg:w-10/12' }">
+    <div class="mx-auto mb-6 min-h-[80%] { $page.url.pathname === '/messages' ? 'h-full' : '' } { $page.url.pathname === '/' ? 'w-screen' : 'w-11/12 xl:w-10/12' }">
         <Notifications />
 
         <slot />

web/frontoffice/src/routes/cms/+page.svelte

@@ -37,7 +37,7 @@
 
 <Titleh1>CMS</Titleh1>
 
-<div class="lg:grid lg:grid-cols-4 2xl:w-11/12 3xl:w-9/12 w-full p-0 md:p-4 pb-8 mx-auto">
+<div class="lg:grid lg:grid-cols-4 w-full 2xl:w-11/12 3xl:w-10/12 p-0 md:p-4 pb-8 mx-auto">
     <div class="md:grow-0 pb-10">
         <ul class="md:w-52 mt-3 p-2 menu menu-compact bg-base-300 rounded-box">
             {#each pages as page}

web/frontoffice/src/routes/settings/+page.svelte

@@ -35,7 +35,7 @@
 
 <Titleh1>Settings</Titleh1>
 
-<div class="lg:grid lg:grid-cols-4 2xl:w-11/12 3xl:w-9/12 w-full p-0 md:p-4 pb-8 mx-auto">
+<div class="lg:grid lg:grid-cols-4 w-full 2xl:w-11/12 3xl:w-10/12 p-0 md:p-4 pb-8 mx-auto">
     <div class="md:grow-0 pb-10">
         <ul class="md:w-52 mt-3 p-2 menu menu-compact bg-base-300 rounded-box">
             {#each pages as page}