fix: update .env.sample, use fonts from link tag, update font bold st…

…yles to semi bold
Jawad-Ali2 · Apr 28, 2024 · 1f26c9f · 1f26c9f
1 parent 3e4dec4
commit 1f26c9f
Show file tree

Hide file tree

Showing 31 changed files with 48 additions and 135 deletions.
diff --git a/.env.sample b/.env.sample
@@ -58,3 +58,7 @@ GITHUB_CALLBACK_URL=http://localhost:8080/api/v1/users/github/callback # Add thi
 # ################ ENV VARS TO REDIRECT WHEN USER SIGNS UP THROUGH ANY OF THE SSOs #################
 CLIENT_SSO_REDIRECT_URL=http://localhost:3000/user/profile # Frontend url where backend should redirect when user is successfully logged in through the Google/Github SSO
 # ################ ENV VARS TO REDIRECT WHEN USER SIGNS UP THROUGH ANY OF THE SSOs #################
+
+# ################ ENV VARS TO REDIRECT WHEN USER CLICKS ON THE FORGET PASSWORD LINK SENT ON THEIR EMAIL #################
+FORGOT_PASSWORD_REDIRECT_URL=http://localhost:3000/forgot-password  # Frontend url where the user should be redirected when the user clicks on the reset password link sent to their email.
+# ################ ENV VARS TO REDIRECT WHEN USER CLICKS ON THE FORGET PASSWORD LINK SENT ON THEIR EMAIL #################
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/index.html b/examples/apps/ecommerce/web/react-vite-redux-tailwind/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Ecommerce</title>
   </head>

diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/OFL.txt b/examples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/OFL.txt
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Black.ttf b/examples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Black.ttf
diff --git a/...apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-BlackItalic.ttf b/...apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-BlackItalic.ttf
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Bold.ttf b/examples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Bold.ttf
diff --git a/.../apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-BoldItalic.ttf b/.../apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-BoldItalic.ttf
diff --git a/...s/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-ExtraBold.ttf b/...s/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-ExtraBold.ttf
diff --git a/.../ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-ExtraBoldItalic.ttf b/.../ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-ExtraBoldItalic.ttf
diff --git a/.../apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-ExtraLight.ttf b/.../apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-ExtraLight.ttf
diff --git a/...ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-ExtraLightItalic.ttf b/...ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-ExtraLightItalic.ttf
diff --git a/...ples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Italic.ttf b/...ples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Italic.ttf
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Light.ttf b/examples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Light.ttf
diff --git a/...apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-LightItalic.ttf b/...apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-LightItalic.ttf
diff --git a/...ples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Medium.ttf b/...ples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Medium.ttf
diff --git a/...pps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-MediumItalic.ttf b/...pps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-MediumItalic.ttf
diff --git a/...les/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Regular.ttf b/...les/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Regular.ttf
diff --git a/...es/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-SemiBold.ttf b/...es/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-SemiBold.ttf
diff --git a/...s/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-SemiBoldItalic.ttf b/...s/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-SemiBoldItalic.ttf
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Thin.ttf b/examples/apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-Thin.ttf
diff --git a/.../apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-ThinItalic.ttf b/.../apps/ecommerce/web/react-vite-redux-tailwind/public/fonts/poppins/Poppins-ThinItalic.ttf
diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/NavItem.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/basic/NavItem.tsx
@@ -30,7 +30,7 @@ const NavItem = (props: NavItemProps) => {
           ${
             /* Underline styles */
             isActive
-              ? "lg:hover:before:w-0 font-bold lg:font-normal lg:underline lg:underline-offset-[7.4px] lg:decoration-1"
+              ? "lg:hover:before:w-0 font-semibold lg:font-normal lg:underline lg:underline-offset-[7.4px] lg:decoration-1"
               : ""
           }
         `}

diff --git a/.../ecommerce/web/react-vite-redux-tailwind/src/components/business/InvoiceAmountSummary.tsx b/.../ecommerce/web/react-vite-redux-tailwind/src/components/business/InvoiceAmountSummary.tsx
@@ -27,8 +27,8 @@ const InvoiceAmountSummary = (props: InvoiceAmountSummaryProps) => {
         </div>
       )}
       <div className={`flex justify-between mb-2 ${isRTL ? 'flex-row-reverse' : ''}`}>
-        <span className="capitalize font-bold">{t("total")}</span>
-        <span className="font-bold">{formatAmount(discountedTotal, currency)}</span>
+        <span className="capitalize font-semibold">{t("total")}</span>
+        <span className="font-semibold">{formatAmount(discountedTotal, currency)}</span>
       </div>
     </div>
   );

diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/business/OrderCard.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/business/OrderCard.tsx
@@ -46,7 +46,7 @@ const OrderCard = (props: OrderCardProps) => {
       >
         <div className={`flex justify-between items-center`}>
           <span className="text-sm">{displayedOrderDate}</span>
-          <span className="font-bold">{t(order.status.toLowerCase())}</span>
+          <span className="font-semibold">{t(order.status.toLowerCase())}</span>
         </div>
         <span className=" text-ellipsis line-clamp-1 text-start">
           {displayedOrderAddress}

diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/business/Timer.tsx b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/components/business/Timer.tsx
@@ -56,31 +56,31 @@ const Timer = (props: TimerProps) => {
         <div
           className={`flex flex-col justify-center items-center rounded-full bg-white text-black p-4 w-20 h-20 ${timerContainerClassName}`}
         >
-          <span className="font-bold">{zeroFormattedNumber(duration.days)}</span>
+          <span className="font-semibold">{zeroFormattedNumber(duration.days)}</span>
           <span className="capitalize">{t("days")}</span>
         </div>
       )}
       {duration?.hours >= 0 && (
         <div
           className={`flex flex-col justify-center items-center rounded-full bg-white text-black p-4 w-20 h-20 ${timerContainerClassName}`}
         >
-          <span className="font-bold">{zeroFormattedNumber(duration.hours)}</span>
+          <span className="font-semibold">{zeroFormattedNumber(duration.hours)}</span>
           <span className="capitalize">{t("hours")}</span>
         </div>
       )}
       {duration?.minutes >= 0 && (
         <div
           className={`flex flex-col justify-center items-center rounded-full bg-white text-black p-4 w-20 h-20 ${timerContainerClassName}`}
         >
-          <span className="font-bold">{zeroFormattedNumber(duration.minutes)}</span>
+          <span className="font-semibold">{zeroFormattedNumber(duration.minutes)}</span>
           <span className="capitalize">{t("minutes")}</span>
         </div>
       )}
       {duration?.seconds >= 0 && (
         <div
           className={`flex flex-col justify-center items-center rounded-full bg-white text-black p-4 w-20 h-20 ${timerContainerClassName}`}
         >
-          <span className="font-bold">{zeroFormattedNumber(duration.seconds)}</span>
+          <span className="font-semibold">{zeroFormattedNumber(duration.seconds)}</span>
           <span className="capitalize">{t("seconds")}</span>
         </div>
       )}

diff --git a/...web/react-vite-redux-tailwind/src/components/widgets/banner/container/BannerContainer.tsx b/...web/react-vite-redux-tailwind/src/components/widgets/banner/container/BannerContainer.tsx
@@ -1,12 +1,10 @@
-import { useTranslation } from "react-i18next";
-import Banner from "../presentation/Banner";
 import { useEffect, useState } from "react";
-import { getCurrentUTCTime } from "../../../../utils/dateTimeHelper";
 import { DATE_TIME_FORMATS } from "../../../../constants";
 import { BANNER_PROMOTION_END_DATE } from "../../../../data/applicationData";
+import { getCurrentUTCTime } from "../../../../utils/dateTimeHelper";
+import Banner from "../presentation/Banner";
 
 const BannerContainer = () => {
-  const { t } = useTranslation();
 
   /* Current time in UTC formatted as YYYY-MM-DDTHH:mm:ss */
   const [startTime, setStartTime] = useState(

diff --git a/...merce/web/react-vite-redux-tailwind/src/components/widgets/footer/presentation/Footer.tsx b/...merce/web/react-vite-redux-tailwind/src/components/widgets/footer/presentation/Footer.tsx
@@ -15,7 +15,7 @@ const Footer = () => {
       >
         <FooterSection
           heading={t("companyName")}
-          headingClassName="font-bold tracking-wider capitalize p-8"
+          headingClassName="font-semibold tracking-wider capitalize p-8"
           className="w-2/6"
         />
         <FooterSection heading={t("support")} headingClassName="capitalize" className="p-8">

diff --git a/...merce/web/react-vite-redux-tailwind/src/components/widgets/header/presentation/Header.tsx b/...merce/web/react-vite-redux-tailwind/src/components/widgets/header/presentation/Header.tsx
@@ -61,7 +61,7 @@ const Header = forwardRef(function Header(props: HeaderProps, ref: ForwardedRef<
         dir={isRTL ? 'rtl' : 'ltr'}
       >
         <button
-          className={`font-bold capitalize text-2xl tracking-wider text-black`} onClick={logoClickHandler}
+          className={`font-semibold capitalize text-2xl tracking-wider text-black`} onClick={logoClickHandler}
         >
           {t("companyName")}
         </button>

diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/index.css b/examples/apps/ecommerce/web/react-vite-redux-tailwind/src/index.css
@@ -3,36 +3,46 @@
 @tailwind utilities;
 
 /* Fonts */
-@font-face {
-  font-family: "poppins-black";
-  src: url("/fonts/poppins/Poppins-Black.ttf");
+.font-poppinsLight {
+  font-family: "Poppins", sans-serif;
+  font-weight: 300;
+  font-style: normal;
 }
 
-@font-face {
-  font-family: "poppins-bold";
-  src: url("/fonts/poppins/Poppins-Bold.ttf");
+.font-poppinsRegular {
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-style: normal;
 }
-@font-face {
-  font-family: "poppins-light";
-  src: url("/fonts/poppins/Poppins-Light.ttf");
+
+.font-poppinsMedium {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
 }
-@font-face {
-  font-family: "poppins-medium";
-  src: url("/fonts/poppins/Poppins-Medium.ttf");
+
+.font-poppinsSemibold {
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
 }
 
-@font-face {
-  font-family: "poppins-regular";
-  src: url("/fonts/poppins/Poppins-Regular.ttf");
+.font-poppinsBold {
+  font-family: "Poppins", sans-serif;
+  font-weight: 700;
+  font-style: normal;
 }
-@font-face {
-  font-family: "poppins-italic";
-  src: url("/fonts/poppins/Poppins-Italic.ttf");
+
+.font-poppinsBlack {
+  font-family: "Poppins", sans-serif;
+  font-weight: 900;
+  font-style: normal;
 }
 
 /* Default Font Family */
 * {
-  font-family: "poppins-regular";
+  font-family: "Poppins", sans-serif;
+
 }
 
 /* Scroll bar styles*/

diff --git a/examples/apps/ecommerce/web/react-vite-redux-tailwind/tailwind.config.js b/examples/apps/ecommerce/web/react-vite-redux-tailwind/tailwind.config.js
@@ -10,14 +10,6 @@ export default {
         yellow: "#00FF66",
         grey: "#cdcdcd",
       },
-      fontFamily: {
-        poppinsRegular: ["poppins-regular"],
-        poppinsBlack: ["poppins-black"],
-        poppinsBold: ["poppins-bold"],
-        poppinsLight: ["poppins-light"],
-        poppinsMedium: ["poppins-medium"],
-        poppinsItalic: ["poppins-italic"],
-      },
     },
   },
   plugins: [],

diff --git a/src/controllers/apps/auth/user.controllers.js b/src/controllers/apps/auth/user.controllers.js
@@ -338,7 +338,6 @@ const forgotPasswordRequest = asyncHandler(async (req, res) => {
       user.username,
       // ! NOTE: Following link should be the link of the frontend page responsible to request password reset
       // ! Frontend will send the below token with the new password in the request body to the backend reset password endpoint
-      // * Ideally take the url from the .env file which should be teh url of the frontend
       `${process.env.FORGOT_PASSWORD_REDIRECT_URL}/${unHashedToken}`
     ),
   });