feat: replace all styled buttons

the-standard · May 22, 2024 · 06852e9 · 06852e9
1 parent 2242478
commit 06852e9
Show file tree

Hide file tree

Showing 20 changed files with 121 additions and 58 deletions.
diff --git a/src/App.css b/src/App.css
@@ -30,8 +30,8 @@
 *[data-theme='light'] {
   --glass-bg: linear-gradient(
     110.28deg,
-    rgba(255, 255, 255, 0.6) 0.2%,
-    rgba(255, 255, 255, 0.3) 101.11%
+    rgba(255, 255, 255, 0.4) 0.2%,
+    rgba(255, 255, 255, 0.2) 101.11%
   );
   --glass-inset: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.9), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --bg-image: url(/src/assets/bg-light.webp);
@@ -287,57 +287,108 @@ input.input:disabled {
 
 /* BUTTONS */
 
-button.btn.btn-primary:not(:disabled) {
+.btn:not(:disabled):active,
+button.btn:not(:disabled):active {
+  transform: none!important;
+  filter: brightness(0.8)!important;
+}
+
+.btn.btn-primary:not(:disabled),
+button.btn.btn-primary:not(:disabled),
+.btn.btn-success:not(:disabled),
+button.btn.btn-success:not(:disabled) {
   background: rgba(var(--primary-color), 0.9);
-  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3), /* outline 1 */
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3), /* outline */
   inset 0px 0px 20px 1px rgba(255, 255, 255, 0.2), /* inner white glow */
+  inset 1px 1px 0px 0px rgba(255, 255, 255, 0.0), /* outline corner highlight */
+  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.0), /* outline corner highlight */
   0 4px 6px -1px rgb(0 0 0 / 0.1), /* outer box shadow1 */
   0 2px 4px -2px rgb(0 0 0 / 0.1), /* outer box shadow2 */
   0 5px 15px 0px rgba(var(--primary-color), 0.4); /* outer box glow */
   border: 0px;
   transition: var(--transition-general);
 }
 
+.btn.btn-primary:hover,
 button.btn.btn-primary:hover {
   background: rgba(var(--primary-color), 1);
-  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3),
-  inset -1px -1px 0px 0px rgba(255, 255, 255, 0.3), /* outline */
-  inset 1px 1px 0px 0px rgba(255, 255, 255, 0.3), /* outline */
-  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.2),
-  0 4px 6px -1px rgb(0 0 0 / 0.1),
-  0 2px 4px -2px rgb(0 0 0 / 0.1),
-  0 5px 15px 3px rgba(var(--primary-color), 0.8);
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3), /* outline */
+  inset -1px -1px 0px 0px rgba(255, 255, 255, 0.3), /* inner white glow */
+  inset 1px 1px 0px 0px rgba(255, 255, 255, 0.3), /* outline corner highlight */
+  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.2), /* outline corner highlight */
+  0 4px 6px -1px rgb(0 0 0 / 0.1), /* outer box shadow1 */
+  0 2px 4px -2px rgb(0 0 0 / 0.1), /* outer box shadow2 */
+  0 5px 15px 3px rgba(var(--primary-color), 0.8); /* outer box glow */
   border: 0px;
 }
 
+.btn.btn-primary:disabled,
 button.btn.btn-primary:disabled {
   box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   border: 0px;
 }
 
+.btn.btn-success:not(:disabled),
+button.btn.btn-success:not(:disabled) {
+  background: theme(backgroundColor.success);
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3), /* outline */
+  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.5), /* inner white glow */
+  inset 1px 1px 0px 0px rgba(255, 255, 255, 0.0), /* outline corner highlight */
+  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.0), /* outline corner highlight */
+  0 4px 6px -1px rgb(0 0 0 / 0.1), /* outer box shadow1 */
+  0 2px 4px -2px rgb(0 0 0 / 0.1); /* outer box shadow2 */
+}
+.btn.btn-error:not(:disabled),
+button.btn.btn-error:not(:disabled) {
+  background: theme(backgroundColor.error);
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3), /* outline */
+  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.5), /* inner white glow */
+  inset 1px 1px 0px 0px rgba(255, 255, 255, 0.0), /* outline corner highlight */
+  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.0), /* outline corner highlight */
+  0 4px 6px -1px rgb(0 0 0 / 0.1), /* outer box shadow1 */
+  0 2px 4px -2px rgb(0 0 0 / 0.1); /* outer box shadow2 */
+}
+.btn.btn-success:hover,
+button.btn.btn-success:hover,
+.btn.btn-error:hover,
+button.btn.btn-error:hover {
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3), /* outline */
+  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.8), /* inner white glow */
+  inset 1px 1px 0px 0px rgba(255, 255, 255, 0.3), /* outline corner highlight */
+  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.2), /* outline corner highlight */
+  0 4px 6px -1px rgb(0 0 0 / 0.1), /* outer box shadow1 */
+  0 2px 4px -2px rgb(0 0 0 / 0.1); /* outer box shadow2 */
+}
+
+
+.btn.btn-outline:not(:disabled),
 button.btn.btn-outline:not(:disabled) {
   box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3), /* outline 1 */
   inset 0px 0px 20px 1px rgba(255, 255, 255, 0.2), /* inner white glow */
+  inset 1px 1px 0px 0px rgba(255, 255, 255, 0.0), /* outline corner highlight */
+  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.0), /* outline corner highlight */
   0 4px 6px -1px rgb(0 0 0 / 0.1), /* outer box shadow1 */
   0 2px 4px -2px rgb(0 0 0 / 0.1), /* outer box shadow2 */
   0 5px 15px 0px rgba(var(--primary-color), 0.0); /* outer box glow */
   border: 0px;
   transition: var(--transition-general);
 }
 
+.btn.btn-outline:hover,
 button.btn.btn-outline:hover {
   color: var(--alt-btn-txt-color);
   background: rgba(255,255,255, 0.1);
-  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3),
-  inset -1px -1px 0px 0px rgba(255, 255, 255, 0.3), /* outline */
-  inset 1px 1px 0px 0px rgba(255, 255, 255, 0.3), /* outline */
-  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.2),
-  0 4px 6px -1px rgb(0 0 0 / 0.1),
-  0 2px 4px -2px rgb(0 0 0 / 0.1),
-  0 5px 15px 3px rgba(var(--primary-color), 0.4);
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3), /* outline 1 */
+  inset -1px -1px 0px 0px rgba(255, 255, 255, 0.3), /* inner white glow */
+  inset 1px 1px 0px 0px rgba(255, 255, 255, 0.3), /* outline corner highlight */
+  inset 0px 0px 20px 1px rgba(255, 255, 255, 0.2), /* outline corner highlight */
+  0 4px 6px -1px rgb(0 0 0 / 0.1), /* outer box shadow1 */
+  0 2px 4px -2px rgb(0 0 0 / 0.1), /* outer box shadow2 */
+  0 5px 15px 3px rgba(var(--primary-color), 0.4); /* outer box glow */
   border: 0px;
 }
 
+.btn.btn-outline:disabled,
 button.btn.btn-outline:disabled {
   box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   border: 0px;

diff --git a/src/components/liquidation-pools/ClaimTokens.jsx b/src/components/liquidation-pools/ClaimTokens.jsx
@@ -125,6 +125,7 @@ const ClaimTokens = ({
           <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
             <Button
               onClick={handleClaimRewards}
+              color="primary"
               disabled={noRewards}
             >
               Claim All Tokens

diff --git a/src/components/liquidation-pools/StakedAssets.jsx b/src/components/liquidation-pools/StakedAssets.jsx
@@ -63,6 +63,7 @@ const StakedAssets = ({
           <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
             <Button
               onClick={() => setOpen(true)}
+              color="primary"
               disabled={tstAmount <= 0 && eurosAmount <= 0}
             >
               Withdraw

diff --git a/src/components/liquidation-pools/Staking.jsx b/src/components/liquidation-pools/Staking.jsx
@@ -269,7 +269,7 @@ const Staking = () => {
           <Typography variant="h2" className="card-title flex justify-between">
             Deposit
 
-            <Button size="sm" onClick={() => setHelpOpen(true)}>
+            <Button size="sm" color="ghost" onClick={() => setHelpOpen(true)}>
               <QuestionMarkCircleIcon className="h-4 w-4 inline-block"/>
               How It Works
             </Button>
@@ -294,6 +294,7 @@ const Staking = () => {
               />
               <Button
                 className="join-item"
+                variant="outline"
                 onClick={() => handleTstInputMax()}
               >
                 Max
@@ -314,6 +315,7 @@ const Staking = () => {
               />
               <Button
                 className="join-item"
+                variant="outline"
                 onClick={() => handleEurosInputMax()}
               >
                 Max
@@ -322,6 +324,7 @@ const Staking = () => {
             <div className="pt-4 flex flex-col-reverse lg:flex-row justify-end items-end">
               <Button
                 className="w-full lg:w-auto"
+                color="primary"
                 disabled={tstStakeAmount <= 0 && eurosStakeAmount <= 0}
                 onClick={handleLetsStake}
               >

diff --git a/src/components/liquidation-pools/WithdrawModal.jsx b/src/components/liquidation-pools/WithdrawModal.jsx
@@ -157,6 +157,7 @@ const WithdrawModal = ({
 
               <Button
                 onClick={() => setShowError(false)}
+                color="ghost"
               >
                 Return
               </Button>
@@ -165,6 +166,7 @@ const WithdrawModal = ({
                   setShowError(false);
                   handleCloseModal();
                 }}
+                color="ghost"
               >
                 Cancel
               </Button>
@@ -263,6 +265,7 @@ const WithdrawModal = ({
                 />
                 <Button
                   className="join-item"
+                  variant="outline"
                   onClick={() => handleTstInputMax()}
                 >
                   Max
@@ -284,6 +287,7 @@ const WithdrawModal = ({
                 />
                 <Button
                   className="join-item"
+                  variant="outline"
                   onClick={() => handleEurosInputMax()}
                 >
                   Max
@@ -293,12 +297,14 @@ const WithdrawModal = ({
               </div>
               <Button
                 onClick={handleApproveWithdraw}
+                color="primary"
                 disabled={!(tstWithdrawAmount > 0) && !(eurosWithdrawAmount > 0)}
               >
                 Withdraw
               </Button>
               <Button
                 onClick={handleCloseModal}
+                color="ghost"
               >
                 Cancel
               </Button>

diff --git a/src/components/ui/Pagination.jsx b/src/components/ui/Pagination.jsx
@@ -77,6 +77,7 @@ const Pagination = ({
       <Button
         className="join-item"
         size="sm"
+        variant="outline"
         onClick={() => onPageChange( currentPage - 1)}
         disabled={currentPage <= 1 || useTotalItems < 1}
       >
@@ -88,6 +89,7 @@ const Pagination = ({
           key={index}
           className="join-item"
           size="sm"
+          variant="outline"
           active={currentPage === (index + 1)}
           onClick={() => onPageChange( index + 1)}
         >
@@ -98,6 +100,7 @@ const Pagination = ({
       <Button
         className="join-item"
         size="sm"
+        variant="outline"
         onClick={() => onPageChange( currentPage + 1)}
         disabled={currentPage >= useTotalPages || useTotalItems < 1}
       >

diff --git a/src/components/vault/BorrowModal.jsx b/src/components/vault/BorrowModal.jsx
@@ -63,6 +63,7 @@ const BorrowModal = (props) => {
             </Button>
             <Button
               className="w-full lg:w-64"
+              color="primary"
               onClick={() => navigate('/liquidation-pools')}
             >
               Get Discounted Tokens

diff --git a/src/components/vault/Debt.jsx b/src/components/vault/Debt.jsx
@@ -335,13 +335,15 @@ const Debt = ({
       <div className="card-actions">
         <Button
           className="w-full lg:w-auto flex-1"
+          color="primary"
           onClick={() => setBorrowOpen(!borrowOpen)}
         >
           <ArrowDownCircleIcon className="h-6 w-6 inline-block"/>
           Borrow
         </Button>
         <Button
           className="w-full lg:w-auto flex-1"
+          color="primary"
           onClick={() => setRepayOpen(!repayOpen)}
         >
           <ArrowUpCircleIcon className="h-6 w-6 inline-block"/>

diff --git a/src/components/vault/DepositModal.jsx b/src/components/vault/DepositModal.jsx
@@ -269,6 +269,7 @@ const DepositModal = (props) => {
             {symbol !== "ETH" && symbol !== "AGOR" && (
               <Button
                 className="join-item"
+                variant="outline"
                 onClick={handleMaxBalance}
                 disabled={isPending}
               >

diff --git a/src/components/vault/RepayModal.jsx b/src/components/vault/RepayModal.jsx
@@ -52,6 +52,7 @@ const RepayModal = (props) => {
           <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
             <Button
               className="w-full lg:w-64"
+              color="ghost"
               onClick={closeModal}
             >
               Close
@@ -189,6 +190,7 @@ const RepayModal = (props) => {
 
           <Button
             className="join-item"
+            variant="outline"
             onClick={() => handleInputMax('REPAY')}
             disabled={isPending}
           >

diff --git a/src/components/vault/SendModal.jsx b/src/components/vault/SendModal.jsx
@@ -42,6 +42,7 @@ const SendModal = ({
           <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
             <Button
               className="w-full lg:w-64"
+              color="ghost"
               onClick={handleCloseModal}
             >
               Close
@@ -140,7 +141,7 @@ const SendModal = ({
 
               <Button
                 className="w-full lg:w-64"
-                color={sendType === 'BURN' ? 'error' : 'neutral'}
+                color={sendType === 'BURN' ? 'error' : 'primary'}
                 onClick={() => handleSendVault()}
                 disabled={
                   sendType === 'SEND' &&

diff --git a/src/components/vault/SwapModal.jsx b/src/components/vault/SwapModal.jsx
@@ -204,6 +204,7 @@ const SwapModal = ({
                     {symbol !== "ETH" && symbol !== "AGOR" && (
                       <Button
                         className="join-item"
+                        variant="outline"
                         onClick={handleMaxBalance}
                         disabled={swapLoading}
                       >

diff --git a/src/components/vault/TokenList.jsx b/src/components/vault/TokenList.jsx
@@ -172,7 +172,6 @@ const TokenList = ({ assets, assetsLoading }) => {
                                 <div className="flex flex-row gap-4">
                                   <Button
                                     variant="outline"
-
                                     onClick={() => handleClick('DEPOSIT', asset)}
                                     className="grow"
                                   >

diff --git a/src/components/vault/VaultSend.jsx b/src/components/vault/VaultSend.jsx
@@ -103,13 +103,15 @@ const VaultSend = ({
           onClick={() => {
             setSendType('BURN');
           }}
+          color="ghost"
         >
           <TrashIcon className="h-6 w-6 inline-block"/>
         </Button>
         <Button
           onClick={() => {
             setSendType('SEND');
           }}
+          color="ghost"
         >
           <PaperAirplaneIcon className="h-6 w-6 inline-block"/>
         </Button>

diff --git a/src/components/vault/WithdrawModal.jsx b/src/components/vault/WithdrawModal.jsx
@@ -162,6 +162,7 @@ const WithdrawModal = (props) => {
             />
             <Button
               className="join-item"
+              variant="outline"
               onClick={handleMaxBalance}
               disabled={isPending}
             >

diff --git a/src/components/vaults/VaultCreate.jsx b/src/components/vaults/VaultCreate.jsx
@@ -117,6 +117,7 @@ const VaultCreate = ({ tokenId }) => {
             >
               <Button
                 className="w-full"
+                color="primary"
                 onClick={() => handleMintVault(item.type)}
                 disabled={!item.isActive}
                 loading={isPending && item.isActive}  

diff --git a/src/components/vaults/VaultList.jsx b/src/components/vaults/VaultList.jsx
@@ -189,9 +189,9 @@ const VaultList = ({ vaults, vaultsLoading, tokenId }) => {
                               </Tooltip>
                             )}
                           </td>
-                          <td>
+                          <td className="text-right">
                             <Link
-                              className="btn btn-outline btn-sm"
+                              className="btn btn-outline"
                               to={`/vault/${
                                 BigInt(
                                   vault.tokenId

diff --git a/src/pages/liquidation-pools/LiquidationPools.jsx b/src/pages/liquidation-pools/LiquidationPools.jsx
@@ -97,7 +97,7 @@ const LiquidationPools = () => {
               ) : (
                 'Asset Totals'
               )}
-              <Button size="sm" onClick={() => setShowValue(!showValue)}>
+              <Button size="sm" color="ghost" onClick={() => setShowValue(!showValue)}>
                 {showValue ? (
                   <>
                     <ArrowTrendingUpIcon className="h-4 w-4 inline-block"/>