From c9928d76b6ac963ca59c7ced387cb46bb854a64c Mon Sep 17 00:00:00 2001 From: Satyam Bansal Date: Mon, 29 Jul 2024 18:03:06 +0530 Subject: [PATCH] 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 --- plugin/public/dark-nethermind-logo.svg | 28 +++ plugin/public/light-nethermind-logo.svg | 28 +++ plugin/src/App.css | 11 +- .../components/BackgroundNotices/index.tsx | 11 +- plugin/src/components/NM/index.tsx | 71 ++---- plugin/src/components/NM/styles.css | 0 plugin/src/components/Settings/index.tsx | 49 +++++ plugin/src/components/Settings/settings.css | 36 +++ plugin/src/features/Compilation/index.tsx | 12 +- plugin/src/features/CompilerVersion/style.css | 24 -- plugin/src/features/Deployment/index.tsx | 3 +- plugin/src/features/Environment/styles.css | 72 +++--- plugin/src/features/Footer/index.tsx | 26 +++ plugin/src/features/Footer/style.css | 45 ++++ .../{CompilerVersion => Header}/index.tsx | 47 +--- plugin/src/features/Header/style.css | 45 ++++ plugin/src/features/Plugin/index.tsx | 208 +++++++++--------- plugin/src/features/Plugin/styles.css | 51 +++-- .../TransactionHistory/TransactionCard.tsx | 111 +++++----- .../src/features/TransactionHistory/index.tsx | 21 +- .../TransactionHistory/transactioncard.css | 140 +++++++----- plugin/src/features/index.ts | 3 +- plugin/src/hooks/useIcons.ts | 33 +++ .../src/ui_components/Accordian/accordian.css | 108 ++++----- plugin/src/ui_components/Container/index.tsx | 6 +- .../src/ui_components/Dropdown/dropdown.css | 183 +++++++-------- plugin/src/ui_components/Tooltip/tooltip.css | 127 +++++------ plugin/src/utils/constants.ts | 6 + plugin/theme/components/button.css | 152 ++++--------- 29 files changed, 909 insertions(+), 748 deletions(-) create mode 100644 plugin/public/dark-nethermind-logo.svg create mode 100644 plugin/public/light-nethermind-logo.svg delete mode 100644 plugin/src/components/NM/styles.css create mode 100644 plugin/src/components/Settings/index.tsx create mode 100644 plugin/src/components/Settings/settings.css delete mode 100644 plugin/src/features/CompilerVersion/style.css create mode 100644 plugin/src/features/Footer/index.tsx create mode 100644 plugin/src/features/Footer/style.css rename plugin/src/features/{CompilerVersion => Header}/index.tsx (69%) create mode 100644 plugin/src/features/Header/style.css create mode 100644 plugin/src/hooks/useIcons.ts diff --git a/plugin/public/dark-nethermind-logo.svg b/plugin/public/dark-nethermind-logo.svg new file mode 100644 index 00000000..405ba946 --- /dev/null +++ b/plugin/public/dark-nethermind-logo.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/plugin/public/light-nethermind-logo.svg b/plugin/public/light-nethermind-logo.svg new file mode 100644 index 00000000..a3e5f172 --- /dev/null +++ b/plugin/public/light-nethermind-logo.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/plugin/src/App.css b/plugin/src/App.css index 91dd7771..cdbaa760 100644 --- 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 index 2e224bcf..c1f452bd 100644 --- 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 (
-

Notices

{