refactor: DecoratedInput and add DecoratedPasswordInput (#953)

app/assets/javascripts/components/Preferences/panes/security-segments/Encryption.tsx

@@ -1,4 +1,3 @@
-import { DecoratedInput } from '@/components/DecoratedInput';
 import { Icon } from '@/components/Icon';
 import {
   STRING_E2E_ENABLED,
@@ -7,7 +6,7 @@ import {
 } from '@/strings';
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
-import { FunctionComponent } from 'preact';
+import { ComponentChild, FunctionComponent } from 'preact';
 import {
   PreferencesGroup,
   PreferencesSegment,
@@ -18,6 +17,19 @@ import {
 const formatCount = (count: number, itemType: string) =>
   `${count} / ${count} ${itemType}`;
 
+const EncryptionStatusItem: FunctionComponent<{
+  icon: ComponentChild;
+  status: string;
+}> = ({ icon, status }) => (
+  <div className="w-full rounded py-1.5 px-3 text-input my-1 h-8 flex flex-row items-center bg-contrast no-border focus-within:ring-info">
+    {icon}
+    <div className="min-w-3 min-h-1" />
+    <div className="flex-grow color-text text-sm">{status}</div>
+    <div className="min-w-3 min-h-1" />
+    <Icon className="success min-w-4 min-h-4" type="check-bold" />
+  </div>
+);
+
 const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
   ({ appState }) => {
     const count = appState.accountMenu.structuredNotesAndTagsCount;
@@ -26,9 +38,6 @@ const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
     const archived = formatCount(count.archived, 'archived notes');
     const deleted = formatCount(count.deleted, 'trashed notes');
 
-    const checkIcon = (
-      <Icon className="success min-w-4 min-h-4" type="check-bold" />
-    );
     const noteIcon = <Icon type="rich-text" className="min-w-5 min-h-5" />;
     const tagIcon = <Icon type="hashtag" className="min-w-5 min-h-5" />;
     const archiveIcon = <Icon type="archive" className="min-w-5 min-h-5" />;
@@ -36,34 +45,14 @@ const EncryptionEnabled: FunctionComponent<{ appState: AppState }> = observer(
     return (
       <>
         <div className="flex flex-row pb-1 pt-1.5">
-          <DecoratedInput
-            disabled={true}
-            text={notes}
-            right={[checkIcon]}
-            left={[noteIcon]}
-          />
+          <EncryptionStatusItem status={notes} icon={[noteIcon]} />
           <div className="min-w-3" />
-          <DecoratedInput
-            disabled={true}
-            text={tags}
-            right={[checkIcon]}
-            left={[tagIcon]}
-          />
+          <EncryptionStatusItem status={tags} icon={[tagIcon]} />
         </div>
         <div className="flex flex-row">
-          <DecoratedInput
-            disabled={true}
-            text={archived}
-            right={[checkIcon]}
-            left={[archiveIcon]}
-          />
+          <EncryptionStatusItem status={archived} icon={[archiveIcon]} />
           <div className="min-w-3" />
-          <DecoratedInput
-            disabled={true}
-            text={deleted}
-            right={[checkIcon]}
-            left={[trashIcon]}
-          />
+          <EncryptionStatusItem status={deleted} icon={[trashIcon]} />
         </div>
       </>
     );