refactor: revise mobile responsiveness code and modify project folder…

… sturcture
commune-ai · Mar 18, 2024 · 22c3c48 · 22c3c48 · cdreamer1 · Mar 23, 2024
1 parent c6abb0f
commit 22c3c48
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 255 deletions.
diff --git a/frontend/src/app/docs/bittensor/page.tsx b/frontend/src/app/docs/bittensor/page.tsx
@@ -2,7 +2,7 @@
 import BittensorItem from "@/components/molecules/bittensor/item";
 import { items } from "@/components/molecules/bittensor/item-date";
 
-export default function () {
+export default function DocsBittensor() {
     return (
         <main className="mt-[30px] my-auto mx-auto xl:w-[1400px] px-[20px] py-[50px]">
             <h2 className="text-[32px] font-bold text-left dark:text-white">

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -26,85 +26,85 @@ function WelcomeSection() {
             <span className="text-[#ffef40] dark:text-[#FFF7A1]">create</span>.
           </p>
         </div>
-        <div className="flex flex-row h-[500px] items-center justify-center px-3 gap-0 overflow-auto">
-          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg ">
+        <div className="grid grid-cols-7 h-[300px] lg:h-[500px] items-center justify-center px-3 gap-0">
+          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg">
             <a href="#blue" className="hover:no-underline">
               <Image
                 src="/gif/cubes/commune-single-block_blue.gif"
-                className="lg:w-[200px] lg:h-[200px] lg:hover:w-[300px] lg:hover:h-[300px]  duration-300"
+                className="w-[7rem] h-[7rem] md:w-[10rem] md:h-[10rem] lg:w-[15rem] lg:h-[15rem] hover:w-[25rem] hover:h-[25rem] duration-300"
                 alt='Image'
                 width={30}
                 height={30}
               />
             </a>
             <p>Networking &amp; Wrapping</p>
           </div>
-          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg ">
+          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg">
             <a href="#green" className="hover:no-underline">
               <Image
                 src="/gif/cubes/commune-single-block_green.gif"
                 alt='Image'
-                className="lg:w-[200px] lg:h-[200px] lg:hover:w-[300px] lg:hover:h-[300px]  duration-300"
+                className="w-[7rem] h-[7rem] md:w-[10rem] md:h-[10rem] lg:w-[15rem] lg:h-[15rem] hover:w-[25rem] hover:h-[25rem] duration-300"
                 width={30}
                 height={30}
               />
             </a>
             <p>Reusability</p>
           </div>
-          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg ">
+          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg">
             <a href="#yellow" className="hover:no-underline">
               <Image
                 src="/gif/cubes/commune-single-block_yellow.gif"
                 alt='Image'
-                className="lg:w-[200px] lg:h-[200px] lg:hover:w-[300px] lg:hover:h-[300px] duration-300"
+                className="w-[7rem] h-[7rem] md:w-[10rem] md:h-[10rem] lg:w-[15rem] lg:h-[15rem] hover:w-[25rem] hover:h-[25rem] duration-300"
                 width={30}
                 height={30}
               />
             </a>
             <p>Scalability</p>
           </div>
-          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg ">
+          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg">
             <a href="#red" className="hover:no-underline">
               <Image
                 alt='Image'
                 src="/gif/cubes/commune-single-block_red.gif"
-                className="lg:w-[200px] lg:h-[200px] lg:hover:w-[300px] lg:hover:h-[300px] duration-300"
+                className="w-[7rem] h-[7rem] md:w-[10rem] md:h-[10rem] lg:w-[15rem] lg:h-[15rem] hover:w-[25rem] hover:h-[25rem] duration-300"
                 width={30}
                 height={30}
               />
             </a>
             <p>Namespaces</p>
           </div>
-          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg ">
+          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg">
             <a href="#pink" className="hover:no-underline">
               <Image
                 alt='Image'
                 src="/gif/cubes/commune-single-block_purple.gif"
-                className="lg:w-[200px] lg:h-[200px] lg:hover:w-[300px] lg:hover:h-[300px]  duration-300"
+                className="w-[7rem] h-[7rem] md:w-[10rem] md:h-[10rem] lg:w-[15rem] lg:h-[15rem] hover:w-[25rem] hover:h-[25rem] duration-300"
                 width={30}
                 height={30}
               />
             </a>
             <p>Tokenomics</p>
           </div>
-          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg ">
+          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg">
             <a href="#black" className="hover:no-underline">
               <Image
                 alt='Image'
                 src="/gif/cubes/commune-single-block_gray.gif"
-                className="lg:w-[200px] lg:h-[200px] lg:hover:w-[300px] lg:hover:h-[300px]  duration-300"
+                className="w-[7rem] h-[7rem] md:w-[10rem] md:h-[10rem] lg:w-[15rem] lg:h-[15rem] hover:w-[25rem] hover:h-[25rem] duration-300"
                 width={30}
                 height={30}
               />
             </a>
             <p>Application Validators</p>
           </div>
-          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg ">
+          <div className="flex flex-col items-center justify-center text-transparent hover:dark:text-white hover:text-black duration-300 font-sans font-semibold text-lg">
             <a href="#white" className="hover:no-underline">
               <Image
                 alt='Image'
                 src="/gif/cubes/commune-single-block_white.gif"
-                className="lg:w-[200px] lg:h-[200px] lg:hover:w-[300px] lg:hover:h-[300px] duration-300"
+                className="w-[7rem] h-[7rem] md:w-[10rem] md:h-[10rem] lg:w-[15rem] lg:h-[15rem] hover:w-[25rem] hover:h-[25rem] duration-300"
                 width={30}
                 height={30}
               />
@@ -406,7 +406,7 @@ export default function Home() {
                   <div className=' mt-14 ml-14  bg-gray-100 rounded-lg w-[17rem] h-[17rem] border-2 border-yellow-500 border-solid shadow-xl px-3' />
                 </div>
               </div>
-              <p className="text-2xl font-semibold text-center mt-10">Want to read more? Check<br />out our whitepaper.</p>
+              <p className="text-2xl font-semibold text-center">Want to read more? Check<br />out our whitepaper.</p>
               <div className='flex justify-center rounded-xl lg:mb-4'>
                 <a href='https://ai-secure.github.io/DMLW2022/assets/papers/7.pdf' className='hover:no-underline '>
                   <div className='w-[15rem] h-[3rem] flex flex-row gap-2 bg-[#FF8F8F] hover:bg-[#FF8F8F] dark:bg-[#FF8F8F] dark:hover:bg-[#fc9494] text-white text-xl font-bold py-2 px-4 mt-10 rounded-lg shadow-md hover:shadow-xl duration-300 '>

diff --git a/frontend/src/app/settings/profile/page.tsx b/frontend/src/app/settings/profile/page.tsx
@@ -49,7 +49,7 @@ const ProfileEditPage: React.FC = () => {
         </button>
     );
 
-    const Items = [
+    const items = [
         'Account',
         'Authentication',
         'Organizations',
@@ -103,7 +103,7 @@ const ProfileEditPage: React.FC = () => {
                         <span style={{ fontWeight: '500' }}>Profile</span>
                     </div>
                     {
-                        Items.map((item, index) => {
+                        items.map((item, index) => {
                             return <div key={index}>
                                 <div className="p-2 w-full cursor-pointer hover:bg-slate-400 hover:text-black">
                                     <span >{item}</span>
@@ -135,7 +135,7 @@ const ProfileEditPage: React.FC = () => {
                         {fileList.length >= 1 ? null : uploadButton}
                     </Upload>
                     <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
-                        <img alt="example" style={{ width: '100%' }} src={previewImage} />
+                        <Image alt="example" style={{ width: '100%' }} src={previewImage} />
                     </Modal>
 
                     <button className='gap-2 border-[rgb(229 231 235)] w-[20%] inline-flex cursor-pointer items-center justify-center rounded-[0.5rem] border-[1px] p-1 hover:scale-105' onClick={handleSaveUserProfile}>

diff --git a/...orkSpace/components/search-bar.module.css → ...ts/atoms/search-bar/search-bar.module.css b/...orkSpace/components/search-bar.module.css → ...ts/atoms/search-bar/search-bar.module.css
diff --git a/...c/app/workSpace/components/search-bar.tsx → ...omponents/atoms/search-bar/search-bar.tsx b/...c/app/workSpace/components/search-bar.tsx → ...omponents/atoms/search-bar/search-bar.tsx
diff --git a/...orkSpace/components/module-item/index.tsx → ...omponents/molecules/module-item/index.tsx b/...orkSpace/components/module-item/index.tsx → ...omponents/molecules/module-item/index.tsx
diff --git a/frontend/src/app/workSpace/CustomNode.tsx → ...Space/components/organisms/CustomNode.tsx b/frontend/src/app/workSpace/CustomNode.tsx → ...Space/components/organisms/CustomNode.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState, memo, FC } from 'react';
 import axios from "axios";
 import { NodeProps, NodeResizer } from 'reactflow';
-import ModuleItem, { ModuleItemPropsType } from "./components/module-item";
-import SearchBar from "./components/search-bar";
 import classes from "./modules.module.css";
+import SearchBar from "../atoms/search-bar/search-bar";
+import ModuleItem, { ModuleItemPropsType } from "../molecules/module-item";
 
 const CustomNode: FC<NodeProps> = () => {
 	const [searchString, setSearchString] = useState("");

diff --git a/frontend/src/app/workSpace/page.tsx b/frontend/src/app/workSpace/page.tsx
@@ -12,8 +12,8 @@ import ReactFlow, {
 	ConnectionLineType,
 	Background,
 } from 'reactflow';
-import CustomNode from './CustomNode';
 import styles from './Flow.module.css';
+import CustomNode from './components/organisms/CustomNode';
 
 const initialNodes: Node[] = [
 	{

diff --git a/...nd/src/components/substrate.component.tsx → ...ents/atoms/button/substrate.component.tsx b/...nd/src/components/substrate.component.tsx → ...ents/atoms/button/substrate.component.tsx
diff --git a/frontend/src/components/organisms/navbar/navigation-bar.tsx b/frontend/src/components/organisms/navbar/navigation-bar.tsx
@@ -127,88 +127,6 @@ export default function NavigationBar() {
 
 	const { data: hash, sendTransaction } = useSendTransaction()
 
-	//This Function must be used in Client side.
-	// 	const createBTCTx = async (toAddress: string, value: number, env: string, fromAddress: string) => {
-	// 		try {
-	// 			// const { toAddress, value, env, fromAddress } = data;
-	// 			const valueInSatoshi = value * 100000000;
-	// 			// console.log(valueInSatoshi);
-	// 			// console.log("Vivek bhai ",toAddress, value, env, fromAddress);
-	// 			if (!fromAddress || !toAddress || !value || !env) {
-	// 				return {
-	// 					code: 0,
-	// 					message: "invalid/insufficient parameters"
-	// 				}
-	// 			}
-	// 			let url;
-	// 			if (env == 'testnet') {
-	// 				url = 'https://api.blockcypher.com/v1/btc/test3/txs/new'
-	// 			}
-	// 			else if (env == 'mainnet') {
-	// 				url = 'https://api.blockcypher.com/v1/btc/main/txs/new'
-	// 			}
-	// 			else {
-	// 				return {
-	// 					code: 0,
-	// 					message: 'Invalid env'
-	// 				}
-	// 			}
-	// 			let data = JSON.stringify({
-	// 				"inputs": [
-	// 					{
-	// 						"addresses": [
-	// 							`${fromAddress}`  /* "n1TKu4ZX7vkyjfvo7RCbjeUZB6Zub8N3fN" */
-	// 						]
-	// 					}
-	// 				],
-	// 				"outputs": [
-	// 					{
-	// 						"addresses": [
-	// 							`${toAddress}` /* "2NCY42y4mbvJCxhd7gcCroBEvVh1dXkbPzA"
-	// */                    ],
-	// 						"value": valueInSatoshi
-	// 					}
-	// 				]
-	// 			});
-
-	// 			let config = {
-	// 				method: 'post',
-	// 				maxBodyLength: Infinity,
-	// 				url: 'https://api.blockcypher.com/v1/btc/test3/txs/new',
-	// 				headers: {
-	// 					'Content-Type': 'application/json'
-	// 				},
-	// 				data: data
-	// 			};
-
-	// 			const response = await axios.request(config)
-	// 				.then((response) => {
-	// 					// console.log("Tushar",JSON.stringify(response.data));
-	// 					return response;
-	// 				})
-	// 				.catch((error) => {
-	// 					console.log(error);
-	// 				});
-	// 			// console.log(response.status);
-	// 			if (response?.status != 201) {
-	// 				return {
-	// 					code: 0,
-	// 					message: response?.data?.error
-	// 				}
-	// 			}
-	// 			return {
-	// 				code: 1,
-	// 				result: response.data
-	// 			}
-	// 		} catch (error) {
-	// 			console.log('error generating btc tx', error);
-	// 			return {
-	// 				code: 0,
-	// 				message: error,
-	// 			};
-	// 		}
-	// 	}
-
 	const { data: txHashUSDT, write: paywithUSDT } = useContractWrite({
 		address: '0x28B3071bE7A6E4B3bE2b36D78a29b6e4DbBdDb74',
 		abi: erc20ABI,
@@ -279,7 +197,7 @@ export default function NavigationBar() {
 				<Disclosure as="nav" className="dark:bg-black shadow">
 					{({ open }) => (
 						<>
-							<div className="mx-auto px-4 md:px-0 lg:px-8">
+							<div className="mx-auto px-4 lg:px-8">
 								<div className="flex h-16 items-center justify-between">
 									<div className="flex items-center">
 										<Link className={classes.brand} href="/">
@@ -291,7 +209,7 @@ export default function NavigationBar() {
 												height={64}
 											/>
 										</Link>
-										<div className="hidden md:block">
+										<div className="hidden xl:block">
 											<div className="flex">
 												{navigation.map((item) => (
 													<a
@@ -310,7 +228,7 @@ export default function NavigationBar() {
 											</div>
 										</div>
 									</div>
-									<div className="hidden md:block">
+									<div className="hidden xl:block">
 										<div className="flex items-center">
 											<Menu as="div" className="relative ml-3">
 												<div>
@@ -416,9 +334,9 @@ export default function NavigationBar() {
 											</div>
 										</div>
 									</div>
-									<div className="-mr-2 flex md:hidden">
+									<div className="flex xl:hidden">
 										{/* Mobile menu button */}
-										<Disclosure.Button className="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:text-[#25c2a0]  focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+										<Disclosure.Button className="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:text-[#25c2a0] focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
 											<span className="absolute -inset-0.5" />
 											<span className="sr-only">Open main menu</span>
 											{open ? (
@@ -431,8 +349,8 @@ export default function NavigationBar() {
 								</div>
 							</div>
 
-							<Disclosure.Panel className="md:hidden">
-								<div className="space-y-1 px-2 pb-3 pt-2 sm:px-3">
+							<Disclosure.Panel className="xl:hidden">
+								<div className="space-y-1 pb-3 pt-2 px-3">
 									{navigation.map((item) => (
 										<Disclosure.Button
 											key={item.name}

diff --git a/frontend/src/components/templates/footer/footer.tsx b/frontend/src/components/templates/footer/footer.tsx
@@ -1,6 +1,6 @@
+import Image from "next/image";
 import Link from "next/link";
 import classes from "./footer.module.css";
-import Image from "next/image";
 import DiscordIcon from "@/components/atoms/discord-icon";
 import GitHubIcon from "@/components/atoms/github-icon";
 import TwitterIcon from "@/components/atoms/twitter-icon";