feat: role selection component + sign in error messages

app/(auth)/auth-styles.ts

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import NextLink from 'next/link';
 import styled from 'styled-components';
 import COLORS from '@/styles/colors';
 import { Sans } from '@/styles/fonts';
@@ -39,8 +40,9 @@ export const Header = styled(H3)`
 export const Card = styled.div`
   background-color: ${COLORS.bread1};
   padding: 2rem;
-  border-radius: 12px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+  border: 1px solid ${COLORS.gray2};
+  box-shadow: 0px 6px 15px -2px rgba(0, 0, 0, 0.08);
   max-width: 400px;
   width: 100%;
   box-sizing: border-box;
@@ -49,7 +51,7 @@ export const Card = styled.div`
   align-items: center;
 `;
 
-export const Form = styled.div`
+export const Form = styled.form`
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -59,7 +61,7 @@ export const Form = styled.div`
 export const Fields = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1.75rem;
+  gap: 1.5rem;
 `;
 
 export const Label = styled(P)`
@@ -75,6 +77,7 @@ export const Input = styled.input`
   border-radius: 8px;
   width: 100%;
   box-sizing: border-box;
+  margin-bottom: 0.2rem;
 `;
 
 export const Button = styled.button`
@@ -90,13 +93,7 @@ export const Button = styled.button`
   width: 100%;
 `;
 
-export const ForgotPassword = styled(SMALL)`
-  margin-top: 0.25rem;
-  font-weight: 400;
-  text-align: right;
-`;
-
-export const Link = styled.a`
+export const Link = styled(NextLink)`
   color: ${COLORS.lilac9};
   text-decoration: none;
 
@@ -105,18 +102,16 @@ export const Link = styled.a`
   }
 `;
 
-// TODO: Temporarily added to verify that supabase login functionality actually works
-export const LoginMessage = styled(SMALL)<{ $isError: boolean }>`
-  color: ${({ $isError }) => ($isError ? 'red' : 'green')};
+export const ErrorMessage = styled(SMALL)<{ $isError: boolean }>`
+  color: ${COLORS.rose11};
   font-weight: 400;
   text-align: left;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 `;
 
 export const Footer = styled.div`
-  font-family: ${Sans.style.fontFamily};
   text-align: center;
-  margin-top: 1rem;
+  margin-top: 2rem;
   width: 100%;
   padding: 0.5rem;
 `;

app/(auth)/signin/page.tsx

@@ -2,21 +2,22 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import isEmail from 'validator/lib/isEmail';
 import { handleSignIn as signInUser } from '@/api/supabase/queries/auth';
 import BRLogo from '@/public/images/b&r-logo.png';
-import { H5 } from '@/styles/text';
+import COLORS from '@/styles/colors';
+import { H5, SMALL } from '@/styles/text';
 import {
   Button,
   Card,
   Container,
+  ErrorMessage,
   Fields,
   Footer,
-  ForgotPassword,
   Form,
   Input,
   Label,
   Link,
-  LoginMessage,
   Logo,
   TitleUnderline,
 } from '../auth-styles';
@@ -25,36 +26,61 @@ export default function SignIn() {
   const router = useRouter();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [message, setMessage] = useState('');
-  const [isError, setIsError] = useState(false);
+  const [emailError, setEmailError] = useState('');
+  const [passwordError, setPasswordError] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
 
-  const handleSignIn = async () => {
-    setMessage('');
-    setIsError(false);
+  const validEmail = (e: string) => e !== '' && isEmail(e);
 
-    const { success, message } = await signInUser(email, password);
+  const handleSignIn = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setEmailError('');
+    setPasswordError('');
+    setErrorMessage('');
 
-    setMessage(message);
-    setIsError(!success);
+    let hasError = false;
+    if (!email) {
+      setEmailError('Email is required');
+      hasError = true;
+    } else if (!validEmail(email)) {
+      setEmailError('Invalid email');
+      hasError = true;
+    }
 
-    if (success) {
-      router.push('/discover');
+    if (!password) {
+      setPasswordError('Password is required');
+      hasError = true;
     }
+
+    if (hasError) return;
+
+    setIsLoggingIn(true);
+
+    const { success, message } = await signInUser(email, password);
+
+    if (!success) {
+      setErrorMessage(message);
+      setIsLoggingIn(false);
+      return;
+    }
+
+    // Navigate on success
+    setErrorMessage('');
+    router.push('/discover');
+    setIsLoggingIn(false);
   };
 
   return (
     <Container>
       <Logo src={BRLogo} alt="Bread & Roses logo" />
       <Card>
-        <Form>
+        <Form onSubmit={handleSignIn}>
           <H5>Login</H5>
           <TitleUnderline />
 
-          {/* Show error or success message */}
-          {message && (
-            <LoginMessage $isError={isError} role="alert">
-              {message}
-            </LoginMessage>
+          {errorMessage && (
+            <ErrorMessage $isError={true}>{errorMessage}</ErrorMessage>
           )}
 
           <Fields>
@@ -70,6 +96,15 @@ export default function SignIn() {
                 value={email}
                 aria-label="Email"
               />
+              {emailError && (
+                <SMALL
+                  $color={COLORS.rose11}
+                  $fontWeight={100}
+                  $text-align="left"
+                >
+                  {emailError}
+                </SMALL>
+              )}
             </div>
 
             <div>
@@ -84,20 +119,28 @@ export default function SignIn() {
                 value={password}
                 aria-label="Password"
               />
+              {passwordError && (
+                <SMALL
+                  $color={COLORS.rose11}
+                  $font-weight={100}
+                  $text-align="left"
+                >
+                  {password}
+                </SMALL>
+              )}
             </div>
           </Fields>
 
-          {/* Forgot Password Link */}
-          <ForgotPassword>
+          <SMALL $fontWeight={400} $align="right">
             <Link href="/forgotpassword">Forgot Password?</Link>
-          </ForgotPassword>
+          </SMALL>
 
-          {/* Submit Button */}
-          <Button onClick={handleSignIn}>Login</Button>
+          <Button type="submit" disabled={isLoggingIn}>
+            {isLoggingIn ? 'Logging In...' : 'Login'}
+          </Button>
         </Form>
       </Card>
 
-      {/* Footer */}
       <Footer>
         Don’t have an account? <Link href="/signup">Sign up!</Link>
       </Footer>

app/(auth)/signup/page.tsx

@@ -9,13 +9,13 @@ import {
   Button,
   Card,
   Container,
+  ErrorMessage,
   Fields,
   Footer,
   Form,
   Input,
   Label,
   Link,
-  LoginMessage,
   Logo,
   TitleUnderline,
 } from '../auth-styles';
@@ -56,7 +56,7 @@ export default function SignUp() {
         <Form>
           <H5>Sign Up</H5>
           <TitleUnderline width="90px" />
-          {message && <LoginMessage $isError={isError}>{message}</LoginMessage>}
+          {message && <ErrorMessage $isError={isError}>{message}</ErrorMessage>}
 
           <Fields>
             <div>

app/availability/styles.ts → app/availability/calendar/styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import COLORS from '../../styles/colors';
+import COLORS from '@/styles/colors';
 
 export const Container = styled.div`
   width: 500px;

app/availability/general/styles.ts

@@ -10,15 +10,22 @@ export const Page = styled.main<{ $menuExpanded: boolean }>`
   min-height: 100vh;
   justify-content: center;
   overflow: hidden;
-  margin-left: ${({ $menuExpanded }) =>
-    $menuExpanded ? '10%' : '0'}; /* Fixed margin for the expanded menu */
-  transition: margin-left 0.3s ease; /* Smooth transition */
+
+  @media (min-width: 1024px) {
+    margin-left: ${({ $menuExpanded }) =>
+      $menuExpanded ? '10%' : '0'}; /* Fixed margin for the expanded menu */
+    transition: margin-left 0.3s ease; /* Smooth transition */
+  }
 `;
 
 export const AllAvailabilitiesHolder = styled.main`
   display: flex;
   width: 28.75%;
   flex-direction: column;
+
+  @media (max-width: 900px) {
+    width: 80%;
+  }
 `;
 
 export const TitleContainer = styled.main`

app/discover/page.tsx

@@ -7,32 +7,17 @@ import MenuBar from '@/components/MenuBar/MenuBar';
 import { H6, SMALL } from '@/styles/text';
 import { Event } from '@/types/schema';
 import {
-  Container,
   Discover,
+  DiscoverHolder,
   EventListingDiv,
+  Page,
   SearchBar,
   TitleBar,
 } from './styles';
 
-// function MenuBar() {
-//   return (
-//     <svg
-//       width="24"
-//       height="24"
-//       viewBox="0 0 24 24"
-//       fill="none"
-//       xmlns="http://www.w3.org/2000/svg"
-//     >
-//       <path
-//         d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z"
-//         fill="#621D1E"
-//       />
-//     </svg>
-//   );
-// }
-
 export default function ActiveEventsPage() {
   const [events, setEvents] = useState<Event[]>([]);
+  const [menuExpanded, setMenuExpanded] = useState(false); // Track the expanded state of the menu
 
   useEffect(() => {
     const getActiveEvents = async () => {
@@ -44,26 +29,28 @@ export default function ActiveEventsPage() {
 
   return (
     <div>
-      <MenuBar />
-      <Container>
-        <Discover $fontWeight="500"> Discover </Discover>
-        <SearchBar>
-          <SMALL> Search... </SMALL>
-        </SearchBar>
-        <TitleBar>
-          <H6 $fontWeight="500"> Near You </H6>
-          <SMALL $color="purple"> show all </SMALL>
-        </TitleBar>
-        <EventListingDiv>
-          {events.map(event => (
-            <EventListingCard
-              key={event.event_id}
-              id={event.event_id}
-              performance_type={event.performance_type}
-            />
-          ))}
-        </EventListingDiv>
-      </Container>
+      <MenuBar setMenuExpanded={setMenuExpanded} />
+      <Page $menuExpanded={menuExpanded}>
+        <DiscoverHolder>
+          <Discover $fontWeight="500"> Discover </Discover>
+          <SearchBar>
+            <SMALL> Search... </SMALL>
+          </SearchBar>
+          <TitleBar>
+            <H6 $fontWeight="500"> Near You </H6>
+            <SMALL $color="purple"> show all </SMALL>
+          </TitleBar>
+          <EventListingDiv>
+            {events.map(event => (
+              <EventListingCard
+                key={event.event_id}
+                id={event.event_id}
+                performance_type={event.performance_type}
+              />
+            ))}
+          </EventListingDiv>
+        </DiscoverHolder>
+      </Page>
     </div>
   );
 }