UI: replace Obscuro logos with Ten #1649
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The existing content is already well-structured and aligns with the provided instructions. Therefore, no modifications are necessary. TipsChat with CodeRabbit Bot (
|
Jennievon
force-pushed
the
jennifer/2402-updated-uis-with-placeholder-logo-and-create-as-pr
branch
from
460fefd to
8c6343f
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 2
Configuration used: CodeRabbit UI
Files ignored due to filter (4)
- tools/obscuroscan_v2/frontend/src/assets/imgs/obscuro.svg
- tools/obscuroscan_v2/frontend/src/assets/imgs/ten.svg
- tools/walletextension/api/staticOG/obscuro.svg
- tools/walletextension/api/staticOG/ten.svg
Files selected for processing (3)
- tools/obscuroscan_v2/frontend/src/views/NavbarView.vue (2 hunks)
- tools/walletextension/api/staticOG/index.html (1 hunks)
- tools/walletextension/api/staticOG/style.css (1 hunks)
Files skipped from review due to trivial changes (1)
- tools/walletextension/api/staticOG/index.html
Additional comments: 1
tools/walletextension/api/staticOG/style.css (1)
- 19-26: The changes to the
.logoclass seem appropriate for the rebranding effort, ensuring the logo fits well within the designated space and maintains its aspect ratio. The padding ensures that the logo has some space around it, which can be important for design aesthetics. However, it's important to verify that the fixed width and height work well across all expected viewport sizes and devices. If responsiveness is a concern, consider using relative units like percentages or viewport units for width and height, and ensure that the logo scales nicely on different screen sizes.
Comment on lines
2
to
66
| <RouterLink to="/personal"> <el-button link class="paddedTop">Personal</el-button></RouterLink> | ||
| <el-button link class="paddedTop"> | ||
| <el-dropdown> | ||
| <span class="el-dropdown-link"> | ||
| Blockchain | ||
| </span> | ||
| <template #dropdown> | ||
| <el-dropdown-menu> | ||
| <RouterLink to="/transactions"> <el-dropdown-item>Transactions</el-dropdown-item></RouterLink> | ||
| <RouterLink to="/batches"> <el-dropdown-item>Batches</el-dropdown-item></RouterLink> | ||
| <RouterLink to="/blocks"> <el-dropdown-item>Blocks</el-dropdown-item></RouterLink> | ||
| </el-dropdown-menu> | ||
| </template> | ||
| </el-dropdown> | ||
| </el-button> | ||
| <el-button link class="paddedTop" style="margin: 0px"> | ||
| <el-dropdown> | ||
| <span class="el-dropdown-link"> | ||
| Resources | ||
| </span> | ||
| <template #dropdown> | ||
| <el-dropdown-menu> | ||
| <RouterLink to="/decrypt"> <el-dropdown-item>Decrypt</el-dropdown-item></RouterLink> | ||
| <RouterLink to="/verified"> <el-dropdown-item>Verified Data</el-dropdown-item></RouterLink> | ||
| </el-dropdown-menu> | ||
| </template> | ||
| </el-dropdown> | ||
| </el-button> | ||
| </el-radio-group> | ||
| </nav> | ||
| </el-col> | ||
| <el-col :span="5" > | ||
| <meta-mask-connect-button /> | ||
| </el-col> | ||
| <!-- <el-col :span="4" >--> | ||
| <!-- <search-bar-item />--> | ||
| <!-- </el-col>--> | ||
| </el-row> | ||
| <el-row justify="space-around"> | ||
| <el-col :span="2"> | ||
| <img | ||
| src="@/assets/imgs/ten.svg" | ||
| alt="obscu.ro" | ||
| class="header-image" | ||
| style="max-height: 5vh" | ||
| /> | ||
| </el-col> | ||
| <el-col :span="10" :offset="7"> | ||
| <nav class="nav-bar"> | ||
| <el-radio-group size="default"> | ||
| <RouterLink to="/"> <el-button link class="paddedTop"> Home</el-button></RouterLink> | ||
| <RouterLink to="/personal"> | ||
| <el-button link class="paddedTop">Personal</el-button></RouterLink | ||
| > | ||
| <el-button link class="paddedTop"> | ||
| <el-dropdown> | ||
| <span class="el-dropdown-link"> Blockchain </span> | ||
| <template #dropdown> | ||
| <el-dropdown-menu> | ||
| <RouterLink to="/transactions"> | ||
| <el-dropdown-item>Transactions</el-dropdown-item></RouterLink | ||
| > | ||
| <RouterLink to="/batches"> | ||
| <el-dropdown-item>Batches</el-dropdown-item></RouterLink | ||
| > | ||
| <RouterLink to="/blocks"> | ||
| <el-dropdown-item>Blocks</el-dropdown-item></RouterLink | ||
| > | ||
| </el-dropdown-menu> | ||
| </template> | ||
| </el-dropdown> | ||
| </el-button> | ||
| <el-button link class="paddedTop" style="margin: 0px"> | ||
| <el-dropdown> | ||
| <span class="el-dropdown-link"> Resources </span> | ||
| <template #dropdown> | ||
| <el-dropdown-menu> | ||
| <RouterLink to="/decrypt"> | ||
| <el-dropdown-item>Decrypt</el-dropdown-item></RouterLink | ||
| > | ||
| <RouterLink to="/verified"> | ||
| <el-dropdown-item>Verified Data</el-dropdown-item></RouterLink | ||
| > | ||
| </el-dropdown-menu> | ||
| </template> | ||
| </el-dropdown> | ||
| </el-button> | ||
| </el-radio-group> | ||
| </nav> | ||
| </el-col> | ||
| <el-col :span="5"> | ||
| <meta-mask-connect-button /> | ||
| </el-col> | ||
| <!-- <el-col :span="4" >--> | ||
| <!-- <search-bar-item />--> | ||
| <!-- </el-col>--> | ||
| </el-row> | ||
| </el-main> | ||
| </el-container> | ||
| </header> |
There was a problem hiding this comment.
The restructuring of the HTML template and the replacement of the logo image source from "obscuro.svg" to "ten.svg" align with the rebranding requirements. The use of RouterLink for navigation is a Vue.js best practice for SPA routing, which should provide better performance and user experience by avoiding full page reloads. The inline styles, such as style="max-height: 5vh" on the logo image and style="margin: 0px" on the el-button, could be moved to the scoped CSS for better maintainability and to keep the template cleaner.
Comment on lines
89
to
91
| .paddedTop { | ||
| padding: 10px; | ||
| } |
There was a problem hiding this comment.
The .paddedTop class has been updated to include padding, which should ensure consistent spacing for elements with this class. However, the class name .paddedTop suggests that it only adds padding to the top, but the CSS rule applies padding to all sides. Consider renaming the class to reflect its purpose more accurately, such as .padded or .padded-all, to avoid confusion.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files ignored due to filter (2)
- tools/obscuroscan_v2/frontend/public/favicon.ico
- tools/walletextension/api/staticOG/favicon.ico
Files selected for processing (2)
- tools/obscuroscan_v2/frontend/index.html (1 hunks)
- tools/walletextension/api/staticOG/index.html (2 hunks)
Files skipped from review due to trivial changes (2)
- tools/obscuroscan_v2/frontend/index.html
- tools/walletextension/api/staticOG/index.html
Jennievon
deleted the
jennifer/2402-updated-uis-with-placeholder-logo-and-create-as-pr
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why this change is needed
Please provide a description and a link to the underlying ticket
https://github.com/ten-protocol/ten-internal/issues/2426
What changes were made as part of this PR
Please provide a high level list of the changes made
Update logos for Tenscan and Ten Gateway
PR checks pre-merging
Please indicate below by ticking the checkbox that you have read and performed the required
PR checks