Niko/dev/UI improvemnet (#44)

* - Copy animation and uplaoded file name style * - small animation fix * - Advanced filter selection * - small animation fix * - Advanced filter selection * - Meta info * - Ping * - Button colors, filters alignment * - Auth fix * - Advanced filter selection * - Copy animation and uplaoded file name style * - small animation fix * - Button colors, filters alignment * - Auth fix * - Auth fix * - Verify fix and UI improvement * - Advanced filter selection * - Copy animation and uplaoded file name style * - small animation fix * - Button colors, filters alignment * - Advanced filter selection * - Button colors, filters alignment * - Verify fix and UI improvement
filmineio · Mar 7, 2023 · 7865128 · 7865128 · vercel · Mar 7, 2023
1 parent 71d6a2b
commit 7865128
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 42 deletions.
diff --git a/src/ui/components/Page/Footer/Footer.tsx b/src/ui/components/Page/Footer/Footer.tsx
@@ -7,7 +7,9 @@ export const Footer: FC = () => {
     <footer className="px-5 py-6 border-t border-body">
       <div className="flex flex-wrap justify-between items-center m-auto">
         <Link href="/">
-          <LogoDevStorageWhite />
+          <a>
+            <LogoDevStorageWhite />
+          </a>
         </Link>
         <p className="text-gray-text text-xs font-medium leading-4 font-space">
           © Dev.storage 2023.

diff --git a/src/ui/external/useWeb3Storage.ts b/src/ui/external/useWeb3Storage.ts
@@ -8,12 +8,12 @@ export const useWeb3Storage = <T = unknown>() => {
     error: string;
     loading: boolean;
     data?: T;
-    progress: number;
+    progress: string;
   }>({
     error: "",
     loading: false,
     data: undefined,
-    progress: 0,
+    progress: '',
   });
 
   const upload = (inputFile: File, fileNameOverride?: string) => {

diff --git a/src/ui/modules/SelectedEntity/components/ContractPage/components/AddToProject.tsx b/src/ui/modules/SelectedEntity/components/ContractPage/components/AddToProject.tsx
@@ -93,7 +93,7 @@ export const AddToProject = ({
   if (loading || adding) {
     return (
       <Modal>
-        <div className={"text-gray-text"}>
+        <div className="bg-slate text-gray-text">
           <Spinner />
         </div>
       </Modal>

diff --git a/src/ui/modules/SelectedEntity/components/ContractPage/components/AddToProjectRow.tsx b/src/ui/modules/SelectedEntity/components/ContractPage/components/AddToProjectRow.tsx
@@ -37,30 +37,32 @@ export function AddToProjectRow({
   }, [contract, contracts]);
 
   return (
-    <div
-      className={classNames(
-        "p-6 bg-body rounded-10 w-full flex justify-between items-center rounded-6 ",
-        { "cursor-pointer": !included, "cursor-forbidden": included }
-      )}
-      onClick={onClick}
-    >
-      <div>
-        <div className={"text-white font-semibold mb-4"}>{data.name}</div>
-        <div className={"text-line_opacity-80"}>
-          {contracts.length} contracts
+    <div className="pr-2">
+      <div
+        className={classNames(
+          "px-8 py-7 bg-body_opacity-50 rounded-10 w-full flex justify-between items-center border border-transparent transition-all",
+          { "cursor-pointer hover:border-blue-500": !included, "cursor-forbidden": included }
+        )}
+        onClick={onClick}
+      >
+        <div>
+          <h6 className={"text-white font-semibold mb-4"}>{data.name}</h6>
+          <div className={"text-newdarck"}>
+            {contracts.length} contracts
+          </div>
         </div>
-      </div>
-      {/*state={included ? "none" : checked ? "none" : "none"}*/}
+        {/*state={included ? "none" : checked ? "none" : "none"}*/}
 
-      <div>
-        <div className={classNames('w-8 h-8 flex items-center justify-center rounded-3 border transition-all', {
+        <div>
+          <div className={classNames('w-6 h-6 flex items-center justify-center rounded-3 border transition-all', {
             'bg-blue-500': !included && checked,
-            'bg-body_opacity-50 border-label_opacity-30 [&>svg>path]:stroke-label': included,
-            'border-label': !included && !checked,
+            'bg-blue-500_opacity-30 border-transparent': included,
+            'bg-label_opacity-30 border-transparent': !included && !checked,
             'border-blue-500': !included && checked,
           })}
-        >
-          <CheckIndicator />
+          >
+            <CheckIndicator />
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/ui/modules/SelectedEntity/components/ContractPage/components/CheckIndicator.tsx b/src/ui/modules/SelectedEntity/components/ContractPage/components/CheckIndicator.tsx
@@ -8,7 +8,7 @@ export const CheckIndicator = () => (
   >
     <path
       d="M8 12L11 15L16 9"
-      stroke="#fff"
+      stroke="#000"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"

diff --git a/src/ui/modules/SelectedEntity/components/ContractPage/components/VerifyContract.tsx b/src/ui/modules/SelectedEntity/components/ContractPage/components/VerifyContract.tsx
@@ -51,6 +51,7 @@ export const VerifyContract = ({
     data: sourceCid,
     loading: uploading,
     error,
+    progress,
   } = useWeb3Storage();
   const {
     post: verify,
@@ -59,10 +60,6 @@ export const VerifyContract = ({
     total: verificationResult,
   } = useMutation(true);
 
-  // useEffect(() => {
-  //   console.log('upload, sourceCid, uploading, error', upload, sourceCid, uploading, error);
-  // }, [upload, sourceCid, uploading, error]);
-
   const change = (key: keyof State) => (val: State[typeof key]) => {
     setData((p) => set(lensPath([key]), val)(p));
   };
@@ -91,18 +88,16 @@ export const VerifyContract = ({
       );
     }
 
-    // console.log('start');
     upload(data.source, "contracts.zip");
-    // console.log('end');
   }, [valid, data]);
 
   useEffect(() => {
     if (!!error) toast.error(error);
   }, [error]);
 
   useEffect(() => {
-    if (!!verificationError) toast.error(verificationError);
-  }, [verificationError]);
+    if (!!verificationError && !verifying) toast.error(verificationError);
+  }, [verificationError, verifying]);
 
   useEffect(() => {
     if (!!verificationResult) {
@@ -112,8 +107,7 @@ export const VerifyContract = ({
   }, [verificationResult]);
 
   useEffect(() => {
-    // console.log('yes');
-    if (!sourceCid) return;
+    if (!sourceCid || uploading || progress !== '100.00') return;
 
     toast.info("Upload completed. Verification process started...");
 
@@ -124,7 +118,7 @@ export const VerifyContract = ({
       optimise: data.optimized,
       isPublic: !data.private,
     });
-  }, [sourceCid, data]);
+  }, [sourceCid, uploading, progress]);
 
   useEffect(() => {
     const header = document.querySelector("header");
@@ -144,7 +138,7 @@ export const VerifyContract = ({
     <>
       <div
         className={
-          "absolute top-0 left-0 w-full h-16 bg-label flex justify-between items-center  px-10"
+          "absolute top-0 left-0 w-full h-16 bg-label flex justify-between items-center px-10"
         }
       >
         <div className={"text-white"}>
@@ -161,21 +155,21 @@ export const VerifyContract = ({
       {uploading && (
         <Modal>
           <div className="modal-content border-none shadow-none relative justify-center items-center flex w-full pointer-events-auto bg-slate rounded-10 h-96">
-            <p className={"flex gap-5 text-white text-lg"}>
-              Uploading...
+            <div className="flex items-center gap-5">
+              <p className="text-white text-lg">Uploading...</p>
               <Spinner inline />
-            </p>
+            </div>
           </div>
         </Modal>
       )}
 
       {verifying && (
         <Modal>
           <div className="modal-content border-none shadow-none relative justify-center items-center flex w-full pointer-events-auto bg-slate rounded-10 h-96">
-            <p className={"flex gap-5 text-white text-lg"}>
-              Verifying...
+            <div className="flex items-center gap-5">
+              <p className="text-white text-lg">Verifying...</p>
               <Spinner inline />
-            </p>
+            </div>
           </div>
         </Modal>
       )}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -55,11 +55,13 @@ module.exports = {
         "slate": "#141620",
         "placeholder": "#A0A3BD",
         "label": "#596184",
+        "label_opacity-10": "#59618410",
         "label_opacity-30": "#5961844d",
         "blue-300": "#BFDEFF",
         "blue-400": "#59A9FF",
         "blue-400_opacity-30": "#59A9FF4d",
         "blue-500": "#0576F0",
+        "blue-500_opacity-30": "#0576F04d",
         "line": "#D8DBE9",
         "line_opacity-80": "#D8DBE9CC",
         "red": "#D32F40",