bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2023 from basecamp/theme-switcher-revised

Browse Source 
Theme switcher revised
This commit is contained in:
Jason Zimdars
2025-12-11 09:46:11 -06:00
committed by GitHub
parent 36419c3600 941ce1f775
commit 1e59bc9f6f
25 changed files with 355 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/images/monitor.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 3H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h5v2H7v2h10v-2h-2v-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H4V5h16v10z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 190 B

app/assets/images/moon.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.64 13.24A9 9 0 1 1 10.76 2.36a9.07 9.07 0 0 0 10.88 10.88z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 141 B

app/assets/images/sun.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 544 B

app/assets/stylesheets/_global.css
+110 -1
View File
@@ -255,8 +255,117 @@
--color-gradient-2: oklch(var(--lch-pink-lighter));
--color-gradient-3: oklch(var(--lch-purple-lighter));
--color-gradient-4: var(--color-canvas);
}
@media (prefers-color-scheme: dark) {
/* Dark mode - explicit theme choice overrides system preference */
html[data-theme="dark"] {
--lch-canvas: 20% 0.0195 232.58;
--lch-ink-inverted: var(--lch-black);
--lch-ink-darkest: 96.02% 0.0034 260;
--lch-ink-darker: 86% 0.0061 260;
--lch-ink-dark: 73.97% 0.009 260;
--lch-ink-medium: 62% 0.0122 260;
--lch-ink-light: 40% 0.0148 260;
--lch-ink-lighter: 30% 0.0178 260;
--lch-ink-lightest: 25% 0.0204 260;
--lch-uncolor-darkest: 96.09% 0.0076 100;
--lch-uncolor-darker: 86% 0.021 90;
--lch-uncolor-dark: 73.93% 0.041 80;
--lch-uncolor-medium: 62% 0.0552 70;
--lch-uncolor-light: 40% 0.0387 60;
--lch-uncolor-lighter: 30% 0.012 50;
--lch-uncolor-lightest: 25% 0.0017 40;
--lch-red-darkest: 95.85% 0.0218 46;
--lch-red-darker: 86% 0.086 44;
--lch-red-dark: 73.95% 0.139 42;
--lch-red-medium: 62% 0.154 40;
--lch-red-light: 40% 0.088 38;
--lch-red-lighter: 30% 0.032 36;
--lch-red-lightest: 25% 0.011 34;
--lch-yellow-darkest: 96% 0.056 100;
--lch-yellow-darker: 86% 0.103 90;
--lch-yellow-dark: 74.06% 0.136 80;
--lch-yellow-medium: 62.1% 0.146 70;
--lch-yellow-light: 40% 0.0736 60;
--lch-yellow-lighter: 30% 0.026 50;
--lch-yellow-lightest: 25% 0.01 40;
--lch-lime-darkest: 96.04% 0.066 115;
--lch-lime-darker: 86% 0.098 114;
--lch-lime-dark: 73.97% 0.121 113;
--lch-lime-medium: 62% 0.128 112;
--lch-lime-light: 40% 0.0637 111;
--lch-lime-lighter: 30% 0.024 110;
--lch-lime-lightest: 25% 0.012 109;
--lch-green-darkest: 96.12% 0.035 143;
--lch-green-darker: 86% 0.082 144;
--lch-green-dark: 73.99% 0.117 145;
--lch-green-medium: 62% 0.1261 146;
--lch-green-light: 40% 0.065 147;
--lch-green-lighter: 30% 0.03 148;
--lch-green-lightest: 25% 0.018 149;
--lch-aqua-darkest: 96.15% 0.0244 202;
--lch-aqua-darker: 86% 0.06 204;
--lch-aqua-dark: 73.92% 0.095 206;
--lch-aqua-medium: 62% 0.106 208;
--lch-aqua-light: 40% 0.0594 210;
--lch-aqua-lighter: 30% 0.028 212;
--lch-aqua-lightest: 25% 0.017 214;
--lch-blue-darkest: 95.93% 0.0217 252;
--lch-blue-darker: 86% 0.068 254;
--lch-blue-dark: 74% 0.1293 256;
--lch-blue-medium: 62% 0.159 258;
--lch-blue-light: 40% 0.094 260;
--lch-blue-lighter: 30% 0.0452 262;
--lch-blue-lightest: 25% 0.0318 264;
--lch-violet-darkest: 95.97% 0.019 280;
--lch-violet-darker: 86% 0.068 282;
--lch-violet-dark: 74.08% 0.142 284;
--lch-violet-medium: 62% 0.184 286;
--lch-violet-light: 40% 0.108 288;
--lch-violet-lighter: 30% 0.048 290;
--lch-violet-lightest: 25% 0.025 292;
--lch-purple-darkest: 95.99% 0.0217 302;
--lch-purple-darker: 86% 0.068 304;
--lch-purple-dark: 73.98% 0.141 306;
--lch-purple-medium: 62% 0.177 308;
--lch-purple-light: 40% 0.099 310;
--lch-purple-lighter: 30% 0.04 312;
--lch-purple-lightest: 25% 0.017 314;
--lch-pink-darkest: 95.84% 0.0308 336;
--lch-pink-darker: 86% 0.074 338;
--lch-pink-dark: 74.04% 0.1294 340;
--lch-pink-medium: 62% 0.166 342;
--lch-pink-light: 40% 0.085 344;
--lch-pink-lighter: 30% 0.03 346;
--lch-pink-lightest: 25% 0.011 348;
--color-terminal-bg: var(--color-canvas);
--color-terminal-text-light: oklch(var(--lch-green-dark));
--color-golden: oklch(var(--lch-blue-medium));
--color-highlight: oklch(var(--lch-blue-lighter));
--shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
0 0.2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
0 0.4em 2.4em -1em oklch(var(--lch-black) / 0.7),
0 0.4em 0.8em -1.2em oklch(var(--lch-black) / 0.8),
0 0.8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
}
/* Fallback to system preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
--lch-canvas: 20% 0.0195 232.58;
--lch-ink-inverted: var(--lch-black);
app/assets/stylesheets/bar.css
+7 -1
View File
@@ -19,10 +19,16 @@
view-transition-name: bar;
z-index: var(--z-bar);
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
border-block: 1px solid var(--color-ink-lighter);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
border-block: 1px solid var(--color-ink-lighter);
}
}
&:has(.bar__placeholder[hidden]) {
padding-inline: 1ch;
}
app/assets/stylesheets/base.css
+7 -1
View File
@@ -55,9 +55,15 @@
::selection {
background: var(--color-selected);
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
background-color: var(--color-selected-dark);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
background-color: var(--color-selected-dark);
}
}
}
:where(ul, ol):where([role="list"]) {
app/assets/stylesheets/buttons.css
+7 -1
View File
@@ -27,10 +27,16 @@
}
}
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
--btn-hover-brightness: 1.25;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
--btn-hover-brightness: 1.25;
}
}
&[disabled],
&:has([disabled]),
[disabled] &[type=submit],
app/assets/stylesheets/card-columns.css
+7 -1
View File
@@ -179,9 +179,15 @@
outline: var(--focus-ring-size) solid var(--color-selected-dark);
outline-offset: var(--focus-ring-offset);
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
outline-color: oklch(var(--lch-blue-medium));
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
outline-color: oklch(var(--lch-blue-medium));
}
}
}
}
app/assets/stylesheets/cards.css
+7 -1
View File
@@ -27,10 +27,16 @@
text-align: start;
z-index: 1;
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
box-shadow: 0 0 0 1px var(--color-ink-lighter);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
box-shadow: 0 0 0 1px var(--color-ink-lighter);
}
}
.popup {
inline-size: 260px;
}
app/assets/stylesheets/circled-text.css
+7 -1
View File
@@ -12,9 +12,15 @@
opacity: 0.5;
mix-blend-mode: multiply;
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
mix-blend-mode: screen;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
mix-blend-mode: screen;
}
}
}
span::before,
app/assets/stylesheets/icons.css
+3
View File
@@ -72,6 +72,8 @@
.icon--menu-dots-horizontal { --svg: url("menu-dots-horizontal.svg "); }
.icon--menu-dots-vertical { --svg: url("menu-dots-vertical.svg "); }
.icon--minus { --svg: url("minus.svg "); }
.icon--monitor { --svg: url("monitor.svg "); }
.icon--moon { --svg: url("moon.svg "); }
.icon--move { --svg: url("move.svg "); }
.icon--notification-bell-access-only { --svg: url("bell.svg "); }
.icon--notification-bell-watching { --svg: url("bell-off.svg "); }
@@ -96,6 +98,7 @@
.icon--settings { --svg: url("settings.svg "); }
.icon--share { --svg: url("share.svg "); }
.icon--sliders { --svg: url("sliders.svg "); }
.icon--sun { --svg: url("sun.svg "); }
.icon--switch { --svg: url("switch.svg "); }
.icon--tag { --svg: url("tag.svg "); }
.icon--tag-outline { --svg: url("tag-outline.svg "); }
app/assets/stylesheets/inputs.css
+10 -2
View File
@@ -104,17 +104,25 @@
.input--select {
--input-border-radius: 2em;
--input-padding: 0.5em 1.8em 0.5em 1.2em;
--caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
--caret-icon-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
background-image: var(--caret-icon);
background-size: 0.5em;
background-position: center right 0.9em;
background-repeat: no-repeat;
text-align: start;
html[data-theme="dark"] & {
--caret-icon: var(--caret-icon-dark);
}
@media (prefers-color-scheme: dark) {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
html:not([data-theme]) & {
--caret-icon: var(--caret-icon-dark);
}
}
option {
app/assets/stylesheets/lexxy.css
+11 -2
View File
@@ -55,10 +55,13 @@
}
.lexxy-code-language-picker {
--caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
--caret-icon-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
-webkit-appearance: none;
appearance: none;
background-color: var(--color-canvas);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
background-image: var(--caret-icon);
background-position: center right 0.9em;
background-repeat: no-repeat;
background-size: 0.5em;
@@ -75,8 +78,14 @@
padding-inline: 1.5ch 1.8em;
text-align: start;
html[data-theme="dark"] & {
--caret-icon: var(--caret-icon-dark);
}
@media (prefers-color-scheme: dark) {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
html:not([data-theme]) & {
--caret-icon: var(--caret-icon-dark);
}
}
option {
app/assets/stylesheets/markdown.css
+8 -1
View File
@@ -24,8 +24,15 @@
}
}
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
filter: invert(1);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
filter: invert(1);
}
}
}
}
app/assets/stylesheets/nav.css
+7 -1
View File
@@ -23,9 +23,15 @@
background: var(--color-ink-lighter);
}
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
--input-background: var(--color-ink-lighter);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
--input-background: var(--color-ink-lighter);
}
}
}
}
app/assets/stylesheets/reactions.css
+8 -1
View File
@@ -95,9 +95,16 @@
&:not(.expanded):hover {
filter: brightness(var(--reaction-hover-brightness));
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
--reaction-hover-brightness: 1.25;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
--reaction-hover-brightness: 1.25;
}
}
}
}
}
app/assets/stylesheets/syntax.css
+17 -1
View File
@@ -14,7 +14,7 @@
--markup-deleted: lch(39.64 68.17 31.45);
/* Redefine named color values for dark mode */
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] {
--keyword: lch(67.63 58.99 30.64);
--entity: lch(75.13 46.73 306.74);
--constant: lch(74.9 39.71 255.53);
@@ -28,6 +28,22 @@
--markup-deleted: lch(73.8% 65 29.18);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) {
--keyword: lch(67.63 58.99 30.64);
--entity: lch(75.13 46.73 306.74);
--constant: lch(74.9 39.71 255.53);
--string: lch(74.9 39.71 255.53);
--variable: lch(76.17 61.1 61.97);
--comment: lch(60.83 6.66 254.46);
--entity-tag: lch(83.65 59.31 141.61);
--markup-heading: lch(47.93 71.67 280.72);
--markup-list: lch(83.84 57.9 85.03);
--markup-inserted: lch(83.65 59.31 141.61);
--markup-deleted: lch(73.8% 65 29.18);
}
}
color: var(--color-ink);
.w {
app/assets/stylesheets/theme-switcher.css
+33
View File
@@ -0,0 +1,33 @@
@layer components {
.theme-switcher {
@media (max-width: 479px) {
--row-gap: 1ch;
flex-direction: column;
}
}
.theme-switcher__btn {
--btn-background: var(--color-ink-lightest);
--btn-border-radius: 0.4em;
--btn-border-size: 0;
--btn-gap: 0.1lh;
--btn-padding: 1em;
--icon-size: 2em;
column-gap: var(--inline-space);
flex: 1;
flex-direction: column;
position: relative;
white-space: nowrap;
&:has(input:checked) {
--btn-background: var(--color-selected);
--btn-color: var(--color-ink);
}
@media (max-width: 479px) {
flex-direction: row;
}
}
}
app/assets/stylesheets/trays.css
+8 -1
View File
@@ -300,9 +300,16 @@
border-radius: 0;
}
@media (prefers-color-scheme: dark) {
html[data-theme="dark"] & {
box-shadow: 0 0 0 1px var(--color-ink-lighter);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]) & {
box-shadow: 0 0 0 1px var(--color-ink-lighter);
}
}
}
.card__background {
app/javascript/controllers/theme_controller.js
+49
View File
@@ -0,0 +1,49 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["lightButton", "darkButton", "autoButton"]
connect() {
this.#applyStoredTheme()
}
setLight() {
this.#theme = "light"
}
setDark() {
this.#theme = "dark"
}
setAuto() {
this.#theme = "auto"
}
get #storedTheme() {
return localStorage.getItem("theme") || "auto"
}
set #theme(theme) {
localStorage.setItem("theme", theme)
if (theme === "auto") {
document.documentElement.removeAttribute("data-theme")
} else {
document.documentElement.setAttribute("data-theme", theme)
}
this.#updateButtons()
}
#applyStoredTheme() {
this.#theme = this.#storedTheme
}
#updateButtons() {
const storedTheme = this.#storedTheme
if (this.hasLightButtonTarget) { this.lightButtonTarget.checked = (storedTheme === "light") }
if (this.hasDarkButtonTarget) { this.darkButtonTarget.checked = (storedTheme === "dark") }
if (this.hasAutoButtonTarget) { this.autoButtonTarget.checked = (storedTheme !== "light" && storedTheme !== "dark") }
}
}
app/views/layouts/application.html.erb
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en">
<%= render "layouts/shared/head" %>
<body data-controller="local-time timezone-cookie turbo-navigation" data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation">
<body data-controller="local-time timezone-cookie turbo-navigation theme" data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation">
<header class="header <%= @header_class %>" id="header">
<a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
<%= render "my/menu" if Current.user %>
app/views/users/_access_tokens.html.erb
+4
View File
@@ -0,0 +1,4 @@
<div class="flex flex-column align-center">
<h2 class="divider txt-large margin-none-block full-width">Developer</h2>
<p class="margin-none">Manage <%= link_to "personal access tokens", my_access_tokens_path, class: "btn btn--plain txt-link" %> used with the Fizzy developer API.</p>
</div>
app/views/users/_theme.html.erb
+23
View File
@@ -0,0 +1,23 @@
<section>
<strong class="divider txt-large">Appearance</strong>
<div class="theme-switcher flex gap max-width justify-center txt-small margin-block-start-half">
<label class="btn theme-switcher__btn">
<%= icon_tag "sun" %>
<span class="overflow-ellipsis">Always light</span>
<input type="radio" name="theme" data-action="click->theme#setLight" data-theme-target="lightButton">
</label>
<label class="btn theme-switcher__btn" >
<%= icon_tag "moon" %>
<span class="overflow-ellipsis">Always dark</span>
<input type="radio" name="theme" data-action="click->theme#setDark" data-theme-target="darkButton">
</label>
<label class="btn theme-switcher__btn">
<%= icon_tag "monitor" %>
<span class="overflow-ellipsis">Same as OS</span>
<input type="radio" name="theme" data-action="click->theme#setAuto" data-theme-target="autoButton">
</label>
</div>
</section>
app/views/users/_transfer.html.erb
+8 -7
View File
@@ -1,13 +1,14 @@
<div class="flex flex-column align-center gap">
<div class="flex flex-column gap align-center margin-block-double">
<% url = session_transfer_url(user.identity.transfer_id, script_name: nil) %>
<header class="full-width">
<h2 class="divider txt-large">Link a device</h2>
<p class="margin-none-block" id="session_transfer_label">Use this link to sign-in on another device</p>
</header>
<label class="flex flex-column gap full-width">
<input type="text" class="input fill-white" id="session_transfer_url" value="<%= url %>" aria-labelledby="session_transfer_label" readonly>
<header>
<strong class="divider txt-large">Devices</strong>
<p class="margin-none" id="session_transfer_label">Link to automatically log in on another device.</p>
</header>
<span class="flex align-center gap margin-inline">
<input type="text" class="input fill-white" id="session_transfer_url" value="<%= url %>" aria-labelledby="session_transfer_label" readonly>
</span>
</label>
<div class="flex align-center gap">
app/views/users/show.html.erb
+10 -16
View File
@@ -37,28 +37,22 @@
cards_path(creator_ids: [ @user.id ], sorted_by: "newest"), class: "btn btn--link", data: { turbo_frame: "_top" } %>
</div>
<% end %>
<% if Current.user == @user %>
<hr class="separator--horizontal full-width flex-item-grow margin-block-start-double" style="--border-color: var(--color-ink-light);" aria-hidden="true">
<%= button_to session_url(script_name: nil), method: :delete, class: "btn txt-x-small center", data: { turbo: false } do %>
<span>Sign out of Fizzy on this device</span>
<% end %>
<% end %>
</div>
</section>
<% if Current.user == @user %>
<section class="panel shadow" style="--panel-size: 45ch;">
<%= render "users/theme" %>
<%= render "users/transfer", user: @user %>
<div class="flex flex-column align-center gap margin-block-start-double">
<header class="full-width">
<h2 class="divider txt-large margin-none-block">API</h2>
</header>
<div class="flex align-center gap txt-normal">
<%= link_to "Personal access tokens", my_access_tokens_path, class: "btn" %>
</div>
</div>
<div class="center margin-block-start-double">
<%= button_to session_url(script_name: nil), method: :delete, class: "btn btn--plain txt-link txt-small", data: { turbo: false } do %>
<span>Sign out of Fizzy</span>
<% end %>
</div>
<%= render "users/access_tokens" %>
</section>
<% end %>
</div>