edits

calblueprint · Nov 4, 2024 · 26cd8df · 26cd8df
1 parent 691f86e
commit 26cd8df
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 25 deletions.
diff --git a/app/discover/[event_id]/page.tsx b/app/discover/[event_id]/page.tsx
@@ -6,6 +6,7 @@ import { fetchEventById } from '@/api/supabase/queries/events';
 import { fetchFacilityById } from '@/api/supabase/queries/facilities';
 import Back from '@/public/images/back.svg';
 import LocationPin from '@/public/images/location_pin.svg';
+import COLORS from '@/styles/colors';
 import { SMALL } from '@/styles/text';
 import { Event, Facilities } from '@/types/schema';
 import {
@@ -31,16 +32,6 @@ import {
   Title,
 } from './styles';
 
-function Tags(tags: (string | undefined)[]) {
-  return (
-    <TagDiv>
-      {tags.map((tag, index) => {
-        return tag && <IndividualTag key={index}>{tag}</IndividualTag>;
-      })}
-    </TagDiv>
-  );
-}
-
 function InterestBlockGen(title: string, about: string, icon: string) {
   return (
     <InterestBlock>
@@ -91,18 +82,25 @@ export default function EventPage({
           <Image src={LocationPin} alt="Location"></Image> 1411 E 31st St,
           Oakland, CA{' '}
         </Location>
-        {event
-          ? event.needs_host
-            ? Tags(['Host Needed', event.performance_type, event.genre])
-            : Tags([event.performance_type, event.genre])
-          : ''}
+        {event && (
+          <TagDiv>
+            {event?.needs_host && (
+              <IndividualTag $bgColor={COLORS.rose6}>Host Needed</IndividualTag>
+            )}
+            <IndividualTag $bgColor={COLORS.bread6}>
+              {event?.performance_type}
+            </IndividualTag>
+            <IndividualTag $bgColor={COLORS.lilac}>
+              {event?.genre}
+            </IndividualTag>
+          </TagDiv>
+        )}
         <About> About </About>
         <AboutText>
-          {' '}
           Lorem ipsum dolor sit amet consectetur. Arcu neque neque diam tortor
           amet. Eget quam sit eu nisl fermentum ac ipsum morbi. Gravida
           convallis molestie purus eros magna tempus fermentum. Habitant
-          sollicitudin fames mi parturient faucibus odio non habitant diam.{' '}
+          sollicitudin fames mi parturient faucibus odio non habitant diam.
         </AboutText>
         <FacilityName> {facility?.name} </FacilityName>
         <Bullet>Prefer Orchestra</Bullet>
@@ -118,12 +116,12 @@ export default function EventPage({
         {InterestBlockGen(
           'To Perform',
           'Be the star of the show!',
-          '/images/help.svg',
+          '/images/star.svg',
         )}
         {InterestBlockGen(
           'To Host',
           'Help setup the show!',
-          '/images/star.svg',
+          '/images/help.svg',
         )}
         <SignUp> Sign up</SignUp>
       </Body>

diff --git a/app/discover/[event_id]/styles.ts b/app/discover/[event_id]/styles.ts
@@ -2,8 +2,13 @@
 
 import NextImage from 'next/image';
 import styled from 'styled-components';
+import COLORS from '@/styles/colors';
 import { H3, H5, P, SMALL } from '@/styles/text';
 
+interface TagProps {
+  $bgColor?: string;
+}
+
 export const Container = styled.div`
   margin-left: 1rem;
   margin-right: 1rem;
@@ -38,12 +43,12 @@ export const Time = styled(P)`
 `;
 
 export const Location = styled(SMALL)`
-  color: #6d6d6d;
+  color: ${COLORS.gray10};
   margin-top: 0.375rem;
 `;
 
-export const IndividualTag = styled.span`
-  background-color: #6d6d6d;
+export const IndividualTag = styled.span<TagProps>`
+  background-color: ${({ $bgColor }) => $bgColor || 'gray'};
   justify-content: center;
   align-items: center;
   border-radius: 0.5rem;
@@ -91,9 +96,8 @@ export const ShowInterest = styled(H5)`
 
 export const InterestBlock = styled.div`
   padding: 0.75rem 1rem;
-  width: 20rem;
   height: 4.5rem;
-  border: 1px solid var(--gray-6, #c3c3c3);
+  border: 1px solid ${COLORS.gray6};
   border-radius: 0.5rem;
   display: flex;
   flex-direction: row;
@@ -104,7 +108,7 @@ export const InterestBlock = styled.div`
 
 export const Select = styled.div`
   border-radius: 4px;
-  border: 2px solid var(--rose-10, #91000f);
+  border: 2px solid ${COLORS.rose10};
   width: 0.875rem;
   height: 0.875rem;
   line-height: 4.5rem;

diff --git a/styles/colors.ts b/styles/colors.ts
@@ -39,6 +39,7 @@ const COLORS = {
   gray12: '#202020',
 
   pomegranate: '#342A2F',
+  lilac: '#D0D4EE',
 };
 
 export default COLORS;