Skip to content

Instantly share code, notes, and snippets.

View codebdy's full-sized avatar
😀

Water.Li codebdy

😀
View GitHub Profile
0. 当前是 react + vite 项目,全局默认使用 nextui 和 tailwindcss,所有代码基于这两个 ui 库,不要额外引入其他库。
1. 如果我要你重构或重新设计或新增页面的ui,你需要把变得更加有条理和ui现代化,减少阴影的使用,并且基于 framer-motion 编写动画效果,让页面灵动,现在的ui太像五年前的bootstrap了,跟不上时代,可以参考shadcn nextui 这类现代ui库的实现。
2. 如果使用tailwindcss配色,在k线和涨跌幅涉及到金融数据的方案中绿色统一使用 teal-700 dark:teal-400 红色统一使用 rose-700 dark: rose-400,默认light情况下不要着色。项目的默认dark模式下,强调色是 sky-400. 按钮色使用 sky-700
3. 所有页面你都必须全方位考虑到适配黑色 dark 场景,包括不限于 text background shadow 等等。
4. 全局页面默认使用 dark 配色的场景进行着色,着色现代化。
5. nextui 没有 Text 组件,使用tailwindcss来实现。
6. 重构页面的时候要考虑到最佳实践,组件分组,独立模块,易于维护。
7. 程序使用 react-helmet-async 来处理标题页面描述等 seo 信息,你需要基于这个库进行检查修改优化新增,来达到搜索引擎友好。
8. 项目是一个专业的金融量化网站,提供量化指标信息,专业的量化交易平台,用户可以一键管理部署策略机器人,查看回测等,你需要根据这个项目背景来做进一步的网站交互设计优化,文案优化,文案等要对标华尔街的知名券商基金等公司文案。
9. 图标库只使用 @egoist/tailwindcss-icons,不要引入其他任何图标库,使用方式类似于 <span class="i-mdi-home"></span>
@bkeating
bkeating / graphiql-dark-mode.css
Last active September 24, 2024 19:10
GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating
<style>
/* GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating[1]
* Colors taken from Atom's One Dark theme[2]. Add this file to the end of
* your <head> block[3] to override built-in default styling.
*
* [1]. https://twitter.com/flowpoke
* [2]. https://github.com/atom/atom/tree/master/packages/one-dark-ui
* [3]. e.g. `.../site-packages/graphene_django/templates/graphene/graphiql.html`
*/
@serg0x
serg0x / material-design-shadows.css
Last active November 1, 2024 00:27
Google material design elevation system shadows as css. Based on https://material.io/design/environment/elevation.html#default-elevations Exported with Sketchapp from the Google material design theme editor plugin "Baseline" theme.
/* Shadow 0dp */
box-shadow: none;
/* Shadow 1dp */
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
/* Shadow 2dp */
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
/* Shadow 3dp */