fix+add new icons, better padding, fancier blurs

Author: amcolash

index.css

@@ -55,3 +55,7 @@ button:focus {
 input {
   @apply appearance-none border border-slate-700 rounded w-full py-2 px-3 bg-slate-800 text-gray-200 leading-tight;
 }
+
+.text-shadow {
+  text-shadow: 0 0 6px #1e293b;
+}

src/components/AppIcon.tsx

@@ -3,15 +3,18 @@ import { FaLock } from 'react-icons/fa';
 import * as icons from 'simple-icons';
 import { twJoin } from 'tailwind-merge';
 
+import accrue from '../images/accrue.svg?raw';
+import amazon from '../images/amazon.svg?raw';
 import bastillion from '../images/bastillion.png';
 import betterment from '../images/betterment.png';
 import carta from '../images/carta.png';
 import guideline from '../images/guideline.png';
 import idme from '../images/id.me.png';
 import justworks from '../images/justworks.jpg';
-import microsoft from '../images/microsoft.png';
+import microsoft from '../images/microsoft.svg?raw';
+import nintendo from '../images/nintendo.svg?raw';
 import sequoia from '../images/sequoia.png';
-import twitter from '../images/twitter.png';
+import twitter from '../images/twitter.svg?raw';
 import uwcu from '../images/uwcu.png';
 
 enum IconType {
@@ -24,12 +27,12 @@ interface Icon {
   hex: string;
   title: string;
   type: IconType.Icon;
-  padding?: boolean;
+  padding?: boolean | string;
 }
 
 interface Image {
   url: string;
-  padding?: boolean;
+  padding?: boolean | string;
   type: IconType.Image;
 }
 
@@ -51,6 +54,10 @@ function getIcon(name?: string): Icon | Image | undefined {
 
   // handle one-off cases
   switch (name.toLowerCase()) {
+    case 'accrue':
+      return { svg: accrue, title: 'Accrue', hex: 'ffffff', padding: 'p-2', type: IconType.Icon };
+    case 'amazon':
+      return { svg: amazon, title: 'Amazon', hex: 'ff9900', padding: true, type: IconType.Icon };
     case 'bastillion':
       return { url: bastillion, padding: true, type: IconType.Image };
     case 'betterment':
@@ -66,17 +73,19 @@ function getIcon(name?: string): Icon | Image | undefined {
     case 'justworks':
       return { url: justworks, type: IconType.Image };
     case 'microsoft':
-      return { url: microsoft, padding: true, type: IconType.Image };
+      return { svg: microsoft, title: 'Microsoft', hex: '727272', padding: 'p-1.5', type: IconType.Icon };
+    case 'nintendo':
+      return { svg: nintendo, title: 'Nintendo', hex: 'dd2020', padding: 'p-1', type: IconType.Icon };
     case 'nas':
     case 'synology':
-      return { ...icons.siSynology, type: IconType.Icon };
+      return { ...icons.siSynology, padding: 'p-1.5', type: IconType.Icon };
     case 'uw credit union':
     case 'uwcu':
       return { url: uwcu, padding: true, type: IconType.Image };
     case 'sequoia':
       return { url: sequoia, padding: true, type: IconType.Image };
     case 'twitter':
-      return { url: twitter, padding: true, type: IconType.Image };
+      return { svg: twitter, title: 'Twitter', hex: '00aced', padding: true, type: IconType.Icon };
     default:
       break;
   }
@@ -95,9 +104,6 @@ function getColors(i?: Icon | Image): { background: string; fill?: string } {
 
   // handle one-off cases
   switch (icon.title.toLowerCase()) {
-    case 'amazon':
-      background = darkColor;
-      break;
     case 'epic games':
       fill = 'white';
       break;
@@ -122,20 +128,24 @@ export function AppIcon({ name, className }: { name: string; className?: string
     ' ' +
     className;
 
-  if (!icon)
+  if (!icon) {
+    console.warn(`No icon found for ${name}`);
     return (
       <div className={imgClass}>
         <FaLock />
       </div>
     );
+  }
+
+  const padding = typeof icon.padding === 'string' ? icon.padding : undefined;
 
   if (icon.type === IconType.Image)
-    return <img src={icon.url} className={twJoin(imgClass, 'object-cover', icon.padding && 'p-1')} />;
+    return <img src={icon.url} className={twJoin(imgClass, 'object-cover', padding || (icon.padding && 'p-1'))} />;
 
   return (
     <div
       dangerouslySetInnerHTML={{ __html: icon.svg }}
-      className={twJoin(imgClass, icon.padding ? 'p-2.5' : 'p-0.5')}
+      className={twJoin(imgClass, padding || (icon.padding ? 'p-2.5' : 'p-0.5'))}
       style={{ fill: colors.fill }}
     />
   );

src/components/Modal.tsx

@@ -12,7 +12,7 @@ export function Modal({
 }): JSX.Element {
   return (
     <div
-      className="fixed z-30 inset-0 bg-slate-900 bg-opacity-75 flex justify-center items-center"
+      className="fixed z-30 inset-0 bg-slate-900 bg-opacity-75 flex justify-center items-center backdrop-blur-sm"
       onClick={onClose}
       onKeyDown={(e) => {
         if (e.key === 'Escape') {

src/components/Progress.tsx

@@ -30,6 +30,7 @@ export function Progress() {
             textColor: tailwind.theme.colors.primary,
             pathColor: tailwind.theme.colors.primary,
           })}
+          className="text-shadow"
           strokeWidth={10}
         />
       </div>

src/components/TokenList.tsx

@@ -1,6 +1,7 @@
 import { DocumentReference, updateDoc } from 'firebase/firestore';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { FaSearch } from 'react-icons/fa';
+import { twMerge } from 'tailwind-merge';
 import { useTailwindSize } from '~hooks/useTailwindSize';
 
 import { CodeContext } from '../contexts/CodeContext';
@@ -32,6 +33,7 @@ export function TokenList({
   const encryptionToken = useContext(CodeContext) || '';
 
   const [search, setSearch] = useState('');
+  const [searchFocused, setSearchFocused] = useState(false);
   const [keyToEdit, setKeyToEdit] = useState<Key>();
 
   useEffect(() => {
@@ -79,7 +81,8 @@ export function TokenList({
     [encryptionToken, setEditKey, setKeyToEdit]
   );
 
-  const gridClass = 'w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6';
+  const gridClass =
+    'w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6 transition-all';
 
   return (
     <>
@@ -99,13 +102,20 @@ export function TokenList({
                   placeholder="Search tokens"
                   onChange={(e) => setSearch(e.target.value)}
                   autoFocus
+                  onFocus={() => setSearchFocused(true)}
+                  onBlur={() => setSearchFocused(false)}
                 />
                 <FaSearch className="fill-slate-400 absolute left-3 top-[11px] h-4" />
               </div>
             </div>
 
             {userData.recentKeys.length > 0 && search.length === 0 && (
-              <div className="grid gap-4 sm:gap-6 mb-4 sm:mb-6">
+              <div
+                className={twMerge(
+                  'grid gap-4 sm:gap-6 mb-4 sm:mb-6 transition-all',
+                  searchFocused && 'opacity-50 blur-sm'
+                )}
+              >
                 <h2 className="m-0 text-xl leading-none">Recently Used</h2>
                 <div className={gridClass}>
                   {userData.recentKeys.slice(0, size === 'sm' || size === 'lg' ? 3 : 4).map((name: string) => {
@@ -129,7 +139,7 @@ export function TokenList({
               </div>
             )}
 
-            <div className={gridClass}>
+            <div className={twMerge(gridClass, searchFocused && search.length === 0 && 'opacity-50 blur-sm')}>
               {userData.keys
                 .filter(
                   (k) => (search.length === 0 || k.name.toLowerCase().includes(search.toLowerCase())) && !k.archived