Closed zed-wong closed 2 months ago
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
mr-market | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Apr 12, 2024 1:50pm |
This PR is being deployed to Railway 🚅
This PR is being deployed to Railway 🚅
Mr.Market: ◻️ REMOVED
PR Description updated to latest commit (https://github.com/Hu-Fi/Mr.Market/commit/e3c6012b41ec3e5c2d7e71442d5579030f6655f9)
⏱️ Estimated effort to review [1-5] | 4, due to the extensive changes across multiple files, including both CSS and Svelte component logic. The review requires careful consideration of UI consistency, functionality, and adherence to best practices in Svelte development and CSS styling. |
🧪 Relevant tests | No |
🔍 Possible issues | Inconsistent Button Styling: The PR introduces a change in button styling to `bg-slate-800` across various components. While this aims to enhance UI consistency, it's crucial to ensure that these changes do not inadvertently affect the visibility or usability of the buttons, especially in different themes (light vs. dark). |
Removal of Comments: The PR removes certain comments and unused code blocks. It's important to verify that this cleanup does not eliminate any necessary documentation or code that might be required for future reference. | |
CSS Isolation in Svelte Components: The PR includes inline styles and scoped styles within Svelte components. It's essential to ensure that these styles are properly isolated to prevent unintended side effects on other components or global styles. | |
Potential Accessibility Issues: With the change in color schemes and button styles, it's crucial to review the changes for potential accessibility issues, ensuring that the application remains accessible to users with visual impairments or those using screen readers. | |
🔒 Security concerns | No |
relevant file | interface/src/lib/components/common/connectWalletBtn.svelte |
suggestion | Consider adding `aria-label` attributes to buttons for improved accessibility. For instance, the "Connect Wallet" button should have an `aria-label="Connect Wallet"` attribute to ensure screen readers can accurately convey the button's purpose to users with visual impairments. [important] |
relevant line |
relevant file | interface/src/lib/components/grow/marketMaking/details/exchange.svelte |
suggestion | Ensure images have descriptive `alt` attributes for accessibility. The exchange icon image should have an `alt` attribute describing the exchange (e.g., `alt={exchange + ' icon'}`). This improvement aids users with screen readers in understanding the content of the image. [important] |
relevant line |
relevant file | interface/src/lib/components/dialogs/grow/market_making/confirmPayment.svelte |
suggestion | For buttons performing actions like payments, consider implementing a confirmation dialog or mechanism to prevent accidental submissions. This UX improvement can enhance user confidence in sensitive operations. [medium] |
relevant line |
relevant file | interface/tailwind.config.cjs |
suggestion | To maintain theme consistency and ease future updates, consider using custom themes through DaisyUI's configuration instead of directly modifying utility classes in components. This approach allows for centralized theme management and simplifies adjustments to the UI's look and feel. [medium] |
relevant line | themes: [ |
Category | Suggestions |
Best practice |
Use RGBA color format for consistency and future flexibility.___ **Consider using RGBA color format for--color-text to maintain consistency with other color definitions in the project and to allow for transparency adjustments if needed in the future.** [interface/src/routes/styles.css [14]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-9a95bc9c9d71db798d6257d3b6b64047f2c84b1dceccde40986dd0377d96fa5fR14-R14) ```diff ---color-text: rgb(51 65 85); +--color-text: rgba(51, 65, 85, 1); ``` |
Move inline styles to CSS classes for better maintainability.___ **Avoid using inline styles for consistency and to ensure that styling is managed from acentral place, such as CSS/SASS files or a CSS-in-JS solution.** [interface/src/lib/components/bottomNav/candleNav.svelte [17]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-904080fdbbb6514074f41ceb67a19905c7a6e698c37f85fd796f14599e5d34e7R17-R17) ```diff - | |
Use TailwindCSS's
___
**Consider using TailwindCSS's | |
Maintainability |
Extract inline styles to a CSS class for better maintainability.___ **Extract the long class string into a class in the CSS file to improve readability andmaintainability of the template code.** [interface/src/lib/components/admin/login.svelte [69]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-7755e80262efe6164fbaf4735da93fec7a0be5fa871982016ef1dbac24d493fcR69-R69) ```diff -class="flex items-center justify-center w-full px-5 py-3 text-base font-medium text-center text-white bg-slate-800 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" +class="login-button" ``` |
Improve class naming for clarity and maintainability.___ **Consider using a more descriptive class name instead of generic names liketrade-icon-active and trade-icon-inactive . Descriptive class names make the CSS easier to read and maintain, especially for others who might work on this code in the future.** [interface/src/lib/components/bottomNav/bottomNav.svelte [53]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-f2bfb18b139a3f8393193f0d9611256c84ff065345b72bc97e2230d83f4ba53aR53-R53) ```diff - | |
Use a reusable component for SVG icons to reduce duplication.___ **For SVG elements that are reused with minor differences, consider creating a reusableSvelte component. This approach reduces code duplication and improves maintainability.** [interface/src/lib/components/bottomNav/bottomNav.svelte [58-67]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-f2bfb18b139a3f8393193f0d9611256c84ff065345b72bc97e2230d83f4ba53aR58-R67) ```diff - + | |
Simplify class assignment with a function for readability.___ **Use ternary operations or a function to dynamically assign classes to reduce complexityand improve readability in the template.** [interface/src/lib/components/bottomNav/bottomNav.svelte [50]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-f2bfb18b139a3f8393193f0d9611256c84ff065345b72bc97e2230d83f4ba53aR50-R50) ```diff -
+
```
| |
Ensure consistent button design patterns.___ **For consistency and to avoid potential future bugs, ensure that all buttons within theapplication follow a similar design pattern, especially regarding interaction states such as hover, focus, and active. This suggestion aligns the button's hover state with the application's design system.** [interface/src/lib/components/dialogs/grow/market_making/confirmPayment.svelte [119]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-ca3c328d7b2523ef171dbff76e6761a8c2e02f1c9f7e3f88341002f1a716531bR119-R119) ```diff -clsx("btn btn-xs bg-slate-800 text-base-100 rounded-full !h-[2rem]", "hover:bg-slate-800 no-animation") +clsx("btn btn-xs bg-slate-800 text-base-100 rounded-full !h-[2rem] hover:bg-slate-700 no-animation") ``` | |
Enhancement |
Simplify class definitions by removing redundant styles.___ **Simplify the class definition by removing redundant states that have the same styling, toclean up the code and improve readability.** [interface/src/lib/components/bottomNav/arbitrageStatusNav.svelte [42]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-f2be379095be66963d903b67ddfba5bd0455f3aa73e327b776a71998b41ed454R42-R42) ```diff -class="btn bg-slate-800 border-base-300 hover:bg-slate-800 hover:border-base-300 no-animation flex items-center justify-center rounded-full focus:bg-slate-800 focus:border-base-300 grow" +class="btn bg-slate-800 border-base-300 no-animation flex items-center justify-center rounded-full grow" ``` |
Simplify class assignment using a ternary operator.___ **Consider using a ternary operator for class assignment to simplify the code and improvereadability. This approach can make it easier to understand the conditional logic for applying classes based on the $mixinConnectLoading state.**
[interface/src/lib/components/common/connectWalletBtn.svelte [34]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-e4c4aabcf6a4083502cddfbd41e4ba22bff0ecf35ece70283f5c287ad7ed8b78R34-R34)
```diff
-class={clsx("btn rounded-full no-animation !h-10 min-h-10 bg-slate-800", clazz)}
+class="btn rounded-full no-animation !h-10 min-h-10 bg-slate-800 {clazz}"
```
| |
Add visual feedback for payment status.___ **To enhance the user experience, consider adding a visual feedback mechanism (e.g.,changing the button color or adding an icon) to indicate the payment status. This can make it clearer to users that their payment action has been initiated or completed.** [interface/src/lib/components/dialogs/grow/arbitrage/confirmPayment.svelte [122]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-94efc6491a5ac4ba49c323d40db203e28413357471538d2f387436823a658dfeR122-R122) ```diff -clsx("btn btn-xs bg-slate-800 text-base-100 rounded-full !h-[2rem]", "hover:bg-slate-800 no-animation") +clsx("btn btn-xs bg-slate-800 text-base-100 rounded-full !h-[2rem] hover:bg-slate-700 no-animation") ``` | |
Add visual feedback for the order confirmation process.___ **To improve the visual feedback for users during the order confirmation process, consideradding a distinct visual cue (e.g., a loading spinner or color change) to the confirmation button while the order is being processed. This can enhance the user's understanding that their action is in progress.** [interface/src/lib/components/dialogs/orderConfirm.svelte [173]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-76ee31be4b4a8017d8e5a9d48dbfc2f7b107694d79c9d06c93ed6e7670a60451R173-R173) ```diff -"btn btn-md w-full rounded-full bg-slate-800 hover:bg-slate-800 focus:bg-slate-800 no-animation" +"btn btn-md w-full rounded-full bg-slate-800 hover:bg-slate-700 focus:bg-slate-700 no-animation" ``` | |
Add a confirmation step for canceling orders.___ **For actions that have significant consequences, such as canceling an order, it'sbeneficial to provide a confirmation step or dialog to prevent accidental actions. This could involve a simple confirmation message or a more complex dialog, depending on the application's needs.** [interface/src/lib/components/dialogs/manageOrder/cancelOrder.svelte [37]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-18a5517d2f5ce3cfd10921a4716e024ae0c56542c27b34852a5b9dcb5e19ba48R37-R37) ```diff - | |
Accessibility |
Add ARIA labels to SVG icons for accessibility.___ **For better accessibility, ensure that interactive SVG icons (used within buttons orclickable elements) have appropriate ARIA labels or titles.** [interface/src/lib/components/bottomNav/bottomNav.svelte [58-67]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-f2bfb18b139a3f8393193f0d9611256c84ff065345b72bc97e2230d83f4ba53aR58-R67) ```diff - + ``` |
PR Description updated to latest commit (https://github.com/Hu-Fi/Mr.Market/commit/bdbe8fba1e8b4e3f3e4a639a6930df315957c611)
Persistent review updated to latest commit https://github.com/Hu-Fi/Mr.Market/commit/bdbe8fba1e8b4e3f3e4a639a6930df315957c611
Category | Suggestions |
Enhancement |
Use
___
**Consider using the |
Remove redundant hover and focus classes that duplicate default styles.___ **Thehover:bg-slate-800 and focus:bg-slate-800 classes duplicate the default bg-slate-800 class behavior. Removing these redundant classes can simplify the code without changing its functionality.** [interface/src/lib/components/bottomNav/arbitrageStatusNav.svelte [42]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-f2be379095be66963d903b67ddfba5bd0455f3aa73e327b776a71998b41ed454R42-R42) ```diff -class="btn bg-slate-800 border-base-300 hover:bg-slate-800 hover:border-base-300 no-animation flex items-center justify-center rounded-full focus:bg-slate-800 focus:border-base-300 grow" +class="btn bg-slate-800 border-base-300 no-animation flex items-center justify-center rounded-full grow" ``` | |
Reduce duplication by creating a reusable SVG component.___ **For SVG elements that are reused with minor variations, consider creating a reusableSvelte component. This will reduce code duplication and improve maintainability. For example, you can create a Icon component that accepts width , height , fill , and stroke as props.** [interface/src/lib/components/bottomNav/bottomNav.svelte [58-67]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-f2bfb18b139a3f8393193f0d9611256c84ff065345b72bc97e2230d83f4ba53aR58-R67) ```diff - | |
Simplify conditional class application using a ternary operator.___ **Consider using a ternary operator for conditional class application to simplify the codestructure and improve readability.** [interface/src/lib/components/common/connectWalletBtn.svelte [34]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-e4c4aabcf6a4083502cddfbd41e4ba22bff0ecf35ece70283f5c287ad7ed8b78R34-R34) ```diff -class={clsx("btn rounded-full no-animation text-base-100 !h-10 min-h-10 bg-slate-800", clazz)} +class="btn rounded-full no-animation text-base-100 !h-10 min-h-10 bg-slate-800 {clazz}" ``` | |
Simplify class application by avoiding
___
**For improved code clarity and to avoid unnecessary complexity, directly use class names | |
Improve button accessibility by adding a more descriptive text or an aria-label.___ **Consider using a more descriptive button text or adding an aria-label for accessibility.Screen readers and users who rely on assistive technologies might not understand the purpose of the button with the current text 'c'. Improving the button's label will enhance the user experience for a wider audience.** [interface/src/lib/components/dialogs/orderTypeSelector.svelte [20]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-b67233080232151c3d7fb0b573e670d7732a15f5a4d64d7225439637f490b50dR20-R20) ```diff - | |
Maintainability |
Use Tailwind's
___
**For maintainability and to avoid repetition, consider using Tailwind CSS's |
Improve readability by using more descriptive class names for button states.___ **Consider using a more descriptive class name for the button's active and inactive statesinstead of "trade-icon-active" and "trade-icon-inactive". This will improve readability and maintainability of the code. For example, you could use "trade-button--active" and "trade-button--inactive".** [interface/src/lib/components/bottomNav/bottomNav.svelte [53]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-f2bfb18b139a3f8393193f0d9611256c84ff065345b72bc97e2230d83f4ba53aR53-R53) ```diff - | |
Extract complex class logic to improve template readability.___ **Since you're using theclsx library to conditionally apply classes, consider extracting complex conditional class logic into a separate function or computed property. This will make the template cleaner and easier to understand.** [interface/src/lib/components/bottomNav/bottomNav.svelte [50]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-f2bfb18b139a3f8393193f0d9611256c84ff065345b72bc97e2230d83f4ba53aR50-R50) ```diff -
+
```
| |
Extract conditional class logic to improve code readability.___ **To improve readability and maintainability, extract the conditional class logic outsidethe class attribute.**
[interface/src/lib/components/dialogs/grow/autoInvest/selectPeriod.svelte [52]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-8ef8f48bb1fe52f8423b096d11f7525882e99602585f43a805364d7121d37ce6R52-R52)
```diff
- | |
Best practice |
Use CSS variables for colors to improve theme consistency.___ **To ensure consistency across different themes or color schemes, consider using CSSvariables for colors like bg-slate-800 and text-base-100 . Define these colors in a global stylesheet and use them across your components.** [interface/src/lib/components/bottomNav/candleNav.svelte [17]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-904080fdbbb6514074f41ceb67a19905c7a6e698c37f85fd796f14599e5d34e7R17-R17) ```diff - |
Use a single class attribute for static and conditional classes for consistency.___ **For consistency and to avoid redundancy, consider using a singleclsx call to handle both static and conditional classes.** [interface/src/lib/components/dialogs/grow/arbitrage/confirmPayment.svelte [122]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-94efc6491a5ac4ba49c323d40db203e28413357471538d2f387436823a658dfeR122-R122) ```diff -clsx("btn btn-xs bg-slate-800 text-base-100 rounded-full !h-[2rem]", "hover:bg-slate-800 no-animation") +class="btn btn-xs bg-slate-800 text-base-100 rounded-full !h-[2rem] hover:bg-slate-800 no-animation" ``` | |
Standardize class application on buttons for better readability.___ **Use a consistent approach for applying classes to buttons to enhance code readability andmaintainability.** [interface/src/lib/components/dialogs/manageOrder/cancelOrder.svelte [37]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-18a5517d2f5ce3cfd10921a4716e024ae0c56542c27b34852a5b9dcb5e19ba48R37-R37) ```diff - | |
Accessibility |
Add ARIA labels to interactive SVG elements for better accessibility.___ **For better accessibility, ensure that interactive SVG elements like buttons haveappropriate ARIA labels or titles. This helps users who rely on screen readers to understand the purpose of the element.** [interface/src/lib/components/bottomNav/bottomNav.svelte [53]](https://github.com/Hu-Fi/Mr.Market/pull/148/files#diff-f2bfb18b139a3f8393193f0d9611256c84ff065345b72bc97e2230d83f4ba53aR53-R53) ```diff - |
Type
enhancement, bug_fix
Description
This PR includes a series of UI enhancements and bug fixes across the application, focusing on improving the user experience and consistency of the interface. Key changes include:
bg-slate-800
, enhancing the visual consistency across the application.Changes walkthrough
1 files
styles.css
Update base text color
interface/src/routes/styles.css - Updated `--color-text` to `rgb(51 65 85)`.
50 files
connectWallet.svelte
Update Connect Wallet Button Style
interface/src/lib/components/wallet/connect/connectWallet.svelte
ConnectWalletBtn
class to usebg-slate-800
for background.bottomNav.svelte
Navigation UI Enhancements
interface/src/lib/components/bottomNav/bottomNav.svelte
bg-slate-800
.arblist.svelte
Improve Arbitrage List Empty State UI
interface/src/lib/components/grow/arbitrage/arblist.svelte
bg-slate-800
.grow.svelte
Enhance Grow Page Connect Wallet UI
interface/src/lib/components/grow/grow.svelte
ConnectWalletBtn
to usebg-slate-800
.infos.svelte
Simplify Market Making Details Display
interface/src/lib/components/grow/marketMaking/details/infos.svelte
exchange.svelte
Enhance Exchange and Pair Display in Market Making
interface/src/lib/components/grow/marketMaking/new/easy/exchange.svelte
AssetIcon
for base and target assets.growDetails.svelte
Refine Grow Details Navigation and Title Display
interface/src/lib/components/topBar/growDetails.svelte
titleLeft
.amount.svelte
Improve Asset Amount Input UI in Market Making
interface/src/lib/components/grow/marketMaking/new/easy/amount.svelte - Adjusted layout and increased icon sizes for asset selection.
coinNav.svelte
Update Spot Button Style
interface/src/lib/components/bottomNav/coinNav.svelte - Updated Spot Button to use `bg-slate-800`.
secondTabs.svelte
Dark Theme Border Color Adjustment for Tabs
interface/src/lib/components/market/elements/secondTabs.svelte - Adjusted border color for dark theme in tabs.
mmlist.svelte
Improve Market Making List Empty State UI
interface/src/lib/components/grow/marketMaking/mmlist.svelte
bg-slate-800
.+page.svelte
Style Container for Market Making Details
interface/src/routes/(secondary)/(grow)/grow/market_making/[id]/+page.svelte - Wrapped Market Making details in a styled container.
orderSelector.svelte
Update Order Type Selector Button Style
interface/src/lib/components/spot/bids/orderSelector.svelte - Updated order type selector button style.
singleToken.svelte
Dark Theme Border Color Adjustment for Token List
interface/src/lib/components/market/elements/singleToken.svelte - Adjusted border color for dark theme in token list.
confirmPayment.svelte
Update Payment Confirmation Button Styles
interface/src/lib/components/dialogs/grow/market_making/confirmPayment.svelte - Updated payment confirmation button styles to `bg-slate-800`.
confirmPayment.svelte
Update Payment Confirmation Button Styles
interface/src/lib/components/dialogs/grow/arbitrage/confirmPayment.svelte - Updated payment confirmation button styles to `bg-slate-800`.
exchange.svelte
Enhance Exchange Details Display
interface/src/lib/components/grow/marketMaking/details/exchange.svelte - Enhanced exchange details display with new layout and background.
cancelOrder.svelte
Update Cancel Order Button Style
interface/src/lib/components/dialogs/manageOrder/cancelOrder.svelte - Updated cancel order button style to `bg-slate-800`.
pair.svelte
Enhance Pair Details Display
interface/src/lib/components/grow/marketMaking/details/pair.svelte - Enhanced pair details display with new layout and background.
confirm.svelte
Update Swap Confirmation Button Style
interface/src/lib/components/swap/confirm.svelte - Updated swap confirmation button style to `bg-slate-800`.
avlist.svelte
Update Auto Invest Start Button Style
interface/src/lib/components/grow/autoInvest/avlist.svelte - Updated auto invest start button style to `bg-slate-800`.
marketBar.svelte
Dark Theme Border Color Adjustment for Market Bar
interface/src/lib/components/topBar/marketBar.svelte - Adjusted border color for dark theme in market bar.
connectWalletBtn.svelte
Update Connect Wallet Button Style
interface/src/lib/components/common/connectWalletBtn.svelte - Updated connect wallet button style to `bg-slate-800`.
balance.svelte
Update View Wallet Button Style for Dark Theme
interface/src/lib/components/home/walletBalance/balance.svelte - Updated view wallet button style to `bg-slate-800` for dark theme.
spot.svelte
Adjust Trading Layout Padding
interface/src/lib/components/spot/spot.svelte - Adjusted padding for the trading layout.
growAddMore.svelte
Update Modal Close Button Background
interface/src/lib/components/dialogs/grow/growAddMore.svelte - Updated modal close button background to `bg-slate-800/40`.
arbitrageStatusNav.svelte
Update Add/Remove Button Style
interface/src/lib/components/bottomNav/arbitrageStatusNav.svelte - Updated Add/Remove button style to `bg-slate-800`.
marketMakingStatusNav.svelte
Update Add/Remove Button Style
interface/src/lib/components/bottomNav/marketMakingStatusNav.svelte - Updated Add/Remove button style to `bg-slate-800`.
growNewMMBar.svelte
Bold and Non-Wrapping Page Name in Grow New MM Bar
interface/src/lib/components/topBar/growNewMMBar.svelte - Made page name bold and non-wrapping.
candleNav.svelte
Update Trade Button Style
interface/src/lib/components/bottomNav/candleNav.svelte - Updated Trade button style to `bg-slate-800`.
growNewArbBar.svelte
Bold and Non-Wrapping Page Name in Grow New Arb Bar
interface/src/lib/components/topBar/growNewArbBar.svelte - Made page name bold and non-wrapping.
selectPeriod.svelte
Update Period Selection Button Styles
interface/src/lib/components/dialogs/grow/autoInvest/selectPeriod.svelte - Updated period selection button styles to `bg-slate-800`.
login.svelte
Update Login Button Style
interface/src/lib/components/admin/login.svelte - Updated login button style to `bg-slate-800`.
swapConfirm.svelte
Update Swap Confirmation Button Style
interface/src/lib/components/dialogs/swap/swapConfirm.svelte - Updated swap confirmation button style to `bg-slate-800`.
intro.svelte
Update Button Styles in Market Making Intro
interface/src/lib/components/grow/marketMaking/intro.svelte - Updated button styles to `bg-slate-800`.
intro.svelte
Update Button Styles in Arbitrage Intro
interface/src/lib/components/grow/arbitrage/intro.svelte - Updated button styles to `bg-slate-800`.
create.svelte
Update Create Button Styles
interface/src/lib/components/grow/elements/create.svelte - Updated create button styles to `bg-slate-800`.
actions.svelte
Update Button Styles in Market Making Actions
interface/src/lib/components/grow/marketMaking/actions.svelte - Updated button styles to `bg-slate-800`.
+page.svelte
Adjust Layout for Market Making Step Two
interface/src/routes/(secondary)/(grow)/grow/market_making/new/easy/two/+page.svelte - Adjusted layout for Market Making step two.
filterLoader.svelte
Adjust Margin for Filter Loader in Market Section
interface/src/lib/components/skeleton/market/filterLoader.svelte - Adjusted margin for filter loader in market section.
orderConfirm.svelte
Update Order Confirmation Button Style
interface/src/lib/components/dialogs/orderConfirm.svelte - Updated order confirmation button style to `bg-slate-800`.
openOrders.svelte
Update Connect Wallet Button Style in Open Orders
interface/src/lib/components/spot/manage/openOrders.svelte - Updated connect wallet button style in open orders section.
+page.svelte
Adjust Padding for Market Token Page
interface/src/routes/(bottomNav)/(market)/market/token/+page.svelte - Adjusted padding for market token page.
+page.svelte
Comment Out History Component in Arbitrage Details
interface/src/routes/(secondary)/(grow)/grow/arbitrage/[id]/+page.svelte - Commented out History component in Arbitrage details.
+layout.svelte
Adjust Padding for Grow Layout
interface/src/routes/(secondary)/(grow)/grow/+layout.svelte - Adjusted padding for Grow layout.
titlebar.svelte
Adjust Background Color for Title Bar in Arbitrage Details
interface/src/lib/components/grow/arbitrage/details/titlebar.svelte - Adjusted background color for title bar in Arbitrage details.
coins.svelte
Adjust Padding for Market Coins Section
interface/src/lib/components/home/markets/coins.svelte - Adjusted padding for market coins section.
pair.svelte
Update Background Color for Pair Selection in Market Making
interface/src/lib/components/grow/marketMaking/new/easy/pair.svelte - Updated background color for pair selection in Market Making.
+layout.svelte
Adjust Padding for Spot Layout
interface/src/routes/(bottomNav)/(spot)/+layout.svelte - Adjusted padding for Spot layout.
inputs.svelte
Adjust Font Size for Inputs in Spot Bids
interface/src/lib/components/spot/bids/inputs.svelte - Adjusted font size for inputs in Spot Bids.
1 files
tailwind.config.cjs
Customize DaisyUI Theme Configuration
interface/tailwind.config.cjs
bg-slate-800
adjustments.