fix: use theme-modifiable colors (#658)

app/assets/javascripts/preferences/panes/security-segments/Encryption.tsx

@@ -15,7 +15,7 @@ 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-5 min-h-5" type="check-bold" />;
+  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" />;

app/assets/javascripts/preferences/panes/two-factor-auth/AuthAppInfoPopup.tsx

@@ -16,9 +16,8 @@ const DisclosureIconButton: FunctionComponent<{
   <DisclosureButton
     onMouseEnter={onMouseEnter}
     onMouseLeave={onMouseLeave}
-    className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${
-      className ?? ''
-    }`}
+    className={`no-border cursor-pointer bg-transparent hover:brightness-130 p-0 ${className ?? ''
+      }`}
   >
     <Icon type={icon} />
   </DisclosureButton>
@@ -58,7 +57,7 @@ export const AuthAppInfoTooltip: FunctionComponent = () => {
         />
         <DisclosurePanel>
           <div
-            className={`bg-black color-white text-center rounded shadow-overlay 
+            className={`bg-inverted-default color-inverted-default text-center rounded shadow-overlay 
 py-1.5 px-2 absolute w-103 -top-10 -left-51`}
           >
             Some apps, like Google Authenticator, do not back up and restore

app/assets/javascripts/preferences/panes/two-factor-auth/Bullet.tsx

@@ -3,5 +3,5 @@ import { FunctionComponent } from 'preact';
 export const Bullet: FunctionComponent<{ className?: string }> = ({
   className = '',
 }) => (
-  <div className={`min-w-1 min-h-1 rounded-full bg-black ${className} mr-2`} />
+  <div className={`min-w-1 min-h-1 rounded-full bg-inverted-default ${className} mr-2`} />
 );