style changes

pyth-network · Dec 11, 2023 · c2a9561 · c2a9561
1 parent 75bb0d0
commit c2a9561
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 43 deletions.
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
@@ -46,7 +46,7 @@ const Header = () => {
           </Link>
         </div>
         <div className="flex items-center justify-end space-x-2">
-          <div className="flex w-[200px] justify-end">
+          <div className="solana-wallet-button flex w-[200px] justify-end [&_button]:!rounded-none">
             <WalletMultiButtonDynamic
               style={{
                 padding: '0 18px',

diff --git a/frontend/components/WalletModalButton.tsx b/frontend/components/WalletModalButton.tsx
@@ -2,17 +2,19 @@ import { WalletModalButton as SolanaWalletModalButton } from '@solana/wallet-ada
 
 export function WalletModalButton() {
   return (
-    <SolanaWalletModalButton
-      style={{
-        padding: '0 64px',
-        border: 'solid',
-        borderWidth: '1px',
-        borderColor: 'rgb(113 66 207)',
-        borderRadius: '9999px',
-        whiteSpace: 'nowrap',
-        background: 'rgb(113 66 207)',
-        height: '45px',
-      }}
-    />
+    <div className="[&_button]:!rounded-none">
+      <SolanaWalletModalButton
+        style={{
+          padding: '0 64px',
+          border: 'solid',
+          borderWidth: '1px',
+          borderColor: 'rgb(113 66 207)',
+          borderRadius: '9999px',
+          whiteSpace: 'nowrap',
+          background: 'rgb(113 66 207)',
+          height: '45px',
+        }}
+      />
+    </div>
   )
 }
diff --git a/frontend/components/modals/LockedModal.tsx b/frontend/components/modals/LockedModal.tsx
@@ -233,7 +233,7 @@ function LockedModalButton({
         <>
           <button
             type="button"
-            className="primary-btn min-w-[145px] px-8 py-3 text-base font-semibold  hover:bg-blueGemHover disabled:bg-valhalla"
+            className="btn btn--light"
             onClick={() =>
               unvestedLockAll.mutate({
                 mainStakeAccount: mainStakeAccount as StakeAccount,
@@ -260,12 +260,14 @@ function LockedModalButton({
                 Stake all
               </Tooltip>
             ) : (
-              'Stake all'
+              <span className="relative inline-flex items-center whitespace-nowrap">
+                Stake all
+              </span>
             )}
           </button>
           <button
             type="button"
-            className="primary-btn min-w-[145px] px-8 py-3 text-base font-semibold  hover:bg-blueGemHover disabled:bg-valhalla"
+            className="btn btn--dark"
             onClick={() =>
               unvestedUnlockAll.mutate({
                 mainStakeAccount: mainStakeAccount as StakeAccount,
@@ -294,10 +296,14 @@ function LockedModalButton({
                 }
                 className="m-4"
               >
-                Unstake all
+                <span className="relative inline-flex items-center whitespace-nowrap">
+                  Unstake all
+                </span>
               </Tooltip>
             ) : (
-              'Unstake all'
+              <span className="relative inline-flex items-center whitespace-nowrap">
+                Unstake all
+              </span>
             )}
           </button>
         </>

diff --git a/frontend/components/panels/components/ActionButton.tsx b/frontend/components/panels/components/ActionButton.tsx
@@ -16,18 +16,16 @@ export function ActionButton({
   tooltipContentOnDisabled,
 }: ActionButtonProps) {
   return (
-    <button
-      className="action-btn text-base "
-      onClick={onAction}
-      disabled={isActionDisabled || isActionLoading}
-    >
-      {isActionLoading ? (
-        <Spinner />
-      ) : isActionDisabled ? (
-        <Tooltip content={tooltipContentOnDisabled}>{actionLabel}</Tooltip>
-      ) : (
-        actionLabel
-      )}
-    </button>
+    <Tooltip content={tooltipContentOnDisabled}>
+      <button
+        className="btn btn--light"
+        onClick={onAction}
+        disabled={isActionDisabled || isActionLoading}
+      >
+        <span className="relative inline-flex items-center whitespace-nowrap">
+          {isActionLoading ? <Spinner /> : actionLabel}
+        </span>
+      </button>
+    </Tooltip>
   )
 }
diff --git a/frontend/components/panels/components/AmountInput.tsx b/frontend/components/panels/components/AmountInput.tsx
@@ -11,7 +11,7 @@ export function AmountInput({ amount, onAmountChange }: AmountInputProps) {
       autoComplete="amount"
       value={amount}
       onChange={(e) => onAmountChange(e.target.value)}
-      className="input-no-spin mb-8 mt-1 block h-14 w-full rounded-full bg-darkGray4 px-4 text-center text-lg font-semibold  focus:outline-none"
+      className="input-no-spin mb-8 mt-1 block h-14 w-full bg-darkGray4 px-4 text-center text-lg font-semibold  focus:outline-none"
     />
   )
 }
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
@@ -12,30 +12,40 @@
   .gradient-border {
     @apply absolute left-8 bottom-0 h-px w-[calc(100%-64px)] bg-radial opacity-60;
   }
+  .btn-bg {
+    @apply absolute top-px left-px h-[calc(100%-2px)] w-[calc(100%-2px)]  transition-all;
+  }
 }
 
-.primary-btn {
-  @apply rounded-full h-[45px] text-xs px-8 uppercase  font-mono border border-solid border-pythPurple bg-pythPurple whitespace-nowrap;
+.btn {
+  @apply relative inline-block py-3 px-8 text-sm transition-all before:btn-bg;
+  @apply disabled:cursor-not-allowed disabled:opacity-40;
 }
 
-.secondary-btn {
-  @apply rounded-full  px-8 uppercase  font-mono  h-[45px] bg-darkGray2 leading-none  transition-colors;
-}
+.btn--dark {
+  @apply bg-radial before:bg-dark;
+  @apply hover:text-dark hover:before:bg-light;
+  /* disable hover effect when disabled */
+  @apply disabled:text-light disabled:before:bg-dark;
 
-.action-btn {
-  @apply rounded-full px-8 uppercase  font-mono leading-none  h-[45px] transition-colors  bg-pythPurple hover:bg-mediumSlateBlue  font-semibold disabled:opacity-70 disabled:hover:bg-pythPurple;
 }
 
+.btn--light {
+  @apply z-10 bg-radial2 text-dark before:bg-light;
+  @apply hover:text-light hover:before:bg-dark;
+  /* disable hover effect when disabled */
+  @apply disabled:!text-dark disabled:before:!bg-light;
+}
 .outlined-btn {
-  @apply rounded-full bg-darkGray2 px-6 py-1 transition-colors;
+  @apply bg-darkGray2 px-6 py-1 transition-colors; 
 }
 
 .nav-link {
   @apply text-light text-sm hover:text-white;
 }
 
 .diaglogPanel {
-  @apply pt-20 pb-8 px-6  lg:p-10  md:mt-[92px] flex h-full min-h-[420px] w-[calc(100%-64px)]  max-w-3xl transform items-center justify-center rounded-[40px] bg-[rgba(49,47,71,0.85)]  p-5 text-center  align-middle shadow-xl transition-all;
+  @apply pt-20 pb-8 px-6  lg:p-10  md:mt-[92px] flex h-full min-h-[420px] w-[calc(100%-64px)]  max-w-3xl transform items-center justify-center bg-[rgba(49,47,71)]  p-5 text-center  align-middle shadow-xl transition-all;
 }
 .diaglogClose {
   @apply absolute right-10 top-8  flex items-center leading-none;
@@ -55,15 +65,15 @@
 }
 
 .wallet-adapter-modal-wrapper {
-  @apply bg-darkGray2  max-w-[660px] rounded-4xl;
+  @apply bg-darkGray2  max-w-[660px] rounded-none;
 }
 
 .wallet-adapter-modal-title {
   @apply text-[32px] md:text-[44px] font-body max-w-[480px] leading-[1.1] text-light;
 }
 
 .wallet-adapter-modal-list {
-  @apply mx-auto max-w-[380px]  text-light;
+  @apply mx-auto max-w-[380px]  text-light !rounded-none;
 }
 
 .wallet-adapter-modal-list-more {
@@ -74,6 +84,14 @@
   background-color: #413e53;
 }
 
+.wallet-adapter-dropdown-list-active {
+  @apply rounded-none;
+}
+
+.wallet-adapter-dropdown-list-item {
+  @apply rounded-none
+}
+
 .wallet-adapter-modal-button-close {
   @apply bg-transparent;
 }