UI revamp changes (#153)

* Add Tab structure * Plugin info tab changes * Fix tab padding issue * Fix button colors and text scheme * Transaction card changes * Plugin footer changes * Settings tab changes * Compiler version changes * Indentation formatting changes * Move solidity allowed version fetch to compiler version component * Rename compiler version to header * Fix margin padding issue for compiler accordian * Fix Dropdown item width issue * Change TxId to TxnHash * Accordian shadow and button margin css changes * Add gap in Environment text
NethermindEth · Jul 29, 2024 · c9928d7 · c9928d7
1 parent 82ce4a7
commit c9928d7
Show file tree

Hide file tree

Showing 29 changed files with 909 additions and 748 deletions.
diff --git a/plugin/public/dark-nethermind-logo.svg b/plugin/public/dark-nethermind-logo.svg
diff --git a/plugin/public/light-nethermind-logo.svg b/plugin/public/light-nethermind-logo.svg
diff --git a/plugin/src/App.css b/plugin/src/App.css
@@ -1,9 +1,12 @@
+body {
+  font: 1rem;
+}
 .shell {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }
 
 .solidity-version-legend {
-    margin: 0 24px;
+  margin: 0 24px;
 }
diff --git a/plugin/src/components/BackgroundNotices/index.tsx b/plugin/src/components/BackgroundNotices/index.tsx
@@ -1,18 +1,13 @@
 import React from 'react'
 import './backgroundNotices.css'
+import { PLUGIN_INFO_CONTENT_ARRAY } from '@/utils/constants'
 
-const Notices = [
-  'The zkSync Remix Plugin is in Alpha',
-  'Solidity contracts are compiled on a server hosted by Nethermind'
-]
-
-const BackgroundNotices: React.FC = () => {
+const BackgroundNotices = () => {
   return (
     <div className={'bg-transparent'}>
-      <p className="text-center text-md bg-notices-text">Notices</p>
       {
         <ul className="list-group">
-          {Notices.map((notice, index) => {
+          {PLUGIN_INFO_CONTENT_ARRAY.map((notice, index) => {
             return (
               <li
                 className="list-group-item d-flex justify-content-left align-items-center bg-notices-text bg-primary"

diff --git a/plugin/src/components/NM/index.tsx b/plugin/src/components/NM/index.tsx
@@ -1,37 +1,27 @@
 import React from 'react'
+import { useIcon } from '@/hooks/useIcons'
 
-import './styles.css'
-
-const sizeToDimenstions = (size: 'lg' | 'sm' | 'xs' | 'md' | 'xl'): { w: number; h: number } => {
-  const baseW = 126
-  const baseH = 63
+const sizeToDimenstions = (
+  size: 'lg' | 'sm' | 'xs' | 'md' | 'xl'
+): {
+  h: number
+  w: number
+} => {
+  const baseW = 130 * 4.5
+  const baseH = 19 * 4.5
   switch (size) {
     case 'lg':
-      return {
-        h: baseH,
-        w: baseW
-      }
+      return { h: baseH * 1, w: baseW * 1 }
     case 'xs':
-      return {
-        h: baseH * 0.2,
-        w: baseW * 0.2
-      }
+      return { h: baseH * 0.2, w: baseW * 0.2 }
     case 'sm':
-      return {
-        h: baseH * 0.5,
-        w: baseW * 0.5
-      }
+      return { h: baseH * 0.5, w: baseW * 0.5 }
     case 'md':
-      return {
-        h: baseH * 0.7,
-        w: baseW * 0.7
-      }
+      return { h: baseH * 0.7, w: baseW * 0.7 }
     case 'xl':
-      return {
-        h: baseH * 1.5,
-        w: baseW * 1.5
-      }
+      return { h: baseH * 1.5, w: baseW * 1.5 }
   }
+  return { h: baseH, w: baseW }
 }
 
 interface INethermind {
@@ -42,36 +32,7 @@ const Nethermind: React.FC<INethermind> = ({ size = 'xs' }): React.ReactElement
   const sz = sizeToDimenstions(size)
   return (
     <a href={'https://nethermind.io'} target={'_blank'} rel="noreferrer">
-      <svg xmlns="http://www.w3.org/2000/svg" width={sz.w} height={sz.h} viewBox="0 0 252 126" fill="none">
-        <path
-          fill="#00aceb"
-          d="m77.2 1.6-9.1 33.9c-1.6-.3-3.3-.5-5-.5-2.5 0-4.9.3-7.3.9C51.7 37 48 39 44.9 41.7L20.1 16.9c3.2-3 6.7-5.7 10.5-7.9l1.9-1.1c4.4-2.4 9.2-4.4 14.2-5.7C51.9.7 57.4 0 63 0c4.9 0 9.6.5 14.2 1.6z"
-        />
-        <path
-          fill="#00bff2"
-          d="M250.5 48.9c1.1 4.5 1.6 9.2 1.6 14.1 0 5.7-.7 11.1-2.1 16.3-1.3 5-3.3 9.7-5.7 14.2l-1.1 2c-2.3 3.8-4.9 7.3-7.9 10.5l-24.8-24.8c2.6-3.1 4.6-6.8 5.7-10.9.6-2.3.9-4.7.9-7.3 0-1.7-.1-3.3-.4-4.9l33.8-9.2z"
-        />
-        <path
-          fill="#009cdd"
-          d="m179.7 89.5-9.1 33.9c-4.2-1.3-8.2-3-12-5.1l-1.9-1.1c-4.5-2.7-8.5-5.9-12.2-9.5l-1.8-1.9c-1.4-1.5-2.8-3.2-4-4.8l24.4-24.4 5.4 5.6c.2.3.5.5.8.8 2.9 2.8 6.4 5.1 10.4 6.5zM113.5 25.2 89.1 49.6 83.7 44l-.8-.8c-2.9-2.9-6.5-5.2-10.4-6.6l9.1-33.9c4.2 1.3 8.3 3 12 5.1l1.9 1.1c4.5 2.7 8.6 5.9 12.2 9.5l1.8 1.9c1.4 1.6 2.7 3.3 4 4.9z"
-        />
-        <path
-          fill="#00aceb"
-          d="m207.2 84.4 24.8 24.8c-3.2 3-6.7 5.7-10.5 7.9l-1.9 1.1c-4.4 2.4-9.2 4.4-14.2 5.7-5.2 1.4-10.7 2.1-16.3 2.1-4.9 0-9.6-.5-14.1-1.6l9.1-33.9c1.6.3 3.3.5 5 .5 2.5 0 5-.3 7.3-.9 4-1.1 7.7-3 10.8-5.7z"
-        />
-        <path
-          fill="#ffa726"
-          d="m78.4 86.5 24.7 25.2c-2.4 2-4.9 3.8-7.6 5.3l-2 1.1c-4.4 2.5-9.2 4.4-14.1 5.7-5.2 1.4-10.7 2.1-16.3 2.1-5.6 0-11.1-.7-16.3-2.1-5-1.3-9.7-3.3-14.1-5.7l-2-1.2c-4.4-2.6-8.5-5.8-12.1-9.5-3.6-3.6-6.8-7.7-9.5-12.1L8 93.4c-2.1-3.8-3.8-7.8-5.1-12l33.8-9.2c1.4 4 3.7 7.6 6.6 10.6 3.4 3.4 7.8 6 12.6 7.3 2.3.6 4.7.9 7.3.9 2.5 0 5-.3 7.3-.9 2.7-.8 5.4-2 7.9-3.6z"
-        />
-        <path
-          fill="#00bff2"
-          d="m16.9 20.1 24.8 24.8C39 48 37 51.7 35.9 55.8c-.6 2.3-.9 4.7-.9 7.2 0 1.7.1 3.3.4 4.9L1.6 77.1C.5 72.6 0 67.9 0 63c0-5.7.7-11.1 2.1-16.3 1.3-5 3.3-9.7 5.7-14.1l1.1-2c2.4-3.8 5-7.3 8-10.5z"
-        />
-        <path
-          fill="#ffa726"
-          d="m249.3 44.5-33.8 9.2c-1.4-4-3.7-7.6-6.6-10.6-3.4-3.4-7.8-6-12.6-7.3-2.3-.6-4.7-.9-7.3-.9-2.5 0-5 .3-7.3.9-2.9.8-5.6 2-8.1 3.6l-24.7-25.2c2.4-2 4.9-3.8 7.6-5.3l2-1.2c4.4-2.4 9.2-4.4 14.1-5.7 5.4-1.3 10.8-2 16.5-2 5.6 0 11.1.7 16.3 2.1 5 1.3 9.7 3.3 14.1 5.7l2 1.2c4.4 2.6 8.5 5.8 12.1 9.5 3.6 3.6 6.8 7.7 9.5 12.1l1.1 1.9c2.1 3.8 3.9 7.8 5.1 12z"
-        />
-      </svg>
+      <img width={sz.w} height={sz.h} src={useIcon('nethermind-logo.svg')}></img>
     </a>
   )
 }

diff --git a/plugin/src/components/NM/styles.css b/plugin/src/components/NM/styles.css
diff --git a/plugin/src/components/Settings/index.tsx b/plugin/src/components/Settings/index.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { BsChevronDown } from 'react-icons/bs'
+import { useAtom, useAtomValue } from 'jotai'
+import { solidityVersionAtom, versionsAtom } from '@/atoms'
+import * as Dropdown from '@/ui_components/Dropdown'
+import './settings.css'
+
+export const Settings = () => {
+  const [solidityVersion, setSolidityVersion] = useAtom(solidityVersionAtom)
+  const versions = useAtomValue(versionsAtom)
+
+  return (
+    <div className="settings-wrapper">
+      <div className="text-center font-bold w-full">Settings</div>
+      <div className={'settings-box'}>
+        <div className={'settings-box-header'}>zksolc Version</div>
+        <div className={'blank'}></div>
+        <div className={'settings-box-content'}>
+          <div>
+            <Dropdown.Root>
+              <Dropdown.Trigger>
+                <label className="flex p-2 border gap-2">
+                  zksolc-{solidityVersion}&nbsp;
+                  <BsChevronDown />
+                </label>
+              </Dropdown.Trigger>
+              <Dropdown.Portal>
+                <Dropdown.Content>
+                  {versions.map((v, i) => {
+                    return (
+                      <Dropdown.Item
+                        key={i}
+                        onClick={() => {
+                          setSolidityVersion(v)
+                        }}
+                      >
+                        {v}
+                      </Dropdown.Item>
+                    )
+                  })}
+                </Dropdown.Content>
+              </Dropdown.Portal>
+            </Dropdown.Root>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/plugin/src/components/Settings/settings.css b/plugin/src/components/Settings/settings.css
@@ -0,0 +1,36 @@
+.settings-wrapper {
+  padding: 16px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+
+  gap: 16px;
+}
+
+.settings-box {
+  display: grid;
+  grid-template-columns: 3fr 1fr 4fr;
+
+  align-items: center;
+  font-size: 14px;
+
+  border-bottom: 1px solid var(--light);
+
+  padding: 8px;
+
+  width: 100%;
+}
+
+.settings-box-header {
+  font-weight: bold;
+}
+
+.settings-box-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+
+  width: 100%;
+}
diff --git a/plugin/src/features/Compilation/index.tsx b/plugin/src/features/Compilation/index.tsx
@@ -121,13 +121,9 @@ export const Compilation = ({ setAccordian }: CompilationProps) => {
   }
 
   return (
-    <Container>
-      {/* <div className="align-center d-flex justify-content-center">
-        Only files in the contracts folder can be compiled.
-      </div> */}
-
+    <Container className="flex flex-column justify-content-center">
       <button
-        className="btn btn-warning w-100 text-break remixui_disabled mb-1 mt-1 px-2"
+        className="btn btn-secondary d-block text-break mb-1 text-center"
         onClick={() => handleCompile({ type: 'PROJECT' })}
         disabled={isCompiling || !isContractsFolderAvailable}
       >
@@ -139,7 +135,7 @@ export const Compilation = ({ setAccordian }: CompilationProps) => {
             <span style={{ paddingLeft: '0.5rem' }}>{status}</span>
           </>
         ) : isContractsFolderAvailable ? (
-          <span> Compile Project</span>
+          <div className="text-truncate overflow-hidden text-nowrap">Compile Project</div>
         ) : (
           <Tooltip
             icon={
@@ -159,7 +155,7 @@ export const Compilation = ({ setAccordian }: CompilationProps) => {
       </button>
 
       <button
-        className="btn btn-primary w-100 text-break remixui_disabled mb-1 mt-1 px-2"
+        className="btn btn-primary d-block text-break mb-1 mt-2"
         style={{
           cursor: `${!isValidSolidity || !currentFilename ? 'not-allowed' : 'pointer'}`
         }}

diff --git a/plugin/src/features/CompilerVersion/style.css b/plugin/src/features/CompilerVersion/style.css
diff --git a/plugin/src/features/Deployment/index.tsx b/plugin/src/features/Deployment/index.tsx
@@ -327,12 +327,13 @@ export const Deployment: React.FC<DeploymentProps> = ({ setActiveTab }) => {
                 <ConstructorInput inputs={inputs} setInputs={setInputs}></ConstructorInput>
 
                 <button
-                  className="deploy-btn btn btn-primary btn-warning w-100 text-break mb-1 mt-2 px-0"
+                  className="btn btn-warning w-100 text-break mb-1 mt-2 px-0"
                   onClick={() => {
                     deploy().catch((err) => {
                       console.error(err)
                     })
                   }}
+                  disabled={deployStatus === 'IN_PROGRESS'}
                 >
                   {deployStatus === 'IN_PROGRESS' ? (
                     <>