added beer bottle shadow

g-marcin · Jun 24, 2023 · 94a3a1d · 94a3a1d
1 parent 3fba236
commit 94a3a1d
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 23 deletions.
diff --git a/src/components/layout/CustomOffcanvas/CustomOffcanvas.tsx b/src/components/layout/CustomOffcanvas/CustomOffcanvas.tsx
@@ -31,7 +31,7 @@ export const CustomOffcanvas: FC<CustomOffcanvasProps> = ({ show, handleShow, ha
               </button>
             ) : (
               <button className={styles.button} onClick={() => setIsDark(isDark)}>
-                <Moon size={36} />
+                <Moon size={36} color='#000000' />
               </button>
             )}
             </div>     

diff --git a/src/components/layout/Header/Header.tsx b/src/components/layout/Header/Header.tsx
@@ -3,11 +3,11 @@ import { Menu } from 'react-feather';
 import { Link } from 'react-router-dom';
 import beerIcon from '../../../assets/beer-icon.svg';
 import { CustomOffcanvas } from '../CustomOffcanvas';
+import { SubHeader } from '../SubHeader';
 import styles from './header.module.css';
 
 export const Header: FC = () => {
   const [show, setShow] = useState(false);
-
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   return (
@@ -21,6 +21,7 @@ export const Header: FC = () => {
           <Menu className={styles.menu} color="#ffffff" />
         </button>
       </header>
+      <SubHeader/>
         <CustomOffcanvas name={'hamburger-menu'} show={show} handleClose={handleClose} handleShow={handleShow} />
     </>
   );

diff --git a/src/index.css b/src/index.css
@@ -51,3 +51,16 @@ button:focus-visible {
 .active > .page-link {
   background: #e6b70e;
 }
+
+.image-shadow-light {
+  width: 215px;
+  height: 28px;
+  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+  opacity: 0.7;
+}
+.image-shadow-dark {
+  width: 215px;
+  height: 28px;
+  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+  opacity: 0.7;
+}
diff --git a/src/modules/BeerBrowser/BeerCard/BeerCard.tsx b/src/modules/BeerBrowser/BeerCard/BeerCard.tsx
@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import { Card } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';
+import { ThemeContext } from '../../../contexts';
 import styles from './beerCard.module.css';
 
 type BeerCardProps = {
@@ -15,9 +16,14 @@ export const BeerCard: FC<BeerCardProps> = ({ image, name, tagline, id }) => {
   const beerCardHandler = (id: number) => {
     navigate(`/details/${id}`);
   };
+  const {isDark} = useContext(ThemeContext)
   return (
     <Card className={styles.beerCard} onClick={() => beerCardHandler(id)}>
+      <div className={styles["image-wrapper"]}>
       <Card.Img variant="top" src={image} className={styles.cardImage} />
+<div className={isDark? styles["image-shadow-dark"]:styles["image-shadow-light"]}></div>
+      </div>
+
       <Card.Body className={styles.cardBody}>
         <Card.Title>{name}</Card.Title>
         <Card.Text>{tagline}</Card.Text>

diff --git a/src/modules/BeerBrowser/BeerCard/beerCard.module.css b/src/modules/BeerBrowser/BeerCard/beerCard.module.css
@@ -19,3 +19,23 @@
   text-align: center;
   vertical-align: middle;
 }
+
+.image-shadow-light {
+  width: 215px;
+  height: 28px;
+  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+  opacity: 0.7;
+}
+.image-shadow-dark {
+  width: 215px;
+  height: 28px;
+  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+  opacity: 0.7;
+}
+
+.image-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
diff --git a/src/modules/BeerDetails/BeerDetails.tsx b/src/modules/BeerDetails/BeerDetails.tsx
@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import { FC, useContext } from 'react';
 import { Card } from 'react-bootstrap';
 import { useParams } from 'react-router-dom';
 import { Loader } from '../../components';
+import { ThemeContext } from '../../contexts';
 import { useBeerDetails } from '../../hooks/useBeerDetails';
 import { BeerInfo } from './BeerInfo';
 import { IngredientsInfo } from './IngredientsInfo';
@@ -10,6 +11,7 @@ import styles from './beerDetails.module.css';
 const BeerDetails: FC = () => {
   const { id} = useParams();
   const { beerDetails, isLoading } = useBeerDetails(id);
+  const{isDark} = useContext(ThemeContext)
 
   if (!beerDetails) {
     return;
@@ -21,11 +23,14 @@ const BeerDetails: FC = () => {
         <Loader />
       ) : (
         <div className={`${styles.wrapper} `}>
-       <div className={styles["flex-column"]}>
+
           <BeerInfo beerDetails={beerDetails} />
 
-          </div>
+
+          <div className={styles["image-wrapper"]}>
           <Card.Img variant="top" src={beerDetails?.imageUrl} className={styles.detailsImage} />
+<div className={isDark? styles["image-shadow-dark"]:styles["image-shadow-light"]}></div>
+          </div>
           <IngredientsInfo beerDetails={beerDetails} />
         </div>
       )}

diff --git a/src/modules/BeerDetails/BeerInfo/BeerInfo.tsx b/src/modules/BeerDetails/BeerInfo/BeerInfo.tsx
@@ -18,11 +18,11 @@ export const BeerInfo: FC<BeerInfoProps> = ({ beerDetails }) => {
           <Card.Title>
             <h1 className={styles.header}>{beerDetails.name}</h1>
           </Card.Title>
-          <Card.Text>
+
             <h2 className={styles.subHeader}>{beerDetails.tagline}</h2>
-          </Card.Text>
-          <Card.Text>{beerDetails?.description}</Card.Text>
-          <Card.Text className={styles['number-values-Wrapper']}>
+
+          {beerDetails?.description}
+          <div className={styles['number-values-Wrapper']}>
             <div className={styles['number-value']}>
               <span> abv(alcohol by volume):</span>
               <span> {beerDetails?.abv} %</span>
@@ -31,7 +31,7 @@ export const BeerInfo: FC<BeerInfoProps> = ({ beerDetails }) => {
               <span>ibu(international bitter units):</span>
               <span> {beerDetails?.ibu} ibu</span>
             </div>
-          </Card.Text>
+          </div>
         </Card.Body>
       </Card>
     </Container>

diff --git a/src/modules/BeerDetails/IngredientsInfo/Hops/HopsGroup.tsx b/src/modules/BeerDetails/IngredientsInfo/Hops/HopsGroup.tsx
@@ -12,16 +12,14 @@ export const HopsGroup: FC<HopsGroupProps> = ({ title, hops }) => {
     <>
       <h3 className={styles.categoryHeader}>{title}</h3>
       {hops.length !== 0 ? (
-        hops.map((hop: HopType) => {
-          return (
-            <>
-              <div className={styles.ingredient}>
+        hops.map((hop: HopType,index) => {
+          return (       
+              <div className={styles.ingredient} key={index}>
                 <div>{hop.name}</div>
                 <div>
                   {hop.amount.value} {hop.amount.unit}
                 </div>
               </div>
-            </>
           );
         })
       ) : (

diff --git a/src/modules/BeerDetails/IngredientsInfo/IngredientsInfo.tsx b/src/modules/BeerDetails/IngredientsInfo/IngredientsInfo.tsx
@@ -30,7 +30,7 @@ export const IngredientsInfo: FC<IngredientsInfoProps> = ({ beerDetails }) => {
           <Card.Title>
             <h1 className={styles.header}>Ingredients:</h1>
           </Card.Title>
-          <Card.Text>
+
             <h2 className={styles.subHeader}>Malts:</h2>
             {beerDetails?.ingredients.malt.map((malt, index) => {
               return (
@@ -42,15 +42,15 @@ export const IngredientsInfo: FC<IngredientsInfoProps> = ({ beerDetails }) => {
                 </div>
               );
             })}
-          </Card.Text>
-          <Card.Text>
+
+
             <h2 className={styles.subHeader}>Hops:</h2>
             <HopsGroup title={'--Start'} hops={hopsStart} />
             <HopsGroup title={'--Middle'} hops={hopsMiddle} />
             <HopsGroup title={'--End'} hops={hopsEnd} />
-          </Card.Text>
+
           <h2 className={styles.subHeader}>Yeast:</h2>
-          <Card.Text className={styles.ingredient}>{beerDetails?.ingredients.yeast}</Card.Text>
+          <div className={styles.ingredient}>{beerDetails?.ingredients.yeast}</div>
         </Card.Body>
       </Card>
     </Container>

diff --git a/src/modules/BeerDetails/beerDetails.module.css b/src/modules/BeerDetails/beerDetails.module.css
@@ -40,8 +40,6 @@
   margin: 0 1vw;
 }
 
-@media (max-width: 780px) {
-}
 @media (max-width: 600px) {
   .detailsImage {
     flex: none;
@@ -52,6 +50,19 @@
   .cardImage {
     height: 10vh;
   }
+
+  .image-shadow-light {
+    width: 215px;
+    height: 28px;
+    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+    opacity: 0.7;
+  }
+  .image-shadow-dark {
+    width: 215px;
+    height: 28px;
+    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+    opacity: 0.7;
+  }
 }
 
 .label {
@@ -104,3 +115,36 @@ h3 {
   flex-direction: column;
   justify-content: space-between;
 }
+
+.image-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.image-shadow-light {
+  width: 430px;
+  height: 56px;
+  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+  opacity: 0.7;
+}
+.image-shadow-dark {
+  width: 430px;
+  height: 56px;
+  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+  opacity: 0.7;
+}
+
+@media (max-width: 600px) {
+  .image-shadow-light {
+    width: 215px;
+    height: 28px;
+    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+    opacity: 0.7;
+  }
+  .image-shadow-dark {
+    width: 215px;
+    height: 28px;
+    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+    opacity: 0.7;
+  }
+}