feat(web): tailwind css (#1147)

packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx

@@ -186,7 +186,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
         aria-label="Challenge modal"
         className={`challenge-modal flex flex-col items-center bg-default p-8 rounded relative ${
           challenge.reason !== ChallengeReason.ApplicationUnlock
-            ? 'shadow-overlay-light border-1 border-solid border-main'
+            ? 'shadow-overlay-light border border-solid border-border'
             : 'focus:shadow-none'
         }`}
       >
@@ -196,7 +196,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
             aria-label="Close modal"
             className="flex p-1 bg-transparent border-0 cursor-pointer absolute top-4 right-4"
           >
-            <Icon type="close" className="color-neutral" />
+            <Icon type="close" className="text-neutral" />
           </button>
         )}
         <ProtectedIllustration className="w-30 h-30 mb-4" />
@@ -224,7 +224,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
             />
           ))}
         </form>
-        <Button variant="primary" disabled={isProcessing} className="min-w-76 mt-1 mb-3.5" onClick={submit}>
+        <Button primary disabled={isProcessing} className="min-w-76 mt-1 mb-3.5" onClick={submit}>
           {isProcessing ? 'Generating Keys...' : 'Submit'}
         </Button>
         {shouldShowForgotPasscode && (
@@ -250,7 +250,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
                 })
             }}
           >
-            <Icon type="help" className="mr-2 color-neutral" />
+            <Icon type="help" className="mr-2 text-neutral" />
             Forgot passcode?
           </Button>
         )}

packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx

@@ -38,8 +38,8 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index,
               return (
                 <label
                   key={option.label}
-                  className={`cursor-pointer px-2 py-1.5 rounded ${
-                    selected ? 'bg-default color-foreground font-semibold' : 'color-passive-0 hover:bg-passive-3'
+                  className={`cursor-pointer px-2 py-1.5 rounded focus-within:ring-2 focus-within:ring-info ${
+                    selected ? 'bg-default text-foreground font-semibold' : 'text-passive-0 hover:bg-passive-3'
                   }`}
                 >
                   <input
@@ -76,7 +76,7 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index,
           onChange={(value) => onValueChange(value, prompt)}
         />
       )}
-      {isInvalid && <div className="text-sm color-danger mt-2">Invalid authentication, please try again.</div>}
+      {isInvalid && <div className="text-sm text-danger mt-2">Invalid authentication, please try again.</div>}
     </div>
   )
 }

packages/web/src/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx

@@ -48,11 +48,15 @@ const LockscreenWorkspaceSwitcher: FunctionComponent<Props> = ({ mainApplication
   return (
     <div ref={containerRef}>
       <Button ref={buttonRef} onClick={toggleMenu} className="flex items-center justify-center min-w-76 mt-2">
-        <Icon type="user-switch" className="color-neutral mr-2" />
+        <Icon type="user-switch" className="text-neutral mr-2" />
         Switch workspace
       </Button>
       {isOpen && (
-        <div ref={menuRef} className="sn-dropdown max-h-120 min-w-68 py-2 fixed overflow-y-auto" style={menuStyle}>
+        <div
+          ref={menuRef}
+          className="bg-default rounded-md shadow-main max-h-120 min-w-68 py-2 fixed overflow-y-auto"
+          style={menuStyle}
+        >
           <WorkspaceSwitcherMenu
             mainApplicationGroup={mainApplicationGroup}
             viewControllerManager={viewControllerManager}