Css tweaks (#35)

aws-samples · Jun 6, 2023 · 2143939 · 2143939
1 parent 26ea815
commit 2143939
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/client/passwordless.css b/client/passwordless.css
@@ -5,9 +5,11 @@
   font-stretch: 100%;
   --passwordless-primary: #0972d3;
   --passwordless-primary-hover: #042b4f;
-  --passwordless-secondary: #ffffff;
+  --passwordless-secondary: white;
   --passwordless-secondary-hover: #eff6fc;
-  --passwordless-secondary-text: #000000;
+  --passwordless-primary-text: black;
+  --passwordless-secondary-text: black;
+  --passwordless-error-text: red;
   --passwordless-soft-shadow: #efefef;
   --passwordless-disabled: #e9ebed;
   --passwordless-disabled-hover: #9aa7b5;
@@ -97,6 +99,7 @@
 }
 
 .passwordless-main-container {
+  color: var(--passwordless-primary-text);
   background-color: var(--passwordless-soft-shadow);
   display: flex;
   flex-direction: column;
@@ -264,6 +267,7 @@
   animation: 1s slideInFromRight 1s ease-out;
   animation-fill-mode: both;
   background-color: var(--passwordless-secondary);
+  color: var(--passwordless-primary-text);
 }
 
 .passwordless-fido-recommendation-text {
@@ -293,6 +297,9 @@
   background-color: var(--passwordless-secondary);
   overflow: hidden;
   width: min(50rem, 100% - 2rem);
+  color: var(--passwordless-primary-text);
+  background-color: var(--passwordless-secondary);
+  text-align: start;
 }
 
 .passwordless-table table {
@@ -536,3 +543,8 @@
 .passwordless-username {
   font-weight: 700;
 }
+
+.passwordless-error {
+  color: var(--passwordless-error-text);
+  margin-top: 1rem;
+}
diff --git a/client/react/components.tsx b/client/react/components.tsx
@@ -432,7 +432,9 @@ export const Passwordless = ({
             <div>Completing your sign-in...</div>
           </>
         )}
-        {lastError && <div>{lastError.message}</div>}
+        {lastError && (
+          <div className="passwordless-error">{lastError.message}</div>
+        )}
       </div>
     </FlexContainer>
   );