a lot of update wich include more mobile fixinge

No0ne003 · May 14, 2024 · e684113 · e684113
1 parent 685d5ea
commit e684113
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 9 deletions.
diff --git a/src/pages/CustomHooks/use-outside-click/test.jsx b/src/pages/CustomHooks/use-outside-click/test.jsx
@@ -8,11 +8,11 @@ const UseOnClickOutsideTest = () => {
   useOutsideClick(ref, () => setShowContent(false));
 
   return (
-    <div className="flex justify-center items-center">
+    <div className="flex justify-center items-center h-screen">
       {showContent ? (
         <div
           ref={ref}
-          className="w-[450px] bg-gr py-4 px-5 border-border border-2"
+          className="w-[400px] bg-gr py-4 px-5 border-border border-2"
         >
           <h1 className="text-xl font-bold mb-1">This is a random content</h1>
           <p>

diff --git a/src/pages/GithubProfileFinder/GithubProfileFinder.jsx b/src/pages/GithubProfileFinder/GithubProfileFinder.jsx
@@ -40,7 +40,7 @@ export const GithubProfileFinder = () => {
           value={userName}
           onChange={(event) => setUserName(event.target.value)}
         />
-        <Button onClick={handleSumbit} type='submit'>
+        <Button onClick={handleSumbit} disabled={userName ? false : true} type='submit'>
           Search
         </Button>
       </div>

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -1,4 +1,5 @@
 import { projects } from "@/data/projects";
+import { FaArrowRight, FaStar } from "react-icons/fa";
 import { Link } from "react-router-dom";
 
 function Home({ setCursorVariant }) {
@@ -23,10 +24,19 @@ function Home({ setCursorVariant }) {
   };
 
   return (
-    <main className="flex min-h-screen flex-col">
+    <main className="flex flex-col mb-32">
       <div className="landing relative mb-24 py-12 sm:py-16 lg:pt-20 xl:pb-0">
         <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col justify-end max-sm:h-[75vh]">
           <div className="mx-auto max-w-3xl text-center">
+            <div className="flex items-center gap-2 sm:hidden">
+              <div className="flex flex-col items-center gap-[1px]">
+                <div className="w-36 h-[1px] bg-primary" />
+                <div className="w-36 h-[1px] bg-primary" />
+                <div className="w-36 h-[1px] bg-primary" />
+              </div>
+              <FaStar className="text-primary relative -left-3" />
+              <p className="text-primary text-sm">Hello there</p>
+            </div>
             <h1 className="mt-5 text-6xl max-sm:text-start text-foreground leading-[1.1] sm:leading-sung">
               Discover Awesome React.js{" "}
               <span
@@ -45,7 +55,7 @@ function Home({ setCursorVariant }) {
         </div>
       </div>
 
-      <div className="sm:px-none mx-auto max-w-screen-lg flex flex-1 flex-col px-4">
+      <div className="sm:px-none mx-auto max-w-screen-lg flex flex-1 flex-col px-4 ">
         <div className="flex flex-col md:w-[1000px]">
           {renderProjectLinks()}
         </div>

diff --git a/src/pages/RandomColor.jsx b/src/pages/RandomColor.jsx
@@ -32,7 +32,7 @@ function RandomColor() {
       className={`container flex flex-1 flex-col items-center justify-start gap-8 my-10 w-full h-screen py-10`}
       style={{ background: color }}
     >
-      <div className="flex gap-7">
+      <div className="flex gap-7 flex-col sm:flex-row">
         <Button onClick={() => settypeOfColor("hex")}>Create HEX Color</Button>
         <Button onClick={() => settypeOfColor("rgb")}>Create RGB Color</Button>
         <Button

diff --git a/src/pages/ScrollToSection.jsx b/src/pages/ScrollToSection.jsx
@@ -37,7 +37,7 @@ const ScrollToSection = () => {
   }
 
   return (
-    <div className="flex flex-col justify-center items-center gap-4 my-10">
+    <div className="container flex flex-col justify-center items-center gap-4 my-10">
       <h1 className="text-3xl text-center">
         <span className="font-bold text-primary">Scroll</span> to a particular
         section
@@ -48,7 +48,7 @@ const ScrollToSection = () => {
           <div
             ref={index === 3 ? ref : null}
             key={index}
-            className={`rounded-md flex justify-center items-center w-full h-[600px] ${dataItem.style}`}
+            className={`rounded-md flex justify-center items-center w-full h-[350px] md:h-[600px] ${dataItem.style}`}
           >
             {" "}
             <h3 className="text-xl font-bold mix-blend-difference">

diff --git a/src/pages/accordion/accordion.jsx b/src/pages/accordion/accordion.jsx
@@ -28,7 +28,7 @@ export default function Accordion() {
       >
         Toggle Multi Selection
       </Button>
-      <div className="w-[80vw] md:w-[500px] bg-gr backdrop-blur-3xl border-border border-2 space-y-5 py-[15px] px-[10px]">
+      <div className="max-w-[500px] ackdrop-blur-3xl border-border border-2 space-y-5 py-[15px] px-[10px]">
         {data && data.length > 0 ? (
           data.map((dataItem) => (
             <div key={dataItem.id}>