Merge pull request #26 from tcet-opensource/25-UI-Micro-Changes

25 UI micro changes

src/components/CopyToClipboard.tsx

@@ -1,29 +1,32 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import useOnClickOutside from "../hooks/useOnClickOutside";
 
 const CopyToClipboard: React.FC<{
   text: string;
 }> = ({ text }) => {
+  const [showContent, setShowContent] = useState<boolean>(false);
   const copyToClipboard = () => {
     navigator.clipboard.writeText(text);
-    dialog.current?.show();
-    dialog.current.style.display = "flex";
+    // dialog.current?.show();
+    // dialog.current.style.display = "flex";
+    setShowContent(true);
+
+    setTimeout(() => {
+      setShowContent(false);
 
-    const timer = setTimeout(() => {
-      dialog.current.style.display = "none";
-      dialog.current?.close();
     }, 2000);
 
+
     // clearTimeout(timer)
   };
 
-  const dialog = useRef<HTMLDialogElement>(null);
+  // const dialog = useRef<HTMLDialogElement>(null);
 
-  useOnClickOutside(dialog, () => {
-    console.log("clickng outside");
-    dialog.current.style.display = "none";
-    dialog.current?.close();
-  });
+  // useOnClickOutside(dialog, () => {
+  //   console.log("clickng outside");
+  //   dialog.current.style.display = "none";
+  //   dialog.current?.close();
+  // });
 
   return (
     <button
@@ -33,7 +36,9 @@ const CopyToClipboard: React.FC<{
     "
       onClick={copyToClipboard}
     >
-      <svg
+      {showContent ? (<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M16.6673 5L7.50065 14.1667L3.33398 10" stroke="#D0D5DD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>) : (<svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
@@ -46,14 +51,15 @@ const CopyToClipboard: React.FC<{
           strokeLinejoin="round"
           d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
         />
-      </svg>
-      <dialog
+      </svg>)
+      }
+      {/* <dialog
         ref={dialog}
         className="top-3 sm:left-56  w-max items-center rounded-lg h-4 bg-white bg-opacity-60 "
       >
         <p className="">Copied to clipboard</p>
-      </dialog>
-    </button>
+      </dialog> */}
+    </button >
   );
 };
 

src/components/DownloadSection.astro

@@ -3,11 +3,11 @@
 
 <div
   id="download"
-  class="w-full bg-slate-800 relative overflow-x-hidden px-10 lg:px-12"
+  class="w-full px-5 md:px-16 bg-slate-800 relative overflow-x-hidden "
 >
   <div class="downloadSectionGradient pointer-events-none"></div>
-  <div class="md:grid md:grid-cols-2">
-    <div class="text-content mx-5 lg:mx-10 my-10 sm:my-20 z-10">
+  <div class="md:grid md:grid-cols-2 ">
+    <div class="text-content  my-10 sm:my-20 z-10">
       <div class="text-white font-semibold text-4xl lg:text-6xl mb-4 lg:mb-9">
         Downloads
       </div>
@@ -19,15 +19,15 @@
         class="btns flex flex-row flex-wrap items-center gap-4 md:gap-5 text-white mt-4"
       >
         <a
-          class="flex flex-row bg-blue-900 w-fit py-3 px-5 cursor-pointer gap-5 items-center justify-center rounded-full border-custom-w border-custom-border-color hover:bg-blue-500 font-semibold text-base"
+          class="inline-flex h-12 text-white bg-[#01105F] shadow-base shadow-sky-500 border-sky-500 border-y-2 py-2 px-6 focus:outline-none rounded-3xl text:base md:text-lg hover:bg-blue-700"
           href="https://github.com/tcet-opensource/tcet-linux/releases/download/v0.5-beta/tcetlinux-2023.05.05-x86_64.iso"
         >
           Download
-          <img class="w-full h-full" src="images/download-icon.svg" alt="" />
+          <img class="w-full h-full pl-3" src="images/download-icon.svg" alt="" />
         </a>
         <a
           href="https://github.com/tcet-opensource/tcet-linux/releases/download/v0.5-beta/checksum"
-          class="flex flex-row w-max h-fit p-2 px-4 cursor-pointer gap-2 items-center justify-center border rounded-full border-white hover:bg-blue-50 hover:bg-opacity-20 text-white"
+          class="flex flex-row w-fit h-12 p-2 px-4 cursor-pointer  gap-2 items-center justify-center border rounded-full border-white hover:bg-blue-50 hover:bg-opacity-20 text-white"
           id="req-btn"
         >
           <span class="md:font-semibold">Checksum</span>
@@ -58,7 +58,7 @@
       class="image-content hidden md:flex items-center align-middle justify-center z-10"
     >
       <img
-        class="w-60 h-40 lg:w-96 lg:h-80"
+        class="w-60 h-40 lg:w-96 lg:h-80 ml-6"
         src="images/man-with-laptop.png"
         alt=""
       />
@@ -73,4 +73,4 @@
     Atleast 2GB DDR3/DDR4 RAM.
     Atleast 10GB HDD/SSD storage. (Although installer will allow min 5.5GB)
     Basic WPA/WPA2 compatible wifi card or ethernet supported motherboard.
- -->
+ -->

src/components/Hero.astro

@@ -5,9 +5,9 @@ import Layout from "../layouts/Layout.astro";
 
 <div>
   <!-- <hr><hr> -->
-  <section class="text-gray-600 body-font bg-[#101828]">
+  <section class="text-gray-600 body-font bg-[#101828] py-5 px-5 md:px-16">
     <div
-      class="w-11/12 mx-auto flex md:py-16 py-5 md:flex-row flex-col pb-5 items-center"
+      class="w-full  mx-auto flex md:flex-row flex-col items-center"
     >
       <div
         class="absolute z-30 py-0 left-0 w-80 h-96 bg-gradient-to-r from-teal-100 via-indigo-500 to-pink-100 opacity-30 blur-3xl flex-none order-4 rounded-xl transform -rotate-45 pointer-events-none"
@@ -29,16 +29,16 @@ import Layout from "../layouts/Layout.astro";
           Powered by Arch Linux & the TCET Open Source Community, TCET Linux the
           the premier operating system for engineering education in TCET Mumbai.
         </p>
-        <div class="flex items-center gap-2 md: gap-4">
+        <div class="flex items-center gap-2 md:gap-4">
           <div class="flex justify-center h-min">
             <a
-              class="inline-flex text-white bg-[#01105F] shadow-base shadow-sky-500 border-sky-500 border-y-2 py-2 px-6 focus:outline-none rounded-3xl text:base md:text-lg hover:bg-blue-700"
+              class="inline-flex text-white h-12 bg-[#01105F] shadow-base shadow-sky-500 border-sky-500 border-y-2 py-2 px-6 focus:outline-none rounded-3xl text:base md:text-lg hover:bg-blue-700"
               href="https://www.youtube.com/watch?v=8kL1NEtSIi4"
               target="_blank">Explore</a
             >
           </div>
           <button
-            class="flex flex-row w-fit p-2 px-4 cursor-pointer  gap-2 items-center justify-center border rounded-full border-white hover:bg-blue-50 hover:bg-opacity-20 text-white"
+            class="flex flex-row w-fit p-2 h-12 px-4 cursor-pointer  gap-2 items-center justify-center border rounded-full border-white hover:bg-blue-50 hover:bg-opacity-20 text-white"
             id="req-btn"
           >
             <span class=" h-6 md:font-semibold">Requirements</span>
@@ -59,12 +59,13 @@ import Layout from "../layouts/Layout.astro";
         >
         </div>
         <div class="z-50 flex align-middle rounded-xl m-2">
-          <img class="w-full object-contain" src="image 1.png" />
+          <img class="w-full object-contain ml-12" src="image 1.png" />
         </div>
       </div>
     </div>
   </section>
-  <dialog id="requirements" class="w-5/6 md:w-3/4 lg:w-2/4 p-0 rounded-xl bg-[#0e1624] text-white "  >
+  <dialog id="requirements" class="w-5/6 md:w-3/4 lg:w-2/4 p-0 rounded-xl bg-[#293b5c] text-white opacity-3" >
+
     <div id="inside-req" class="p-6 lg:p-8 w-full h-full space-y-2">
       <div class="flex justify-between " >
         <h1 class="text-2xl font-title font-semibold">Requirements</h1>

src/components/InstallationSteps.jsx

@@ -9,7 +9,7 @@ import installationImage from "../assets/image 15.png";
 import finishImage from "../assets/image 16.png";
 function InstallationSteps() {
   const [imageFirst, setImageFirst] = useState(welcomeImage);
-  const [imageSecond, setImageSecond] = useState(welcomeImage);
+  const [imageSecond, setImageSecond] = useState(userImage);
   const installationStepsFirstSet = [
     {
       id: 1,
@@ -71,9 +71,9 @@ function InstallationSteps() {
     },
   ];
   return (
-    <div id="installation" className="overflow-hidden bg-[#101828] py-4 px-4 lg:px-12">
+    <div id="installation" className=" px-5 md:px-16 overflow-hidden bg-[#101828]">
       <div className="">
-        <div className="py-12 px-6 w-full h-full flex flex-col-reverse xl:flex-row md:flex-row">
+        <div className="py-12  w-full h-full flex flex-col-reverse xl:flex-row md:flex-row">
           <div className="w-full xl:w-1/2 relative">
             <p className="text-[#6172F3] font-bold">INSTALLATION GUIDE</p>
             <p className="font-title text-[#FCFCFD] text-2xl md:text-4xl pt-2 pb-2">
@@ -110,7 +110,7 @@ function InstallationSteps() {
         </div>
       </div>
       <div className="">
-        <div className="px-6 pb-12 xl:pt-12 md:pt-12 sm:pt-0 w-full h-full flex flex-col xl:flex-row md:flex-row">
+        <div className=" pb-12 xl:pt-12 md:pt-12 sm:pt-0 w-full h-full flex flex-col xl:flex-row md:flex-row">
           <div className="relative w-full flex justify-center align-middle xl:w-1/2">
             <div className="absolute z-30 top-5 w-48 h-52 xl:w-[600px] xl:h-[450px] bg-[#98A2B3] opacity-30 blur-2xl flex-none order-4 rounded-full"></div>
             <div className="z-50 flex align-middle rounded-xl m-2">
@@ -123,7 +123,7 @@ function InstallationSteps() {
               TCET Linux Installation Steps
             </p>
             <div className="absolute z-30 top-20 right-0 w-48 h-52 bg-gradient-to-r from-teal-100 via-indigo-500 to-pink-100 opacity-30 blur-2xl flex-none order-4 rounded-full transform rotate-45"></div>
-            <div onMouseLeave={() => setImageSecond(welcomeImage)}>
+            <div onMouseLeave={() => setImageSecond(userImage)}>
               {installationStepsSecondSet.map((step) => (
                 <div
                   className="pt-6 cursor-pointer"

src/components/VerifyDownloads.astro

@@ -28,29 +28,27 @@ const stepOne = [
 ];
 ---
 
-<div id="verify" class="bg-[#101828] p-4 px-10 lg:px-20">
+<div id="verify" class="w-full bg-[#101828] block px-5 md:px-16">
   <p
     class="font-title text-center text-[#FCFCFD] text-2xl md:text-4xl pt-2 pb-2"
   >
     Verify Your Download
   </p>
   <div class="pt-4">
     <div class="bg-[#1D2939] w-fit m-4 p-2 rounded-2xl">
-      <p class="text-[#FFFFFF] w-max ">Steps 1:</p>
+      <p class="text-[#FFFFFF] w-max">Steps 1:</p>
     </div>
     <div class="flex mt-6 flex-col xl:flex-row md:flex-row">
       {
         stepOne.map((step) => (
-          <div  class="m-4 rounded-2xl  mt-2 mb-2 bg-[#1D2939]">
+          <div class="m-4 rounded-2xl  mt-2 mb-2 bg-[#1D2939]">
             <div class="p-4 rounded-t-xl">
               <p class="font-title text-[#FCFCFD] text-xl md:text-2xl pt-2 pb-2">
                 {step.nameOfOS}
               </p>
               <p class="text-[#E4E7EC]">{step.description}</p>
             </div>
-            <div
-              class="w-full relative mt-2  overflow-hidden"              
-            >
+            <div class="w-full relative mt-2  overflow-hidden">
               <div class="absolute top-0 left-0 verifyDownloadGradient h-20 w-full" />
               <span class="w-full h-fit flex justify-around align-middle p-3 ">
                 <p class="text-[#E4E7EC] flex-1 mt-1 break-all">
@@ -83,21 +81,19 @@ const stepOne = [
         {
           /* bg-gradient-to-r from-teal-100 via-indigo-500 to-pink-300 opacity-100 rounded-b-xl */
         }
-        <div
-          class="w-full relative mt-2  overflow-hidden rounded-b-xl"          
-        >
+        <div class="w-full relative mt-2 overflow-hidden rounded-b-xl">
           <div
-            class="absolute top-0 left-0 bg-gradient-to-r from-teal-100 via-indigo-500 to-pink-300 rounded-b-xl h-24 w-full opacity-50 blur-lg
-            pointer-events-none"
+            class="absolute top-0 left-0 bg-gradient-to-r from-teal-100 via-indigo-500 to-pink-300 rounded-b-xl h-24 w-full opacity-50 blur-lg pointer-events-none"
           >
           </div>
-          <span
-            class="z-20 w-full h-auto flex justify-around align-middle p-3 "
-          >
+          <span class="z-20 w-full h-auto flex justify-around align-middle p-3">
             <p class="text-[#E4E7EC] flex-1 mt-1 break-all">
               cb9257aea691441a0a7c628b8cc199d7746220651daf035d261c6670ac1a2f49
             </p>
-            <CopyToClipboard client:load text={"cb9257aea691441a0a7c628b8cc199d7746220651daf035d261c6670ac1a2f49"} />
+            <CopyToClipboard
+              client:load
+              text={"cb9257aea691441a0a7c628b8cc199d7746220651daf035d261c6670ac1a2f49"}
+            />
           </span>
         </div>
       </div>
@@ -107,9 +103,11 @@ const stepOne = [
     <div class="flex bg-[#1D2939] border-2 border-[#344054] rounded-xl m-4 p-4">
       <img src={infoIconImg} class="w-4 h-4 object-contain mt-1" />
       <p class="text-[#D0D5DD] ml-2">
-        IMAGE is <code>iso-name.iso</code> in <b>step 1</b>. It is the file that you have downloaded. Verification 
-        is done to check the authenticity of the file you have downloaded. Large files may get corrupted in the 
-        download process. TCET Linux team provides a new checksum for every new release of the operating system.
+        IMAGE is <code>iso-name.iso</code> in <b>step 1</b>. It is the file that
+        you have downloaded. Verification is done to check the authenticity of
+        the file you have downloaded. Large files may get corrupted in the
+        download process. TCET Linux team provides a new checksum for every new
+        release of the operating system.
       </p>
     </div>
   </div>

src/pages/index.astro

@@ -7,7 +7,7 @@ import Hero from "../components/Hero.astro";
 ---
 
 <Layout title="TCET Linux" description="Arch Linux based x86_64 GNU/Linux Operating System for TCET Mumbai. Enhance your computing experiance with TCET Linux." >
-	<main class="flex	 flex-col" >
+	<main class="flex  flex-col bg-[#101828]" >
 		<!-- <h1 class="font-title" >TCET-Linux</h1> -->
 		<Hero />
 		<DownloadSection />

yarn.lock

@@ -121,13 +121,6 @@
   dependencies:
     undici "^5.22.0"
 
-"@astrojs/webapi@^2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@astrojs/webapi/-/webapi-2.1.1.tgz#965bcc35a72ca40e60e1ed4c2e4350f215bee179"
-  integrity sha512-mHZ7VgPNMeV3TYIw3SGHTKaJosBxA8bTzZ3QhNw509qvCJca4Lkjes8JywimuwTn+TMjEiv7ksNfwRluad3jqA==
-  dependencies:
-    undici "^5.22.0"
-
 "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.21.4":
   version "7.21.4"
   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz"
@@ -1371,11 +1364,7 @@ [email protected]:
 
 esbuild@^0.15.18:
   version "0.15.18"
-<<<<<<< HEAD
-  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz"
-=======
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.18.tgz#ea894adaf3fbc036d32320a00d4d6e4978a2f36d"
->>>>>>> a287bf4dda6cc76ac9115196297280e103479aa7
   integrity sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==
   optionalDependencies:
     "@esbuild/android-arm" "0.15.18"
@@ -3102,11 +3091,7 @@ shebang-regex@^3.0.0:
 
 shiki@^0.14.1:
   version "0.14.2"
-<<<<<<< HEAD
-  resolved "https://registry.npmjs.org/shiki/-/shiki-0.14.2.tgz"
-=======
   resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.2.tgz#d51440800b701392b31ce2336036058e338247a1"
->>>>>>> a287bf4dda6cc76ac9115196297280e103479aa7
   integrity sha512-ltSZlSLOuSY0M0Y75KA+ieRaZ0Trf5Wl3gutE7jzLuIcWxLp5i/uEnLoQWNvgKXQ5OMpGkJnVMRLAuzjc0LJ2A==
   dependencies:
     ansi-sequence-parser "^1.1.0"