feat: added colors to home and movies

frontend/src/App.tsx

@@ -11,7 +11,9 @@ import { MoviePage } from "./components/MoviePage";
 import { DirectorPage } from "./components/DirectorPage";
 import { BrowseDirectors } from "./components/BrowseDirectors";
 
-export const mainColor = "#bae7ff"
+export const mainColor = "#69c0ff"
+export const middleColor = "#bae7ff"
+export const sideColor = "#e6f7ff"
 
 function App() {
   return (

frontend/src/components/BrowseMovies.tsx

@@ -8,6 +8,7 @@ import {
 import Meta from "antd/lib/card/Meta";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import { mainColor, middleColor, sideColor } from "../App";
 import axiosConfig from "../axios-config";
 import { CategoryDTO } from "../dto";
 import { ErrorPage } from "./ErrorPage";
@@ -39,7 +40,7 @@ export const BrowseMovies = () => {
   return (
     <div className="browse-container">
       <Space direction="vertical" style={{ padding: "3rem", display: "flex"}} >
-        <Collapse >
+        <Collapse style={{background: sideColor}}>
           {categories.map((category) => {
             return (
               <Panel header={category.name} key={category.id}>
@@ -74,7 +75,7 @@ export const BrowseMovies = () => {
                             cover={
                               <Image
                                 width={"16rem"}
-                                style={{ objectFit: "cover" }}
+                                style={{ objectFit: "cover"}}
                                 src={movie.picture}
                               ></Image>
                             }

frontend/src/components/PreviewBox.tsx

 import { Card, Col, Row } from "antd";
 import Meta from "antd/lib/card/Meta";
 import { Link } from "react-router-dom";
-import { mainColor } from "../App";
+import { mainColor, middleColor, sideColor } from "../App";
 import { MovieDTO } from "../dto";
 
 interface IPreviewBoxProps {
@@ -13,7 +13,7 @@ export const PreviewBox: React.FC<IPreviewBoxProps> = ({ title, movies }) => {
   
   
   return (
-    <Card title={title}  style={{ borderWidth: 4, borderColor:mainColor}}>
+    <Card title={title}  style={{ borderWidth: 4, borderColor:mainColor, background: sideColor}}>
       <Row justify="space-evenly" align="bottom" gutter={50}>
         {movies.map((movie) => {
           return (
@@ -24,7 +24,7 @@ export const PreviewBox: React.FC<IPreviewBoxProps> = ({ title, movies }) => {
                   style={{
                     width: "240px",
                     borderWidth: "2px",
-                    borderColor: mainColor
+                    borderColor: middleColor
                   }}
                   cover={<img alt={movie.name} src={movie.picture} />}
                 >