eba-diary · Dhreetii · Sep 9, 2023
diff --git a/frontend/app/components/ui/card-deck.jsx b/frontend/app/components/ui/card-deck.jsx
@@ -3,10 +3,14 @@ import { useRouter } from "next/router";
 import CardSlider from "./content-slider"
 
 export default function CardDeck({ data }) {
-    let boxBg = useColorModeValue("white", "white");
-    const paddingBg = useColorModeValue("#C58A22", "white");
 
-    const router = useRouter()
+    const router = useRouter();
+    const cardBgColor = data.fields.cardBgColor;
+    const cardBorderColor = data.fields.cardBorderColor;
+    const cardBoxShadowColor = data.fields.cardBoxShadowColor;
+    const cardTitleFontColor = data.fields.cardTitleFontColor;
+    const bgGradientColor1 = data.fields.bgGradientColor1;
+    const bgGradientColor2 = data.fields.bgGradientColor2;
 
     return (
         <HStack justifyContent='center'>
@@ -15,7 +19,7 @@ export default function CardDeck({ data }) {
                 columnGap='20px'
                 direction='row'
                 width='100%'
-                background='linear-gradient(180deg, rgba(242,242,242,0) 34%, rgba(248,198,108,1) 35%)'
+                background={`linear-gradient(180deg, ${bgGradientColor1} 34%, ${bgGradientColor2} 35%)`}
                 justifyContent='center'
             >
                 <CardSlider gap={20}>
@@ -26,12 +30,12 @@ export default function CardDeck({ data }) {
                                 h='400px'
                                 w='300px'
                                 direction='column'
-                                bg={boxBg}
+                                bg={cardBgColor}
                                 alignItems='center'
                                 justifyContent='flex-start'
                                 border='6px solid'
-                                boxShadow='5px 10px 5px #9c6b19'
-                                borderColor={paddingBg}
+                                boxShadow={`5px 10px 5px ${cardBoxShadowColor}`}
+                                borderColor={cardBorderColor}
                                 borderRadius='5px'
                                 rowGap='20px'
                                 columnGap='20px'
@@ -49,7 +53,7 @@ export default function CardDeck({ data }) {
                                     </Stack>
                                     <Stack padding='5px' justifyContent='space-between' height='100%'>
                                         <Stack>
-                                            <Text fontSize='16px' fontWeight={700} color='#C58A22'>
+                                            <Text fontSize='16px' fontWeight={700} color={cardTitleFontColor}>
                                                 {entries.title}
                                             </Text>
                                             <Text fontSize='14px' noOfLines={3}>

diff --git a/frontend/app/components/ui/carousel.jsx b/frontend/app/components/ui/carousel.jsx
@@ -20,6 +20,11 @@ export default function Carousel({ data }) {
     };
 
     const totalSlides = data.fields.carouselCards.length
+    const bottomBorderColor = data.fields.bottomBorderColor;
+    const selectedCardColor = data.fields.selectedCardColor;
+    const unselectedCardColor = data.fields.unselectedCardColor;
+    const hoverCardColor = data.fields.hoverCardColor;
+
     const handleNextSlide = (index) => {
         setDirection('right');
         if (isNaN(index)) {
@@ -52,7 +57,7 @@ export default function Carousel({ data }) {
     return (
         <Stack width='100%' alignItems='center' position='relative'>
             <HStack
-                borderBottom='15px solid #C58A22'
+                borderBottom={`15px solid ${bottomBorderColor}`}
                 width='100%'
                 alignItems='flex-start'
                 spacing='0px'
@@ -82,14 +87,14 @@ export default function Carousel({ data }) {
                             padding='10px'
                             tabIndex={4}
                             borderBottom='1px'
-                            backgroundColor={currentSlide == index ? '#c58922' : '#f8c66c'}
+                            backgroundColor={currentSlide == index ? selectedCardColor : unselectedCardColor}
                             onClick={() => {
                                 handleNextSlide(index)
                             }}
                             _hover={{
                                 cursor: 'pointer',
                                 transition: '0.3s',
-                                backgroundColor: currentSlide !== index ? '#deab52' : ''
+                                backgroundColor: currentSlide !== index ? hoverCardColor : ''
                             }}
                         >
                             <Text

diff --git a/frontend/app/components/ui/general-information.jsx b/frontend/app/components/ui/general-information.jsx
@@ -6,22 +6,27 @@ import Collapse from "./references/collapse"
 export default function GeneralInformation({ data }) {
     const [widthRef, width] = useComponentWidth()
     const [heightRef, height, test] = useComponentResizeHeight()
+    const titleBorderColor = data.fields.titleBorderColor;
+    const titleShadowColor = data.fields.titleShadowColor;
+    const titleColor = data.fields.titleColor;
+    const directorBottomBorderColor = data.fields.directorBottomBorderColor;
+    const imageShadowColor = data.fields.imageShadowColor;
 
     return (
         <Stack width='100%' alignItems='center' padding='50px 0px' gap='20px'>
             <Stack width='90%' gap='20px'>
                 <Stack
                     width={`${width + 150}px`}
                     height='50px'
-                    border='4px solid #F8C66C'
+                    border={`4px solid ${titleBorderColor}`}
                     alignItems='flex-start'
                 >
                     <Text
                         ref={widthRef}
                         fontSize='64px'
                         fontWeight={800}
-                        color='#C58A22'
-                        textShadow='5px 5px #E3CAA9'
+                        color={titleColor}
+                        textShadow={`5px 5px ${titleShadowColor}`}
                         marginTop='-50px'
                         width='fit-content'
                     >
@@ -34,7 +39,7 @@ export default function GeneralInformation({ data }) {
                         fontWeight={500}
                         padding='10px'
                         width={`${width + 150}px`}
-                        borderBottom='3px solid #C58A22'
+                        borderBottom={`3px solid ${directorBottomBorderColor}`}
                     >
                         {data.fields.director.directorName} <span style={{ color: '#888' }}>&#40;Principle Investigator&#41;</span>
                     </Text>
@@ -65,7 +70,7 @@ export default function GeneralInformation({ data }) {
                             width='300px'
                             objectFit='cover'
                             borderRadius='5px'
-                            shadow='5px 5px 0px 1px #C58A22'
+                            shadow={`5px 5px 0px 1px ${imageShadowColor}`}
                         />
                     </Stack>
                 </HStack>

diff --git a/frontend/app/components/ui/large-search-bar.jsx b/frontend/app/components/ui/large-search-bar.jsx
@@ -19,6 +19,10 @@ export default function LargeSearchBar({ data }) {
         return () => clearTimeout(timer)
     }
 
+    const titleFontColor = data.fields.titleFontColor;
+    const bgColor = data.fields.bgColor;
+    const boxShadowColor = data.fields.boxShadowColor; 
+
     const handleSearch = async (searchTerm) => {
         const { data, error } = await supabase
             .from('Ships')
@@ -40,7 +44,7 @@ export default function LargeSearchBar({ data }) {
                 height={height}
                 justifyContent='flex-start'
             >
-                <Text fontSize='48px' color='#C58A22' textShadow='3px 3px #E3CAA9' fontWeight={700}>
+                <Text fontSize='48px' color={titleFontColor} textShadow='3px 3px #E3CAA9' fontWeight={700}>
                     {data.fields.title.toUpperCase()}
                 </Text>
                 <Text>
@@ -49,11 +53,11 @@ export default function LargeSearchBar({ data }) {
             </Stack>
             <Stack
                 flex={1}
-                bgColor='#C58A22'
+                bgColor={bgColor}
                 width='100%'
                 height='75%'
                 borderRadius='5px'
-                boxShadow='10px 10px #E3CAA9'
+                boxShadow={`10px 10px ${boxShadowColor}`}
                 ref={ref}
             >
                 <Stack height='100%' p='20px'>

diff --git a/frontend/app/lib/getStaticPages/getComponents/getCardDeck.js b/frontend/app/lib/getStaticPages/getComponents/getCardDeck.js
@@ -3,6 +3,12 @@ export function getCardDeck(fields) {
         type: 'card-deck',
         fields: {
             title: fields.title,
+            cardBgColor: fields.cardBgColor,
+            cardBorderColor: fields.cardBorderColor,
+            cardBoxShadowColor: fields.cardBoxShadowColor,
+            cardTitleFontColor: fields.cardTitleFontColor,
+            bgGradientColor1: fields.bgGradientColor1,
+            bgGradientColor2: fields.bgGradientColor2,
             sliderCards: fields.sliderCards.map((entry) => {
                 return {
                     title: entry.fields.title,

diff --git a/frontend/app/lib/getStaticPages/getComponents/getCarousel.js b/frontend/app/lib/getStaticPages/getComponents/getCarousel.js
@@ -2,6 +2,10 @@ export function getCarousel(fields) {
     return {
         type: 'carousel',
         fields: {
+            bottomBorderColor: fields.bottomBorderColor,
+            selectedCardColor: fields.selectedCardColor,
+            unselectedCardColor: fields.unselectedCardColor,
+            hoverCardColor: fields.hoverCardColor,
             title: fields.title,
             carouselCards: fields.carouselCards.map((entry) => {
                 return {

diff --git a/frontend/app/lib/getStaticPages/getComponents/getGeneralInformation.js b/frontend/app/lib/getStaticPages/getComponents/getGeneralInformation.js
@@ -2,6 +2,11 @@ export function getGeneralInformation(fields) {
     return {
         type: 'general-information',
         fields: {
+            titleBorderColor: fields.titleBorderColor,
+            titleShadowColor: fields.titleShadowColor,
+            titleColor: fields.titleColor,
+            directorBottomBorderColor: fields.directorBottomBorderColor,
+            imageShadowColor: fields.imageShadowColor,
             title: fields.title,
             director: {
                 directorName: fields.directorName,

diff --git a/frontend/app/lib/getStaticPages/getComponents/getLargeSearchBar.js b/frontend/app/lib/getStaticPages/getComponents/getLargeSearchBar.js
@@ -3,6 +3,9 @@ export function getLargeSearchBar(fields) {
         type: 'large-search-bar',
         fields: {
             title: fields.title,
+            titleFontColor: fields.titleFontColor,
+            bgColor: fields.bgColor,
+            boxShadowColor: fields.boxShadowColor,
             description: fields.description,
             searchPlaceholder: fields.searchPlaceholder,
             databases: fields.databases.map((entry) => {