From c833176b638eeb1cdc8b30d4aef632a25ede3777 Mon Sep 17 00:00:00 2001 From: crupest Date: Fri, 14 Jul 2023 23:01:33 +0800 Subject: ... --- FrontEnd/src/index.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'FrontEnd/src/index.css') diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css index 419ccb8c..2faecfae 100644 --- a/FrontEnd/src/index.css +++ b/FrontEnd/src/index.css @@ -75,6 +75,7 @@ i { .markdown-container { white-space: initial; } + .markdown-container img { max-height: 200px; max-width: 100%; @@ -82,4 +83,4 @@ i { a { text-decoration: none; -} +} \ No newline at end of file -- cgit v1.2.3 From c456e1769d2f06860f3d08272dc72407f96a42b8 Mon Sep 17 00:00:00 2001 From: crupest Date: Fri, 14 Jul 2023 23:21:54 +0800 Subject: ... --- FrontEnd/src/index.css | 5 +- FrontEnd/src/views/common/button/Button.css | 14 +- FrontEnd/src/views/common/index.css | 5 + FrontEnd/src/views/common/theme.css | 296 +++++++++++++++------------- FrontEnd/tools/theme-generator.ts | 24 ++- 5 files changed, 189 insertions(+), 155 deletions(-) (limited to 'FrontEnd/src/index.css') diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css index 2faecfae..925d9c26 100644 --- a/FrontEnd/src/index.css +++ b/FrontEnd/src/index.css @@ -4,9 +4,6 @@ @import "./views/common/index.css"; -body { - background: var(--cru-background-color); -} small { line-height: 1.2; @@ -24,7 +21,7 @@ small { textarea { resize: none; outline: none; - border-color: var(--cru-background-2-color); + border-color: var(--cru-bg-2-color); } textarea:hover { diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css index e0b8e733..7a271446 100644 --- a/FrontEnd/src/views/common/button/Button.css +++ b/FrontEnd/src/views/common/button/Button.css @@ -1,5 +1,5 @@ .cru-button:not(.outline) { - color: var(--cru-text-color); + color: var(--cru-light-color); cursor: pointer; padding: 0.2em 0.5em; border-radius: 0.2em; @@ -9,11 +9,11 @@ } .cru-button:not(.outline):hover { - background-color: var(--cru-theme-f1-color); + background-color: var(--cru-theme-b1-color); } .cru-button:not(.outline):active { - background-color: var(--cru-theme-f2-color); + background-color: var(--cru-theme-b2-color); } .cru-button:not(.outline):disabled { @@ -32,14 +32,14 @@ } .cru-button.outline:hover { - color: var(--cru-theme-f1-color); - border-color: var(--cru-theme-f1-color); + color: var(--cru-theme-b1-color); + border-color: var(--cru-theme-b1-color); background-color: var(--cru-background-color); } .cru-button.outline:active { - color: var(--cru-theme-f2-color); - border-color: var(--cru-theme-f2-color); + color: var(--cru-theme-b2-color); + border-color: var(--cru-theme-b2-color); background-color: var(--cru-background-1-color); } diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index 06f2556b..16a7f924 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -1,5 +1,10 @@ @import "./theme.css"; +body { + background: var(--cru-bg-color); + color: var(--cru-text-color); +} + .cru-text-center { text-align: center; } diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css index 816bd3d1..9dfa1d9a 100644 --- a/FrontEnd/src/views/common/theme.css +++ b/FrontEnd/src/views/common/theme.css @@ -2,163 +2,179 @@ :root { --cru-primary-color: hsl(210 100% 50%); - --cru-primary-l1-color: hsl(210 100% 60%); - --cru-primary-l2-color: hsl(210 100% 70%); - --cru-primary-l3-color: hsl(210 100% 80%); - --cru-primary-d1-color: hsl(210 100% 40%); - --cru-primary-d2-color: hsl(210 100% 30%); - --cru-primary-d3-color: hsl(210 100% 20%); - --cru-primary-f1-color: hsl(210 100% 60%); - --cru-primary-f2-color: hsl(210 100% 70%); - --cru-primary-f3-color: hsl(210 100% 80%); - --cru-primary-b1-color: hsl(210 100% 40%); - --cru-primary-b2-color: hsl(210 100% 30%); - --cru-primary-b3-color: hsl(210 100% 20%); + --cru-primary-l1-color: hsl(210 100% 55%); + --cru-primary-l2-color: hsl(210 100% 60%); + --cru-primary-l3-color: hsl(210 100% 65%); + --cru-primary-d1-color: hsl(210 100% 45%); + --cru-primary-d2-color: hsl(210 100% 40%); + --cru-primary-d3-color: hsl(210 100% 35%); + --cru-primary-f1-color: hsl(210 100% 55%); + --cru-primary-f2-color: hsl(210 100% 60%); + --cru-primary-f3-color: hsl(210 100% 65%); + --cru-primary-b1-color: hsl(210 100% 45%); + --cru-primary-b2-color: hsl(210 100% 40%); + --cru-primary-b3-color: hsl(210 100% 35%); --cru-secondary-color: hsl(40 100% 50%); - --cru-secondary-l1-color: hsl(40 100% 60%); - --cru-secondary-l2-color: hsl(40 100% 70%); - --cru-secondary-l3-color: hsl(40 100% 80%); - --cru-secondary-d1-color: hsl(40 100% 40%); - --cru-secondary-d2-color: hsl(40 100% 30%); - --cru-secondary-d3-color: hsl(40 100% 20%); - --cru-secondary-f1-color: hsl(40 100% 60%); - --cru-secondary-f2-color: hsl(40 100% 70%); - --cru-secondary-f3-color: hsl(40 100% 80%); - --cru-secondary-b1-color: hsl(40 100% 40%); - --cru-secondary-b2-color: hsl(40 100% 30%); - --cru-secondary-b3-color: hsl(40 100% 20%); + --cru-secondary-l1-color: hsl(40 100% 55%); + --cru-secondary-l2-color: hsl(40 100% 60%); + --cru-secondary-l3-color: hsl(40 100% 65%); + --cru-secondary-d1-color: hsl(40 100% 45%); + --cru-secondary-d2-color: hsl(40 100% 40%); + --cru-secondary-d3-color: hsl(40 100% 35%); + --cru-secondary-f1-color: hsl(40 100% 55%); + --cru-secondary-f2-color: hsl(40 100% 60%); + --cru-secondary-f3-color: hsl(40 100% 65%); + --cru-secondary-b1-color: hsl(40 100% 45%); + --cru-secondary-b2-color: hsl(40 100% 40%); + --cru-secondary-b3-color: hsl(40 100% 35%); --cru-tertiary-color: hsl(160 100% 50%); - --cru-tertiary-l1-color: hsl(160 100% 60%); - --cru-tertiary-l2-color: hsl(160 100% 70%); - --cru-tertiary-l3-color: hsl(160 100% 80%); - --cru-tertiary-d1-color: hsl(160 100% 40%); - --cru-tertiary-d2-color: hsl(160 100% 30%); - --cru-tertiary-d3-color: hsl(160 100% 20%); - --cru-tertiary-f1-color: hsl(160 100% 60%); - --cru-tertiary-f2-color: hsl(160 100% 70%); - --cru-tertiary-f3-color: hsl(160 100% 80%); - --cru-tertiary-b1-color: hsl(160 100% 40%); - --cru-tertiary-b2-color: hsl(160 100% 30%); - --cru-tertiary-b3-color: hsl(160 100% 20%); + --cru-tertiary-l1-color: hsl(160 100% 55%); + --cru-tertiary-l2-color: hsl(160 100% 60%); + --cru-tertiary-l3-color: hsl(160 100% 65%); + --cru-tertiary-d1-color: hsl(160 100% 45%); + --cru-tertiary-d2-color: hsl(160 100% 40%); + --cru-tertiary-d3-color: hsl(160 100% 35%); + --cru-tertiary-f1-color: hsl(160 100% 55%); + --cru-tertiary-f2-color: hsl(160 100% 60%); + --cru-tertiary-f3-color: hsl(160 100% 65%); + --cru-tertiary-b1-color: hsl(160 100% 45%); + --cru-tertiary-b2-color: hsl(160 100% 40%); + --cru-tertiary-b3-color: hsl(160 100% 35%); --cru-danger-color: hsl(0 100% 50%); - --cru-danger-l1-color: hsl(0 100% 60%); - --cru-danger-l2-color: hsl(0 100% 70%); - --cru-danger-l3-color: hsl(0 100% 80%); - --cru-danger-d1-color: hsl(0 100% 40%); - --cru-danger-d2-color: hsl(0 100% 30%); - --cru-danger-d3-color: hsl(0 100% 20%); - --cru-danger-f1-color: hsl(0 100% 60%); - --cru-danger-f2-color: hsl(0 100% 70%); - --cru-danger-f3-color: hsl(0 100% 80%); - --cru-danger-b1-color: hsl(0 100% 40%); - --cru-danger-b2-color: hsl(0 100% 30%); - --cru-danger-b3-color: hsl(0 100% 20%); - --cru-success-color: hsl(120 100% 50%); - --cru-success-l1-color: hsl(120 100% 60%); - --cru-success-l2-color: hsl(120 100% 70%); - --cru-success-l3-color: hsl(120 100% 80%); - --cru-success-d1-color: hsl(120 100% 40%); - --cru-success-d2-color: hsl(120 100% 30%); - --cru-success-d3-color: hsl(120 100% 20%); - --cru-success-f1-color: hsl(120 100% 60%); - --cru-success-f2-color: hsl(120 100% 70%); - --cru-success-f3-color: hsl(120 100% 80%); - --cru-success-b1-color: hsl(120 100% 40%); - --cru-success-b2-color: hsl(120 100% 30%); - --cru-success-b3-color: hsl(120 100% 20%); + --cru-danger-l1-color: hsl(0 100% 55%); + --cru-danger-l2-color: hsl(0 100% 60%); + --cru-danger-l3-color: hsl(0 100% 65%); + --cru-danger-d1-color: hsl(0 100% 45%); + --cru-danger-d2-color: hsl(0 100% 40%); + --cru-danger-d3-color: hsl(0 100% 35%); + --cru-danger-f1-color: hsl(0 100% 55%); + --cru-danger-f2-color: hsl(0 100% 60%); + --cru-danger-f3-color: hsl(0 100% 65%); + --cru-danger-b1-color: hsl(0 100% 45%); + --cru-danger-b2-color: hsl(0 100% 40%); + --cru-danger-b3-color: hsl(0 100% 35%); + --cru-success-color: hsl(120 60% 50%); + --cru-success-l1-color: hsl(120 60% 55%); + --cru-success-l2-color: hsl(120 60% 60%); + --cru-success-l3-color: hsl(120 60% 65%); + --cru-success-d1-color: hsl(120 60% 45%); + --cru-success-d2-color: hsl(120 60% 40%); + --cru-success-d3-color: hsl(120 60% 35%); + --cru-success-f1-color: hsl(120 60% 55%); + --cru-success-f2-color: hsl(120 60% 60%); + --cru-success-f3-color: hsl(120 60% 65%); + --cru-success-b1-color: hsl(120 60% 45%); + --cru-success-b2-color: hsl(120 60% 40%); + --cru-success-b3-color: hsl(120 60% 35%); --cru-text-color: hsl(0 0% 0%); - --cru-text-1-color: hsl(0 0% 10%); - --cru-text-2-color: hsl(0 0% 20%); - --cru-text-3-color: hsl(0 0% 30%); + --cru-text-1-color: hsl(0 0% 5%); + --cru-text-2-color: hsl(0 0% 10%); + --cru-text-3-color: hsl(0 0% 15%); --cru-bg-color: hsl(0 0% 100%); - --cru-bg-1-color: hsl(0 0% 90%); - --cru-bg-2-color: hsl(0 0% 80%); - --cru-bg-3-color: hsl(0 0% 70%); + --cru-bg-1-color: hsl(0 0% 95%); + --cru-bg-2-color: hsl(0 0% 90%); + --cru-bg-3-color: hsl(0 0% 85%); + --cru-light-color: hsl(0 0% 100%); + --cru-light-1-color: hsl(0 0% 95%); + --cru-light-2-color: hsl(0 0% 90%); + --cru-light-3-color: hsl(0 0% 85%); + --cru-dark-color: hsl(0 0% 0%); + --cru-dark-1-color: hsl(0 0% 5%); + --cru-dark-2-color: hsl(0 0% 10%); + --cru-dark-3-color: hsl(0 0% 15%); --cru-disabled-color: hsl(0 0% 75%); - --cru-disabled-1-color: hsl(0 0% 65%); - --cru-disabled-2-color: hsl(0 0% 55%); - --cru-disabled-3-color: hsl(0 0% 45%); + --cru-disabled-1-color: hsl(0 0% 70%); + --cru-disabled-2-color: hsl(0 0% 65%); + --cru-disabled-3-color: hsl(0 0% 60%); } @media (prefers-color-scheme: dark) { :root { --cru-primary-color: hsl(210 100% 50%); - --cru-primary-l1-color: hsl(210 100% 60%); - --cru-primary-l2-color: hsl(210 100% 70%); - --cru-primary-l3-color: hsl(210 100% 80%); - --cru-primary-d1-color: hsl(210 100% 40%); - --cru-primary-d2-color: hsl(210 100% 30%); - --cru-primary-d3-color: hsl(210 100% 20%); - --cru-primary-f1-color: hsl(210 100% 40%); - --cru-primary-f2-color: hsl(210 100% 30%); - --cru-primary-f3-color: hsl(210 100% 20%); - --cru-primary-b1-color: hsl(210 100% 60%); - --cru-primary-b2-color: hsl(210 100% 70%); - --cru-primary-b3-color: hsl(210 100% 80%); + --cru-primary-l1-color: hsl(210 100% 55%); + --cru-primary-l2-color: hsl(210 100% 60%); + --cru-primary-l3-color: hsl(210 100% 65%); + --cru-primary-d1-color: hsl(210 100% 45%); + --cru-primary-d2-color: hsl(210 100% 40%); + --cru-primary-d3-color: hsl(210 100% 35%); + --cru-primary-f1-color: hsl(210 100% 45%); + --cru-primary-f2-color: hsl(210 100% 40%); + --cru-primary-f3-color: hsl(210 100% 35%); + --cru-primary-b1-color: hsl(210 100% 55%); + --cru-primary-b2-color: hsl(210 100% 60%); + --cru-primary-b3-color: hsl(210 100% 65%); --cru-secondary-color: hsl(40 100% 50%); - --cru-secondary-l1-color: hsl(40 100% 60%); - --cru-secondary-l2-color: hsl(40 100% 70%); - --cru-secondary-l3-color: hsl(40 100% 80%); - --cru-secondary-d1-color: hsl(40 100% 40%); - --cru-secondary-d2-color: hsl(40 100% 30%); - --cru-secondary-d3-color: hsl(40 100% 20%); - --cru-secondary-f1-color: hsl(40 100% 40%); - --cru-secondary-f2-color: hsl(40 100% 30%); - --cru-secondary-f3-color: hsl(40 100% 20%); - --cru-secondary-b1-color: hsl(40 100% 60%); - --cru-secondary-b2-color: hsl(40 100% 70%); - --cru-secondary-b3-color: hsl(40 100% 80%); + --cru-secondary-l1-color: hsl(40 100% 55%); + --cru-secondary-l2-color: hsl(40 100% 60%); + --cru-secondary-l3-color: hsl(40 100% 65%); + --cru-secondary-d1-color: hsl(40 100% 45%); + --cru-secondary-d2-color: hsl(40 100% 40%); + --cru-secondary-d3-color: hsl(40 100% 35%); + --cru-secondary-f1-color: hsl(40 100% 45%); + --cru-secondary-f2-color: hsl(40 100% 40%); + --cru-secondary-f3-color: hsl(40 100% 35%); + --cru-secondary-b1-color: hsl(40 100% 55%); + --cru-secondary-b2-color: hsl(40 100% 60%); + --cru-secondary-b3-color: hsl(40 100% 65%); --cru-tertiary-color: hsl(160 100% 50%); - --cru-tertiary-l1-color: hsl(160 100% 60%); - --cru-tertiary-l2-color: hsl(160 100% 70%); - --cru-tertiary-l3-color: hsl(160 100% 80%); - --cru-tertiary-d1-color: hsl(160 100% 40%); - --cru-tertiary-d2-color: hsl(160 100% 30%); - --cru-tertiary-d3-color: hsl(160 100% 20%); - --cru-tertiary-f1-color: hsl(160 100% 40%); - --cru-tertiary-f2-color: hsl(160 100% 30%); - --cru-tertiary-f3-color: hsl(160 100% 20%); - --cru-tertiary-b1-color: hsl(160 100% 60%); - --cru-tertiary-b2-color: hsl(160 100% 70%); - --cru-tertiary-b3-color: hsl(160 100% 80%); + --cru-tertiary-l1-color: hsl(160 100% 55%); + --cru-tertiary-l2-color: hsl(160 100% 60%); + --cru-tertiary-l3-color: hsl(160 100% 65%); + --cru-tertiary-d1-color: hsl(160 100% 45%); + --cru-tertiary-d2-color: hsl(160 100% 40%); + --cru-tertiary-d3-color: hsl(160 100% 35%); + --cru-tertiary-f1-color: hsl(160 100% 45%); + --cru-tertiary-f2-color: hsl(160 100% 40%); + --cru-tertiary-f3-color: hsl(160 100% 35%); + --cru-tertiary-b1-color: hsl(160 100% 55%); + --cru-tertiary-b2-color: hsl(160 100% 60%); + --cru-tertiary-b3-color: hsl(160 100% 65%); --cru-danger-color: hsl(0 100% 50%); - --cru-danger-l1-color: hsl(0 100% 60%); - --cru-danger-l2-color: hsl(0 100% 70%); - --cru-danger-l3-color: hsl(0 100% 80%); - --cru-danger-d1-color: hsl(0 100% 40%); - --cru-danger-d2-color: hsl(0 100% 30%); - --cru-danger-d3-color: hsl(0 100% 20%); - --cru-danger-f1-color: hsl(0 100% 40%); - --cru-danger-f2-color: hsl(0 100% 30%); - --cru-danger-f3-color: hsl(0 100% 20%); - --cru-danger-b1-color: hsl(0 100% 60%); - --cru-danger-b2-color: hsl(0 100% 70%); - --cru-danger-b3-color: hsl(0 100% 80%); - --cru-success-color: hsl(120 100% 50%); - --cru-success-l1-color: hsl(120 100% 60%); - --cru-success-l2-color: hsl(120 100% 70%); - --cru-success-l3-color: hsl(120 100% 80%); - --cru-success-d1-color: hsl(120 100% 40%); - --cru-success-d2-color: hsl(120 100% 30%); - --cru-success-d3-color: hsl(120 100% 20%); - --cru-success-f1-color: hsl(120 100% 40%); - --cru-success-f2-color: hsl(120 100% 30%); - --cru-success-f3-color: hsl(120 100% 20%); - --cru-success-b1-color: hsl(120 100% 60%); - --cru-success-b2-color: hsl(120 100% 70%); - --cru-success-b3-color: hsl(120 100% 80%); + --cru-danger-l1-color: hsl(0 100% 55%); + --cru-danger-l2-color: hsl(0 100% 60%); + --cru-danger-l3-color: hsl(0 100% 65%); + --cru-danger-d1-color: hsl(0 100% 45%); + --cru-danger-d2-color: hsl(0 100% 40%); + --cru-danger-d3-color: hsl(0 100% 35%); + --cru-danger-f1-color: hsl(0 100% 45%); + --cru-danger-f2-color: hsl(0 100% 40%); + --cru-danger-f3-color: hsl(0 100% 35%); + --cru-danger-b1-color: hsl(0 100% 55%); + --cru-danger-b2-color: hsl(0 100% 60%); + --cru-danger-b3-color: hsl(0 100% 65%); + --cru-success-color: hsl(120 60% 50%); + --cru-success-l1-color: hsl(120 60% 55%); + --cru-success-l2-color: hsl(120 60% 60%); + --cru-success-l3-color: hsl(120 60% 65%); + --cru-success-d1-color: hsl(120 60% 45%); + --cru-success-d2-color: hsl(120 60% 40%); + --cru-success-d3-color: hsl(120 60% 35%); + --cru-success-f1-color: hsl(120 60% 45%); + --cru-success-f2-color: hsl(120 60% 40%); + --cru-success-f3-color: hsl(120 60% 35%); + --cru-success-b1-color: hsl(120 60% 55%); + --cru-success-b2-color: hsl(120 60% 60%); + --cru-success-b3-color: hsl(120 60% 65%); --cru-text-color: hsl(0 0% 100%); - --cru-text-1-color: hsl(0 0% 90%); - --cru-text-2-color: hsl(0 0% 80%); - --cru-text-3-color: hsl(0 0% 70%); + --cru-text-1-color: hsl(0 0% 95%); + --cru-text-2-color: hsl(0 0% 90%); + --cru-text-3-color: hsl(0 0% 85%); --cru-bg-color: hsl(0 0% 0%); - --cru-bg-1-color: hsl(0 0% 10%); - --cru-bg-2-color: hsl(0 0% 20%); - --cru-bg-3-color: hsl(0 0% 30%); + --cru-bg-1-color: hsl(0 0% 5%); + --cru-bg-2-color: hsl(0 0% 10%); + --cru-bg-3-color: hsl(0 0% 15%); + --cru-light-color: hsl(0 0% 100%); + --cru-light-1-color: hsl(0 0% 95%); + --cru-light-2-color: hsl(0 0% 90%); + --cru-light-3-color: hsl(0 0% 85%); + --cru-dark-color: hsl(0 0% 0%); + --cru-dark-1-color: hsl(0 0% 5%); + --cru-dark-2-color: hsl(0 0% 10%); + --cru-dark-3-color: hsl(0 0% 15%); --cru-disabled-color: hsl(0 0% 25%); - --cru-disabled-1-color: hsl(0 0% 35%); - --cru-disabled-2-color: hsl(0 0% 45%); - --cru-disabled-3-color: hsl(0 0% 55%); + --cru-disabled-1-color: hsl(0 0% 30%); + --cru-disabled-2-color: hsl(0 0% 35%); + --cru-disabled-3-color: hsl(0 0% 40%); } } diff --git a/FrontEnd/tools/theme-generator.ts b/FrontEnd/tools/theme-generator.ts index 27dd5d1d..704a1052 100644 --- a/FrontEnd/tools/theme-generator.ts +++ b/FrontEnd/tools/theme-generator.ts @@ -30,11 +30,11 @@ class HslColor implements Color { ) {} lighter(level: number): HslColor { - return new HslColor(this.h, this.s, this.l + level * 10); + return new HslColor(this.h, this.s, this.l + level * 5); } darker(level: number): HslColor { - return new HslColor(this.h, this.s, this.l - level * 10); + return new HslColor(this.h, this.s, this.l - level * 5); } toCssString(): string { @@ -317,6 +317,16 @@ class Theme { mode === "light" ? GrayscaleColorGroup.white(this.prefix, "bg", this.levels) : GrayscaleColorGroup.black(this.prefix, "bg", this.levels); + const lightGroup = GrayscaleColorGroup.white( + this.prefix, + "light", + this.levels, + ); + const darkGroup = GrayscaleColorGroup.black( + this.prefix, + "dark", + this.levels, + ); const disabledGroup = mode == "light" ? new GrayscaleColorGroup( @@ -333,7 +343,13 @@ class Theme { "lighter", this.levels, ); - return new CompositeColorGroup([textGroup, bgGroup, disabledGroup]); + return new CompositeColorGroup([ + textGroup, + bgGroup, + lightGroup, + darkGroup, + disabledGroup, + ]); } generateCss(print: (text: string, indent: number) => void): void { @@ -370,7 +386,7 @@ class Theme { { name: "secondary", color: new HslColor(40, 100, 50) }, { name: "tertiary", color: new HslColor(160, 100, 50) }, { name: "danger", color: new HslColor(0, 100, 50) }, - { name: "success", color: new HslColor(120, 100, 50) }, + { name: "success", color: new HslColor(120, 60, 50) }, ]; const theme = new Theme(prefix, themeColors); -- cgit v1.2.3 From 59c424a38809be6afb170f11eadb0e4d14f10f69 Mon Sep 17 00:00:00 2001 From: crupest Date: Fri, 14 Jul 2023 23:35:46 +0800 Subject: ... --- FrontEnd/src/common.ts | 10 - FrontEnd/src/index.css | 1 - FrontEnd/src/views/common/Card.css | 7 +- FrontEnd/src/views/common/button/Button.css | 12 +- FrontEnd/src/views/common/button/FlatButton.css | 2 +- FrontEnd/src/views/common/index.css | 8 + FrontEnd/src/views/common/theme-color.css | 260 +++++++++++++++++++++++ FrontEnd/src/views/common/theme.css | 261 +----------------------- 8 files changed, 279 insertions(+), 282 deletions(-) create mode 100644 FrontEnd/src/views/common/theme-color.css (limited to 'FrontEnd/src/index.css') diff --git a/FrontEnd/src/common.ts b/FrontEnd/src/common.ts index 6dcd2a9e..965f9933 100644 --- a/FrontEnd/src/common.ts +++ b/FrontEnd/src/common.ts @@ -8,13 +8,3 @@ export const highlightTimelineUsername = "crupest"; export type { I18nText } from "./i18n"; export { c, convertI18nText } from "./i18n"; export { default as useC } from "./utilities/hooks/use-c"; - -export const themeColors = [ - "primary", - "secondary", - "tertiary", - "danger", - "success", -] as const; - -export type ThemeColor = (typeof themeColors)[number]; diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css index 925d9c26..3478db05 100644 --- a/FrontEnd/src/index.css +++ b/FrontEnd/src/index.css @@ -1,4 +1,3 @@ -@import "npm:bootstrap/dist/css/bootstrap-reboot.css"; @import "npm:bootstrap/dist/css/bootstrap-grid.css"; @import "npm:bootstrap-icons/font/bootstrap-icons.css"; diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css index 6de0dd8e..fa470130 100644 --- a/FrontEnd/src/views/common/Card.css +++ b/FrontEnd/src/views/common/Card.css @@ -1,15 +1,10 @@ -:root { - --cru-card-border-radius: 8px; -} - .cru-card { border: 1px solid; border-color: #e9ecef; border-radius: var(--cru-card-border-radius); - background: #fefeff; transition: all 0.3s; } .cru-card:hover { border-color: var(--cru-primary-color); -} +} \ No newline at end of file diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css index 7a271446..0df22ebe 100644 --- a/FrontEnd/src/views/common/button/Button.css +++ b/FrontEnd/src/views/common/button/Button.css @@ -9,11 +9,11 @@ } .cru-button:not(.outline):hover { - background-color: var(--cru-theme-b1-color); + background-color: var(--cru-theme-d1-color); } .cru-button:not(.outline):active { - background-color: var(--cru-theme-b2-color); + background-color: var(--cru-theme-d2-color); } .cru-button:not(.outline):disabled { @@ -32,14 +32,14 @@ } .cru-button.outline:hover { - color: var(--cru-theme-b1-color); - border-color: var(--cru-theme-b1-color); + color: var(--cru-theme-d1-color); + border-color: var(--cru-theme-d1-color); background-color: var(--cru-background-color); } .cru-button.outline:active { - color: var(--cru-theme-b2-color); - border-color: var(--cru-theme-b2-color); + color: var(--cru-theme-l2-color); + border-color: var(--cru-theme-l2-color); background-color: var(--cru-background-1-color); } diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css index ea45e783..01eabca9 100644 --- a/FrontEnd/src/views/common/button/FlatButton.css +++ b/FrontEnd/src/views/common/button/FlatButton.css @@ -9,7 +9,7 @@ } .cru-flat-button.disabled { - color: var(--cru-theme-f1-color); + color: var(--cru-disabled-color); cursor: default; } diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index 16a7f924..9d69997b 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -1,10 +1,18 @@ @import "./theme.css"; +* { + box-sizing: border-box; + margin-inline: 0; + margin-block: 0; +} + body { background: var(--cru-bg-color); color: var(--cru-text-color); + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } + .cru-text-center { text-align: center; } diff --git a/FrontEnd/src/views/common/theme-color.css b/FrontEnd/src/views/common/theme-color.css new file mode 100644 index 00000000..9dfa1d9a --- /dev/null +++ b/FrontEnd/src/views/common/theme-color.css @@ -0,0 +1,260 @@ +/* Generated by theme-generator.ts */ + +:root { + --cru-primary-color: hsl(210 100% 50%); + --cru-primary-l1-color: hsl(210 100% 55%); + --cru-primary-l2-color: hsl(210 100% 60%); + --cru-primary-l3-color: hsl(210 100% 65%); + --cru-primary-d1-color: hsl(210 100% 45%); + --cru-primary-d2-color: hsl(210 100% 40%); + --cru-primary-d3-color: hsl(210 100% 35%); + --cru-primary-f1-color: hsl(210 100% 55%); + --cru-primary-f2-color: hsl(210 100% 60%); + --cru-primary-f3-color: hsl(210 100% 65%); + --cru-primary-b1-color: hsl(210 100% 45%); + --cru-primary-b2-color: hsl(210 100% 40%); + --cru-primary-b3-color: hsl(210 100% 35%); + --cru-secondary-color: hsl(40 100% 50%); + --cru-secondary-l1-color: hsl(40 100% 55%); + --cru-secondary-l2-color: hsl(40 100% 60%); + --cru-secondary-l3-color: hsl(40 100% 65%); + --cru-secondary-d1-color: hsl(40 100% 45%); + --cru-secondary-d2-color: hsl(40 100% 40%); + --cru-secondary-d3-color: hsl(40 100% 35%); + --cru-secondary-f1-color: hsl(40 100% 55%); + --cru-secondary-f2-color: hsl(40 100% 60%); + --cru-secondary-f3-color: hsl(40 100% 65%); + --cru-secondary-b1-color: hsl(40 100% 45%); + --cru-secondary-b2-color: hsl(40 100% 40%); + --cru-secondary-b3-color: hsl(40 100% 35%); + --cru-tertiary-color: hsl(160 100% 50%); + --cru-tertiary-l1-color: hsl(160 100% 55%); + --cru-tertiary-l2-color: hsl(160 100% 60%); + --cru-tertiary-l3-color: hsl(160 100% 65%); + --cru-tertiary-d1-color: hsl(160 100% 45%); + --cru-tertiary-d2-color: hsl(160 100% 40%); + --cru-tertiary-d3-color: hsl(160 100% 35%); + --cru-tertiary-f1-color: hsl(160 100% 55%); + --cru-tertiary-f2-color: hsl(160 100% 60%); + --cru-tertiary-f3-color: hsl(160 100% 65%); + --cru-tertiary-b1-color: hsl(160 100% 45%); + --cru-tertiary-b2-color: hsl(160 100% 40%); + --cru-tertiary-b3-color: hsl(160 100% 35%); + --cru-danger-color: hsl(0 100% 50%); + --cru-danger-l1-color: hsl(0 100% 55%); + --cru-danger-l2-color: hsl(0 100% 60%); + --cru-danger-l3-color: hsl(0 100% 65%); + --cru-danger-d1-color: hsl(0 100% 45%); + --cru-danger-d2-color: hsl(0 100% 40%); + --cru-danger-d3-color: hsl(0 100% 35%); + --cru-danger-f1-color: hsl(0 100% 55%); + --cru-danger-f2-color: hsl(0 100% 60%); + --cru-danger-f3-color: hsl(0 100% 65%); + --cru-danger-b1-color: hsl(0 100% 45%); + --cru-danger-b2-color: hsl(0 100% 40%); + --cru-danger-b3-color: hsl(0 100% 35%); + --cru-success-color: hsl(120 60% 50%); + --cru-success-l1-color: hsl(120 60% 55%); + --cru-success-l2-color: hsl(120 60% 60%); + --cru-success-l3-color: hsl(120 60% 65%); + --cru-success-d1-color: hsl(120 60% 45%); + --cru-success-d2-color: hsl(120 60% 40%); + --cru-success-d3-color: hsl(120 60% 35%); + --cru-success-f1-color: hsl(120 60% 55%); + --cru-success-f2-color: hsl(120 60% 60%); + --cru-success-f3-color: hsl(120 60% 65%); + --cru-success-b1-color: hsl(120 60% 45%); + --cru-success-b2-color: hsl(120 60% 40%); + --cru-success-b3-color: hsl(120 60% 35%); + --cru-text-color: hsl(0 0% 0%); + --cru-text-1-color: hsl(0 0% 5%); + --cru-text-2-color: hsl(0 0% 10%); + --cru-text-3-color: hsl(0 0% 15%); + --cru-bg-color: hsl(0 0% 100%); + --cru-bg-1-color: hsl(0 0% 95%); + --cru-bg-2-color: hsl(0 0% 90%); + --cru-bg-3-color: hsl(0 0% 85%); + --cru-light-color: hsl(0 0% 100%); + --cru-light-1-color: hsl(0 0% 95%); + --cru-light-2-color: hsl(0 0% 90%); + --cru-light-3-color: hsl(0 0% 85%); + --cru-dark-color: hsl(0 0% 0%); + --cru-dark-1-color: hsl(0 0% 5%); + --cru-dark-2-color: hsl(0 0% 10%); + --cru-dark-3-color: hsl(0 0% 15%); + --cru-disabled-color: hsl(0 0% 75%); + --cru-disabled-1-color: hsl(0 0% 70%); + --cru-disabled-2-color: hsl(0 0% 65%); + --cru-disabled-3-color: hsl(0 0% 60%); +} + +@media (prefers-color-scheme: dark) { + :root { + --cru-primary-color: hsl(210 100% 50%); + --cru-primary-l1-color: hsl(210 100% 55%); + --cru-primary-l2-color: hsl(210 100% 60%); + --cru-primary-l3-color: hsl(210 100% 65%); + --cru-primary-d1-color: hsl(210 100% 45%); + --cru-primary-d2-color: hsl(210 100% 40%); + --cru-primary-d3-color: hsl(210 100% 35%); + --cru-primary-f1-color: hsl(210 100% 45%); + --cru-primary-f2-color: hsl(210 100% 40%); + --cru-primary-f3-color: hsl(210 100% 35%); + --cru-primary-b1-color: hsl(210 100% 55%); + --cru-primary-b2-color: hsl(210 100% 60%); + --cru-primary-b3-color: hsl(210 100% 65%); + --cru-secondary-color: hsl(40 100% 50%); + --cru-secondary-l1-color: hsl(40 100% 55%); + --cru-secondary-l2-color: hsl(40 100% 60%); + --cru-secondary-l3-color: hsl(40 100% 65%); + --cru-secondary-d1-color: hsl(40 100% 45%); + --cru-secondary-d2-color: hsl(40 100% 40%); + --cru-secondary-d3-color: hsl(40 100% 35%); + --cru-secondary-f1-color: hsl(40 100% 45%); + --cru-secondary-f2-color: hsl(40 100% 40%); + --cru-secondary-f3-color: hsl(40 100% 35%); + --cru-secondary-b1-color: hsl(40 100% 55%); + --cru-secondary-b2-color: hsl(40 100% 60%); + --cru-secondary-b3-color: hsl(40 100% 65%); + --cru-tertiary-color: hsl(160 100% 50%); + --cru-tertiary-l1-color: hsl(160 100% 55%); + --cru-tertiary-l2-color: hsl(160 100% 60%); + --cru-tertiary-l3-color: hsl(160 100% 65%); + --cru-tertiary-d1-color: hsl(160 100% 45%); + --cru-tertiary-d2-color: hsl(160 100% 40%); + --cru-tertiary-d3-color: hsl(160 100% 35%); + --cru-tertiary-f1-color: hsl(160 100% 45%); + --cru-tertiary-f2-color: hsl(160 100% 40%); + --cru-tertiary-f3-color: hsl(160 100% 35%); + --cru-tertiary-b1-color: hsl(160 100% 55%); + --cru-tertiary-b2-color: hsl(160 100% 60%); + --cru-tertiary-b3-color: hsl(160 100% 65%); + --cru-danger-color: hsl(0 100% 50%); + --cru-danger-l1-color: hsl(0 100% 55%); + --cru-danger-l2-color: hsl(0 100% 60%); + --cru-danger-l3-color: hsl(0 100% 65%); + --cru-danger-d1-color: hsl(0 100% 45%); + --cru-danger-d2-color: hsl(0 100% 40%); + --cru-danger-d3-color: hsl(0 100% 35%); + --cru-danger-f1-color: hsl(0 100% 45%); + --cru-danger-f2-color: hsl(0 100% 40%); + --cru-danger-f3-color: hsl(0 100% 35%); + --cru-danger-b1-color: hsl(0 100% 55%); + --cru-danger-b2-color: hsl(0 100% 60%); + --cru-danger-b3-color: hsl(0 100% 65%); + --cru-success-color: hsl(120 60% 50%); + --cru-success-l1-color: hsl(120 60% 55%); + --cru-success-l2-color: hsl(120 60% 60%); + --cru-success-l3-color: hsl(120 60% 65%); + --cru-success-d1-color: hsl(120 60% 45%); + --cru-success-d2-color: hsl(120 60% 40%); + --cru-success-d3-color: hsl(120 60% 35%); + --cru-success-f1-color: hsl(120 60% 45%); + --cru-success-f2-color: hsl(120 60% 40%); + --cru-success-f3-color: hsl(120 60% 35%); + --cru-success-b1-color: hsl(120 60% 55%); + --cru-success-b2-color: hsl(120 60% 60%); + --cru-success-b3-color: hsl(120 60% 65%); + --cru-text-color: hsl(0 0% 100%); + --cru-text-1-color: hsl(0 0% 95%); + --cru-text-2-color: hsl(0 0% 90%); + --cru-text-3-color: hsl(0 0% 85%); + --cru-bg-color: hsl(0 0% 0%); + --cru-bg-1-color: hsl(0 0% 5%); + --cru-bg-2-color: hsl(0 0% 10%); + --cru-bg-3-color: hsl(0 0% 15%); + --cru-light-color: hsl(0 0% 100%); + --cru-light-1-color: hsl(0 0% 95%); + --cru-light-2-color: hsl(0 0% 90%); + --cru-light-3-color: hsl(0 0% 85%); + --cru-dark-color: hsl(0 0% 0%); + --cru-dark-1-color: hsl(0 0% 5%); + --cru-dark-2-color: hsl(0 0% 10%); + --cru-dark-3-color: hsl(0 0% 15%); + --cru-disabled-color: hsl(0 0% 25%); + --cru-disabled-1-color: hsl(0 0% 30%); + --cru-disabled-2-color: hsl(0 0% 35%); + --cru-disabled-3-color: hsl(0 0% 40%); + } +} + +.cru-primary { + --cru-theme-color: var(--cru-primary-color); + --cru-theme-l1-color: var(--cru-primary-l1-color); + --cru-theme-l2-color: var(--cru-primary-l2-color); + --cru-theme-l3-color: var(--cru-primary-l3-color); + --cru-theme-d1-color: var(--cru-primary-d1-color); + --cru-theme-d2-color: var(--cru-primary-d2-color); + --cru-theme-d3-color: var(--cru-primary-d3-color); + --cru-theme-f1-color: var(--cru-primary-f1-color); + --cru-theme-f2-color: var(--cru-primary-f2-color); + --cru-theme-f3-color: var(--cru-primary-f3-color); + --cru-theme-b1-color: var(--cru-primary-b1-color); + --cru-theme-b2-color: var(--cru-primary-b2-color); + --cru-theme-b3-color: var(--cru-primary-b3-color); +} + +.cru-secondary { + --cru-theme-color: var(--cru-secondary-color); + --cru-theme-l1-color: var(--cru-secondary-l1-color); + --cru-theme-l2-color: var(--cru-secondary-l2-color); + --cru-theme-l3-color: var(--cru-secondary-l3-color); + --cru-theme-d1-color: var(--cru-secondary-d1-color); + --cru-theme-d2-color: var(--cru-secondary-d2-color); + --cru-theme-d3-color: var(--cru-secondary-d3-color); + --cru-theme-f1-color: var(--cru-secondary-f1-color); + --cru-theme-f2-color: var(--cru-secondary-f2-color); + --cru-theme-f3-color: var(--cru-secondary-f3-color); + --cru-theme-b1-color: var(--cru-secondary-b1-color); + --cru-theme-b2-color: var(--cru-secondary-b2-color); + --cru-theme-b3-color: var(--cru-secondary-b3-color); +} + +.cru-tertiary { + --cru-theme-color: var(--cru-tertiary-color); + --cru-theme-l1-color: var(--cru-tertiary-l1-color); + --cru-theme-l2-color: var(--cru-tertiary-l2-color); + --cru-theme-l3-color: var(--cru-tertiary-l3-color); + --cru-theme-d1-color: var(--cru-tertiary-d1-color); + --cru-theme-d2-color: var(--cru-tertiary-d2-color); + --cru-theme-d3-color: var(--cru-tertiary-d3-color); + --cru-theme-f1-color: var(--cru-tertiary-f1-color); + --cru-theme-f2-color: var(--cru-tertiary-f2-color); + --cru-theme-f3-color: var(--cru-tertiary-f3-color); + --cru-theme-b1-color: var(--cru-tertiary-b1-color); + --cru-theme-b2-color: var(--cru-tertiary-b2-color); + --cru-theme-b3-color: var(--cru-tertiary-b3-color); +} + +.cru-danger { + --cru-theme-color: var(--cru-danger-color); + --cru-theme-l1-color: var(--cru-danger-l1-color); + --cru-theme-l2-color: var(--cru-danger-l2-color); + --cru-theme-l3-color: var(--cru-danger-l3-color); + --cru-theme-d1-color: var(--cru-danger-d1-color); + --cru-theme-d2-color: var(--cru-danger-d2-color); + --cru-theme-d3-color: var(--cru-danger-d3-color); + --cru-theme-f1-color: var(--cru-danger-f1-color); + --cru-theme-f2-color: var(--cru-danger-f2-color); + --cru-theme-f3-color: var(--cru-danger-f3-color); + --cru-theme-b1-color: var(--cru-danger-b1-color); + --cru-theme-b2-color: var(--cru-danger-b2-color); + --cru-theme-b3-color: var(--cru-danger-b3-color); +} + +.cru-success { + --cru-theme-color: var(--cru-success-color); + --cru-theme-l1-color: var(--cru-success-l1-color); + --cru-theme-l2-color: var(--cru-success-l2-color); + --cru-theme-l3-color: var(--cru-success-l3-color); + --cru-theme-d1-color: var(--cru-success-d1-color); + --cru-theme-d2-color: var(--cru-success-d2-color); + --cru-theme-d3-color: var(--cru-success-d3-color); + --cru-theme-f1-color: var(--cru-success-f1-color); + --cru-theme-f2-color: var(--cru-success-f2-color); + --cru-theme-f3-color: var(--cru-success-f3-color); + --cru-theme-b1-color: var(--cru-success-b1-color); + --cru-theme-b2-color: var(--cru-success-b2-color); + --cru-theme-b3-color: var(--cru-success-b3-color); +} + diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css index 9dfa1d9a..28c16627 100644 --- a/FrontEnd/src/views/common/theme.css +++ b/FrontEnd/src/views/common/theme.css @@ -1,260 +1,5 @@ -/* Generated by theme-generator.ts */ +@import "./theme-color.css"; :root { - --cru-primary-color: hsl(210 100% 50%); - --cru-primary-l1-color: hsl(210 100% 55%); - --cru-primary-l2-color: hsl(210 100% 60%); - --cru-primary-l3-color: hsl(210 100% 65%); - --cru-primary-d1-color: hsl(210 100% 45%); - --cru-primary-d2-color: hsl(210 100% 40%); - --cru-primary-d3-color: hsl(210 100% 35%); - --cru-primary-f1-color: hsl(210 100% 55%); - --cru-primary-f2-color: hsl(210 100% 60%); - --cru-primary-f3-color: hsl(210 100% 65%); - --cru-primary-b1-color: hsl(210 100% 45%); - --cru-primary-b2-color: hsl(210 100% 40%); - --cru-primary-b3-color: hsl(210 100% 35%); - --cru-secondary-color: hsl(40 100% 50%); - --cru-secondary-l1-color: hsl(40 100% 55%); - --cru-secondary-l2-color: hsl(40 100% 60%); - --cru-secondary-l3-color: hsl(40 100% 65%); - --cru-secondary-d1-color: hsl(40 100% 45%); - --cru-secondary-d2-color: hsl(40 100% 40%); - --cru-secondary-d3-color: hsl(40 100% 35%); - --cru-secondary-f1-color: hsl(40 100% 55%); - --cru-secondary-f2-color: hsl(40 100% 60%); - --cru-secondary-f3-color: hsl(40 100% 65%); - --cru-secondary-b1-color: hsl(40 100% 45%); - --cru-secondary-b2-color: hsl(40 100% 40%); - --cru-secondary-b3-color: hsl(40 100% 35%); - --cru-tertiary-color: hsl(160 100% 50%); - --cru-tertiary-l1-color: hsl(160 100% 55%); - --cru-tertiary-l2-color: hsl(160 100% 60%); - --cru-tertiary-l3-color: hsl(160 100% 65%); - --cru-tertiary-d1-color: hsl(160 100% 45%); - --cru-tertiary-d2-color: hsl(160 100% 40%); - --cru-tertiary-d3-color: hsl(160 100% 35%); - --cru-tertiary-f1-color: hsl(160 100% 55%); - --cru-tertiary-f2-color: hsl(160 100% 60%); - --cru-tertiary-f3-color: hsl(160 100% 65%); - --cru-tertiary-b1-color: hsl(160 100% 45%); - --cru-tertiary-b2-color: hsl(160 100% 40%); - --cru-tertiary-b3-color: hsl(160 100% 35%); - --cru-danger-color: hsl(0 100% 50%); - --cru-danger-l1-color: hsl(0 100% 55%); - --cru-danger-l2-color: hsl(0 100% 60%); - --cru-danger-l3-color: hsl(0 100% 65%); - --cru-danger-d1-color: hsl(0 100% 45%); - --cru-danger-d2-color: hsl(0 100% 40%); - --cru-danger-d3-color: hsl(0 100% 35%); - --cru-danger-f1-color: hsl(0 100% 55%); - --cru-danger-f2-color: hsl(0 100% 60%); - --cru-danger-f3-color: hsl(0 100% 65%); - --cru-danger-b1-color: hsl(0 100% 45%); - --cru-danger-b2-color: hsl(0 100% 40%); - --cru-danger-b3-color: hsl(0 100% 35%); - --cru-success-color: hsl(120 60% 50%); - --cru-success-l1-color: hsl(120 60% 55%); - --cru-success-l2-color: hsl(120 60% 60%); - --cru-success-l3-color: hsl(120 60% 65%); - --cru-success-d1-color: hsl(120 60% 45%); - --cru-success-d2-color: hsl(120 60% 40%); - --cru-success-d3-color: hsl(120 60% 35%); - --cru-success-f1-color: hsl(120 60% 55%); - --cru-success-f2-color: hsl(120 60% 60%); - --cru-success-f3-color: hsl(120 60% 65%); - --cru-success-b1-color: hsl(120 60% 45%); - --cru-success-b2-color: hsl(120 60% 40%); - --cru-success-b3-color: hsl(120 60% 35%); - --cru-text-color: hsl(0 0% 0%); - --cru-text-1-color: hsl(0 0% 5%); - --cru-text-2-color: hsl(0 0% 10%); - --cru-text-3-color: hsl(0 0% 15%); - --cru-bg-color: hsl(0 0% 100%); - --cru-bg-1-color: hsl(0 0% 95%); - --cru-bg-2-color: hsl(0 0% 90%); - --cru-bg-3-color: hsl(0 0% 85%); - --cru-light-color: hsl(0 0% 100%); - --cru-light-1-color: hsl(0 0% 95%); - --cru-light-2-color: hsl(0 0% 90%); - --cru-light-3-color: hsl(0 0% 85%); - --cru-dark-color: hsl(0 0% 0%); - --cru-dark-1-color: hsl(0 0% 5%); - --cru-dark-2-color: hsl(0 0% 10%); - --cru-dark-3-color: hsl(0 0% 15%); - --cru-disabled-color: hsl(0 0% 75%); - --cru-disabled-1-color: hsl(0 0% 70%); - --cru-disabled-2-color: hsl(0 0% 65%); - --cru-disabled-3-color: hsl(0 0% 60%); -} - -@media (prefers-color-scheme: dark) { - :root { - --cru-primary-color: hsl(210 100% 50%); - --cru-primary-l1-color: hsl(210 100% 55%); - --cru-primary-l2-color: hsl(210 100% 60%); - --cru-primary-l3-color: hsl(210 100% 65%); - --cru-primary-d1-color: hsl(210 100% 45%); - --cru-primary-d2-color: hsl(210 100% 40%); - --cru-primary-d3-color: hsl(210 100% 35%); - --cru-primary-f1-color: hsl(210 100% 45%); - --cru-primary-f2-color: hsl(210 100% 40%); - --cru-primary-f3-color: hsl(210 100% 35%); - --cru-primary-b1-color: hsl(210 100% 55%); - --cru-primary-b2-color: hsl(210 100% 60%); - --cru-primary-b3-color: hsl(210 100% 65%); - --cru-secondary-color: hsl(40 100% 50%); - --cru-secondary-l1-color: hsl(40 100% 55%); - --cru-secondary-l2-color: hsl(40 100% 60%); - --cru-secondary-l3-color: hsl(40 100% 65%); - --cru-secondary-d1-color: hsl(40 100% 45%); - --cru-secondary-d2-color: hsl(40 100% 40%); - --cru-secondary-d3-color: hsl(40 100% 35%); - --cru-secondary-f1-color: hsl(40 100% 45%); - --cru-secondary-f2-color: hsl(40 100% 40%); - --cru-secondary-f3-color: hsl(40 100% 35%); - --cru-secondary-b1-color: hsl(40 100% 55%); - --cru-secondary-b2-color: hsl(40 100% 60%); - --cru-secondary-b3-color: hsl(40 100% 65%); - --cru-tertiary-color: hsl(160 100% 50%); - --cru-tertiary-l1-color: hsl(160 100% 55%); - --cru-tertiary-l2-color: hsl(160 100% 60%); - --cru-tertiary-l3-color: hsl(160 100% 65%); - --cru-tertiary-d1-color: hsl(160 100% 45%); - --cru-tertiary-d2-color: hsl(160 100% 40%); - --cru-tertiary-d3-color: hsl(160 100% 35%); - --cru-tertiary-f1-color: hsl(160 100% 45%); - --cru-tertiary-f2-color: hsl(160 100% 40%); - --cru-tertiary-f3-color: hsl(160 100% 35%); - --cru-tertiary-b1-color: hsl(160 100% 55%); - --cru-tertiary-b2-color: hsl(160 100% 60%); - --cru-tertiary-b3-color: hsl(160 100% 65%); - --cru-danger-color: hsl(0 100% 50%); - --cru-danger-l1-color: hsl(0 100% 55%); - --cru-danger-l2-color: hsl(0 100% 60%); - --cru-danger-l3-color: hsl(0 100% 65%); - --cru-danger-d1-color: hsl(0 100% 45%); - --cru-danger-d2-color: hsl(0 100% 40%); - --cru-danger-d3-color: hsl(0 100% 35%); - --cru-danger-f1-color: hsl(0 100% 45%); - --cru-danger-f2-color: hsl(0 100% 40%); - --cru-danger-f3-color: hsl(0 100% 35%); - --cru-danger-b1-color: hsl(0 100% 55%); - --cru-danger-b2-color: hsl(0 100% 60%); - --cru-danger-b3-color: hsl(0 100% 65%); - --cru-success-color: hsl(120 60% 50%); - --cru-success-l1-color: hsl(120 60% 55%); - --cru-success-l2-color: hsl(120 60% 60%); - --cru-success-l3-color: hsl(120 60% 65%); - --cru-success-d1-color: hsl(120 60% 45%); - --cru-success-d2-color: hsl(120 60% 40%); - --cru-success-d3-color: hsl(120 60% 35%); - --cru-success-f1-color: hsl(120 60% 45%); - --cru-success-f2-color: hsl(120 60% 40%); - --cru-success-f3-color: hsl(120 60% 35%); - --cru-success-b1-color: hsl(120 60% 55%); - --cru-success-b2-color: hsl(120 60% 60%); - --cru-success-b3-color: hsl(120 60% 65%); - --cru-text-color: hsl(0 0% 100%); - --cru-text-1-color: hsl(0 0% 95%); - --cru-text-2-color: hsl(0 0% 90%); - --cru-text-3-color: hsl(0 0% 85%); - --cru-bg-color: hsl(0 0% 0%); - --cru-bg-1-color: hsl(0 0% 5%); - --cru-bg-2-color: hsl(0 0% 10%); - --cru-bg-3-color: hsl(0 0% 15%); - --cru-light-color: hsl(0 0% 100%); - --cru-light-1-color: hsl(0 0% 95%); - --cru-light-2-color: hsl(0 0% 90%); - --cru-light-3-color: hsl(0 0% 85%); - --cru-dark-color: hsl(0 0% 0%); - --cru-dark-1-color: hsl(0 0% 5%); - --cru-dark-2-color: hsl(0 0% 10%); - --cru-dark-3-color: hsl(0 0% 15%); - --cru-disabled-color: hsl(0 0% 25%); - --cru-disabled-1-color: hsl(0 0% 30%); - --cru-disabled-2-color: hsl(0 0% 35%); - --cru-disabled-3-color: hsl(0 0% 40%); - } -} - -.cru-primary { - --cru-theme-color: var(--cru-primary-color); - --cru-theme-l1-color: var(--cru-primary-l1-color); - --cru-theme-l2-color: var(--cru-primary-l2-color); - --cru-theme-l3-color: var(--cru-primary-l3-color); - --cru-theme-d1-color: var(--cru-primary-d1-color); - --cru-theme-d2-color: var(--cru-primary-d2-color); - --cru-theme-d3-color: var(--cru-primary-d3-color); - --cru-theme-f1-color: var(--cru-primary-f1-color); - --cru-theme-f2-color: var(--cru-primary-f2-color); - --cru-theme-f3-color: var(--cru-primary-f3-color); - --cru-theme-b1-color: var(--cru-primary-b1-color); - --cru-theme-b2-color: var(--cru-primary-b2-color); - --cru-theme-b3-color: var(--cru-primary-b3-color); -} - -.cru-secondary { - --cru-theme-color: var(--cru-secondary-color); - --cru-theme-l1-color: var(--cru-secondary-l1-color); - --cru-theme-l2-color: var(--cru-secondary-l2-color); - --cru-theme-l3-color: var(--cru-secondary-l3-color); - --cru-theme-d1-color: var(--cru-secondary-d1-color); - --cru-theme-d2-color: var(--cru-secondary-d2-color); - --cru-theme-d3-color: var(--cru-secondary-d3-color); - --cru-theme-f1-color: var(--cru-secondary-f1-color); - --cru-theme-f2-color: var(--cru-secondary-f2-color); - --cru-theme-f3-color: var(--cru-secondary-f3-color); - --cru-theme-b1-color: var(--cru-secondary-b1-color); - --cru-theme-b2-color: var(--cru-secondary-b2-color); - --cru-theme-b3-color: var(--cru-secondary-b3-color); -} - -.cru-tertiary { - --cru-theme-color: var(--cru-tertiary-color); - --cru-theme-l1-color: var(--cru-tertiary-l1-color); - --cru-theme-l2-color: var(--cru-tertiary-l2-color); - --cru-theme-l3-color: var(--cru-tertiary-l3-color); - --cru-theme-d1-color: var(--cru-tertiary-d1-color); - --cru-theme-d2-color: var(--cru-tertiary-d2-color); - --cru-theme-d3-color: var(--cru-tertiary-d3-color); - --cru-theme-f1-color: var(--cru-tertiary-f1-color); - --cru-theme-f2-color: var(--cru-tertiary-f2-color); - --cru-theme-f3-color: var(--cru-tertiary-f3-color); - --cru-theme-b1-color: var(--cru-tertiary-b1-color); - --cru-theme-b2-color: var(--cru-tertiary-b2-color); - --cru-theme-b3-color: var(--cru-tertiary-b3-color); -} - -.cru-danger { - --cru-theme-color: var(--cru-danger-color); - --cru-theme-l1-color: var(--cru-danger-l1-color); - --cru-theme-l2-color: var(--cru-danger-l2-color); - --cru-theme-l3-color: var(--cru-danger-l3-color); - --cru-theme-d1-color: var(--cru-danger-d1-color); - --cru-theme-d2-color: var(--cru-danger-d2-color); - --cru-theme-d3-color: var(--cru-danger-d3-color); - --cru-theme-f1-color: var(--cru-danger-f1-color); - --cru-theme-f2-color: var(--cru-danger-f2-color); - --cru-theme-f3-color: var(--cru-danger-f3-color); - --cru-theme-b1-color: var(--cru-danger-b1-color); - --cru-theme-b2-color: var(--cru-danger-b2-color); - --cru-theme-b3-color: var(--cru-danger-b3-color); -} - -.cru-success { - --cru-theme-color: var(--cru-success-color); - --cru-theme-l1-color: var(--cru-success-l1-color); - --cru-theme-l2-color: var(--cru-success-l2-color); - --cru-theme-l3-color: var(--cru-success-l3-color); - --cru-theme-d1-color: var(--cru-success-d1-color); - --cru-theme-d2-color: var(--cru-success-d2-color); - --cru-theme-d3-color: var(--cru-success-d3-color); - --cru-theme-f1-color: var(--cru-success-f1-color); - --cru-theme-f2-color: var(--cru-success-f2-color); - --cru-theme-f3-color: var(--cru-success-f3-color); - --cru-theme-b1-color: var(--cru-success-b1-color); - --cru-theme-b2-color: var(--cru-success-b2-color); - --cru-theme-b3-color: var(--cru-success-b3-color); -} - + --cru-card-border-radius: 8px; +} \ No newline at end of file -- cgit v1.2.3 From d7b050ef7f047f841ffcda96fbdc9857574e97b9 Mon Sep 17 00:00:00 2001 From: crupest Date: Fri, 21 Jul 2023 17:02:05 +0800 Subject: ... --- FrontEnd/src/App.tsx | 8 +- FrontEnd/src/index.css | 1 - FrontEnd/src/pages/about/index.css | 1 - FrontEnd/src/pages/about/index.tsx | 5 +- FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx | 6 +- .../src/pages/setting/ChangeNicknameDialog.tsx | 2 +- .../src/pages/setting/ChangePasswordDialog.tsx | 2 +- FrontEnd/src/pages/setting/index.css | 54 +++- FrontEnd/src/pages/setting/index.tsx | 171 +++++----- FrontEnd/src/views/common/Card.css | 8 +- FrontEnd/src/views/common/Card.tsx | 8 +- FrontEnd/src/views/common/Page.tsx | 15 + FrontEnd/src/views/common/index.css | 8 + FrontEnd/src/views/common/theme.css | 5 +- FrontEnd/src/views/settings/ChangeAvatarDialog.tsx | 354 --------------------- .../src/views/settings/ChangeNicknameDialog.tsx | 34 -- .../src/views/settings/ChangePasswordDialog.tsx | 69 ---- FrontEnd/src/views/settings/index.css | 31 -- FrontEnd/src/views/settings/index.tsx | 338 -------------------- 19 files changed, 182 insertions(+), 938 deletions(-) create mode 100644 FrontEnd/src/views/common/Page.tsx delete mode 100644 FrontEnd/src/views/settings/ChangeAvatarDialog.tsx delete mode 100644 FrontEnd/src/views/settings/ChangeNicknameDialog.tsx delete mode 100644 FrontEnd/src/views/settings/ChangePasswordDialog.tsx delete mode 100644 FrontEnd/src/views/settings/index.css delete mode 100644 FrontEnd/src/views/settings/index.tsx (limited to 'FrontEnd/src/index.css') diff --git a/FrontEnd/src/App.tsx b/FrontEnd/src/App.tsx index 07a8780f..92fe0652 100644 --- a/FrontEnd/src/App.tsx +++ b/FrontEnd/src/App.tsx @@ -4,11 +4,11 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; import AppBar from "./views/common/AppBar"; import NotFoundPage from "./pages/404"; import LoadingPage from "./views/common/LoadingPage"; -import About from "./pages/about"; +import AboutPage from "./pages/about"; +import SettingPage from "./pages/setting"; import Center from "./views/center"; import Login from "./views/login"; import Register from "./views/register"; -import Settings from "./views/settings"; import TimelinePage from "./views/timeline"; import Search from "./views/search"; import Admin from "./views/admin"; @@ -24,8 +24,8 @@ export default function App() { } /> } /> } /> - } /> - } /> + } /> + } /> } /> } /> } /> diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css index 3478db05..49791c23 100644 --- a/FrontEnd/src/index.css +++ b/FrontEnd/src/index.css @@ -1,4 +1,3 @@ -@import "npm:bootstrap/dist/css/bootstrap-grid.css"; @import "npm:bootstrap-icons/font/bootstrap-icons.css"; @import "./views/common/index.css"; diff --git a/FrontEnd/src/pages/about/index.css b/FrontEnd/src/pages/about/index.css index 487f4a0a..1ce7a7c8 100644 --- a/FrontEnd/src/pages/about/index.css +++ b/FrontEnd/src/pages/about/index.css @@ -1,5 +1,4 @@ .about-page { - padding: 1em 2em; line-height: 1.5; } diff --git a/FrontEnd/src/pages/about/index.tsx b/FrontEnd/src/pages/about/index.tsx index afd4de34..acec1735 100644 --- a/FrontEnd/src/pages/about/index.tsx +++ b/FrontEnd/src/pages/about/index.tsx @@ -1,6 +1,7 @@ import "./index.css"; import { useC } from "@/common"; +import Page from "@/views/common/Page"; interface Credit { name: string; @@ -52,7 +53,7 @@ export default function AboutPage() { const c = useC(); return ( -
+

{c("about.credits.title")}

{c("about.credits.content")}

{c("about.credits.frontend")}

@@ -81,6 +82,6 @@ export default function AboutPage() { })}
  • ...
    • -
    + ); } diff --git a/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx b/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx index 44bd2c68..b2a4e2a8 100644 --- a/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx +++ b/FrontEnd/src/pages/setting/ChangeAvatarDialog.tsx @@ -9,9 +9,9 @@ import { useUser } from "@/services/user"; import { getHttpUserClient } from "@/http/user"; -import ImageCropper, { Clip, applyClipToImage } from "../common/ImageCropper"; -import Button from "../common/button/Button"; -import Dialog from "../common/dialog/Dialog"; +import ImageCropper, { Clip, applyClipToImage } from "@/views/common/ImageCropper"; +import Button from "@/views/common/button/Button"; +import Dialog from "@/views/common/dialog/Dialog"; export interface ChangeAvatarDialogProps { open: boolean; diff --git a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx index 7ba12de8..11c86222 100644 --- a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx +++ b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx @@ -2,7 +2,7 @@ import { getHttpUserClient } from "@/http/user"; import { useUser } from "@/services/user"; import * as React from "react"; -import OperationDialog from "../common/dialog/OperationDialog"; +import OperationDialog from "@/views/common/dialog/OperationDialog"; export interface ChangeNicknameDialogProps { open: boolean; diff --git a/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx b/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx index a34ca4a7..a523b454 100644 --- a/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx +++ b/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx @@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom"; import { userService } from "@/services/user"; -import OperationDialog from "../common/dialog/OperationDialog"; +import OperationDialog from "@/views/common/dialog/OperationDialog"; export interface ChangePasswordDialogProps { open: boolean; diff --git a/FrontEnd/src/pages/setting/index.css b/FrontEnd/src/pages/setting/index.css index ccf7a97a..af5ccf20 100644 --- a/FrontEnd/src/pages/setting/index.css +++ b/FrontEnd/src/pages/setting/index.css @@ -1,3 +1,5 @@ +/* TODO: Make item prettier. */ + .change-avatar-cropper-row { max-height: 400px; } @@ -8,20 +10,56 @@ max-height: 400px; } -.settings-item { +.setting-section { + padding: 1em 0; + margin: 1em 0; +} + +.setting-section-title { + padding: 0 1em; +} + +.setting-section-item-area { + margin-top: 1em; + border-top: 1px solid var(--cru-key-container-color); +} + +.setting-item-container { padding: 0.5em 1em; - transition: background 0.3s; - border-bottom: 1px solid #e9ecef; + transition: background-color 0.3s; + color: var(--cru-surface-on-color); + background-color: var(--cru-surface-color); + border-bottom: 1px solid var(--cru-key-container-color); + display: flex; align-items: center; } -.settings-item.first { - border-top: 1px solid #e9ecef; + +.setting-item-container:hover { + background-color: var(--cru-key-container-1-color); + border-bottom-color: var(--cru-key-container-1-color); +} + +.setting-item-label-sub { + color: var(--cru-secondary-text-color); } -.settings-item.clickable { + +.setting-item-container.setting-type-button { cursor: pointer; } -.settings-item:hover { - background: #dee2e6; + +.setting-item-container.setting-type-button.danger { + color: var(--cru-danger-color); +} + + +@media (max-width: 576) { + .setting-item-container.setting-type-select { + flex-direction: column; + } + + .setting-item-container.setting-type-select .setting-item-value-area { + margin-top: 1em; + } } .register-code { diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx index 4e28585e..5d6dcbc0 100644 --- a/FrontEnd/src/pages/setting/index.tsx +++ b/FrontEnd/src/pages/setting/index.tsx @@ -11,11 +11,11 @@ import classNames from "classnames"; import { useC, Text } from "@/common"; import { useUser, userService } from "@/services/user"; import { getHttpUserClient } from "@/http/user"; -import { TimelineVisibility } from "@/http/timeline"; import ConfirmDialog from "@/views/common/dialog/ConfirmDialog"; import Card from "@/views/common/Card"; import Spinner from "@/views/common/Spinner"; +import Page from "@/views/common/Page"; import ChangePasswordDialog from "./ChangePasswordDialog"; import ChangeAvatarDialog from "./ChangeAvatarDialog"; import ChangeNicknameDialog from "./ChangeNicknameDialog"; @@ -24,9 +24,9 @@ import "./index.css"; import { pushAlert } from "@/services/alert"; interface SettingSectionProps - extends Omit, "title"> { + extends Omit, "title"> { title: Text; - children: ReactNode; + children?: ReactNode; } function SettingSection({ @@ -40,7 +40,7 @@ function SettingSection({ return (

    {c(title)}

    - {children} +
    {children}
     ); } @@ -115,6 +115,7 @@ function SelectSettingsItem({ ) : ( - - -
    -
    -
    - - ); - } else if (state === "crop") { - if (fileUrl == null) { - throw new UiLogicError(); - } - return ( - <> -
    -
    - -
    -
    - {t("settings.dialogChangeAvatar.prompt.crop")} -
    -
    -
    -
    -
    - - ); - } else if (state === "processcrop") { - return ( - <> -
    -
    - {t("settings.dialogChangeAvatar.prompt.processingCrop")} -
    -
    -
    -
    -
    - - ); - } else if (state === "preview") { - return ( - <> -
    - {createPreviewRow()} -
    - {t("settings.dialogChangeAvatar.prompt.preview")} -
    -
    -
    -
    -
    - - ); - } else if (state === "uploading") { - return ( - <> -
    - {createPreviewRow()} -
    - {t("settings.dialogChangeAvatar.prompt.uploading")} -
    -
    - - ); - } else if (state === "success") { - return ( - <> -
    -
    - {t("operationDialog.success")} -
    -
    -
    -
    -
    - - ); - } else { - return ( - <> -
    - {createPreviewRow()} -
    {trueMessage}
    -
    -
    -
    -
    - - ); - } - })()} - - ); -}; - -export default ChangeAvatarDialog; diff --git a/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx b/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx deleted file mode 100644 index 7ba12de8..00000000 --- a/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { getHttpUserClient } from "@/http/user"; -import { useUser } from "@/services/user"; -import * as React from "react"; - -import OperationDialog from "../common/dialog/OperationDialog"; - -export interface ChangeNicknameDialogProps { - open: boolean; - close: () => void; -} - -const ChangeNicknameDialog: React.FC = (props) => { - const user = useUser(); - - if (user == null) return null; - - return ( - { - return getHttpUserClient().patch(user.username, { - nickname: newNickname, - }); - }} - onClose={props.close} - /> - ); -}; - -export default ChangeNicknameDialog; diff --git a/FrontEnd/src/views/settings/ChangePasswordDialog.tsx b/FrontEnd/src/views/settings/ChangePasswordDialog.tsx deleted file mode 100644 index a34ca4a7..00000000 --- a/FrontEnd/src/views/settings/ChangePasswordDialog.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { useState } from "react"; -import * as React from "react"; -import { useNavigate } from "react-router-dom"; - -import { userService } from "@/services/user"; - -import OperationDialog from "../common/dialog/OperationDialog"; - -export interface ChangePasswordDialogProps { - open: boolean; - close: () => void; -} - -const ChangePasswordDialog: React.FC = (props) => { - const navigate = useNavigate(); - - const [redirect, setRedirect] = useState(false); - - return ( - { - const result: Record = {}; - if (oldPassword === "") { - result[0] = "settings.dialogChangePassword.errorEmptyOldPassword"; - } - if (newPassword === "") { - result[1] = "settings.dialogChangePassword.errorEmptyNewPassword"; - } - if (retypedNewPassword !== newPassword) { - result[2] = "settings.dialogChangePassword.errorRetypeNotMatch"; - } - return result; - }} - onProcess={async ([oldPassword, newPassword]) => { - await userService.changePassword(oldPassword, newPassword); - setRedirect(true); - }} - onClose={() => { - props.close(); - if (redirect) { - navigate("/login"); - } - }} - /> - ); -}; - -export default ChangePasswordDialog; diff --git a/FrontEnd/src/views/settings/index.css b/FrontEnd/src/views/settings/index.css deleted file mode 100644 index ccf7a97a..00000000 --- a/FrontEnd/src/views/settings/index.css +++ /dev/null @@ -1,31 +0,0 @@ -.change-avatar-cropper-row { - max-height: 400px; -} - -.change-avatar-img { - min-width: 50%; - max-width: 100%; - max-height: 400px; -} - -.settings-item { - padding: 0.5em 1em; - transition: background 0.3s; - border-bottom: 1px solid #e9ecef; - align-items: center; -} -.settings-item.first { - border-top: 1px solid #e9ecef; -} -.settings-item.clickable { - cursor: pointer; -} -.settings-item:hover { - background: #dee2e6; -} - -.register-code { - border: 1px solid black; - border-radius: 3px; - padding: 0.2em; -} \ No newline at end of file diff --git a/FrontEnd/src/views/settings/index.tsx b/FrontEnd/src/views/settings/index.tsx deleted file mode 100644 index 6647826f..00000000 --- a/FrontEnd/src/views/settings/index.tsx +++ /dev/null @@ -1,338 +0,0 @@ -import { useState } from "react"; -import * as React from "react"; -import { useNavigate } from "react-router-dom"; -import { useTranslation } from "react-i18next"; -import classNames from "classnames"; - -import { convertI18nText, I18nText, UiLogicError } from "@/common"; -import { useUser, userService } from "@/services/user"; -import { getHttpUserClient } from "@/http/user"; -import { TimelineVisibility } from "@/http/timeline"; - -import ConfirmDialog from "../common/dialog/ConfirmDialog"; -import Card from "../common/Card"; -import Spinner from "../common/Spinner"; -import ChangePasswordDialog from "./ChangePasswordDialog"; -import ChangeAvatarDialog from "./ChangeAvatarDialog"; -import ChangeNicknameDialog from "./ChangeNicknameDialog"; - -import "./index.css"; -import { pushAlert } from "@/services/alert"; - -interface SettingSectionProps { - title: I18nText; - children: React.ReactNode; -} - -const SettingSection: React.FC = ({ title, children }) => { - const { t } = useTranslation(); - - return ( - -

    - {convertI18nText(title, t)} -

    - {children} -     - ); -}; - -interface SettingItemContainerWithoutChildrenProps { - title: I18nText; - subtext?: I18nText; - first?: boolean; - danger?: boolean; - style?: React.CSSProperties; - className?: string; - onClick?: () => void; -} - -interface SettingItemContainerProps - extends SettingItemContainerWithoutChildrenProps { - children?: React.ReactNode; -} - -function SettingItemContainer({ - title, - subtext, - first, - danger, - children, - style, - className, - onClick, -}: SettingItemContainerProps): JSX.Element { - const { t } = useTranslation(); - - return ( -
    -
    -
    - {convertI18nText(title, t)} -
    - - {convertI18nText(subtext, t)} - -
    -
    {children}
    -
    - ); -} - -type ButtonSettingItemProps = SettingItemContainerWithoutChildrenProps; - -const ButtonSettingItem: React.FC = ({ ...props }) => { - return ; -}; - -interface SelectSettingItemProps - extends SettingItemContainerWithoutChildrenProps { - options: { - value: string; - label: I18nText; - }[]; - value?: string; - onSelect: (value: string) => void; -} - -const SelectSettingsItem: React.FC = ({ - options, - value, - onSelect, - ...props -}) => { - const { t } = useTranslation(); - - return ( - - {value == null ? ( - - ) : ( - - )} - - ); -}; - -const SettingsPage: React.FC = () => { - const { i18n } = useTranslation(); - const user = useUser(); - const navigate = useNavigate(); - - const [dialog, setDialog] = useState< - | null - | "changepassword" - | "changeavatar" - | "changenickname" - | "logout" - | "renewregistercode" - >(null); - - const [registerCode, setRegisterCode] = useState( - undefined, - ); - - const [bookmarkVisibility, setBookmarkVisibility] = - useState(); - - React.useEffect(() => { - if (user != null) { - void getHttpUserClient() - .getBookmarkVisibility(user.username) - .then(({ visibility }) => { - setBookmarkVisibility(visibility); - }); - } else { - setBookmarkVisibility(undefined); - } - }, [user]); - - React.useEffect(() => { - setRegisterCode(undefined); - }, [user]); - - React.useEffect(() => { - if (user != null && registerCode === undefined) { - void getHttpUserClient() - .getRegisterCode(user.username) - .then((code) => { - setRegisterCode(code.registerCode ?? null); - }); - } - }, [user, registerCode]); - - const language = i18n.language.slice(0, 2); - - return ( - <> -
    - {user ? ( - - setDialog("renewregistercode")} - > - {registerCode === undefined ? ( - - ) : registerCode === null ? ( - Noop - ) : ( - { - void navigator.clipboard - .writeText(registerCode) - .then(() => { - pushAlert({ - type: "success", - message: "settings.myRegisterCodeCopied", - }); - }); - event.stopPropagation(); - }} - > - {registerCode} - - )} - - setDialog("changeavatar")} - first - /> - setDialog("changenickname")} - /> - { - void getHttpUserClient() - .putBookmarkVisibility(user.username, { - visibility: value as TimelineVisibility, - }) - .then(() => { - setBookmarkVisibility(value as TimelineVisibility); - }); - }} - /> - setDialog("changepassword")} - danger - /> - { - setDialog("logout"); - }} - danger - /> - - ) : null} - - { - void i18n.changeLanguage(value); - }} - first - /> - -
    - setDialog(null)} - /> - setDialog(null)} - open={dialog === "logout"} - onConfirm={() => { - void userService.logout().then(() => { - navigate("/"); - }); - }} - /> - setDialog(null)} - open={dialog === "renewregistercode"} - onConfirm={() => { - if (user == null) throw new UiLogicError(); - void getHttpUserClient() - .renewRegisterCode(user.username) - .then(() => { - setRegisterCode(undefined); - }); - }} - /> - setDialog(null)} - /> - setDialog(null)} - /> - - ); -}; - -export default SettingsPage; -- cgit v1.2.3 From 2d4a75a21a8a97db8017b56e321c56c7d70bc674 Mon Sep 17 00:00:00 2001 From: crupest Date: Sat, 29 Jul 2023 01:22:38 +0800 Subject: ... --- FrontEnd/src/index.css | 16 ----- .../src/pages/setting/ChangeNicknameDialog.tsx | 29 ++++---- .../src/pages/setting/ChangePasswordDialog.tsx | 79 +++++++++++++--------- FrontEnd/src/views/common/button/Button.css | 1 + FrontEnd/src/views/common/dialog/Dialog.css | 11 ++- FrontEnd/src/views/common/dialog/Dialog.tsx | 27 +++----- .../src/views/common/dialog/OperationDialog.css | 29 ++------ .../src/views/common/dialog/OperationDialog.tsx | 32 ++++----- FrontEnd/src/views/common/input/InputGroup.css | 43 ++++++++++-- FrontEnd/src/views/common/input/InputGroup.tsx | 44 ++++++------ FrontEnd/src/views/common/theme.css | 2 + 11 files changed, 162 insertions(+), 151 deletions(-) (limited to 'FrontEnd/src/index.css') diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css index 49791c23..ee92520b 100644 --- a/FrontEnd/src/index.css +++ b/FrontEnd/src/index.css @@ -30,22 +30,6 @@ textarea:focus { border-color: var(--cru-primary-color); } -input:not([type="checkbox"]):not([type="radio"]) { - resize: none; - outline: none; - border: 1px solid; - transition: all 0.5s; - border-color: var(--cru-background-2-color); -} - -input:hover:not([type="checkbox"]):not([type="radio"]) { - border-color: var(--cru-primary-r2-color); -} - -input:focus:not([type="checkbox"]):not([type="radio"]) { - border-color: var(--cru-primary-color); -} - .white-space-no-wrap { white-space: nowrap; } diff --git a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx index 58bbac5f..5606ce94 100644 --- a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx +++ b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx @@ -1,6 +1,5 @@ import { getHttpUserClient } from "@/http/user"; -import { useUser } from "@/services/user"; -import * as React from "react"; +import { useUserLoggedIn } from "@/services/user"; import OperationDialog from "@/views/common/dialog/OperationDialog"; @@ -9,26 +8,28 @@ export interface ChangeNicknameDialogProps { close: () => void; } -const ChangeNicknameDialog: React.FC = (props) => { - const user = useUser(); +export default function ChangeNicknameDialog(props: ChangeNicknameDialogProps) { + const { open, close } = props; - if (user == null) return null; + const user = useUserLoggedIn(); return ( { + onProcess={({ newNickname }) => { return getHttpUserClient().patch(user.username, { - nickname: newNickname, + nickname: newNickname as string, }); }} - close={props.close} + close={close} /> ); -}; - -export default ChangeNicknameDialog; +} diff --git a/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx b/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx index 9ca95168..407f3051 100644 --- a/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx +++ b/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx @@ -3,7 +3,9 @@ import { useNavigate } from "react-router-dom"; import { userService } from "@/services/user"; -import OperationDialog from "@/views/common/dialog/OperationDialog"; +import OperationDialog, { + InputErrorDict, +} from "@/views/common/dialog/OperationDialog"; interface ChangePasswordDialogProps { open: boolean; @@ -20,45 +22,56 @@ export function ChangePasswordDialog(props: ChangePasswordDialogProps) { return ( { + const result: InputErrorDict = {}; + if (oldPassword === "") { + result["oldPassword"] = + "settings.dialogChangePassword.errorEmptyOldPassword"; + } + if (newPassword === "") { + result["newPassword"] = + "settings.dialogChangePassword.errorEmptyNewPassword"; + } + if (retypedNewPassword !== newPassword) { + result["retypedNewPassword"] = + "settings.dialogChangePassword.errorRetypeNotMatch"; + } + return result; }, - { - type: "text", - label: "settings.dialogChangePassword.inputNewPassword", - password: true, - }, - { - type: "text", - label: "settings.dialogChangePassword.inputRetypeNewPassword", - password: true, - }, - ]} - inputValidator={([oldPassword, newPassword, retypedNewPassword]) => { - const result: Record = {}; - if (oldPassword === "") { - result[0] = "settings.dialogChangePassword.errorEmptyOldPassword"; - } - if (newPassword === "") { - result[1] = "settings.dialogChangePassword.errorEmptyNewPassword"; - } - if (retypedNewPassword !== newPassword) { - result[2] = "settings.dialogChangePassword.errorRetypeNotMatch"; - } - return result; }} - onProcess={async ([oldPassword, newPassword]) => { - await userService.changePassword(oldPassword, newPassword); + onProcess={async ({ oldPassword, newPassword }) => { + await userService.changePassword( + oldPassword as string, + newPassword as string, + ); setRedirect(true); }} - close={() => { - props.close(); + onSuccessAndClose={() => { if (redirect) { navigate("/login"); } diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css index 12c6903e..fe619f9d 100644 --- a/FrontEnd/src/views/common/button/Button.css +++ b/FrontEnd/src/views/common/button/Button.css @@ -5,6 +5,7 @@ border-radius: 0.2em; border: 1px solid; cursor: pointer; + background-color: var(--cru-surface-color); } .cru-button:not(.outline) { diff --git a/FrontEnd/src/views/common/dialog/Dialog.css b/FrontEnd/src/views/common/dialog/Dialog.css index 99e1a516..8f12614b 100644 --- a/FrontEnd/src/views/common/dialog/Dialog.css +++ b/FrontEnd/src/views/common/dialog/Dialog.css @@ -6,7 +6,6 @@ right: 0; bottom: 0; display: flex; - padding: 2em; overflow: auto; } @@ -14,8 +13,8 @@ position: absolute; z-index: -1; left: 0; - top: 0; right: 0; + top: 0; bottom: 0; background-color: var(--cru-surface-dim-color); opacity: 0.8; @@ -25,7 +24,7 @@ max-width: 100%; min-width: 30vw; - margin: auto; + margin: 2em auto; border: var(--cru-key-container-color) 1px solid; border-radius: 5px; @@ -33,6 +32,12 @@ background-color: var(--cru-surface-color); } +@media (min-width: 576px) { + .cru-dialog-container { + max-width: 800px; + } +} + .cru-dialog-bottom-area { display: flex; justify-content: flex-end; diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/views/common/dialog/Dialog.tsx index 31dd113b..9ce344dc 100644 --- a/FrontEnd/src/views/common/dialog/Dialog.tsx +++ b/FrontEnd/src/views/common/dialog/Dialog.tsx @@ -38,23 +38,18 @@ export default function Dialog({ timeout={300} classNames="cru-dialog" > -
    { - onClose(); - } - } - > -
    +
    e.stopPropagation()} - > - {children} -
    + className="cru-dialog-background" + onClick={ + disableCloseOnClickOnOverlay + ? undefined + : () => { + onClose(); + } + } + /> +
    {children}
    , portalElement, diff --git a/FrontEnd/src/views/common/dialog/OperationDialog.css b/FrontEnd/src/views/common/dialog/OperationDialog.css index 19c5d806..43cdb692 100644 --- a/FrontEnd/src/views/common/dialog/OperationDialog.css +++ b/FrontEnd/src/views/common/dialog/OperationDialog.css @@ -9,32 +9,15 @@ color: var(--cru-surface-on-color); } -.cru-operation-dialog-main-area { - margin-top: 0.5em; -} - -.cru-operation-dialog-group { - display: block; - margin: 0.4em 0; -} - -.cru-operation-dialog-label { - display: block; - color: var(--cru-primary-color); +.cru-dialog-middle-area { + margin: 0.5em 0; } -.cru-operation-dialog-inline-label { - margin-inline-start: 0.5em; +.cru-dialog-bottom-area { + margin-top: 0.5em; } -.cru-operation-dialog-error-text { +.cru-operation-dialog-input-group { display: block; - font-size: 0.8em; - color: var(--cru-danger-color); + margin: 0.5em 0; } - -.cru-operation-dialog-helper-text { - display: block; - font-size: 0.8em; - color: var(--cru-primary-color); -} \ No newline at end of file diff --git a/FrontEnd/src/views/common/dialog/OperationDialog.tsx b/FrontEnd/src/views/common/dialog/OperationDialog.tsx index 97d135e9..8aab45d9 100644 --- a/FrontEnd/src/views/common/dialog/OperationDialog.tsx +++ b/FrontEnd/src/views/common/dialog/OperationDialog.tsx @@ -7,15 +7,17 @@ import Button from "../button/Button"; import { useInputs, InputGroup, - InitializeInfo as InputInitializer, + Initializer as InputInitializer, InputValueDict, - InputScheme, + InputErrorDict, } from "../input/InputGroup"; import LoadingButton from "../button/LoadingButton"; import Dialog from "./Dialog"; import "./OperationDialog.css"; +export type { InputInitializer, InputValueDict, InputErrorDict }; + interface OperationDialogPromptProps { message?: Text; customMessage?: ReactNode; @@ -40,13 +42,13 @@ export interface OperationDialogProps { close: () => void; color?: ThemeColor; + inputColor?: ThemeColor; title: Text; inputPrompt?: Text; successPrompt?: (data: TData) => ReactNode; failurePrompt?: (error: unknown) => ReactNode; - inputInit?: InputInitializer; - inputScheme?: InputScheme; + inputs: InputInitializer; onProcess: (inputs: InputValueDict) => Promise; onSuccessAndClose?: (data: TData) => void; @@ -57,25 +59,16 @@ function OperationDialog(props: OperationDialogProps) { open, close, color, + inputColor, title, inputPrompt, successPrompt, failurePrompt, - inputInit, - inputScheme, + inputs, onProcess, onSuccessAndClose, } = props; - if (process.env.NODE_ENV === "development") { - if (inputScheme == null && inputInit == null) { - throw Error("Scheme or Init? Choose one and create one."); - } - if (inputScheme != null && inputInit != null) { - throw Error("Scheme or Init? Choose one and drop one"); - } - } - const c = useC(); type Step = @@ -93,14 +86,13 @@ function OperationDialog(props: OperationDialogProps) { const [step, setStep] = useState({ type: "input" }); const { inputGroupProps, hasError, setAllDisabled, confirm } = useInputs({ - /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ - init: inputInit ?? { scheme: inputScheme! }, + init: inputs, }); function onClose() { if (step.type !== "process") { close(); - if (step.type === "success" && props.onSuccessAndClose) { + if (step.type === "success" && onSuccessAndClose) { onSuccessAndClose?.(step.data); } } else { @@ -136,11 +128,11 @@ function OperationDialog(props: OperationDialogProps) { body = (
    -
    +
    diff --git a/FrontEnd/src/views/common/input/InputGroup.css b/FrontEnd/src/views/common/input/InputGroup.css index f9d6ac8b..1763ea53 100644 --- a/FrontEnd/src/views/common/input/InputGroup.css +++ b/FrontEnd/src/views/common/input/InputGroup.css @@ -1,25 +1,54 @@ -.cru-input-panel-group { +.cru-input-group { display: block; +} + +.cru-input-container { margin: 0.4em 0; } -.cru-input-panel-label { +.cru-input-label { display: block; - color: var(--cru-primary-color); + color: var(--cru-key-color); + font-size: 0.9em; + margin-bottom: 0.3em; } -.cru-input-panel-inline-label { +.cru-input-label-inline { margin-inline-start: 0.5em; } -.cru-input-panel-error-text { +.cru-input-type-text input { + appearance: none; + display: block; + border: 1px solid var(--cru-surface-outline-color); + color: var(--cru-surface-on-color); + background-color: var(--cru-surface-color); + margin: 0; + padding: 0; + font-size: 1.2em; +} + +.cru-input-type-text input:hover { + border-color: var(--cru-key-color); +} + +.cru-input-type-text input:focus { + border-color: var(--cru-key-color); +} + +.cru-input-type-text input:disabled { + border-color: var(--cru-surface-on-color); +} + +.cru-input-error { display: block; font-size: 0.8em; color: var(--cru-danger-color); + margin-top: 0.4em; } -.cru-input-panel-helper-text { +.cru-input-helper { display: block; font-size: 0.8em; color: var(--cru-primary-color); -} +} \ No newline at end of file diff --git a/FrontEnd/src/views/common/input/InputGroup.tsx b/FrontEnd/src/views/common/input/InputGroup.tsx index 232edfc9..eed8266b 100644 --- a/FrontEnd/src/views/common/input/InputGroup.tsx +++ b/FrontEnd/src/views/common/input/InputGroup.tsx @@ -98,14 +98,16 @@ export type State = { data: InputData; }; -export type DataInitializeInfo = Partial; +export type DataInitialization = Partial; -export type InitializeInfo = { +export type Initialization = { scheme: InputScheme; - dataInit?: DataInitializeInfo; + dataInit?: DataInitialization; }; -export type Initialize +export type GeneralInitialization = Initialization | InputScheme | InputInfo[]; + +export type Initializer = GeneralInitialization | (() => GeneralInitialization); export interface InputGroupProps { color?: ThemeColor; @@ -136,9 +138,7 @@ export type ConfirmResult = errors: InputErrorDict; }; -export function useInputs(options: { - init: InitializeInfo | (() => InitializeInfo); -}): { +export function useInputs(options: { init: Initializer }): { inputGroupProps: InputGroupProps; hasError: boolean; confirm: () => ConfirmResult; @@ -158,8 +158,14 @@ export function useInputs(options: { throw new Error("Unknown input type"); } - function initialize(info: InitializeInfo): State { - const { scheme, dataInit } = info; + function initialize(generalInitialization: GeneralInitialization): State { + const initialization: Initialization = Array.isArray(generalInitialization) + ? { scheme: { inputs: generalInitialization } } + : "scheme" in generalInitialization + ? generalInitialization + : { scheme: generalInitialization }; + + const { scheme, dataInit } = initialization; const { inputs, validator } = scheme; const keys = inputs.map((input) => input.key); @@ -185,8 +191,8 @@ export function useInputs(options: { } const values: InputValueDict = {}; - const disabled: InputDisabledDict = clean(info.dataInit?.disabled); - const dirties: InputDirtyDict = clean(info.dataInit?.dirties); + const disabled: InputDisabledDict = clean(dataInit?.disabled); + const dirties: InputDirtyDict = clean(dataInit?.dirties); for (let i = 0; i < inputs.length; i++) { const input = inputs[i]; @@ -195,7 +201,7 @@ export function useInputs(options: { values[key] = initializeValue(input, dataInit?.values?.[key]); } - let errors = info.dataInit?.errors; + let errors = dataInit?.errors; if (errors != null) { if (process.env.NODE_ENV === "development") { @@ -331,13 +337,13 @@ export function InputGroup({ )} > {inputs.map((item, index) => { - const { type, value, label, error, helper, disabled } = item; + const { key, type, value, label, error, helper, disabled } = item; const getContainerClassName = ( ...additionalClassNames: classNames.ArgumentArray ) => classNames( - `cru-input-container cru-input-${type}`, + `cru-input-container cru-input-type-${type}`, error && "error", ...additionalClassNames, ); @@ -350,7 +356,7 @@ export function InputGroup({ const { password } = item; return (
    {label && } @@ -369,7 +375,7 @@ export function InputGroup({ ); } else if (type === "bool") { return ( -
    +
    +