added some more syle to cards and slider

MathisZerbib · Jun 9, 2024 · 17e09c2 · 17e09c2
1 parent 274ccbd
commit 17e09c2
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 94 deletions.
diff --git a/src/components/AddToCartButton.tsx b/src/components/AddToCartButton.tsx
@@ -22,7 +22,7 @@ export function AddToCartButton({ amount, item }: AddToCartButtonProps) {
 
   const handleAddToCart = async () => {
     try {
-      await addToCart(item);
+      addToCart(item);
       setSuccessMessage("Added to cart!");
       setTimeout(() => setSuccessMessage(""), 3000); // Clear the message after 3 seconds
     } catch (error) {

diff --git a/src/components/BuyCard.tsx b/src/components/BuyCard.tsx
@@ -6,13 +6,13 @@ import { AddToCartButton } from "./AddToCartButton";
 import {
   ButtonCenterDiv,
   HeaderWrapper,
-  ProductName,
   Rating,
   Star,
   BuyCardStyled,
 } from "./styled/styled";
 import { convertToTon } from "../services/exchangeRateService";
 import { useCurrency } from "../providers/useCurrency";
+import { Typography } from "@mui/material";
 
 interface ProductProps {
   id: string;
@@ -69,50 +69,51 @@ const BuyCard: React.FC<ProductProps> = ({
 
   return (
     <BuyCardStyled>
-      <img
-        src={imageUrl}
-        alt={name}
-        style={{ width: "100%", borderRadius: "15px", marginBottom: "10px" }}
-      />
-      <HeaderWrapper>
-        <ProductName>{name}</ProductName>
-        <Rating>
-          <p
-            style={{
-              fontSize: "1rem",
-              marginRight: "5px",
-              color: "#333",
-            }}
-          >
-            {rating.toString()}
-          </p>
-          <Star icon={faStar} />
-        </Rating>
-      </HeaderWrapper>
-
-      <EmojiStrains strains={strains} />
-      <br />
-      <ButtonCenterDiv>
-        <select
-          value={selectedQuantity}
-          onChange={handleQuantityChange}
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        <img
+          src={imageUrl}
+          alt={name}
           style={{
-            padding: "10px 20px",
+            width: "100%",
+            height: "150px",
+            objectFit: "cover",
             borderRadius: "10px",
-            border: "1px solid #c2c2c2",
           }}
-        >
-          {[5, 10, 20, 50, 100].map((option) => (
-            <option key={option} value={option}>
-              {option}g
-            </option>
-          ))}
-        </select>
-        <AddToCartButton
-          amount={totalPrice}
-          item={{ id: id, quantity: selectedQuantity, price: totalPrice }}
         />
-      </ButtonCenterDiv>
+      </div>
+      <div style={{ padding: "5px" }}>
+        <HeaderWrapper>
+          <Typography>{name}</Typography>
+          <Rating>
+            <Typography>{rating.toString()}</Typography>
+            <Star icon={faStar} />
+          </Rating>
+        </HeaderWrapper>
+
+        <EmojiStrains strains={strains} />
+        <br />
+        <ButtonCenterDiv>
+          <select
+            value={selectedQuantity}
+            onChange={handleQuantityChange}
+            style={{
+              padding: "10px 20px",
+              borderRadius: "10px",
+              border: "1px solid #c2c2c2",
+            }}
+          >
+            {[5, 10, 20, 50, 100].map((option) => (
+              <option key={option} value={option}>
+                {option}g
+              </option>
+            ))}
+          </select>
+          <AddToCartButton
+            amount={totalPrice}
+            item={{ id: id, quantity: selectedQuantity, price: totalPrice }}
+          />
+        </ButtonCenterDiv>
+      </div>
     </BuyCardStyled>
   );
 };

diff --git a/src/components/EmojiStrains.tsx b/src/components/EmojiStrains.tsx
@@ -1,3 +1,4 @@
+import { Typography } from "@mui/material";
 import { Chip, StrainText } from "./styled/styled";
 // EmojiStrains component
 const EmojiStrains = ({ strains }: { strains: string[] }) => {
@@ -22,9 +23,9 @@ const EmojiStrains = ({ strains }: { strains: string[] }) => {
     <div>
       {strains.map((strain) => (
         <Chip key={strain}>
-          <StrainText>
+          <Typography style={{ fontSize: "0.8rem", color: "#fff" }}>
             {strainEmojis[strain] || "❓"} {strain}
-          </StrainText>
+          </Typography>
         </Chip>
       ))}
     </div>

diff --git a/src/components/ProductsList.tsx b/src/components/ProductsList.tsx
@@ -14,10 +14,11 @@ interface ProductsListProps {
 const ProductsList: React.FC<ProductsListProps> = ({ products }) => {
   const settings = {
     dots: false,
+    arrows: false,
     infinite: false,
     speed: 500,
-    slidesToShow: 4,
-    slidesToScroll: 4,
+    slidesToShow: 3,
+    slidesToScroll: 3,
 
     responsive: [
       {

diff --git a/src/components/WelcomeStore.tsx b/src/components/WelcomeStore.tsx
@@ -1,7 +1,7 @@
 // src/components/WelcomeStore.tsx
 import React from "react";
 import styled from "styled-components";
-import { useCurrency } from "../providers/useCurrency";
+// import { useCurrency } from "../providers/useCurrency";
 
 const Container = styled.div`
   display: flex;
@@ -29,20 +29,20 @@ const usdtLogo = "usdt.svg";
 const WelcomeStore: React.FC = () => {
   return (
     <Container>
-      <WelcomeText>
+      {/* <WelcomeText>
         Vite {useCurrency().selectedCurrency === "TON" ? "TON" : "USDT"} CBD
         <img
           src={useCurrency().selectedCurrency === "TON" ? tonLogo : usdtLogo}
           alt="TON logo"
           style={{ width: 24, height: 24, marginLeft: 10, marginBottom: 25 }}
         />{" "}
-      </WelcomeText>
+      </WelcomeText> */}
       <br />
       <PaymentOptions>
         Commandez dès maintenant votre CBD sur Montpellier
         <br />
         <br />
-        {useCurrency().selectedCurrency === "TON" ? (
+        {/* {useCurrency().selectedCurrency === "TON" ? (
           <>
             Payez en TON
             <br />
@@ -52,7 +52,7 @@ const WelcomeStore: React.FC = () => {
             Payez en USDT
             <br />
           </>
-        )}
+        )} */}
       </PaymentOptions>
     </Container>
   );

diff --git a/src/components/styled/styled.tsx b/src/components/styled/styled.tsx
@@ -64,7 +64,6 @@ export const Input = styled("input")`
 export const AddToCartButtonCard = styled(Button)`
   position: relative;
   display: flex;
-  width: 120px;
   align-items: center;
   justify-content: center;
   gap: 10px;
@@ -102,20 +101,14 @@ export const AddToCartButtonCard = styled(Button)`
 `;
 
 export const BuyCardStyled = styled.div`
-  background-color: #ffffff;
   border-radius: 15px;
-  margin: 10px;
-  padding: 10px;
+  margin: 0 10px;
 `;
 
 export const HeaderWrapper = styled.div`
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-  margin-top: 10px;
-  margin-left: 5px;
-  margin-right: 5px;
+  flex-direction: row;
+  gap: 10px;
 `;
 
 export const ButtonCenterDiv = styled.div`
@@ -129,14 +122,14 @@ export const ProductName = styled.h2`
   margin: 0;
   font-size: 0.9rem;
   font-weight: bold;
-  color: var(--tg-theme-text-color, #333);
+  color: var(--tg-theme-text-color);
 `;
 
 export const Quantity = styled.p`
   margin: 0;
   font-size: 1rem;
   font-style: italic;
-  color: var(--tg-theme-text-color, #333);
+  color: var(--tg-theme-text-color);
 `;
 
 export const Rating = styled.div`
@@ -165,48 +158,45 @@ export const CenterDiv = styled.div`
   align-items: center;
   text-align: center;
 `;
+
 export const ButtonBuyTonStyled = styled(Button)`
-position: relative; // Enable absolute positioning inside this container
-display: flex;
-min-width: 250px;
-min-height: 50px;
-width: 100%;
-align-items: center;
-justify-content: center;
-gap: 10px;
-padding: 10px 20px;
-background-color: #000;
-color: #fff;
-border: none;
-border-radius: 10px;
-cursor: pointer;
-font-size: 16px;
-transition: all 0.3s;
-}
-
-&:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
-}
-animation: fadeIn 0.5s;
+  position: relative;
+  display: flex;
+  min-width: 250px;
+  min-height: 50px;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 10px 20px;
+  background-color: #000;
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: all 0.3s;
+
+  &:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+  animation: fadeIn 0.5s;
 `;
 
 export const Chip = styled.span`
   background-color: rgba(255, 255, 255, 0.1);
   border-color: rgba(0, 0, 0, 0.48);
   border-style: solid;
   border-width: 1px;
-  color: #333;
+  color: var(--tg-theme-text-color);
   border-radius: 15px;
   padding: 5px 10px;
-  margin-right: 5px;
-  margin-bottom: 5px;
   font-size: 12px;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   backdrop-filter: blur(10px);
-
   transition: all 0.3s ease;
 
   &:hover {
@@ -221,15 +211,15 @@ export const StrainText = styled.p`
 `;
 
 export const ProductsListContainer = styled.div`
-  background-color: #3bb75e;
+  background-color: var(--tg-theme-bg-color);
 `;
+
 export const StyledProductContainer = styled.div`
   background: white;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 `;
 
-// Define NetworkBadge outside of any component
 export const NetworkBadge = styled.span<{ network: string }>`
   display: inline-block;
   padding: 5px;
@@ -261,6 +251,7 @@ export const StyledApp = styled.div`
 
 export const AppContainer = styled.div`
   margin: 0 auto;
+  margin-bottom: 100px;
 `;
 
 export const StoreLogo = styled.img`
@@ -292,8 +283,8 @@ export const CartItemStyled = styled.div`
 export const CheckoutButton = styled.button`
   padding: 10px 20px;
   margin-top: 20px;
-  background-color: #007bff;
-  color: #fff;
+  background-color: var(--tg-theme-button-color);
+  color: var(--tg-theme-button-text-color);
   border: none;
   border-radius: 5px;
   cursor: pointer;