From 804d45f90f26ec138ac301e37713020aa8cd8e6c Mon Sep 17 00:00:00 2001 From: Prince Anuragi Date: Thu, 26 Oct 2023 18:51:30 +0530 Subject: [PATCH 1/5] feat: add color system --- plugin/index.html | 1 + .../ui_components/Accordian/accordian.css | 15 +- .../ui_components/Accordian/index.tsx | 2 +- .../FullScreenOverlay/overlay.css | 2 +- plugin/theme/background.css | 36 ++++ plugin/theme/border.css | 188 ++++++++++++++++++ plugin/theme/margin.css | 130 ++++++++++++ plugin/theme/padding.css | 128 ++++++++++++ plugin/theme/palette.css | 97 +++++++++ plugin/theme/sizes.css | 17 ++ plugin/theme/text.css | 36 ++++ plugin/theme/theme.css | 8 + plugin/theme/util.css | 16 ++ 13 files changed, 666 insertions(+), 10 deletions(-) create mode 100644 plugin/theme/background.css create mode 100644 plugin/theme/border.css create mode 100644 plugin/theme/margin.css create mode 100644 plugin/theme/padding.css create mode 100644 plugin/theme/palette.css create mode 100644 plugin/theme/sizes.css create mode 100644 plugin/theme/text.css create mode 100644 plugin/theme/theme.css create mode 100644 plugin/theme/util.css diff --git a/plugin/index.html b/plugin/index.html index a68f90c4..3d5cef0c 100644 --- a/plugin/index.html +++ b/plugin/index.html @@ -5,6 +5,7 @@ Starknet remix plugin +
diff --git a/plugin/src/components/ui_components/Accordian/accordian.css b/plugin/src/components/ui_components/Accordian/accordian.css index f36713e6..b8ee92fe 100644 --- a/plugin/src/components/ui_components/Accordian/accordian.css +++ b/plugin/src/components/ui_components/Accordian/accordian.css @@ -7,7 +7,6 @@ h3 { .AccordionRoot { border-radius: 6px; width: 100%; - background-color: var(--bgPrimary); box-shadow: 0 2px 10px var(--shadowPrimary); } @@ -30,7 +29,7 @@ h3 { .AccordionItem:focus-within { position: relative; z-index: 1; - box-shadow: 0 0 0 2px var(--accentColor); + box-shadow: 0 0 0 2px var(--secondary-color); } .AccordionHeader { @@ -51,21 +50,21 @@ h3 { line-height: 1; color: var(--violet11); transition: all 0.1s ease; - border-bottom: 1px solid var(--borderPrimary); - box-shadow: 0 1px 0 var(--bgPrimary); - background-color: var(--bgPrimary); + border-bottom: 1px solid var(--primary-color-900); + box-shadow: 0 1px 0 var(--primary-color); + background-color: var(--primary-color); } .AccordionTrigger:hover { - background-color: var(--accentColor); + background-color: var(--secondary-color); color: var(--textPrimary); } .AccordionContent { overflow: hidden; font-size: 1rem; - color: var(--textPrimary); - background-color: var(--bgPrimary); + color: var(--light); + background-color: var(--primary-color); } .AccordionContent[data-state='open'] { animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1); diff --git a/plugin/src/components/ui_components/Accordian/index.tsx b/plugin/src/components/ui_components/Accordian/index.tsx index b1321f99..4cac9ba5 100644 --- a/plugin/src/components/ui_components/Accordian/index.tsx +++ b/plugin/src/components/ui_components/Accordian/index.tsx @@ -51,7 +51,7 @@ const Accordian: React.FC = ({ value }) => ( Date: Sun, 29 Oct 2023 23:39:24 +0530 Subject: [PATCH 2/5] feat: added more components and shifted to new system --- plugin/src/App.tsx | 2 +- .../components/BackgroundNotices/index.tsx | 8 +- .../DevnetAccountSelector/index.tsx | 4 +- .../components/EnvironmentSelector/index.tsx | 89 ++++++--- .../components/EnvironmentSelector/styles.css | 4 + .../components/NewTestnetAccount/index.tsx | 185 ------------------ .../NewTestnetAccount/newTestnetAccount.css | 76 ------- .../ui_components/Accordian/accordian.css | 16 +- .../ui_components/Accordian/index.tsx | 8 +- .../ui_components/CircularLoader/loader.css | 2 +- .../ui_components/Container/container.css | 3 - .../ui_components/Container/index.tsx | 2 +- .../ui_components/Dialog/dialog.css | 158 --------------- .../components/ui_components/Dialog/index.tsx | 27 --- .../ui_components/Dropdown/dropdown.css | 26 ++- .../ui_components/Dropdown/index.tsx | 10 +- .../components/ui_components/Tabs/tabs.css | 12 +- .../ui_components/Tooltip/tooltip.css | 8 +- plugin/src/features/Environment/index.tsx | 6 +- plugin/theme/background.css | 8 +- plugin/theme/border.css | 13 ++ plugin/theme/components/badge.css | 46 +++++ plugin/theme/components/button.css | 7 + plugin/theme/components/index.css | 2 + plugin/theme/display.css | 50 +++++ plugin/theme/padding.css | 65 +++--- plugin/theme/sizes.css | 29 +++ plugin/theme/text.css | 33 +++- plugin/theme/theme.css | 7 +- 29 files changed, 328 insertions(+), 578 deletions(-) delete mode 100644 plugin/src/components/NewTestnetAccount/index.tsx delete mode 100644 plugin/src/components/NewTestnetAccount/newTestnetAccount.css delete mode 100644 plugin/src/components/ui_components/Dialog/dialog.css delete mode 100644 plugin/src/components/ui_components/Dialog/index.tsx create mode 100644 plugin/theme/components/badge.css create mode 100644 plugin/theme/components/button.css create mode 100644 plugin/theme/components/index.css create mode 100644 plugin/theme/display.css diff --git a/plugin/src/App.tsx b/plugin/src/App.tsx index 465af829..8fb500dd 100644 --- a/plugin/src/App.tsx +++ b/plugin/src/App.tsx @@ -10,7 +10,7 @@ const App: React.FC = () => { const { isPluginLoaded } = useRemixClient() return ( -
+
{isPluginLoaded ? ( diff --git a/plugin/src/components/BackgroundNotices/index.tsx b/plugin/src/components/BackgroundNotices/index.tsx index 5732f54f..9482b87e 100644 --- a/plugin/src/components/BackgroundNotices/index.tsx +++ b/plugin/src/components/BackgroundNotices/index.tsx @@ -9,14 +9,14 @@ const Notices = [ const BackgroundNotices: React.FC = () => { return ( -
-

Notices

+
+

Notices

{
    {Notices.map((notice, index) => { return ( -
  • - +
  • + {index + 1} {notice} diff --git a/plugin/src/components/DevnetAccountSelector/index.tsx b/plugin/src/components/DevnetAccountSelector/index.tsx index 2559eb62..6fce4add 100644 --- a/plugin/src/components/DevnetAccountSelector/index.tsx +++ b/plugin/src/components/DevnetAccountSelector/index.tsx @@ -169,7 +169,7 @@ const DevnetAccountSelector: React.FC = () => { }, [env]) return ( - <> +
    - {devnets.reduce( - (acc, devnet, index) => { - acc.push( - - ) - return acc - }, - [ - - ] - )} - + { setDropdownControl(e) }}> + +
    + + +
    +     + + + { + handleEnvironmentChange('0') + }} + > + Wallet + + {devnets.map((devnet, i) => { + return ( + { + handleEnvironmentChange((i + 1).toString()) + }} + > + {devnet?.name} + + ) + })} + + +
    ) } diff --git a/plugin/src/components/EnvironmentSelector/styles.css b/plugin/src/components/EnvironmentSelector/styles.css index 8732d05a..131b1eb2 100644 --- a/plugin/src/components/EnvironmentSelector/styles.css +++ b/plugin/src/components/EnvironmentSelector/styles.css @@ -1,3 +1,7 @@ .environment-selector-wrapper { width: 100%; +} + +.devnet-trigger-wrapper { + border: 1px solid var(--primary-color-500); } \ No newline at end of file diff --git a/plugin/src/components/NewTestnetAccount/index.tsx b/plugin/src/components/NewTestnetAccount/index.tsx deleted file mode 100644 index 0409abeb..00000000 --- a/plugin/src/components/NewTestnetAccount/index.tsx +++ /dev/null @@ -1,185 +0,0 @@ -import React, { useState } from 'react' -import * as Dialog from '../ui_components/Dialog' -import { AiOutlineClose } from 'react-icons/ai' -import './newTestnetAccount.css' -import { BsChevronDown } from 'react-icons/bs' -import * as D from '../ui_components/Dropdown' -import Loader from '../ui_components/CircularLoader' -import { BiCopy } from 'react-icons/bi' -import copy from 'copy-to-clipboard' -import { MdRefresh } from 'react-icons/md' - -interface INewTestNetAccount { - state: [boolean, React.Dispatch>] -} - -type AccountCreationState = 'selectNetwork' | 'created' | 'loading' -type Networks = 'goerli' | 'dev-goerli' - -interface IStepProps { - changeState: React.Dispatch> -} - -const SelectNetworkState: React.FC = ({ changeState }) => { - const [selectedNetwork, setSelectedNetwork] = useState('goerli') - const networks: Networks[] = ['goerli', 'dev-goerli'] - const handleCreateAccount = (): void => { - changeState('loading') - // DUMMY LOAD BELOW - setTimeout(() => { - changeState('created') - }, 3000) - } - return ( -
    -
    -

    Select Network

    - - - - - - - {networks.map((v, i) => { - return ( - { - setSelectedNetwork(v) - }} - > - {v} - - ) - })} - - - -
    - -
    - ) -} - -type IAccountCreated = IStepProps & { - account: string -} - -const AccountCreated: React.FC = ({ - account, - changeState -}) => { - const [showCopied, setShowCopied] = useState(false) - - const [balanceRefreshing, setBalanceRefreshing] = useState(false) - const [balance] = useState('0.005') - return ( -
    -
    - - -

    {account}

    - -     -
    -
    -

    Balance:

    -

    {balance} ETH

    - -
    - -
    - ) -} - -const NewTestNetAccount: React.FC = ({ state }) => { - const [isOpen, setOpen] = state - const [currentState, setCurrentState] = - useState('selectNetwork') - - const getCurrentStateView = ( - state: AccountCreationState, - setCurrentState: React.Dispatch> - ): JSX.Element => { - switch (state) { - case 'created': - return ( - - ) - case 'selectNetwork': - return - case 'loading': - return ( -
    - -

    Creating Account

    -
    - ) - default: - throw new Error('Invlalid state') - } - } - - return ( - - - - - -
    -

    Create Account

    -
    - {getCurrentStateView(currentState, setCurrentState)} -     -     -     - ) -} - -export default NewTestNetAccount diff --git a/plugin/src/components/NewTestnetAccount/newTestnetAccount.css b/plugin/src/components/NewTestnetAccount/newTestnetAccount.css deleted file mode 100644 index 80a5a9a7..00000000 --- a/plugin/src/components/NewTestnetAccount/newTestnetAccount.css +++ /dev/null @@ -1,76 +0,0 @@ -.close-btn { - position: absolute; - top: 10px; - right: 10px; - display: flex; - align-items: center; - justify-content: center; -} - -.header-section { - padding: 10px 0px; - border-bottom: 1px solid var(--borderPrimary); -} - -.header-section > h3 { - color: var(--white); - font-size: 1.2rem; -} - -.select-account-creation-network { - padding: 0.5rem; - border-radius: 0.5rem; - font-size: 0.8rem; - border: 1px solid var(--borderPrimary); -} - -.select-account-creation-network-wrapper { - display: flex; - justify-content: flex-start; - align-items: center; - padding: 0.5rem 0rem; -} -.select-account-creation-network-wrapper > p { - all: unset; - font-size: 1rem; - margin-right: 1rem; -} - -.account-state-loader-wrapper { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 200px; - width: 100%; -} - -.account-label { - font-size: 1rem; -} - -.account-address-wrapper { - display: flex; - flex-direction: column; - padding: 1rem 0rem; -} - -.account-address-wrapper > span { - display: flex; - align-items: center; -} -.account-address-wrapper .account-address { - all: unset; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - - -.copied-text { - position: absolute; -} - -.balance-wrapper > p { - all: unset; -} \ No newline at end of file diff --git a/plugin/src/components/ui_components/Accordian/accordian.css b/plugin/src/components/ui_components/Accordian/accordian.css index b8ee92fe..76eb3c47 100644 --- a/plugin/src/components/ui_components/Accordian/accordian.css +++ b/plugin/src/components/ui_components/Accordian/accordian.css @@ -7,7 +7,7 @@ h3 { .AccordionRoot { border-radius: 6px; width: 100%; - box-shadow: 0 2px 10px var(--shadowPrimary); + box-shadow: 0 2px 10px var(--primary-color-100); } .AccordionItem { @@ -38,9 +38,8 @@ h3 { .AccordionTrigger { font-family: inherit; - background-color: transparent; padding: 0 20px; - height: 45px; + min-height: 45px; flex: 1; display: flex; align-items: center; @@ -48,23 +47,21 @@ h3 { font-size: 1rem; font-weight: bold; line-height: 1; - color: var(--violet11); + color: var(--light); transition: all 0.1s ease; - border-bottom: 1px solid var(--primary-color-900); + border-bottom: 1px solid var(--secondary-color-900); box-shadow: 0 1px 0 var(--primary-color); - background-color: var(--primary-color); } .AccordionTrigger:hover { - background-color: var(--secondary-color); - color: var(--textPrimary); + background-color: var(--secondary-color) !important; + color: var(--light); } .AccordionContent { overflow: hidden; font-size: 1rem; color: var(--light); - background-color: var(--primary-color); } .AccordionContent[data-state='open'] { animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1); @@ -78,7 +75,6 @@ h3 { } .AccordionChevron { - color: var(--textPrimary); transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1); } .AccordionTrigger[data-state='open'] > .AccordionChevron { diff --git a/plugin/src/components/ui_components/Accordian/index.tsx b/plugin/src/components/ui_components/Accordian/index.tsx index 4cac9ba5..fa8e079a 100644 --- a/plugin/src/components/ui_components/Accordian/index.tsx +++ b/plugin/src/components/ui_components/Accordian/index.tsx @@ -12,12 +12,12 @@ export const AccordionTrigger = React.forwardRef( ({ children, className, ...props }, forwardedRef) => ( {children} - + ) @@ -27,7 +27,7 @@ export const AccordionTrigger = React.forwardRef( export const AccordionContent = React.forwardRef( ({ children, className, ...props }, forwardedRef) => ( @@ -51,7 +51,7 @@ const Accordian: React.FC = ({ value }) => ( = ({ children }) => { - return
    {children}
    + return
    {children}
    } export default Container diff --git a/plugin/src/components/ui_components/Dialog/dialog.css b/plugin/src/components/ui_components/Dialog/dialog.css deleted file mode 100644 index 1f4fea5b..00000000 --- a/plugin/src/components/ui_components/Dialog/dialog.css +++ /dev/null @@ -1,158 +0,0 @@ -button, -fieldset, -input { - all: unset; -} - -.DialogOverlay { - background-color: var(--black); - position: fixed; - opacity: 0.5; - inset: 0; - animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.DialogContent { - background-color: var(--bgPrimary); - border: 1px solid var(--accentColor); - border-radius: 6px; - box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, - hsl(206 22% 7% / 20%) 0px 10px 20px -15px; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 90vw; - max-width: 450px; - max-height: 85vh; - padding: 25px; - animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1); -} -.DialogContent:focus { - outline: none; -} - -.DialogTitle { - margin: 0; - font-weight: 500; - color: var(--mauve12); - font-size: 17px; -} - -.DialogDescription { - margin: 10px 0 20px; - color: var(--mauve11); - font-size: 15px; - line-height: 1.5; -} - -.DialogClose { - position: absolute; - top: 1rem; - right: 1rem; -} - -.Button { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 4px; - padding: 0 15px; - font-size: 15px; - line-height: 1; - font-weight: 500; - height: 35px; -} -.Button.violet { - background-color: white; - color: var(--violet11); - box-shadow: 0 2px 10px var(--blackA7); -} -.Button.violet:hover { - background-color: var(--mauve3); -} -.Button.violet:focus { - box-shadow: 0 0 0 2px black; -} -.Button.green { - background-color: var(--green4); - color: var(--green11); -} -.Button.green:hover { - background-color: var(--green5); -} -.Button.green:focus { - box-shadow: 0 0 0 2px var(--green7); -} - -.IconButton { - font-family: inherit; - border-radius: 100%; - height: 25px; - width: 25px; - display: inline-flex; - align-items: center; - justify-content: center; - color: var(--violet11); - position: absolute; - top: 10px; - right: 10px; -} -.IconButton:hover { - background-color: var(--violet4); -} -.IconButton:focus { - box-shadow: 0 0 0 2px var(--violet7); -} - -.Fieldset { - display: flex; - gap: 20px; - align-items: center; - margin-bottom: 15px; -} - -.Label { - font-size: 15px; - color: var(--violet11); - width: 90px; - text-align: right; -} - -.Input { - width: 100%; - flex: 1; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 4px; - padding: 0 10px; - font-size: 15px; - line-height: 1; - color: var(--violet11); - box-shadow: 0 0 0 1px var(--violet7); - height: 35px; -} -.Input:focus { - box-shadow: 0 0 0 2px var(--violet8); -} - -@keyframes overlayShow { - from { - opacity: 0; - } - to { - opacity: 0.5; - } -} - -@keyframes contentShow { - from { - opacity: 0; - transform: translate(-50%, -48%) scale(0.96); - } - to { - opacity: 1; - transform: translate(-50%, -50%) scale(1); - } -} diff --git a/plugin/src/components/ui_components/Dialog/index.tsx b/plugin/src/components/ui_components/Dialog/index.tsx deleted file mode 100644 index 83ceca79..00000000 --- a/plugin/src/components/ui_components/Dialog/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import * as Dialog from '@radix-ui/react-dialog' -import { RxCross2 } from 'react-icons/rx' -import './dialog.css' - -const Root = Dialog.Root - -const Trigger = Dialog.Trigger - -const Portal = Dialog.Portal - -const Overlay: React.FC = ({ ...props }) => ( - -) - -const Content: React.FC = ({ - children, - ...props -}) => {children} - -const Close: React.FC = ({ ...props }) => ( - - - -) - -export { Root, Close, Content, Overlay, Portal, Trigger } diff --git a/plugin/src/components/ui_components/Dropdown/dropdown.css b/plugin/src/components/ui_components/Dropdown/dropdown.css index ee32cba5..e935d18a 100644 --- a/plugin/src/components/ui_components/Dropdown/dropdown.css +++ b/plugin/src/components/ui_components/Dropdown/dropdown.css @@ -6,8 +6,7 @@ button { .DropdownMenuContent, .DropdownMenuSubContent { min-width: 220px; - background-color: var(--bgPrimary); - border: 1px solid var(--white); + border: 1px solid var(--light); border-radius: 6px; padding: 5px; box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), @@ -39,7 +38,7 @@ button { .DropdownMenuSubTrigger { font-size: 13px; line-height: 1; - color: var(--violet11); + color: var(--light); border-radius: 3px; display: flex; align-items: center; @@ -50,38 +49,36 @@ button { outline: none; } .DropdownMenuSubTrigger[data-state='open'] { - background-color: var(--violet4); - color: var(--violet11); + color: var(--light); } .DropdownMenuItem[data-disabled], .DropdownMenuCheckboxItem[data-disabled], .DropdownMenuRadioItem[data-disabled], .DropdownMenuSubTrigger[data-disabled] { - color: var(--mauve8); + color: var(--light); pointer-events: none; } .DropdownMenuItem[data-highlighted], .DropdownMenuCheckboxItem[data-highlighted], .DropdownMenuRadioItem[data-highlighted], .DropdownMenuSubTrigger[data-highlighted] { - background-color: var(--violet9); - color: var(--violet1); + color: var(--light); } .DropdownMenuItem:hover { - background: var(--accentColor); + background: var(--secondary-color) !important; } .DropdownMenuLabel { padding-left: 25px; font-size: 12px; line-height: 25px; - color: var(--mauve11); + color: var(--light); } .DropdownMenuSeparator { height: 1px; - background-color: var(--violet6); + background-color: var(--primary-color-800); margin: 5px; } @@ -107,11 +104,10 @@ button { align-items: center; justify-content: center; color: var(--violet11); - background-color: white; box-shadow: 0 2px 10px var(--blackA7); } .IconButton:hover { - background-color: var(--violet3); + background-color: var(--secondary-color); } .IconButton:focus { box-shadow: 0 0 0 2px black; @@ -120,13 +116,13 @@ button { .RightSlot { margin-left: auto; padding-left: 20px; - color: var(--mauve11); + color: var(--light); } [data-highlighted] > .RightSlot { color: white; } [data-disabled] .RightSlot { - color: var(--mauve8); + color: var(--light-600); } @keyframes slideUpAndFade { diff --git a/plugin/src/components/ui_components/Dropdown/index.tsx b/plugin/src/components/ui_components/Dropdown/index.tsx index 41aab33c..4fe43c1f 100644 --- a/plugin/src/components/ui_components/Dropdown/index.tsx +++ b/plugin/src/components/ui_components/Dropdown/index.tsx @@ -28,7 +28,7 @@ interface IContent { children?: React.ReactNode } const Content: React.FC = ({ children, ...props }) => ( - + {children} ) @@ -40,7 +40,7 @@ const Item: React.FC = ({ children, ...props }) => ( - + {children} ) @@ -52,7 +52,7 @@ interface ISubContent { } const SubContent: React.FC = ({ children, ...props }) => ( {children} @@ -64,7 +64,7 @@ interface ISubTrigger { } const SubTrigger: React.FC = ({ children, ...props }) => ( {children} @@ -72,7 +72,7 @@ const SubTrigger: React.FC = ({ children, ...props }) => ( ) const SubDivider: React.FC = () => ( - + ) export { diff --git a/plugin/src/components/ui_components/Tabs/tabs.css b/plugin/src/components/ui_components/Tabs/tabs.css index 68bc3f9b..bfd88cda 100644 --- a/plugin/src/components/ui_components/Tabs/tabs.css +++ b/plugin/src/components/ui_components/Tabs/tabs.css @@ -9,13 +9,13 @@ input { display: flex; flex-direction: column; width: 100%; - box-shadow: 0 2px 10px var(--black); + box-shadow: 0 2px 10px var(--dark); } .TabsList { flex-shrink: 0; display: flex; - border-bottom: 1px solid var(--accentColor); + border-bottom: 1px solid var(--secondary-color); } .TabsTrigger { @@ -30,7 +30,7 @@ input { font-size: 15px; line-height: 1; color: var(--white); - border-right: 1px solid var(--accentColor); + border-right: 1px solid var(--secondary-color); user-select: none; } .TabsTrigger:first-child { @@ -41,10 +41,10 @@ input { border-right: none; } .TabsTrigger:hover { - color: var(--violet11); + color: var(--primary-color) !important; } .TabsTrigger[data-state='active'] { - color: var(--violet11); + color: var(--primary-color); box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor; } .TabsTrigger:focus { @@ -55,7 +55,7 @@ input { .TabsContent { flex-grow: 1; padding: 20px; - background-color: var(--bgPrimary); + background-color: var(--primary-color-900); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; outline: none; diff --git a/plugin/src/components/ui_components/Tooltip/tooltip.css b/plugin/src/components/ui_components/Tooltip/tooltip.css index 66180a08..f704e78f 100644 --- a/plugin/src/components/ui_components/Tooltip/tooltip.css +++ b/plugin/src/components/ui_components/Tooltip/tooltip.css @@ -6,11 +6,11 @@ button { .TooltipContent { border-radius: 4px; padding: 10px 15px; - font-size: 15px; + font-size: var(--font-sm); line-height: 1; - color: var(--textPrimary); - background-color: var(--bgPrimary); - border: 1px solid var(--borderPrimary); + color: var(--light); + background-color: var(--primary-color); + border: 1px solid var(--primary-color-900); box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px; user-select: none; diff --git a/plugin/src/features/Environment/index.tsx b/plugin/src/features/Environment/index.tsx index 0c736495..22570e85 100644 --- a/plugin/src/features/Environment/index.tsx +++ b/plugin/src/features/Environment/index.tsx @@ -48,10 +48,10 @@ const Environment: React.FC = () => { <> -
    +
    {env !== 'manual' ? ( <> -
    +
    @@ -80,7 +80,7 @@ const Environment: React.FC = () => { )}
    -
    +
    {['localDevnet', 'remoteDevnet'].includes(env) ? ( ) : ( diff --git a/plugin/theme/background.css b/plugin/theme/background.css index e0a90595..65cbd585 100644 --- a/plugin/theme/background.css +++ b/plugin/theme/background.css @@ -3,11 +3,11 @@ /* Classes Definitions */ /* Backgrounds */ .bg-primary { - background: var(--primary-color); + background: var(--primary-color-900) !important; } .bg-secondary { - background: var(--secondary-color); + background: var(--secondary-color-900) !important; } .bg-success { @@ -33,4 +33,8 @@ .bg-light { background: var(--light); } + + .bg-transparent { + background: transparent !important; + } } \ No newline at end of file diff --git a/plugin/theme/border.css b/plugin/theme/border.css index 83e259f3..4b4b8782 100644 --- a/plugin/theme/border.css +++ b/plugin/theme/border.css @@ -153,6 +153,19 @@ border-width: var(--space-2xl); } + /* Border Styles */ + .b-solid { + border-style: solid; + } + + .b-dashed { + border-style: dashed; + } + + .b-dotted { + border-style: dotted; + } + /* Border Colors */ .border-primary { border-color: var(--primary-color); diff --git a/plugin/theme/components/badge.css b/plugin/theme/components/badge.css new file mode 100644 index 00000000..0b84d443 --- /dev/null +++ b/plugin/theme/components/badge.css @@ -0,0 +1,46 @@ +:root { + .badge { + + } + + .badge-rounded { + border-radius: 50%; + } + + .badge-pilled { + border-top-left-radius: 50%; + border-top-right-radius: 50%; + border-bottom-left-radius: 50%; + border-bottom-right-radius: 50%; + } + + .badge-primary { + color: var(--light) !important; + background: var(--primary-color) !important; + } + + .badge-secondary { + color: var(--light) !important; + background: var(--secondary-color) !important; + } + + .badge-information { + color: var(--light) !important; + background: var(--information-color) !important; + } + + .badge-error { + color: var(--light) !important; + background: var(--error-color) !important; + } + + .badge-success { + color: var(--light) !important; + background: var(--success-color) !important; + } + + .badge-warning { + color: var(--light) !important; + background: var(--warning-color) !important; + } +} \ No newline at end of file diff --git a/plugin/theme/components/button.css b/plugin/theme/components/button.css new file mode 100644 index 00000000..ea3226b7 --- /dev/null +++ b/plugin/theme/components/button.css @@ -0,0 +1,7 @@ +:root { + .btn { + color: var(--light); + padding: var(--space-sm) + } + +} \ No newline at end of file diff --git a/plugin/theme/components/index.css b/plugin/theme/components/index.css new file mode 100644 index 00000000..28d832f0 --- /dev/null +++ b/plugin/theme/components/index.css @@ -0,0 +1,2 @@ +@import "badge.css"; +@import "button.css"; \ No newline at end of file diff --git a/plugin/theme/display.css b/plugin/theme/display.css new file mode 100644 index 00000000..94a70d9c --- /dev/null +++ b/plugin/theme/display.css @@ -0,0 +1,50 @@ +:root { + + .flex { + display: flex !important; + } + + .flex-row { + flex-direction: row !important; + } + + .flex-column { + flex-direction: column !important; + } + + .justify-content-center { + justify-content: center !important; + } + + .justify-content-start { + justify-content: start !important; + } + + .justify-content-space-around { + justify-content: space-around !important; + } + + .justify-content-space-between { + justify-content: space-between !important; + } + + .justify-content-space-evenly { + justify-content: space-evenly !important; + } + + .justify-content-end { + justify-content: end !important; + } + + .align-items-start { + align-items: start !important; + } + + .align-items-center { + align-items: center !important; + } + + .align-items-end { + align-items: end !important; + } +} \ No newline at end of file diff --git a/plugin/theme/padding.css b/plugin/theme/padding.css index 1a01b25c..f108b8fb 100644 --- a/plugin/theme/padding.css +++ b/plugin/theme/padding.css @@ -1,128 +1,133 @@ :root { /* Paddings */ + + .p-0 { + padding: 0px !important; + } + .p-1 { - padding: var(--space-xs); + padding: var(--space-xs) !important; } .p-2 { - padding: var(--space-sm); + padding: var(--space-sm) !important; } .p-3 { - padding: var(--space-md); + padding: var(--space-md) !important; } .p-4 { - padding: var(--space-lg); + padding: var(--space-lg) !important; } .p-5 { - padding: var(--space-xl); + padding: var(--space-xl) !important; } .p-6 { - padding: var(--space-2xl); + padding: var(--space-2xl) !important; } /* Padding Bottom */ .pb-1 { - padding-bottom: var(--space-xs); + padding-bottom: var(--space-xs) !important; } .pb-2 { - padding-bottom: var(--space-sm); + padding-bottom: var(--space-sm) !important; } .pb-3 { - padding-bottom: var(--space-md); + padding-bottom: var(--space-md) !important; } .pb-4 { - padding-bottom: var(--space-lg); + padding-bottom: var(--space-lg) !important; } .pb-5 { - padding-bottom: var(--space-xl); + padding-bottom: var(--space-xl) !important; } .pb-6 { - padding-bottom: var(--space-2xl); + padding-bottom: var(--space-2xl) !important; } /* Padding Top */ .pt-1 { - padding-top: var(--space-xs); + padding-top: var(--space-xs) !important; } .pt-2 { - padding-top: var(--space-sm); + padding-top: var(--space-sm) !important; } .pt-3 { - padding-top: var(--space-md); + padding-top: var(--space-md) !important; } .pt-4 { - padding-top: var(--space-lg); + padding-top: var(--space-lg) !important; } .pt-5 { - padding-top: var(--space-xl); + padding-top: var(--space-xl) !important; } .pt-6 { - padding-top: var(--space-2xl); + padding-top: var(--space-2xl) !important; } /* padding Left */ .pl-1 { - padding-left: var(--space-xs); + padding-left: var(--space-xs) !important; } .pl-2 { - padding-left: var(--space-sm); + padding-left: var(--space-sm) !important; } .pl-3 { - padding-left: var(--space-md); + padding-left: var(--space-md) !important; } .pl-4 { - padding-left: var(--space-lg); + padding-left: var(--space-lg) !important; } .pl-5 { - padding-left: var(--space-xl); + padding-left: var(--space-xl) !important; } .pl-6 { - padding-left: var(--space-2xl); + padding-left: var(--space-2xl) !important; } /* padding Right */ .pr-1 { - padding-right: var(--space-xs); + padding-right: var(--space-xs) !important; } .pr-2 { - padding-right: var(--space-sm); + padding-right: var(--space-sm) !important; } .pr-3 { - padding-right: var(--space-md); + padding-right: var(--space-md) !important; } .pr-4 { - padding-right: var(--space-lg); + padding-right: var(--space-lg) !important; } .pr-5 { - padding-right: var(--space-xl); + padding-right: var(--space-xl) !important; } .pr-6 { - padding: var(--space-2xl); + padding: var(--space-2xl) !important; } } \ No newline at end of file diff --git a/plugin/theme/sizes.css b/plugin/theme/sizes.css index 0b94c774..32f57522 100644 --- a/plugin/theme/sizes.css +++ b/plugin/theme/sizes.css @@ -7,6 +7,35 @@ --font-xl: 2.5rem; --font-2xl: 3rem; + .text-xs { + font-size: var(--font-xs); + } + + .text-sm { + font-size: var(--font-sm); + } + + .text-md { + font-size: var(--font-md); + } + + .text-lg { + font-size: var(--font-lg); + } + + .text-xl { + font-size: var(--font-xl); + } + + .text-2xl { + font-size: var(--font-2xl); + } + + .text-xs { + font-size: var(--font-xs); + } + + /* Spacing */ --space-xs: 0.3rem; --space-sm: 0.5rem; diff --git a/plugin/theme/text.css b/plugin/theme/text.css index f1fdba58..307af0b3 100644 --- a/plugin/theme/text.css +++ b/plugin/theme/text.css @@ -2,35 +2,52 @@ /* Texts */ .text-primary { - border-color: var(--primary-color); + border-color: var(--primary-color) !important; } .text-secondary { - color: var(--secondary-color); + color: var(--secondary-color) !important; } .text-success { - color: var(--success-color); + color: var(--success-color) !important; } .text-information { - color: var(--information-color); + color: var(--information-color) !important; } .text-warning { - color: var(--warning-color); + color: var(--warning-color) !important; } .text-error { - color: var(--error-color); + color: var(--error-color) !important; } .text-dark { - color: var(--dark); + color: var(--dark) !important; } .text-light { - background: var(--light); + color: var(--light) !important; + } + + .text-disabled { + color: var(--dark-300) !important; + } + + /* Text Alignment */ + .text-center { + text-align: center !important; + } + + .text-start { + text-align: start !important; + } + + .text-end { + text-align: end !important; } } \ No newline at end of file diff --git a/plugin/theme/theme.css b/plugin/theme/theme.css index 6b0b678e..c002fa31 100644 --- a/plugin/theme/theme.css +++ b/plugin/theme/theme.css @@ -5,4 +5,9 @@ @import "util.css"; @import "border.css"; @import "padding.css"; -@import "margin.css"; \ No newline at end of file +@import "margin.css"; +@import "display.css"; + + +/* Import component at the bottom so vars are available */ +@import "components/index.css" \ No newline at end of file From bcd7f21a30124f6a395422aedfe8af9e4676a47c Mon Sep 17 00:00:00 2001 From: Prince Anuragi Date: Mon, 30 Oct 2023 14:22:19 +0530 Subject: [PATCH 3/5] fix: update devnet account selctor --- .../devnetAccountSelector.css | 5 ++ .../DevnetAccountSelector/index.tsx | 62 ++++++++++++++++--- 2 files changed, 57 insertions(+), 10 deletions(-) diff --git a/plugin/src/components/DevnetAccountSelector/devnetAccountSelector.css b/plugin/src/components/DevnetAccountSelector/devnetAccountSelector.css index af6d476c..e473087d 100644 --- a/plugin/src/components/DevnetAccountSelector/devnetAccountSelector.css +++ b/plugin/src/components/DevnetAccountSelector/devnetAccountSelector.css @@ -4,6 +4,11 @@ justify-content: space-between; } +.devnet-account-selector-trigger { + width: 100%; + border: 1px solid var(--primary-color-500); +} + .text-copied { top: 0px; left: 0px; diff --git a/plugin/src/components/DevnetAccountSelector/index.tsx b/plugin/src/components/DevnetAccountSelector/index.tsx index 6fce4add..2d4247b2 100644 --- a/plugin/src/components/DevnetAccountSelector/index.tsx +++ b/plugin/src/components/DevnetAccountSelector/index.tsx @@ -1,6 +1,5 @@ import { getRoundedNumber, - getSelectedAccountIndex, getShortenedHash, weiToEth } from '../../utils/utils' @@ -15,6 +14,8 @@ import { availableDevnetAccountsAtom, devnetAtom, envAtom, isDevnetAliveAtom, se import useAccount from '../../hooks/useAccount' import useProvider from '../../hooks/useProvider' import useRemixClient from '../../hooks/useRemixClient' +import * as D from '../../components/ui_components/Dropdown' +import { BsCheck, BsChevronDown } from 'react-icons/bs' const DevnetAccountSelector: React.FC = () => { const { account, setAccount } = useAccount() @@ -138,12 +139,12 @@ const DevnetAccountSelector: React.FC = () => { setProvider(newProvider) }, [devnet, selectedDevnetAccount]) - function handleAccountChange (event: any): void { - if (event.target.value === -1) { + function handleAccountChange (value: number): void { + if (value === -1) { return } - setAccountIdx(event.target.value) - setSelectedDevnetAccount(availableDevnetAccounts[event.target.value]) + setAccountIdx(value) + setSelectedDevnetAccount(availableDevnetAccounts[value]) const newProvider = new Provider({ sequencer: { baseUrl: devnet.url @@ -153,8 +154,8 @@ const DevnetAccountSelector: React.FC = () => { setAccount( new Account( provider ?? newProvider, - availableDevnetAccounts[event.target.value].address, - availableDevnetAccounts[event.target.value].private_key + availableDevnetAccounts[value].address, + availableDevnetAccounts[value].private_key ) ) } @@ -168,11 +169,52 @@ const DevnetAccountSelector: React.FC = () => { setAccountIdx(0) }, [env]) + const [dropdownControl, setDropdownControl] = useState(false) + return (
    - { - ] as JSX.Element[])} - + ] as JSX.Element[])} + */}