fix tailwind error

JuanMarchetto · Apr 27, 2022 · 5559b71 · 5559b71
1 parent 4114daa
commit 5559b71
Show file tree

Hide file tree

Showing 6 changed files with 574 additions and 806 deletions.
diff --git a/app/package.json b/app/package.json
@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint --fix"
   },
   "dependencies": {
     "@project-serum/anchor": "^0.19.1-beta.1",
@@ -26,11 +26,11 @@
   },
   "devDependencies": {
     "@types/react": "17.0.34",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.5",
     "eslint": "7",
     "eslint-config-next": "12.0.3",
-    "postcss": "^8.3.11",
-    "tailwindcss": "^2.2.19",
+    "postcss": "^8.4.12",
+    "tailwindcss": "^3.0.24",
     "typescript": "4.4.4"
   }
 }
diff --git a/app/src/components/PostIts/index.tsx b/app/src/components/PostIts/index.tsx
@@ -31,22 +31,22 @@ export const SolanaPostItView: FC = ({ }) => {
 
   return (
     <>
-      <SolanaLogo />
-      <WalletMultiButton />
-      <button
-        className=" m-4 p-4 bg-green-500 text-white font-bold rounded"
-        onClick={airdropToWallet}
-      >
-        Airdrop 1 SOL to your test wallet
-      </button>
+      <nav>
+        <SolanaLogo />
+        <WalletMultiButton />
+        <button
+          className=" m-4 p-4 bg-green-500 text-white font-bold rounded"
+          onClick={airdropToWallet}
+        >
+          Airdrop 1 SOL to your test wallet
+        </button>
+      </nav>
       {isAirDropped ? <div>Sent!</div> : null}
-      <div>
-        {!wallet ? (
-          <SelectAndConnectWalletButton onUseWalletClick={() => { }} />
-        ) : (
-          <PostItScreen />
-        )}
-      </div>
+      {!wallet ? (
+        <SelectAndConnectWalletButton onUseWalletClick={() => { }} />
+      ) : (
+        <PostItScreen />
+      )}
     </>
   );
 };
@@ -55,11 +55,10 @@ const PostItScreen = () => {
   const wallet: any = useAnchorWallet();
   const [postits, setPostIts] = useState<unknown[]>([]);
   const { program } = useProgram({ connection, wallet });
-  const [lastUpdatedTime, setLastUpdatedTime] = useState<number>();
 
   useEffect(() => {
     fetchPostIts();
-  }, [wallet, lastUpdatedTime]);
+  }, [wallet]);
 
   const fetchPostIts = async () => {
     if (wallet && program) {
@@ -80,14 +79,16 @@ const PostItScreen = () => {
   };
 
   return (
-        <div className="text-xs">
-          <NetPostIt onPostitSent={onPostitSent} />
-          <div className="relative m-auto border border-gray-900">
-            {postits.map((t: any) => (
-              <PostIt key={(t as any).key} content={t.content} y={t.y} x={t.x} />
-            ))}
-          </div>
+    <>
+      <NetPostIt onPostitSent={onPostitSent} />
+      <div className="text-xs w-screen h-screen overflow-hidden m-0 p-32 bg-gray-200">
+        <div className="relative m-auto border border-gray-900 w-5/6 h-[500px]">
+          {postits.map((t: any) => (
+            <PostIt key={(t as any).key} content={t.content} y={t.y} x={t.x} />
+          ))}
         </div>
+      </div>
+    </>
   );
 };
 
@@ -99,8 +100,8 @@ const NetPostIt: FC<NetPostIt> = ({ onPostitSent }) => {
   const wallet: any = useAnchorWallet();
   const { program } = useProgram({ connection, wallet });
   const [content, setContent] = useState<string>("");
-  const [x, setX] = useState<number>(0);
-  const [y, setY] = useState<number>(0);
+  const [x, setX] = useState<number>(255);
+  const [y, setY] = useState<number>(255);
 
   const onContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const { value } = e.target;
@@ -143,13 +144,12 @@ const NetPostIt: FC<NetPostIt> = ({ onPostitSent }) => {
 };
 
 const PostIt = ({ content, x, y }: any) => {
-  console.log("content", content);
   return (
     <div
-      className="p-2 border border-gray-500 border-b-0 flex text-xl w-72 h-72 bg-yellow-500 absolute"
+      className="p-2 border border-gray-500 border-b-0 flex text-xl w-72 h-72 bg-yellow-500 absolute transform -translate-x-1/2 -translate-y-1/2"
       style={{
-        top: `${y/255 * 100}%`,
-        left: `${x/255 * 100}%`,
+        top: `${y / 255 * 100}%`,
+        left: `${x / 255 * 100}%`,
       }}
     >
       {content}

diff --git a/app/src/components/PostIts/solana_postit.json b/app/src/components/PostIts/solana_postit.json
@@ -67,11 +67,6 @@
   "errors": [
     {
       "code": 6000,
-      "name": "CoordinatesOutOfBounds",
-      "msg": "The x and y coordinates must be between 0 and 100"
-    },
-    {
-      "code": 6001,
       "name": "ContentTooLong",
       "msg": "The provided content should be 280 characters long maximum."
     }

diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
@@ -4,13 +4,13 @@ import { SolanaPostItView } from "../components/PostIts";
 
 const Home: NextPage = (props) => {
   return (
-    <div>
+    <>
       <Head>
         <title>Solana PostIt!</title>
         <meta name="description" content="Postit!" />
       </Head>
       <SolanaPostItView />
-    </div>
+    </>
   );
 };
 

diff --git a/app/tailwind.config.js b/app/tailwind.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  purge: ["./pages/**/*.js", "./components/**/*.js"],
+  purge: ["./src/**/*.{js,jsx,ts,tsx}"],
   darkMode: false, // or 'media' or 'class'
   theme: {
     fontFamily: {