diff --git a/src/apps/dashboard/tests/integrated/test_views.py b/src/apps/dashboard/tests/integrated/test_views.py index 2010a68..c0e2bc1 100644 --- a/src/apps/dashboard/tests/integrated/test_views.py +++ b/src/apps/dashboard/tests/integrated/test_views.py @@ -303,7 +303,8 @@ class SetPaletteTest(TestCase): response = self.client.get(self.url) parsed = lxml.html.fromstring(response.content) forms = parsed.cssselect('form[action="/dashboard/set_palette"]') - self.assertEqual(len(forms), 1) + unlocked = [p for p in response.context["palettes"] if not p["locked"]] + self.assertEqual(len(forms), len(unlocked)) def test_active_palette_swatch_has_active_class(self): response = self.client.get(self.url) diff --git a/src/apps/dashboard/views.py b/src/apps/dashboard/views.py index a909500..7da26f6 100644 --- a/src/apps/dashboard/views.py +++ b/src/apps/dashboard/views.py @@ -17,9 +17,17 @@ from apps.lyric.models import PaymentMethod, Token, User, Wallet APPLET_ORDER = ["wallet", "new-note", "my-notes", "username", "palette"] -UNLOCKED_PALETTES = frozenset(["palette-default"]) +UNLOCKED_PALETTES = frozenset([ + "palette-default", + "palette-monochrome-light", + "palette-monochrome-dark", + "palette-sepia", +]) PALETTES = [ {"name": "palette-default", "label": "Earthman", "locked": False}, + {"name": "palette-monochrome-light", "label": "Monochrome (Light)", "locked": False}, + {"name": "palette-monochrome-dark", "label": "Monochrome (Dark)", "locked": False}, + {"name": "palette-sepia", "label": "Sepia", "locked": False}, {"name": "palette-nirvana", "label": "Nirvana", "locked": True}, {"name": "palette-sheol", "label": "Sheol", "locked": True}, {"name": "palette-inferno", "label": "Inferno", "locked": True}, diff --git a/src/functional_tests/test_layout_and_styling.py b/src/functional_tests/test_layout_and_styling.py index 5b0d394..909d26c 100644 --- a/src/functional_tests/test_layout_and_styling.py +++ b/src/functional_tests/test_layout_and_styling.py @@ -9,19 +9,25 @@ class LayoutAndStylingTest(FunctionalTest): note_page = NotePage(self) self.browser.set_window_size(1024, 768) - # print("Viewport width:", self.browser.execute_script("return window.innerWidth")) + + def section_center(el): + return self.browser.execute_script(""" + var el = arguments[0]; + var ancestor = el.parentElement; + while (ancestor && ancestor.tagName !== 'SECTION' + && !ancestor.classList.contains('container')) { + ancestor = ancestor.parentElement; + } + var s = (ancestor || document.body).getBoundingClientRect(); + var r = arguments[0].getBoundingClientRect(); + return [r.x + r.width / 2, s.x + s.width / 2]; + """, el) inputbox = note_page.get_item_input_box() - self.assertAlmostEqual( - inputbox.location['x'] + inputbox.size['width'] / 2, - 512, - delta=10, - ) + input_c, section_c = section_center(inputbox) + self.assertAlmostEqual(input_c, section_c, delta=10) note_page.add_note_item("testing") inputbox = note_page.get_item_input_box() - self.assertAlmostEqual( - inputbox.location['x'] + inputbox.size['width'] / 2, - 512, - delta=10, - ) + input_c, section_c = section_center(inputbox) + self.assertAlmostEqual(input_c, section_c, delta=10) diff --git a/src/static_src/scss/_palette-picker.scss b/src/static_src/scss/_palette-picker.scss index 84e5d75..a7310ef 100644 --- a/src/static_src/scss/_palette-picker.scss +++ b/src/static_src/scss/_palette-picker.scss @@ -27,11 +27,13 @@ border-radius: 0.5rem; background: linear-gradient( to bottom, - rgba(var(--terUser), 1) 0%, - rgba(var(--terUser), 1) 33%, - rgba(var(--priUser), 1) 33%, - rgba(var(--priUser), 1) 66%, - rgba(var(--quiUser), 1) 66%, + rgba(var(--secUser), 1) 0%, + rgba(var(--secUser), 1) 30%, + rgba(var(--priUser), 1) 30%, + rgba(var(--priUser), 1) 70%, + rgba(var(--terUser), 1) 70%, + rgba(var(--terUser), 1) 85%, + rgba(var(--quiUser), 1) 85%, rgba(var(--quiUser), 1) 100% ); border: 0.15rem solid rgba(var(--secUser), 0.5); diff --git a/src/static_src/scss/rootvars.scss b/src/static_src/scss/rootvars.scss index e39b2f5..cf7eda1 100644 --- a/src/static_src/scss/rootvars.scss +++ b/src/static_src/scss/rootvars.scss @@ -236,8 +236,8 @@ --terSwp: 102, 92, 67; --quaSwp: 43, 46, 37; // blood (Tyche's Phlegethon) - --priBld: 190, 69, 40; - --secBld: 167, 53, 42; + --priBld: 200, 79, 50; + --secBld: 177, 63, 52; --terBld: 120, 37, 33; --quaBld: 77, 23, 13; // ice (Daimon's Cocytus) @@ -318,12 +318,12 @@ .palette-sheol { --priUser: var(--priPu); --secUser: var(--quiPu); - --terUser: var(--terFs); + --terUser: var(--priFs); --quaUser: var(--priCfw); --quiUser: var(--terCfw); --sixUser: var(--terId); --sepUser: var(--secId); - --octUser: var(--priFs); + --octUser: var(--terFs); --ninUser: var(--sixPu); --decUser: var(--terPu); } @@ -331,12 +331,12 @@ .palette-nirvana { --priUser: var(--priU); --secUser: var(--quiU); - --terUser: var(--terMe); + --terUser: var(--priMe); --quaUser: var(--quiCu); --quiUser: var(--terCu); --sixUser: var(--terKhk); --sepUser: var(--priKhk); - --octUser: var(--priMe); + --octUser: var(--terMe); --ninUser: var(--sixCu); --decUser: var(--terU); } @@ -344,12 +344,12 @@ .palette-inferno { --priUser: var(--quaSwp); --secUser: var(--priSwp); - --terUser: var(--terBld); + --terUser: var(--secBld); --quaUser: var(--priIce); --quiUser: var(--quaIce); --sixUser: var(--priTrs); --sepUser: var(--terTrs); - --octUser: var(--priBld); + --octUser: var(--terBld); --ninUser: var(--priMst); --decUser: var(--terMst); } @@ -370,16 +370,56 @@ .palette-celestia { --priUser: var(--octClh); --secUser: var(--sixClh); - --terUser: var(--quaClh); + --terUser: var(--terClh); --quaUser: var(--decClh); --quiUser: var(--ninClh); --sixUser: var(--sepClh); - --sepUser: var(--secClh); - --octUser: var(--terClh); - --ninUser: var(--priClh); + --sepUser: var(--priClh); + --octUser: var(--quaClh); + --ninUser: var(--secClh); --decUser: var(--quiClh); } +/* Monochrome Dark Palette */ +.palette-monochrome-dark { + --priUser: var(--priAg); /* 30,30,30 — near-black bg */ + --secUser: var(--quiAg); /* 175,175,175 — light gray text/border */ + --terUser: var(--sixAg); /* 240,240,240 — bright white accent */ + --quaUser: var(--sixAg); /* 240,240,240 — active/interactive */ + --quiUser: var(--quaAg); /* 133,133,133 — secondary action */ + --sixUser: var(--terAg); /* 100,100,100 — subtle mid */ + --sepUser: var(--secAg); /* 60,60,60 — deep subtle */ + --octUser: var(--quiPt); /* 189,190,189 — links (cooler silver) */ + --ninUser: var(--sixAg); /* 240,240,240 — glow highlight */ + --decUser: var(--terAg); /* 100,100,100 — mid tone */ +} +/* Monochrome Light Palette */ +.palette-monochrome-light { + --priUser: var(--sixAg); /* 240,240,240 — light gray bg */ + --secUser: var(--terAg); /* 100,100,100 — mid-dark text/border */ + --terUser: var(--secAg); /* 60,60,60 — dark accent */ + --quaUser: var(--priAg); /* 30,30,30 — near-black active */ + --quiUser: var(--quaAg); /* 133,133,133 — mid-gray action */ + --sixUser: var(--quiAg); /* 175,175,175 — subtle */ + --sepUser: var(--sixAg); /* 240,240,240 — secondary subtle */ + --octUser: var(--terNi); /* 93,95,94 — links */ + --ninUser: var(--priCtn); /* 255,251,246 — warm bright highlight */ + --decUser: var(--secPt); /* 189,190,189 — light mid */ +} +/* Sepia Palette */ +.palette-sepia { + --priUser: var(--priCu); /* 46,24,5 — very dark warm brown bg */ + --secUser: var(--quiCu); /* 207,173,143 — warm beige text/border */ + --terUser: var(--quiAu); /* 214,186,84 — amber gold accent */ + --quaUser: var(--quaAg); /* 195,176,145 — warm tan interactive */ + --quiUser: var(--quaSwp); /* 95,76,45 — deep khaki */ + --sixUser: var(--quaCu); /* 171,112,60 — copper mid */ + --sepUser: var(--terCu); /* 133,81,36 — deep copper */ + --octUser: var(--quaAu); /* 181,154,54 — golden links */ + --ninUser: var(--sixCu); /* 242,216,191 — warm cream highlight */ + --decUser: var(--secKhk); /* 145,126,95 — warm mid-tone */ +} + /* Palette Classes */ .priUser { color: rgba(var(--priUser), 1);