Fixed font for code and attachment preview size. (#3388)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/presentation/src/components/message/Nodes.svelte

@@ -169,4 +169,12 @@
   s {
     color: var(--theme-accent-color);
   }
+  code {
+    padding: 0 0.25rem;
+    font-family: var(--mono-font);
+    color: var(--theme-code-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
+    border-radius: 0.25rem;
+  }
 </style>

packages/theme/styles/_colors.scss

@@ -108,6 +108,7 @@
   --theme-dark-color: rgba(255, 255, 255, .6);
   --theme-content-color: rgba(255, 255, 255, .8);
   --theme-caption-color: #FFF;
+  --theme-code-color: #EB7861;
 
   --theme-list-border-color: rgba(255, 255, 255, .05);
   --theme-list-header-color: #C88C65;
@@ -299,6 +300,7 @@
   --theme-dark-color: rgba(0, 0, 0, .6);
   --theme-content-color: rgba(0, 0, 0, .8);
   --theme-caption-color: #000;
+  --theme-code-color: #377AE6;
 
   --theme-list-border-color: rgba(0, 0, 0, .09);
   --theme-list-header-color: red; //#ECD4CA;

packages/theme/styles/global.scss

@@ -25,6 +25,8 @@
 @import "./button.scss";
 @import "./_text-editor.scss";
 
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400;1,500&display=swap');
+
 @font-face {
   font-family: 'IBM Plex Sans';
   font-style: normal;
@@ -70,6 +72,7 @@
   --body-font-size: .875rem;
   --panel-aside-width: 25rem; // 20rem;
   --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
+  --mono-font: 'IBM Plex Mono', monospace;
   --timing-shadow: cubic-bezier(0,.65,.35,1);
   --timing-main: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --timing-rotate: cubic-bezier(.28,1.92,.39,.56);

packages/theme/styles/prose.scss

@@ -46,26 +46,11 @@ table.proseTable {
   }
 }
 
-.theme-dark .proseCode {
-  padding: 0px 4px;
-
-  color: #EB7861;
-    
-  /* Button/Theme Dark/Default */
-  background: rgba(255, 255, 255, 0.02);
-  /* Button/Theme Dark/Stroke */
-  border: 1px solid rgba(255, 255, 255, 0.09);
-  border-radius: 4px;
-}
-
-.theme-light .proseCode {
-  padding: 0px 4px;
-
-  color: #377AE6;
-    
-  /* Button/Theme Light/Default */
-  background: rgba(0, 0, 0, 0.02);
-  /* Button/Theme Light/Stroke */
-  border: 1px solid rgba(0, 0, 0, 0.09);
-  border-radius: 4px;
+.proseCode {
+  padding: 0 .25rem;
+  font-family: var(--mono-font);
+  color: var(--theme-code-color);
+  background-color: var(--theme-button-enabled);
+  border: 1px solid var(--theme-button-border);
+  border-radius: .25rem;
 }

plugins/attachment-resources/src/components/AttachmentPresenter.svelte

@@ -87,6 +87,7 @@
 <div class="flex-row-center attachment-container">
   <a
     class="no-line"
+    style:flex-shrink={0}
     href={getFileUrl(value.file, 'full', value.name)}
     download={value.name}
     on:click={clickHandler}

plugins/login-resources/src/components/LoginApp.svelte

@@ -83,14 +83,7 @@
       <LoginIcon /><span class="fs-title">{getMetadata(workbench.metadata.PlatformTitle)}</span>
     </div>
 
-    <div
-      class="panel-base"
-      class:panel={$deviceInfo.docWidth > 768}
-      class:white={!$themeStore.dark}
-      class:minHeight={!$deviceInfo.isPortrait}
-      class:landscape={$deviceInfo.docWidth > 768}
-      style:border-radius={$deviceInfo.docWidth <= 480 ? '.75rem' : '1.25rem'}
-    >
+    <div class="panel-base" class:panel={$deviceInfo.docWidth > 768} class:white={!$themeStore.dark}>
       <Scroller padding={'1rem 0'}>
         <div class="form-content">
           {#if page === 'login'}
@@ -164,7 +157,7 @@
     mix-blend-mode: normal;
     box-shadow: -30px 1.52px 173.87px #121437;
     backdrop-filter: blur(157.855px);
-    border-radius: 1rem !important;
+    border-radius: 1rem;
 
     &::after {
       overflow: hidden;
@@ -196,7 +189,6 @@
       transform: rotate(180deg);
       transition: opacity 0.15s var(--timing-main);
       opacity: 0.7;
-      // z-index: -1;
     }
   }
   .backd.paneld::after,