Widget/popover appearance (#1983)

* Publish - @synapsecns/[email protected] * popover appearance * ConnectedIndicator color * improve containerless appearance * default container property to false * Adds isOrigin to addition ChainOption components * Removes console log --------- Co-authored-by: abtestingalpha <[email protected]>
synapsecns · Feb 6, 2024 · cecf3f4 · cecf3f4
1 parent b5341a6
commit cecf3f4
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 96 deletions.
diff --git a/packages/widget/CHANGELOG.md b/packages/widget/CHANGELOG.md
@@ -15,122 +15,62 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.35](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-05)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.34](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-05)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.33](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-04)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.32](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-02)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.31](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-02)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.30](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-02)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.29](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-02)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.28](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-02)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.27](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-02)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.26](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-01)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.25](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-01)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.24](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-01)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.23](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-01)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## [0.0.22](https://github.com/synapsecns/sanguine/compare/@synapsecns/[email protected]...@synapsecns/[email protected]) (2024-02-01)
 
 **Note:** Version bump only for package @synapsecns/widget
 
-
-
-
-
 ## 0.0.21 (2024-02-01)
 
 **Note:** Version bump only for package @synapsecns/widget
diff --git a/packages/widget/examples/landing-page/src/app/page.tsx b/packages/widget/examples/landing-page/src/app/page.tsx
@@ -68,13 +68,13 @@ const consumerExamples = {
   dfk: {
     customTheme: {
       bgColor: 'light',
-      '--synapse-text': 'hsl(12deg 85% 13%)',
-      '--synapse-secondary': 'hsl(12deg 85% 20%)',
+      '--synapse-text': 'hsl(12deg 85% 10%)',
+      '--synapse-secondary': 'hsl(12deg 40% 40%)',
       '--synapse-select-bg': 'hsl(35deg 100% 87%)',
       '--synapse-surface': 'hsl(32deg 69% 78%)',
       '--synapse-root': 'hsl(35deg 100% 87%)',
       '--synapse-border': 'hsl(29deg 53% 68%)',
-      '--synapse-focus': 'hsl(12deg 85% 15%)',
+      '--synapse-focus': 'hsl(12deg 85% 25%)',
       '--synapse-accent': 'hsl(12deg 85% 15%)',
     },
     targetTokens: [ETH, USDC, JEWEL, XJEWEL, WJEWEL],
@@ -90,7 +90,7 @@ const customRpcs: CustomRpcs = {
 
 export default function Home() {
   const [config, setConfig] = useState<any>(initialConfig)
-  const [container, setContainer] = useState(true)
+  const [container, setContainer] = useState(false)
 
   const { web3Provider } = useEthereumWallet()
 

diff --git a/packages/widget/src/components/BridgeButton.tsx b/packages/widget/src/components/BridgeButton.tsx
@@ -41,8 +41,8 @@ export const BridgeButton = ({
     p-2 text-lg font-sans font-medium tracking-wide rounded-md w-full
     border border-solid border-[--synapse-button-border]
     hover:border-[--synapse-focus] disabled:hover:border-[--synapse-button-border]
-    active:opacity-40 disabled:opacity-70
-    text-[--synapse-button-text] disabled:text-[--synapse-secondary]
+    active:opacity-70 disabled:opacity-40
+    text-[--synapse-button-text]
     cursor-pointer disabled:cursor-not-allowed
   `
 

diff --git a/packages/widget/src/components/Widget.tsx b/packages/widget/src/components/Widget.tsx
@@ -72,7 +72,7 @@ interface WidgetProps {
 
 export const Widget = ({
   customTheme,
-  container,
+  container = false,
   targetChainIds,
   targetTokens,
   protocolName,
@@ -343,7 +343,7 @@ export const Widget = ({
   }
 
   const containerStyle = `
-    ${container === false ? 'p-0' : 'p-2 rounded-lg'}`
+    ${container === false ? 'p-2 rounded-[inherit]' : 'p-2 rounded-lg'}`
 
   const cardStyle = `
     grid grid-cols-[1fr_auto]

diff --git a/packages/widget/src/components/icons/ConnectedIndicator.tsx b/packages/widget/src/components/icons/ConnectedIndicator.tsx
@@ -7,14 +7,14 @@ export const ConnectedIndicator = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="8" cy="8" r="4" fill="#008000" />
       <circle
         cx="8"
         cy="8"
-        r="6"
-        stroke="#008000"
+        r="4"
+        fill="var(--synapse-progress-success)"
+        stroke="var(--synapse-progress-success)"
         strokeOpacity="0.125"
-        strokeWidth="4"
+        strokeWidth="8"
       />
     </svg>
   )

diff --git a/packages/widget/src/components/ui/ChainOption.tsx b/packages/widget/src/components/ui/ChainOption.tsx
@@ -8,10 +8,12 @@ export const ChainOption = ({
   option,
   isSelected,
   onSelect,
+  isOrigin,
 }: {
   option: Chain
   isSelected: boolean
   onSelect: (option: Chain) => void
+  isOrigin?: boolean
 }) => {
   const web3Context = useContext(Web3Context)
 
@@ -25,7 +27,7 @@ export const ChainOption = ({
       className={`
       pl-2.5 pr-2.5 py-2.5 rounded-[.1875rem] border border-solid
       hover:border-[--synapse-focus] active:opacity-40
-      cursor-pointer whitespace-nowrap
+      cursor-pointer whitespace-nowrap group flex justify-between items-center
       ${
         isSelected
           ? 'border-[--synapse-focus] hover:opacity-70'
@@ -34,10 +36,15 @@ export const ChainOption = ({
     `}
       onClick={() => onSelect(option)}
     >
-      <div className="flex justify-between">
-        <div>{option.name}</div>
-        {option.id === networkId && <ConnectedIndicator />}
-      </div>
+      {option.name}
+      {isOrigin &&
+        (option.id === networkId ? (
+          <ConnectedIndicator />
+        ) : (
+          <span className="opacity-0 text-sm text-[--synapse-secondary] group-hover:opacity-100">
+            Switch
+          </span>
+        ))}
     </li>
   )
 }
diff --git a/packages/widget/src/components/ui/ChainPopoverSelect.tsx b/packages/widget/src/components/ui/ChainPopoverSelect.tsx
@@ -92,15 +92,20 @@ export const ChainPopoverSelect = ({
             animate-slide-down origin-top
           `}
         >
-          <SearchInput
-            inputValue={filterValue}
-            setInputValue={setFilterValue}
-            placeholder="Search Chains"
-            isActive={isOpen}
-          />
-          {targets && targets.length > 0 && (
-            <ToggleTabs selectedTab={activeTab} onTabSelect={handleTabSelect} />
-          )}
+          <div className="grid gap-1 p-1">
+            <SearchInput
+              inputValue={filterValue}
+              setInputValue={setFilterValue}
+              placeholder="Search Chains"
+              isActive={isOpen}
+            />
+            {targets && targets.length > 0 && (
+              <ToggleTabs
+                selectedTab={activeTab}
+                onTabSelect={handleTabSelect}
+              />
+            )}
+          </div>
           {activeTab === 'All' ? (
             hasFilteredResults ? (
               <ul className="p-0 m-0">
@@ -110,6 +115,7 @@ export const ChainPopoverSelect = ({
                     option={option}
                     isSelected={option?.name === selected?.name}
                     onSelect={() => handleSelect(option)}
+                    isOrigin={isOrigin}
                   />
                 ))}
                 {hasFilteredRemaining && (
@@ -128,6 +134,7 @@ export const ChainPopoverSelect = ({
                     option={option}
                     isSelected={option?.name === selected?.name}
                     onSelect={() => handleSelect(option)}
+                    isOrigin={isOrigin}
                   />
                 ))}
               </ul>
@@ -148,6 +155,7 @@ export const ChainPopoverSelect = ({
                     option={option}
                     isSelected={option?.name === selected?.name}
                     onSelect={() => handleSelect(option)}
+                    isOrigin={isOrigin}
                   />
                 ))}
               </ul>

diff --git a/packages/widget/src/components/ui/SearchInput.tsx b/packages/widget/src/components/ui/SearchInput.tsx
@@ -34,7 +34,7 @@ export const SearchInput = ({
         style={{ background: 'var(--synapse-select-bg)' }}
         className={`
           text-[--synapse-text] placeholder:text-[--synapse-secondary]
-          w-full border border-solid border-[--synapse-focus] shadow-none text-base
+          w-full border border-solid border-[--synapse-focus] shadow-none text-sm
           focus:ring-0 focus:border-[--synapse-focus] focus:outline-none
           px-2 py-1.5 rounded
         `}

diff --git a/packages/widget/src/components/ui/ToggleTabs.tsx b/packages/widget/src/components/ui/ToggleTabs.tsx
@@ -22,7 +22,7 @@ export const ToggleTabs: React.FC<ToggleTabsProps> = ({
 
   return (
     <div
-      className="flex mx-1 my-2 text-sm text-center cursor-default rounded border border-solid border-[--synapse-border]"
+      className="flex text-sm text-center cursor-default rounded border border-solid border-[--synapse-border]"
       style={{ background: 'var(--synapse-root' }}
       role="group"
     >

diff --git a/packages/widget/src/components/ui/TokenPopoverSelect.tsx b/packages/widget/src/components/ui/TokenPopoverSelect.tsx
@@ -95,12 +95,14 @@ export const TokenPopoverSelect = ({
             animate-slide-down origin-top
           `}
         >
-          <SearchInput
-            inputValue={filterValue}
-            setInputValue={setFilterValue}
-            placeholder="Search Tokens"
-            isActive={isOpen}
-          />
+          <div className="p-1">
+            <SearchInput
+              inputValue={filterValue}
+              setInputValue={setFilterValue}
+              placeholder="Search Tokens"
+              isActive={isOpen}
+            />
+          </div>
           {hasFilteredResults ? (
             <ul className="p-0 m-0">
               {filteredSortedOptionsWithBalances?.map(
@@ -166,7 +168,7 @@ const TokenOption = ({
       className={`
         flex gap-4 items-center justify-between
         cursor-pointer rounded border border-solid
-        hover:border-[--synapse-focus] active:opacity-40
+        hover:border-[--synapse-focus] active:opacity-40 group
         ${
           option?.symbol === selected?.symbol
             ? 'border-[--synapse-focus] hover:opacity-70'
@@ -189,7 +191,17 @@ const TokenOption = ({
           }
         `}
       >
-        {parsedBalance ?? '−'}
+        {parsedBalance ? (
+          parsedBalance === '0.0' ? (
+            '−'
+          ) : (
+            parsedBalance
+          )
+        ) : (
+          <span className="opacity-0 text-sm text-[--synapse-secondary] group-hover:opacity-100">
+            Receive
+          </span>
+        )}
       </data>
     </li>
   )

diff --git a/packages/widget/src/utils/generateTheme.ts b/packages/widget/src/utils/generateTheme.ts
@@ -64,6 +64,11 @@ export function generateTheme(theme: CustomThemeVariables = {}) {
           '--synapse-button-bg': 'var(--synapse-surface)',
           '--synapse-button-text': 'var(--synapse-text)',
           '--synapse-button-border': 'var(--synapse-border)',
+
+          '--synapse-progress': 'hsl(265deg 100% 75%)',
+          '--synapse-progress-flash': 'hsl(185deg 100% 45%)',
+          '--synapse-progress-success': 'hsl(105deg 100% 60%)',
+          '--synapse-progress-error': 'hsl(15deg 100% 65%)',
         }
       : {
           '--synapse-text': hslString(h, s, l, a, 0.04),
@@ -82,6 +87,11 @@ export function generateTheme(theme: CustomThemeVariables = {}) {
           '--synapse-button-bg': 'var(--synapse-surface)',
           '--synapse-button-text': 'var(--synapse-text)',
           '--synapse-button-border': 'var(--synapse-border)',
+
+          '--synapse-progress': 'hsl(265deg 100% 65%)',
+          '--synapse-progress-flash': 'hsl(215deg 100% 65%)',
+          '--synapse-progress-success': 'hsl(120deg 100% 30%)',
+          '--synapse-progress-error': 'hsl(15deg 100% 65%)',
         }
 
   for (const key in theme) if (/^--/.test(key)) generatedTheme[key] = theme[key]