Update the color pallet of the app

Author: peeweetje

netflix-create-react-vite-app/src/components/card/card.styles.tsx

@@ -42,11 +42,12 @@ export const CardBackContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   height: 350px;
   width: 250px;
   overflow: visible;
-  background: ${(props) => props.theme.colors.grey};
+  background: ${(props) => props.theme.colors.lightPurple};
+  color: ${(props) => props.theme.colors.white};
   border-radius: ${(props) => props.theme.borderRadius[3]};
 `;
 
@@ -101,7 +102,6 @@ export const MotionCardBack = styled.div`
   backface-visibility: hidden;
   transform: rotateY(180deg);
   z-index: 1;
-  background: ${({ theme }) => theme.colors.black};
   border-radius: ${(props) => props.theme.borderRadius[3]};
 `;
 
@@ -112,7 +112,7 @@ export const BackCardButton = styled.button<{ isAdded: boolean }>`
   margin-right: auto;
   margin-bottom: ${(props) => props.theme.space[2]};
   background: ${({ isAdded, theme }) =>
-    isAdded ? theme.colors.black : theme.colors.blue};
+    isAdded ? theme.colors.black : theme.colors.purple};
   color: ${(props) => props.theme.colors.white};
   border: none;
   border-radius: 4px;

netflix-create-react-vite-app/src/components/details/details-styles.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const GoBackButton = styled.button`
-  background: ${(props) => props.theme.colors.blue};
+  background: ${(props) => props.theme.colors.purple};
   color: ${(props) => props.theme.colors.white};
   border: none;
   border-radius: ${(props) => props.theme.borderRadius[1]};
@@ -11,7 +11,7 @@ export const GoBackButton = styled.button`
   transition: background 0.2s;
   margin-bottom: ${(props) => props.theme.space[4]};
   &:hover {
-    background: ${(props) => props.theme.colors.white};
+    background: ${(props) => props.theme.colors.lightPurple};
     color: ${(props) => props.theme.colors.black};
   }
 `;
@@ -54,13 +54,14 @@ export const InfoColumn = styled.div`
   min-width: 0;
   line-height:${({ theme }) => theme.lineHeight[3]};
   padding: ${({ theme }) => theme.space[3]};
-  border: 1px solid ${({ theme }) => theme.colors.grey[2]};
+  
  
 `;
 
 export const InfoText = styled.p`
   margin:${({ theme }) => theme.space[1]} ;
   font-size: ${({ theme }) => theme.fontSize[3]};
+  
 `;
 
 export const InfoLabel = styled.span`
@@ -124,6 +125,7 @@ export const Title = styled.h2`
   word-break: break-word;
   text-align: center;
   margin: 8px auto;
+  
 `;
 
 export const CastCard = styled.div`
@@ -132,6 +134,7 @@ export const CastCard = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  
 `;
 
 export const CastImage = styled.img`
@@ -148,10 +151,11 @@ export const CastImage = styled.img`
 export const CastName = styled.div`
   font-weight: bold;
   margin-top: ${({ theme }) => theme.space[2]};
+  
 `;
 
 export const CastCharacter = styled.div`
-  font-size: 12px;
+  font-size: ${({ theme }) => theme.fontSize[2]};
   color: ${({ theme }) => theme.colors.white};
 `;
 
@@ -164,7 +168,7 @@ export const CastImageFallback = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${({ theme }) => theme.colors.blue};
+  color: ${({ theme }) => theme.colors.purple};
   font-size: 14px;
 `;
 

netflix-create-react-vite-app/src/components/hero-banner/hero-banner.styles.tsx

@@ -54,7 +54,7 @@ export const BannerButtons = styled.div`
 `;
 
 export const BannerButton = styled.button`
-  background: ${(props) => props.theme.colors.black};
+  background: ${(props) => props.theme.colors.purple};
   color: ${(props) => props.theme.colors.white};
   border: none;
   padding: 0.7rem 2rem;
@@ -64,7 +64,7 @@ export const BannerButton = styled.button`
   font-weight: 600;
   transition: background 0.2s;
   &:hover {
-    background: ${(props) => props.theme.colors.blue};
-    color: ${(props) => props.theme.colors.white};
+    background: ${(props) => props.theme.colors.lightPurple};
+    color: ${(props) => props.theme.colors.black};
   }
 `;

netflix-create-react-vite-app/src/components/movie-list/movie.styles.tsx

@@ -24,7 +24,7 @@ export const RowContainer = styled.section`
 `;
 
 export const RowTitle = styled.h2`
-  color: ${(props) => props.theme.colors.blue};
+  color: ${(props) => props.theme.colors.lightPurple};
   font-size: ${(props) => props.theme.fontSize[5]};
   margin-left: ${(props) => props.theme.space[4]};
   margin-bottom: ${(props) => props.theme.space[4]};
@@ -50,7 +50,7 @@ export const ArrowButton = styled.button`
   z-index: 2;
   background: rgba(0, 0, 0, 0.6);
   border: none;
-  color: ${(props) => props.theme.colors.white};
+  color: ${(props) => props.theme.colors.lightPurple};
   font-size: ${(props) => props.theme.fontSize[6]};
   width: 48px;
   height: 64px;
@@ -66,8 +66,8 @@ export const ArrowButton = styled.button`
     right: -1.5rem;
   }
   &:hover {
-    backgroundcolor: ${(props) => props.theme.colors.blue};
-    color:;
+    backgroundcolor: ${(props) => props.theme.colors.purple};
+   
   }
   &.active {
     opacity: 1;

netflix-create-react-vite-app/src/components/navbarmenu/navbarheader/navbar-styles.tsx

@@ -1,3 +1,4 @@
+import { BackgroundColor } from './../../../../../netflix-create-next-app/styled-system/types/csstype.d';
 import styled from 'styled-components';
 
 export const NavbarMenu = styled.nav`
@@ -12,6 +13,7 @@ export const NavbarMenu = styled.nav`
 `;
 
 export const NavList = styled.ul<{ $centered?: boolean }>`
+  
   display: flex;
   justify-content: center;
   flex-flow: wrap;
@@ -26,6 +28,7 @@ export const NavList = styled.ul<{ $centered?: boolean }>`
     padding: ${(props) => props.theme.space[8]};
     white-space: nowrap;
     font-size: ${(props) => props.theme.fontSize[4]};
+    color: ${(props) => props.theme.colors.lightPurple};
   }
 
   li:hover {
@@ -51,6 +54,8 @@ export const BrandContainer = styled.div<{ $centered?: boolean }>`
   font-size: ${(props) => props.theme.fontSize[5]};
   padding-left: ${(props) => props.theme.space[8]};
   list-style: none;
+  color: ${(props) => props.theme.colors.lightPurple};
+
 
   @media (max-width: 768px) {
     justify-content: center;

netflix-create-react-vite-app/src/components/navbarmenu/navbarheader/navbarHeader.tsx

@@ -16,12 +16,12 @@ export const NavbarHeader = ({ onChange, value }: navbarHeaderProps) => {
 
   return (
     <NavbarMenu aria-label={t('site-navigation')} role='navigation'>
-      <BrandContainer $centered={location.pathname === '/my-list'}>
+      <BrandContainer>
         <NavItems aria-label={t('binge-watch')} to='/'>
           {t('binge-watch')}
         </NavItems>
       </BrandContainer>
-      <NavList $centered={location.pathname === '/my-list'}>
+      <NavList>
         <NavItems aria-label={t('home-page')} to='/'>
           {t('home-page')}
         </NavItems>

netflix-create-react-vite-app/src/components/navbarmenu/navbarheader/search-bar/searchbar.styles.tsx

@@ -21,7 +21,7 @@ export const SearchContainer = styled.div`
 
 export const NavbarInput = styled.input`
   background-color: transparent;
-  border: 1px solid ${(props) => props.theme.colors.blue};
+  border: 1px solid ${(props) => props.theme.colors.lightPurple};
   border-radius: ${(props) => props.theme.borderRadius[2]};
   color: ${(props) => props.theme.colors.white};
   padding: ${(props) => props.theme.space[4]} ${(props) => props.theme.space[4]} ${(props) => props.theme.space[4]} 40px;
@@ -50,6 +50,6 @@ export const NavbarInput = styled.input`
 export const SearchIconWrapper = styled.div`
   position: absolute;
   left: 10px;
-  color: ${(props) => props.theme.colors.white};
+  color: ${(props) => props.theme.colors.lightPurple};
   pointer-events: none;
 `;

netflix-create-react-vite-app/src/pages/my-list/myList.styles.tsx

@@ -45,7 +45,7 @@ export const RemovalNotice = styled.div`
 
 export const RemoveButton = styled.button`
   width: 100%;
-  background: ${(props) => props.theme.colors.blue};
+  background: ${(props) => props.theme.colors.purple};
   color: ${(props) => props.theme.colors.white};
   border: none;
   border-radius: ${(props) => props.theme.borderRadius[1]};
@@ -54,7 +54,7 @@ export const RemoveButton = styled.button`
   cursor: pointer;
   transition: background 0.2s;
   &:hover {
-    background: ${(props) => props.theme.colors.white};
+    background: ${(props) => props.theme.colors.lightPurple};
     color: ${(props) => props.theme.colors.black};
   }
 `;

netflix-create-react-vite-app/src/pages/my-list/myList.tsx

@@ -66,7 +66,7 @@ export const MyList = () => {
           )
         ) : (
           <>
-            <h1>My List</h1>
+          
             {removalNotice && <RemovalNotice>{removalNotice}</RemovalNotice>}
             {failedItems.length > 0 && (
               <div style={{ color: 'red' }}>

netflix-create-react-vite-app/src/styles/global.tsx

@@ -7,11 +7,11 @@ body {
     padding: ${(props) => props.theme.space[0]};
     font-family:${(props) => props.theme.fontFamily};
     background-color:${(props) => props.theme.colors.black};
-    color:${(props) => props.theme.colors.blue}
+    color:${(props) => props.theme.colors.purple}
 }
 a {
     text-decoration: none;
-    color: ${(props) => props.theme.colors.blue};
+    color: ${(props) => props.theme.colors.purple};
 }
 ul {
     list-style: none;