added new design + description of the products

MathisZerbib · Jun 11, 2024 · 4a77fbd · 4a77fbd
1 parent 0235016
commit 4a77fbd
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 24 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,7 @@
 :root {
-  --tg-theme-bg-color: #efeff3;
+  --tg-theme-bg-color: #ffffff;
+  --tg-theme-bg-color-dark: #2e2e2e;
+
   --tg-theme-button-color: #2eaddc;
   --tg-theme-button-text-color: #fff;
   --tg-theme-text-color: #333;

diff --git a/src/components/BuyCard.tsx b/src/components/BuyCard.tsx
@@ -4,7 +4,7 @@ import "./BuyCard.css";
 import EmojiStrains from "./EmojiStrains";
 import { AddToCartButton } from "./AddToCartButton";
 import {
-  ButtonCenterDiv,
+  ButtonSpaceBetweenContainer,
   HeaderWrapper,
   Rating,
   Star,
@@ -13,6 +13,7 @@ import {
 import { convertToTon } from "../services/exchangeRateService";
 import { useCurrency } from "../providers/useCurrency";
 import { Typography } from "@mui/material";
+import Link from "@mui/material/Link"; // Import Link component from MUI
 
 interface ProductProps {
   id: string;
@@ -21,6 +22,7 @@ interface ProductProps {
   rating: number;
   strains: string[];
   price: number;
+  description: string;
 }
 
 const BuyCard: React.FC<ProductProps> = ({
@@ -30,12 +32,12 @@ const BuyCard: React.FC<ProductProps> = ({
   rating,
   strains,
   price,
+  description,
 }) => {
   const [selectedQuantity, setSelectedQuantity] = useState<number>(5);
   const { selectedCurrency, updateSelectedCurrency } = useCurrency();
-  const [totalPrice, setTotalPrice] = useState<number>(5 * price); // State to hold the total price
-
-  // Function to handle quantity change
+  const [totalPrice, setTotalPrice] = useState<number>(5 * price);
+  const descriptionFirstSentence = description.split(".")[0];
   const handleQuantityChange = (
     event: React.ChangeEvent<HTMLSelectElement>
   ) => {
@@ -45,15 +47,13 @@ const BuyCard: React.FC<ProductProps> = ({
     }
   };
 
-  // Function to retrieve selected currency from localStorage
   useEffect(() => {
     const currency = localStorage.getItem("selectedCurrency");
     if (currency) {
       updateSelectedCurrency(currency);
     }
   }, []);
 
-  // Function to update the total price based on the selected currency
   useEffect(() => {
     const convertPrice = async () => {
       try {
@@ -81,25 +81,40 @@ const BuyCard: React.FC<ProductProps> = ({
           }}
         />
       </div>
-      <div style={{ padding: "5px" }}>
+      <div
+        style={{
+          padding: "5px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "10px",
+          justifyContent: "space-between",
+        }}
+      >
         <HeaderWrapper>
-          <Typography>{name}</Typography>
+          <Typography variant="h6">{name}</Typography>
           <Rating>
             <Typography>{rating.toString()}</Typography>
             <Star icon={faStar} />
           </Rating>
         </HeaderWrapper>
 
         <EmojiStrains strains={strains} />
-        <br />
-        <ButtonCenterDiv>
+
+        {/* Description with a link */}
+        <Typography variant="body2">
+          {descriptionFirstSentence + "."}
+        </Typography>
+
+        <ButtonSpaceBetweenContainer>
           <select
             value={selectedQuantity}
             onChange={handleQuantityChange}
             style={{
               padding: "10px 20px",
               borderRadius: "10px",
               border: "1px solid #c2c2c2",
+              backgroundColor: "white",
+              color: "black",
             }}
           >
             {[5, 10, 20, 50, 100].map((option) => (
@@ -112,7 +127,7 @@ const BuyCard: React.FC<ProductProps> = ({
             amount={totalPrice}
             item={{ id: id, quantity: selectedQuantity, price: totalPrice }}
           />
-        </ButtonCenterDiv>
+        </ButtonSpaceBetweenContainer>
       </div>
     </BuyCardStyled>
   );

diff --git a/src/components/CurrencySwitcher.tsx b/src/components/CurrencySwitcher.tsx
@@ -63,8 +63,7 @@ const CurrencySwitcher: React.FC<CurrencySwitcherProps> = ({
 const StyledCurrencySwitcher = styled.div`
   position: relative;
   cursor: pointer;
-  background-color: #333; /* Dark background */
-  color: white; /* White text */
+  color: var(--tg-theme-text-color);
 
   .currency-title {
     padding: 10px 14px;
@@ -83,7 +82,7 @@ const StyledCurrencySwitcher = styled.div`
     border-top: none;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    background-color: #444; /* Slightly lighter than the parent for contrast */
+    background-color: var(--tg-theme-text-color);
     z-index: 1;
     list-style-type: none;
     padding: 0;

diff --git a/src/components/EmojiStrains.tsx b/src/components/EmojiStrains.tsx
@@ -20,10 +20,20 @@ const EmojiStrains = ({ strains }: { strains: string[] }) => {
   };
 
   return (
-    <div>
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "5px",
+        justifyContent: "start",
+      }}
+    >
+      {strains.length === 0 && <StrainText>No strains available</StrainText>}
       {strains.map((strain) => (
         <Chip key={strain}>
-          <Typography style={{ fontSize: "0.8rem", color: "#fff" }}>
+          <Typography
+            style={{ fontSize: "0.8rem", color: "var(--tg-theme-text-color)" }}
+          >
             {strainEmojis[strain] || "❓"} {strain}
           </Typography>
         </Chip>

diff --git a/src/components/WelcomeStore.tsx b/src/components/WelcomeStore.tsx
@@ -17,7 +17,7 @@ const WelcomeText = styled.h1`
 `;
 
 const PaymentOptions = styled.p`
-  color: white;
+  color: var(--tg-theme-text-color);
   font-size: 24px;
   text-align: center;
   max-width: 800px;

diff --git a/src/components/styled/styled.tsx b/src/components/styled/styled.tsx
@@ -4,7 +4,7 @@ import styled from "styled-components";
 export const Card = styled.div`
   padding: 10px 20px;
   border-radius: 8px;
-  background-color: white;
+  background-color: var(--tg-theme-text-color);
 
   @media (prefers-color-scheme: dark) {
     background-color: #111;
@@ -111,7 +111,7 @@ export const HeaderWrapper = styled.div`
   gap: 10px;
 `;
 
-export const ButtonCenterDiv = styled.div`
+export const ButtonSpaceBetweenContainer = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -239,14 +239,17 @@ export const NetworkBadge = styled.span<{ network: string }>`
 `;
 
 export const StyledApp = styled.div`
-  background-color: #e8e8e8;
-  color: black;
+  background-color: ${({ theme }) => theme.bgColor};
+  color: ${({ theme }) => theme.textColor};
 
   @media (prefers-color-scheme: dark) {
-    background-color: #222;
-    color: white;
+    background-color: ${({ theme }) => theme.darkBgColor};
+    color: ${({ theme }) => theme.darkTextColor};
   }
+
   padding: 40px 20px;
+
+  /* Additional responsive styles can be added here */
 `;
 
 export const AppContainer = styled.div`