feat: implement encrypted items info (#641)

* feat: implement encrypted items info

* Update app/assets/javascripts/ui_models/app_state/account_menu_state.ts

Co-authored-by: Mo Bitar <mo@standardnotes.org>

* Update app/assets/javascripts/ui_models/app_state/account_menu_state.ts

Co-authored-by: Mo Bitar <mo@standardnotes.org>

* Update app/assets/javascripts/preferences/panes/EndToEndEncryption.tsx

Co-authored-by: Mo Bitar <mo@standardnotes.org>

* Update app/assets/javascripts/preferences/panes/EndToEndEncryption.tsx

Co-authored-by: Mo Bitar <mo@standardnotes.org>

Co-authored-by: Mo Bitar <mo@standardnotes.org>

app/assets/javascripts/components/DecoratedInput.tsx

@@ -38,13 +38,12 @@ export const DecoratedInput: FunctionalComponent<Props> = ({
   const inputStateClasses = disabled ? 'overflow-ellipsis' : '';
   return (
     <div className={`${classes} focus-within:ring-info`}>
-      {left?.map((leftChild, idx, arr) => (
+      {left?.map((leftChild) => (
         <>
           {leftChild}
-          {idx < arr.length - 1 && <div className="min-w-3 min-h-1" />}
+          <div className="min-w-2 min-h-1" />
         </>
       ))}
-      {left !== undefined && <div className="min-w-7 min-h-1" />}
       <div className="flex-grow">
         <input
           type={type}
@@ -59,11 +58,10 @@ export const DecoratedInput: FunctionalComponent<Props> = ({
           autocomplete={autocomplete ? 'on' : 'off'}
         />
       </div>
-      {right !== undefined && <div className="min-w-7 min-h-1" />}
-      {right?.map((rightChild, idx, arr) => (
+      {right?.map((rightChild) => (
         <>
+          <div className="min-w-3 min-h-1" />
           {rightChild}
-          {idx < arr.length - 1 && <div className="min-w-3 min-h-1" />}
         </>
       ))}
     </div>

app/assets/javascripts/components/Icon.tsx

@@ -27,6 +27,7 @@ import CopyIcon from '../../icons/ic-copy.svg';
 import DownloadIcon from '../../icons/ic-download.svg';
 import InfoIcon from '../../icons/ic-info.svg';
 import CheckIcon from '../../icons/ic-check.svg';
+import CheckBoldIcon from '../../icons/ic-check-bold.svg';
 
 import { toDirective } from './utils';
 import { FunctionalComponent } from 'preact';
@@ -59,7 +60,8 @@ const ICONS = {
   copy: CopyIcon,
   download: DownloadIcon,
   info: InfoIcon,
-  check: CheckIcon
+  check: CheckIcon,
+  "check-bold": CheckBoldIcon,
 };
 
 export type IconType = keyof typeof ICONS;