diff --git a/Frontend/components/Header.tsx b/Frontend/components/Header.tsx
index cb51f12..8969286 100644
--- a/Frontend/components/Header.tsx
+++ b/Frontend/components/Header.tsx
@@ -10,8 +10,8 @@ import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.share
import pb from "@/lib/pocketbase";
import { useTheme } from "next-themes";
import Link from "next/link";
-import Icon from "@/components/Icons/Icon";
import ModalPasswordReset from "./Modals/ModalPasswordReset";
+import {Person24Filled, SignOut24Filled} from '@fluentui/react-icons'
interface HeaderProps {
isUserLoggedIn: boolean;
@@ -120,7 +120,7 @@ export default function Header({ isUserLoggedIn }: HeaderProps) {
className="btn btn-ghost btn-circle avatar"
>
- logout()}>
-
+
Logout
diff --git a/Frontend/components/Icons/Icon.tsx b/Frontend/components/Icons/Icon.tsx
deleted file mode 100644
index 2e81c0b..0000000
--- a/Frontend/components/Icons/Icon.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client";
-
-import React from "react";
-import * as FluentIcons from "@fluentui/react-icons";
-import { IconProps, iconSize } from "./types";
-import IconContainer from "./IconContainer";
-
-function Icon({
- color,
- size = "small",
- isActive = true,
- name,
- nestedComponent,
- style,
-}: IconProps) {
- const fluentIcons = Object.assign(
- {},
- ...Object.keys(FluentIcons).map((name: any) => {
- return {
- [name]: (
-
- {React.createElement((FluentIcons as any)[name as any], {
- color: isActive ? color ?? undefined : undefined,
- style: { width: iconSize[size], height: iconSize[size] },
- })}
-
- ),
- };
- })
- );
-
- const icon = {
- ...fluentIcons,
- };
-
- return icon[name];
-}
-
-export default Icon;
diff --git a/Frontend/components/Icons/IconContainer.tsx b/Frontend/components/Icons/IconContainer.tsx
deleted file mode 100644
index ca9e817..0000000
--- a/Frontend/components/Icons/IconContainer.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { IconContainerProps, Orientation, iconSize } from "./types";
-
-function IconContainer({
- children,
- color,
- size = "small",
- isActive,
- nestedComponent,
- style,
-}: IconContainerProps) {
- const orientationStyle = {
- [Orientation.BottomLeft]: {
- bottom: `calc(-${iconSize[size]}/9)`,
- left: `calc(-${iconSize[size]}/9)`,
- },
- [Orientation.BottomRight]: {
- bottom: `calc(-${iconSize[size]}/9)`,
- right: `calc(-${iconSize[size]}/9)`,
- },
- [Orientation.TopLeft]: {
- top: `calc(-${iconSize[size]}/9)`,
- left: `calc(-${iconSize[size]}/9)`,
- },
- [Orientation.TopRight]: {
- top: `calc(-${iconSize[size]}/9)`,
- right: `calc(-${iconSize[size]}/9)`,
- },
- };
- return (
-
- {children}
- {nestedComponent?.node && (
-
- {nestedComponent?.node ? nestedComponent.node : <>>}
-
- )}
-
- );
-}
-
-export default IconContainer;
diff --git a/Frontend/components/Icons/types.ts b/Frontend/components/Icons/types.ts
deleted file mode 100644
index 7362312..0000000
--- a/Frontend/components/Icons/types.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { ReactNode } from "react";
-import * as FluentIcons from "@fluentui/react-icons";
-
-
-export type IconProps = {
- color?: string;
- size?:
- | "small"
- | "medium"
- | "large"
- | "xlarge"
- | "xxlarge"
- | "xxxlarge"
- | "xxxxlarge";
- isActive?: boolean;
- name: IconName;
- nestedComponent?: NestedComponent;
- style?: React.CSSProperties;
- };
-
-export type IconContainerProps = {
- children: ReactNode;
- color?: string;
- size?:
- | "small"
- | "medium"
- | "large"
- | "xlarge"
- | "xxlarge"
- | "xxxlarge"
- | "xxxxlarge";
- isActive?: boolean;
- nestedComponent?: NestedComponent;
- style?: React.CSSProperties
- }
- type FluentIconNames = keyof typeof FluentIcons;
- const fluentIconNames = Object.keys(FluentIcons) as FluentIconNames[];
- export type IconName = typeof fluentIconNames[number];
-
- export type NestedComponent = {
- node: ReactNode;
- options?: {
- orientation?: Orientation;
- backgroundColor?: string;
- };
- };
-
- export const enum Orientation {
- BottomLeft = "BottomLeft",
- BottomRight = "BottomRight",
- TopLeft = "TopLeft",
- TopRight = "TopRight",
- }
-
- export const sizeScale = {
- size: {
- size_0: '0rem',
- size_0_5: '0.25rem',
- size_1: '0.5rem', /* 8px Base */
- size_2: '1.0rem',
- size_3: '1.5rem',
- size_4: '2.0rem',
- size_5: '2.5rem',
- size_6: '3.0rem',
- size_7: '3.5rem',
- size_8: '4.0rem',
- size_9: '4.5rem',
- size_10: '5.0rem',
- size_11: '5.5rem',
- size_12: '6.0rem',
- size_13: '6.5rem',
- size_14: '7.0rem',
- size_15: '7.5rem',
- size_16: '8.0rem',
- size_17: '8.5rem',
- size_18: '9.0rem',
- size_19: '9.5rem',
- size_20: '10.0rem',
- size_21: '10.5rem',
- size_22: '11.0rem',
- size_23: '11.5rem',
- size_24: '12.0rem',
- size_25: '12.5rem',
- size_26: '13.0rem',
- size_27: '13.5rem',
- size_28: '14.0rem',
- size_29: '14.5rem',
- size_30: '15.0rem',
- },
- };
-
- export const iconSize = {
- small: sizeScale.size.size_2,
- medium: sizeScale.size.size_3,
- large: sizeScale.size.size_4,
- xlarge: sizeScale.size.size_5,
- xxlarge: sizeScale.size.size_6,
- xxxlarge: sizeScale.size.size_7,
- xxxxlarge: sizeScale.size.size_8,
- };
\ No newline at end of file
diff --git a/Frontend/components/Modals/ModalEmailChange.tsx b/Frontend/components/Modals/ModalEmailChange.tsx
index 2cb6cb3..39563b2 100644
--- a/Frontend/components/Modals/ModalEmailChange.tsx
+++ b/Frontend/components/Modals/ModalEmailChange.tsx
@@ -5,6 +5,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
import { signInValidationSchema } from "@/utils/form";
import { toast } from "react-toastify";
import pb from "@/lib/pocketbase";
+import {Dismiss20Filled} from "@fluentui/react-icons"
function ModalEmailChange() {
const {
@@ -57,7 +58,7 @@ function ModalEmailChange() {
htmlFor="password-reset-modal"
className="cursor-pointer text-base-content"
>
-
+
diff --git a/Frontend/components/Modals/ModalPasswordReset.tsx b/Frontend/components/Modals/ModalPasswordReset.tsx
index a2a5167..91de071 100644
--- a/Frontend/components/Modals/ModalPasswordReset.tsx
+++ b/Frontend/components/Modals/ModalPasswordReset.tsx
@@ -5,6 +5,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
import { signInValidationSchema } from "@/utils/form";
import { toast } from "react-toastify";
import pb from "@/lib/pocketbase";
+import {Dismiss20Filled} from '@fluentui/react-icons'
function ModalPasswordReset() {
const {
@@ -57,7 +58,7 @@ function ModalPasswordReset() {
htmlFor="password-reset-modal"
className="cursor-pointer text-base-content"
>
-
+
diff --git a/Frontend/components/Modals/ModalSignIn.tsx b/Frontend/components/Modals/ModalSignIn.tsx
index ac090d4..d0537ca 100644
--- a/Frontend/components/Modals/ModalSignIn.tsx
+++ b/Frontend/components/Modals/ModalSignIn.tsx
@@ -8,6 +8,7 @@ import { signInValidationSchema } from "@/utils/form";
import { login } from "@/app/actions";
import { toast } from "react-toastify";
import { useRouter } from "next/navigation";
+import {Dismiss20Filled} from '@fluentui/react-icons'
function ModalSignIn() {
const router = useRouter();
@@ -63,7 +64,7 @@ function ModalSignIn() {
htmlFor="sign-in-modal"
className="cursor-pointer text-base-content"
>
-
+
diff --git a/Frontend/components/Modals/ModalSignUp.tsx b/Frontend/components/Modals/ModalSignUp.tsx
index 61b58f4..b9d11c9 100644
--- a/Frontend/components/Modals/ModalSignUp.tsx
+++ b/Frontend/components/Modals/ModalSignUp.tsx
@@ -1,7 +1,6 @@
"use client";
import React, { Dispatch, SetStateAction } from "react";
-import Icon from "@/components/Icons/Icon";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { signUpValidationSchema } from "@/utils/form";
@@ -11,6 +10,7 @@ import { createCheckoutSession, login } from "@/app/actions";
import { toast } from "react-toastify";
import { Price, User } from "@/types";
import { useRouter } from "next/navigation";
+import {Dismiss20Filled} from '@fluentui/react-icons'
function ModalSignUp({
setUser,
@@ -124,7 +124,7 @@ function ModalSignUp({
reset();
}}
>
-
+
diff --git a/Frontend/components/Navigation.tsx b/Frontend/components/Navigation.tsx
index e0cb0bd..13cca7d 100644
--- a/Frontend/components/Navigation.tsx
+++ b/Frontend/components/Navigation.tsx
@@ -3,7 +3,7 @@
import Logo from "@/components/Logo";
import React, { useState } from "react";
import Link from "next/link";
-import Icon from "@/components/Icons/Icon";
+import {Navigation24Filled} from "@fluentui/react-icons"
function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
const [checked, setChecked] = useState();
@@ -27,7 +27,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
htmlFor="my-drawer-3"
className="items-center"
>
-
+
diff --git a/Frontend/components/PriceCard.tsx b/Frontend/components/PriceCard.tsx
index 6615583..d50fd78 100644
--- a/Frontend/components/PriceCard.tsx
+++ b/Frontend/components/PriceCard.tsx
@@ -4,7 +4,7 @@ import { Price, Product, SourceModal } from "@/types";
import { createCheckoutSession, isAuthenticated } from "@/app/actions";
import { toast } from "react-toastify";
import { useRouter } from "next/navigation";
-import Icon from "@/components/Icons/Icon";
+import {CheckmarkCircle24Filled } from "@fluentui/react-icons"
export default function PriceCard({
product,
@@ -84,7 +84,7 @@ export default function PriceCard({
{product?.metadata?.benefits?.map((x, i) => (
-
-
+
{x}
diff --git a/Frontend/sections/Features/SolidBackgrondIconFeature.tsx b/Frontend/sections/Features/SolidBackgrondIconFeature.tsx
index 61305e4..5061352 100644
--- a/Frontend/sections/Features/SolidBackgrondIconFeature.tsx
+++ b/Frontend/sections/Features/SolidBackgrondIconFeature.tsx
@@ -1,6 +1,7 @@
import React from "react";
import Image from "next/image";
import Icon from "@/components/Icons/Icon";
+import { Library32Filled } from "@fluentui/react-icons";
function SolidBackgrondIconFeature() {
return (
@@ -61,7 +62,7 @@ function SolidBackgrondIconFeature() {
href="#"
>
-
+
diff --git a/Frontend/sections/Hero/SquaredBackgroundHero.tsx b/Frontend/sections/Hero/SquaredBackgroundHero.tsx
index 6ee2ebb..03736ec 100644
--- a/Frontend/sections/Hero/SquaredBackgroundHero.tsx
+++ b/Frontend/sections/Hero/SquaredBackgroundHero.tsx
@@ -51,232 +51,16 @@ const SquaredBackgroundHero = () => {
{/* End Buttons */}
- {/* HIDDEN Review */}
-
- {/* Review */}
-
-
-
-
-
-
-
-
-
- 4.6 /5 - from 12k
- reviews
-
-
- {/* Star */}
-
- {/* End Star */}
-
-
- {/* End Review */}
- {/* Review */}
-
-
-
-
-
-
-
-
-
- 4.8 /5 - from 5k
- reviews
-
-
- {/* Star */}
-
- {/* End Star */}
-
-
- {/* End Review */}
-
- {/* End Review */}
{/* End Col */}