diff --git a/README.md b/README.md index 246c371..ae7bad3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ This branch is for experimenting with [a17t](https://a17t.miles.land/) to possibly replace bootstrap in the future. Currently just working on the page structures, so none of this is actually usable in jfa-go yet. -#### currently done: +#### todo * [x] invites tab mockup (partially complete) * [x] accounts tab mockup * [x] settings tab mockup @@ -11,11 +11,20 @@ This branch is for experimenting with [a17t](https://a17t.miles.land/) to possib * [ ] Integration with existing code #### screenshots +##### dark

- invites - accounts - settings - login modal - modify user settings modal + invites + accounts + settings + login modal + modify user settings modal

+##### light +

+ invites + accounts + settings + login modal + modify user settings modal +

diff --git a/base.css b/base.css index ba637c8..39525e9 100644 --- a/base.css +++ b/base.css @@ -1,4 +1,15 @@ +@import "node_modules/a17t/dist/a17t.css"; +@import "node_modules/icons.css/dist/icons.css"; @import "modal.css"; +@import "dark.css"; + +.light-theme { + --settings-section-button-filter: 90%; +} + +.body { + background-color: #101010; +} .pageContainer { margin: 5% 20% 5% 20%; @@ -8,15 +19,6 @@ margin: 2%; } } -/*input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -input[type=number] { - -moz-appearance: textfield; -}*/ .contactBox { color: grey; } @@ -77,7 +79,7 @@ input[type=number] { padding-bottom: 0.2rem; } .inv { - overflow: hidden; + overflow: visible; } .inv-header { display: flex; @@ -87,23 +89,11 @@ input[type=number] { display: flex; justify-content: space-between; } -/*.inv-details { - display: flex; - justify-content: space-between; -}*/ -/*.invites { - transition: max-height 1s cubic-bezier(0.550, 0.055, 0.675, 0.190); -}*/ -.inv-details { -} .inv-row { display: flex; justify-content: space-between; align-items: top; } -/*.inv-profilearea { - align-items: top; -}*/ .ib { display: inline-block; } @@ -224,11 +214,27 @@ input[type=number] { box-sizing: border-box; width: 100%; height: 2.5rem; - --button-filter-brightness: 90%; + background-color: rgba(0, 0, 0, 0); +} +.settings-section-button:hover { + box-sizing: border-box; + width: 100%; + height: 2.5rem; + background-color: var(--color-neutral-normal-fill); + filter: brightness(var(--settings-section-button-filter)) !important; + +} +.settings-section-button:focus { + box-sizing: border-box; + width: 100%; + height: 2.5rem; + background-color: var(--color-neutral-normal-fill); + filter: brightness(var(--settings-section-button-filter)) !important; } .settings-section-button.selected { - --button-filter-brightness: 85%; - filter: brightness(85%); + background-color: var(--color-neutral-normal-fill); + --button-filter-brightness: var(--settings-section-button-filter); + filter: brightness(var(--settings-section-button-filter)) !important; } .text-critical { color: var(--color-critical-normal-content); @@ -265,3 +271,11 @@ input[type=number] { .textarea { resize: vertical; } + +select { + color: inherit; +} + +input { + color: inherit; +} diff --git a/dark.css b/dark.css new file mode 100644 index 0000000..b21de54 --- /dev/null +++ b/dark.css @@ -0,0 +1,87 @@ +.dark-theme { + + --settings-section-button-filter: 110%; + + --color-neutral-900: rgba(255, 255, 255, 0.87); + --color-neutral-800: rgba(255, 255, 255, 0.8); + --color-neutral-700: rgba(255, 255, 255, 0.73); + --color-neutral-600: rgba(255, 255, 255, 0.66); + --color-neutral-500: rgb(153, 153, 153); + --color-neutral-400: #383838; + --color-neutral-300: #303030; + --color-neutral-200: #292929; + --color-neutral-100: #242424; + --color-neutral-50: #202020; + --color-neutral-000: #101010; + + --color-critical-900: #fef2f2; + --color-critical-800: #fee2e2; + --color-critical-700: #fecaca; + --color-critical-600: #fca5a5; + --color-critical-500: #f87171; + --color-critical-400: #ef4444; + --color-critical-300: #dc2626; + --color-critical-200: #b91c1c; + --color-critical-100: #991b1b; + --color-critical-50: #7f1d1d; + --color-critical-000: #441313; + + --color-warning-900: #fffbeb; + --color-warning-800: #fef3c7; + --color-warning-700: #fde68a; + --color-warning-600: #fcd34d; + --color-warning-500: #fbbf24; + --color-warning-400: #f59e0b; + --color-warning-300: #d97706; + --color-warning-200: #b45309; + --color-warning-100: #92400e; + --color-warning-50: #783900; + --color-warning-000: #411e01; + + --color-positive-900: #f0fdf4; + --color-positive-800: #dcfce7; + --color-positive-700: #bbf7d0; + --color-positive-600: #86efac; + --color-positive-500: #4ade80; + --color-positive-400: #22c55e; + --color-positive-300: #16a34a; + --color-positive-200: #15803d; + --color-positive-100: #166534; + --color-positive-50: #14532d; + --color-positive-000: #0f2e1b; + + --color-urge-900: #e0ffff; + --color-urge-800: #c0fbff; + --color-urge-700: #a0f4ff; + --color-urge-600: #80e9ff; + --color-urge-500: #60dbfb; + --color-urge-400: #40cbf3; + --color-urge-300: #20b9e9; + --color-urge-200: #00a4dc; /* tab buttons */ + --color-urge-100: #0054bc; + --color-urge-50: #00169a; + --color-urge-000: #050076; + + --color-info-900: #f5f3ff; + --color-info-800: #ede9fe; + --color-info-700: #ddd6fe; + --color-info-600: #c4b5fd; + --color-info-500: #a78bfa; + --color-info-400: #8b5cf6; + --color-info-300: #7c3aed; + --color-info-200: #6d28d9; + --color-info-100: #5b21b6; + --color-info-50: #4c1d95; + --color-info-000: #240e44; + + + --color-neutral-normal-content: #ffffff; +} + +.light-only { + display: none; +} + +.dark-only { + display: initial; +} diff --git a/images/accounts.png b/images/accounts.png deleted file mode 100644 index 4fea3b4..0000000 Binary files a/images/accounts.png and /dev/null differ diff --git a/images/dark/accounts.png b/images/dark/accounts.png new file mode 100644 index 0000000..328b34b Binary files /dev/null and b/images/dark/accounts.png differ diff --git a/images/dark/invites.png b/images/dark/invites.png new file mode 100644 index 0000000..8f0fbb0 Binary files /dev/null and b/images/dark/invites.png differ diff --git a/images/dark/login-modal.png b/images/dark/login-modal.png new file mode 100644 index 0000000..d933fb2 Binary files /dev/null and b/images/dark/login-modal.png differ diff --git a/images/dark/modify-settings.png b/images/dark/modify-settings.png new file mode 100644 index 0000000..00e79b7 Binary files /dev/null and b/images/dark/modify-settings.png differ diff --git a/images/dark/settings.png b/images/dark/settings.png new file mode 100644 index 0000000..769719d Binary files /dev/null and b/images/dark/settings.png differ diff --git a/images/invites.png b/images/invites.png deleted file mode 100644 index ad8f28c..0000000 Binary files a/images/invites.png and /dev/null differ diff --git a/images/light/accounts.png b/images/light/accounts.png new file mode 100644 index 0000000..2fd6371 Binary files /dev/null and b/images/light/accounts.png differ diff --git a/images/light/invites.png b/images/light/invites.png new file mode 100644 index 0000000..b26eef3 Binary files /dev/null and b/images/light/invites.png differ diff --git a/images/light/login-modal.png b/images/light/login-modal.png new file mode 100644 index 0000000..fb2cdf9 Binary files /dev/null and b/images/light/login-modal.png differ diff --git a/images/light/modify-settings.png b/images/light/modify-settings.png new file mode 100644 index 0000000..128b959 Binary files /dev/null and b/images/light/modify-settings.png differ diff --git a/images/light/settings.png b/images/light/settings.png new file mode 100644 index 0000000..fd1ad3c Binary files /dev/null and b/images/light/settings.png differ diff --git a/images/login-modal.png b/images/login-modal.png deleted file mode 100644 index d82dd2c..0000000 Binary files a/images/login-modal.png and /dev/null differ diff --git a/images/modify-settings.png b/images/modify-settings.png deleted file mode 100644 index 0681541..0000000 Binary files a/images/modify-settings.png and /dev/null differ diff --git a/images/settings.png b/images/settings.png deleted file mode 100644 index 5014922..0000000 Binary files a/images/settings.png and /dev/null differ diff --git a/index.html b/index.html index 003a32b..8c176e3 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,6 @@ - + - - jfa-no @@ -12,7 +10,7 @@ Login - + @@ -91,7 +89,7 @@
-
+
- Invites + Invites Accounts Settings
-
+
Logout - Theme + Theme Trigger Login
-
+
Invites
@@ -190,10 +188,10 @@
-
+
Create
-
+
-
+
@@ -232,22 +230,22 @@
- +
- Create + Create
-
+
Accounts
Add User - Modify Settings + Modify Settings Delete User
@@ -279,7 +277,7 @@
-
+
Settings
Save @@ -287,10 +285,10 @@
- About - User Profiles + About + User Profiles
-
+

Settings section description.

diff --git a/ts/main.ts b/ts/main.ts index c2e3d1f..e607448 100644 --- a/ts/main.ts +++ b/ts/main.ts @@ -9,6 +9,16 @@ interface ArrayConstructor { declare var window: Window; +function toggleTheme() { + document.documentElement.classList.toggle('dark-theme'); + document.documentElement.classList.toggle('light-theme'); + localStorage.setItem('theme', document.documentElement.classList.contains('dark-theme') ? "dark" : "light"); +} + +if (localStorage.getItem('theme') == "dark") { document.documentElement.classList.add('dark-theme'); document.documentElement.classList.remove('light-theme'); } + +(document.getElementById('button-theme') as HTMLSpanElement).onclick = toggleTheme; + const whichAnimationEvent = () => { const el = document.createElement("fakeElement"); if (el.style["animation"] !== void 0) { @@ -134,11 +144,11 @@ for (let tab of tabs) { const tabEl = document.getElementById(t) as HTMLDivElement; const tabButtonEl = document.getElementById(`${t}-button`) as HTMLSpanElement; if (t == tab) { - tabButtonEl.classList.add("active", "~positive"); + tabButtonEl.classList.add("active", "~urge"); tabEl.classList.remove("unfocused"); } else { tabButtonEl.classList.remove("active"); - tabButtonEl.classList.remove("~positive"); + tabButtonEl.classList.remove("~urge"); tabEl.classList.add("unfocused"); } }