Feat/#151 button

apps/core/app/(landing)/_components/desktop-navbar/search-bar.tsx

@@ -50,3 +50,6 @@ const Searchbar = forwardRef<RefSearchHandle, SearchBarProps>((props, ref) => {
 Searchbar.displayName = "SearchBar";
 
 export default Searchbar;
+
+
+

apps/core/app/(landing)/become-auther/_components/auther-form.tsx

@@ -105,7 +105,7 @@ const AutherForm = () => {
             <div>
               <Button
                 type="submit"
-                variant="outline"
+                // variant="outline"
                 className="w-full bg-primary-600"
                 isLoading={mutation.isPending}
               >

apps/core/app/(landing)/product/[id]/_components/comment-section.tsx

@@ -35,7 +35,7 @@ const CommentSection = () => {
           </div>
           <div className="">
             <Button
-              variant="default"
+              // variant="default"
               className="bg-primary-600 text-foreground w-40 text text-lg font-medium"
             >
               login{" "}

apps/core/app/(landing)/product/[id]/_components/product-footer.tsx

@@ -48,13 +48,15 @@ const ProductFooter = () => {
           {/* button */}
           <div className=" flex gap-2 items-center">
             <Button
-              variant="default"
+              // variant="default"
               className="bg-primary-600 text-foreground py-4 "
             >
               Buy Now
               <Shopingcartplusicon size={24} className=" ml-2" />
             </Button>
-            <Button variant="default" className="py-4 ">
+            <Button 
+            // variant="default"
+             className="py-4 ">
               Preview
             </Button>
           </div>

apps/core/app/(landing)/product/[id]/page.tsx

@@ -53,13 +53,15 @@ const OverLay = () => {
 
       <div className="flex  gap-2">
         <Button
-          variant="default"
+          // variant="default"
           className="bg-primary-600 hover:bg-primary-500 text-foreground h-auto py-4 w-36"
         >
           Buy Now <Shopingcartplusicon size={24} className="ml-2" />
         </Button>
 
-        <Button variant="default" className="w-36 h-auto !py-4">
+        <Button 
+        // variant="default" 
+        className="w-36 h-auto !py-4">
           Preview{" "}
         </Button>
 

apps/core/app/(landing)/product/test/page.tsx

@@ -53,13 +53,15 @@ const OverLay = () => {
 
       <div className="flex  gap-2">
         <Button
-          variant="default"
+          // variant="default"
           className="bg-primary-600 text-foreground h-auto py-4 w-36"
         >
           Buy Now <Shopingcartplusicon size={24} className="ml-2" />
         </Button>
 
-        <Button variant="default" className="w-36 h-auto !py-4">
+        <Button 
+        // variant="default" 
+        className="w-36 h-auto !py-4">
           Preview{" "}
         </Button>
 

apps/core/app/(t)/test/page.tsx

@@ -0,0 +1,10 @@
+import { Button } from '@repo/ui/components/button'
+import React from 'react'
+
+export default function Page() {
+  return (
+    <div>
+        <Button isLoading size={'sm'}>Hello mmmmmm</Button>
+    </div>
+  )
+}

apps/core/app/auth/forget-password/_components/form/forgetPasswordForm.tsx

@@ -48,8 +48,8 @@ const ForgetPasswordForm = () => {
       <Button
         isLoading={mutation.isPending}
         type="submit"
-        className="w-full mt-5 text-lg font-normal bg-primary-600 hover:bg-primary-500"
-        variant="secondary"
+        className="w-full mt-5 text-sm font-normal bg-primary text-foreground"
+        variant="primary"
       >
         Reset
       </Button>

apps/core/app/auth/login/_components/form/loginForm.tsx

@@ -78,11 +78,11 @@ const LoginForm = () => {
       </div>
       {/* Button */}
       <Button
-        size="lg"
+        size="md"
         isLoading={loginMutation.isPending}
         type="submit"
-        className="flex w-[100%] text-lg font-bold bg-primary-600 hover:bg-primary-500"
-        variant="secondary"
+        className="flex w-[100%] text-base font-normal bg-primary text-foreground "
+        variant="primary"
       >
         Login
       </Button>

apps/core/app/auth/login/page.tsx

@@ -1,27 +1,30 @@
 import Link from "next/link";
 
 // import components
-import { Button } from "@repo/ui/components/button";
 import AuthCard from "../_components/auth-card";
 
 // import icons
-import GoogleIcon from "../../../../../packages/icons/src/components/google";
-import LinkedinIcon from "../../../../../packages/icons/src/components/linkedin";
 import { LoginForm } from "./_components/form/loginForm";
 
 const LoginPage = () => {
   return (
     <AuthCard>
-      <p className="text-2xl font-bold">Log in to your account</p>
+      <div className="flex flex-col gap-1 items-center pb-5">
+        <p className="text-2xl font-bold">Log in to your account</p>
+        <p className="text-sm font-normal">
+          Log in to explore, manage, and enjoy all the features.
+        </p>
+      </div>
+
       <LoginForm />
       {/* line  */}
-      <div className="flex items-center w-full gap-3">
+      {/* <div className="flex items-center w-full gap-3">
         <div className="w-full h-[1px] bg-gray-700 rounded-full" />
         <p className="text-base font-medium">OR</p>
         <div className="w-full h-[1px] bg-gray-700 rounded-full" />
-      </div>
+      </div> */}
       {/* login with google and linkedin */}
-      <div className="w-full flex flex-col items-center gap-3">
+      {/* <div className="w-full flex flex-col items-center gap-3">
         <Button
           className="w-full text-lg bg-[#181818]"
           variant="secondary"
@@ -38,7 +41,7 @@ const LoginPage = () => {
           <LinkedinIcon size={24} className="mr-2" />
           Log in with linkedin
         </Button>
-      </div>
+      </div> */}
       {/* forgot password */}
       <div className=" flex gap-2 pb-4 text-sm">
         <p>Don’t have an account?</p>

apps/core/app/auth/otp/page.tsx

@@ -12,22 +12,26 @@ import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
 import AuthCard from "../_components/auth-card";
 import { Countdown } from "@repo/ui/components/countdown";
 import Link from "next/link";
+import { AttachmentLanding } from "@repo/ui/components/attachment/attachmentLanding/attachmentLanding";
 
 const Otppage = () => {
   return (
     <AuthCard>
       {/* logo */}
-      <div className=" pt-7 flex flex-col items-center gap-4">
+      <div className="flex flex-col items-center gap-4">
         <div className="flex flex-col items-center gap-2">
-          <p className="text-center">
+          <p className="text-2xl font-bold">Email Verification</p>
+          <p className="text-center text-sm font-normal">
             We've sent the code to{" "}
-            <span className="underline">example@pixel.design</span>
+            <span className="underline text-sm font-normal">
+              example@pixel.design
+            </span>
           </p>
-          <p>check your email</p>
+          <p className="text-sm font-normal">check your email</p>
         </div>
       </div>
       {/* otp input */}
-      <div>
+      <div className="pb-6">
         <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
           <InputOTPGroup>
             <InputOTPSlot index={0} />
@@ -38,20 +42,19 @@ const Otppage = () => {
             <InputOTPSlot index={5} />
           </InputOTPGroup>
         </InputOTP>
-
       </div>
 
       {/* button */}
-      <div className="pb-7 w-full">
+      <div className=" w-full">
         <Button
-          className="w-full text-lg font-bold  bg-primary-600 hover:bg-primary-500"
-          variant="secondary"
+          className="w-full text-sm font-normal bg-primary text-foreground"
+          variant="primary"
         >
           Verify{" "}
         </Button>
       </div>
-      <div className="pb-7">
-        <p>
+      <div className="pb-4">
+        <p className="text-xs font-base text-foreground">
           didnt recieved code yet? <Countdown date={Date.now() + 120000} />
         </p>
       </div>

apps/core/app/auth/set-password/page.tsx

@@ -65,66 +65,72 @@ const Setpasswordpage = () => {
   return (
     <AuthCard>
       {/* logo */}
-      <div className="pt-7 flex flex-col items-center gap-4">
+      <div className="flex flex-col items-center gap-4">
         <div className="flex flex-col items-center gap-2">
-          <p className="text-center text-2xl font-bold">Set your Password</p>
-          <p className="text-center">
+          <p className="text-2xl font-bold">Set your Password</p>
+          <p className="text-center text-sm font-normal">
             We've sent the code to{" "}
-            <span className="underline mr-1">{username}</span>
-            check your email
+            <span className="underline text-sm font-normal">
+              example@pixel.design
+            </span>
           </p>
+          <p className="text-sm font-normal">check your email</p>
         </div>
       </div>
       {/* otp input */}
       <form
-        className="w-full flex flex-col items-center gap-4"
+        className="w-full flex flex-col items-center "
         onSubmit={handleSubmit(handleSubmitForm)}
       >
-        <InputOTP
-          maxLength={6}
-          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
-          name={otpRegister.name}
-          onChange={(value: string) => {
-            setValue("otp", value);
-          }}
-        >
-          <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-            <InputOTPSlot index={2} />
-            <InputOTPSlot index={3} />
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-          </InputOTPGroup>
-        </InputOTP>
-        <span className="text-xs text-error-400">{errors.otp?.message}</span>
+        <div className="pb-4">
+          <InputOTP
+            maxLength={6}
+            pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+            name={otpRegister.name}
+            onChange={(value: string) => {
+              setValue("otp", value);
+            }}
+          >
+            <InputOTPGroup>
+              <InputOTPSlot index={0} />
+              <InputOTPSlot index={1} />
+              <InputOTPSlot index={2} />
+              <InputOTPSlot index={3} />
+              <InputOTPSlot index={4} />
+              <InputOTPSlot index={5} />
+            </InputOTPGroup>
+          </InputOTP>
+          <span className="text-xs text-error-400">{errors.otp?.message}</span>
+        </div>
 
         {/* input */}
-        <Input
-          label="Password"
-          type="password"
-          className="font-normal text-xs text-gray-500"
-          placeholder="********"
-          {...register("newPassword")}
-          error={errors.newPassword?.message}
-        />
-        <Input
-          label="Confirm Password"
-          type="password"
-          className="font-normal text-xs text-gray-500"
-          placeholder="********"
-          {...register("confirmPassword")}
-          error={errors.confirmPassword?.message}
-        />
-        {/* button reset */}
-        <div className="pb-7 w-full">
-          <Button
-            isLoading={mutation.isPending}
-            className="w-full text-lg font-bold  bg-primary-600 hover:bg-primary-500"
-            variant="secondary"
-          >
-            Reset
-          </Button>
+        <div className="w-full flex flex-col gap-5">
+          <Input
+            label="Password"
+            type="password"
+            className="font-normal text-xs text-gray-500"
+            placeholder="********"
+            {...register("newPassword")}
+            error={errors.newPassword?.message}
+          />
+          <Input
+            label="Confirm Password"
+            type="password"
+            className="font-normal text-xs text-gray-500"
+            placeholder="********"
+            {...register("confirmPassword")}
+            error={errors.confirmPassword?.message}
+          />
+          {/* button reset */}
+          <div className="pb-7 w-full">
+            <Button
+              isLoading={mutation.isPending}
+              className="w-full text-sm font-bold bg-primary text-foreground"
+              variant="primary"
+            >
+              Reset
+            </Button>
+          </div>
         </div>
       </form>
     </AuthCard>

apps/core/app/auth/signup/otp/_components/signup-otp-form.tsx

@@ -2,9 +2,9 @@
 "use client";
 import { Button } from "@repo/ui/components/button";
 import {
-    InputOTP,
-    InputOTPGroup,
-    InputOTPSlot,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
 } from "@repo/ui/components/input-otp";
 import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
 
@@ -96,15 +96,15 @@ export const SignupOtpForm = (props: SignupOtpFormProps) => {
       <div className="pb-7 w-full">
         <Button
           className="w-full text-lg font-bold  bg-primary-600 hover:bg-primary-500"
-          variant="secondary"
+          variant="primary"
           isLoading={muutation.isPending}
         >
           Verify
         </Button>
       </div>
       <div className="pb-7">
         <p>
-          didnt recieved code yet? <Countdown date={Date.now() + 120000} />
+          didnt recieveddqqdqdqdqdqdqdqdqdq code yet? <Countdown date={Date.now() + 120000} />
         </p>
       </div>
     </form>