42 Sign in help (#54)

* icon color * sign in help popover * pr fixes
leanstacks · Aug 16, 2024 · 234ea28 · 234ea28
1 parent f222bee
commit 234ea28
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 16 deletions.
diff --git a/src/common/components/Card/MessageCard.scss b/src/common/components/Card/MessageCard.scss
@@ -1,4 +1,6 @@
 .card-message {
+  margin: 0;
+
   .title-block {
     display: flex;
     flex-direction: row;

diff --git a/src/common/components/Icon/Icon.tsx b/src/common/components/Icon/Icon.tsx
@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { IonText } from '@ionic/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import {
@@ -28,7 +29,8 @@ import { BaseComponentProps } from '../types';
  */
 export interface IconProps
   extends BaseComponentProps,
-    Omit<ComponentPropsWithoutRef<typeof FontAwesomeIcon>, 'icon'> {
+    Omit<ComponentPropsWithoutRef<typeof FontAwesomeIcon>, 'color' | 'icon'>,
+    Pick<ComponentPropsWithoutRef<typeof IonText>, 'color'> {
   icon: IconName;
 }
 
@@ -79,15 +81,23 @@ const icons: Record<IconName, IconProp> = {
  * @returns {JSX.Element} JSX
  * @see {@link FontAwesomeIcon}
  */
-const Icon = ({ className, icon, testid = 'icon', ...iconProps }: IconProps): JSX.Element => {
+const Icon = ({
+  className,
+  color,
+  icon,
+  testid = 'icon',
+  ...iconProps
+}: IconProps): JSX.Element => {
   const faIcon = icons[icon];
   return (
-    <FontAwesomeIcon
-      className={classNames('icon', className)}
-      icon={faIcon}
-      {...iconProps}
-      data-testid={testid}
-    />
+    <IonText color={color} data-testid={testid}>
+      <FontAwesomeIcon
+        className={classNames('icon', className)}
+        icon={faIcon}
+        {...iconProps}
+        data-testid={`${testid}-icon`}
+      />
+    </IonText>
   );
 };
 

diff --git a/src/pages/Auth/SignIn/components/SignInForm.scss b/src/pages/Auth/SignIn/components/SignInForm.scss
@@ -1,8 +1,10 @@
 .form-signin {
-  .heading {
+  ion-row.heading {
     font-size: 1.25rem;
     font-weight: 700;
 
+    gap: 0.75rem;
+
     padding-bottom: 0.25rem;
     margin-bottom: 0.25rem;
 
@@ -15,19 +17,25 @@
     margin-bottom: 0.5rem;
   }
 
-  ion-button {
+  ion-button.button-submit {
     margin-top: 2rem;
   }
 
   .row-message {
     margin: 1rem 0;
 
     &.row-card {
-      @media (min-width: 576px) {
-        .wrapper {
-          width: 80% !important;
-        }
+      .wrapper {
+        width: 100% !important;
       }
     }
   }
 }
+
+.form-signin-popover {
+  .inline-code {
+    font-family: monospace;
+    font-size: 1rem;
+    color: var(--ion-color-medium);
+  }
+}
diff --git a/src/pages/Auth/SignIn/components/SignInForm.tsx b/src/pages/Auth/SignIn/components/SignInForm.tsx
@@ -1,4 +1,4 @@
-import { IonButton, useIonRouter } from '@ionic/react';
+import { IonButton, IonContent, IonPopover, IonRow, useIonRouter } from '@ionic/react';
 import { useState } from 'react';
 import classNames from 'classnames';
 import { Form, Formik } from 'formik';
@@ -11,6 +11,7 @@ import { useProgress } from 'common/hooks/useProgress';
 import Input from 'common/components/Input/Input';
 import CardRow from 'common/components/Card/CardRow';
 import ErrorCard from 'common/components/Card/ErrorCard';
+import Icon, { IconName } from 'common/components/Icon/Icon';
 
 /**
  * Properties for the `SignInForm` component.
@@ -77,7 +78,11 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
       >
         {({ dirty, isSubmitting }) => (
           <Form data-testid={`${testid}-form`}>
-            <div className="heading">Sign In</div>
+            <IonRow className="heading ion-text-uppercase">
+              <div>Sign In</div>
+              <Icon id="signinInfo" icon={IconName.CircleInfo} color="secondary" />
+            </IonRow>
+
             <Input
               name="username"
               label="Username"
@@ -103,12 +108,31 @@ const SignInForm = ({ className, testid = 'form-signin' }: SignInFormProps): JSX
             <IonButton
               type="submit"
               color="primary"
+              className="button-submit"
               expand="block"
               disabled={isSubmitting || !dirty}
               data-testid={`${testid}-button-submit`}
             >
               Sign In
             </IonButton>
+
+            <IonPopover trigger="signinInfo" triggerAction="hover" className="form-signin-popover">
+              <IonContent class="ion-padding">
+                <p>
+                  This example application uses{' '}
+                  <a
+                    href="https://jsonplaceholder.typicode.com/users"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    JSONPlaceholder data
+                  </a>
+                  . Try a username like <span className="inline-code">Bret</span> or{' '}
+                  <span className="inline-code">Samantha</span>.
+                </p>
+                <p>You may use any value as the password.</p>
+              </IonContent>
+            </IonPopover>
           </Form>
         )}
       </Formik>