Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some settings v2 ui fixes #4956

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
+162 −228
Open

Some settings v2 ui fixes #4956

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
419de74
Reflect changes in border radius immediately
tung2744 Dec 19, 2024
a3ed9b1
Fix hiding authgear logo is not working correctly
tung2744 Dec 19, 2024
8c05c9b
Remove horizontal padding in portal layout
tung2744 Dec 20, 2024
b21e3aa
Fix styles of settings session status
tung2744 Dec 20, 2024
fd98c56
Remove unused translation
tung2744 Dec 20, 2024
1fa927a
Generate translations
tung2744 Dec 20, 2024
787231f
Remove extra error alerts in settings
tung2744 Dec 20, 2024
5433f5e
Remove more extra error alerts
tung2744 Dec 20, 2024
b0a5b17
Fix newline is missing in recovery codes
tung2744 Dec 20, 2024
9f1b807
Remove all remaining alert messages
tung2744 Dec 20, 2024
17aa213
Reorder translations
tung2744 Dec 23, 2024
a44aee1
Remove unecessary dark selector
tung2744 Dec 23, 2024
858a932
Update .make-lint-translation-keys-expect
tung2744 Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions authui/src/authflowv2/components/settings-action-item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
border-color: var(--settings-item__border-color);
border-bottom-width: 1px;
border-style: solid;
padding-left: var(--widget-content__px);
padding-right: var(--widget-content__px);

--icon-placeholder-display: none;
--icon-size: 1.5rem;
Expand Down
3 changes: 3 additions & 0 deletions authui/src/authflowv2/components/settings-content.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
}

.settings-content {
padding-left: var(--widget-content__px);
padding-right: var(--widget-content__px);

@media (min-width: theme("screens.tablet")) {
margin: 0 auto;
width: var(--settings-content__width);
Expand Down
2 changes: 2 additions & 0 deletions authui/src/authflowv2/components/settings-description.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
letter-spacing: var(--settings-description__letter-spacing);
font-weight: var(--settings-description__font-weight);
color: var(--settings-description__text-color);
padding-left: var(--widget-content__px);
padding-right: var(--widget-content__px);
}

.settings-description--primary-color {
Expand Down
31 changes: 30 additions & 1 deletion authui/src/authflowv2/components/settings-item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,23 @@
--settings-item__forward-arrow-color: var(--color-neutral-200);

--settings-item__border-color: var(--color-neutral-100);

--settings-item-content__font-family: var(
--typography-title-medium__font-family
);
--settings-item-content__font-size: var(
--typography-body-medium__font-size
);
--settings-item-content__line-height: var(
--typography-label-medium__line-height
);
--settings-item-content__letter-spacing: var(
--typography-title-medium__letter-spacing
);
--settings-item-content__font-weight: var(
--typography-title-medium__font-weight
);
--settings-item-content__text-color: var(--color-neutral-400);
}

:root.dark {
Expand All @@ -55,14 +72,19 @@
--settings-item__forward-arrow-color: var(--color-neutral-200);

--settings-item__border-color: var(--color-neutral-400);

:root.dark {
--settings-item-content__text-color: var(--color-neutral-200);
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is already inside a :root.dark block. Do we really need a nested :root.dark?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right it is redundant, removed in latest commit

}

.settings-item {
@apply grid gap-x-2 gap-y-1;
@apply items-center text-start;

background-color: var(--settings-item__bg-color);
padding: var(--settings-item__py) var(--settings-item__px);
padding: var(--settings-item__py)
calc(var(--settings-item__px) + var(--widget-content__px));
color: var(--settings-item__text-color);
border-color: var(--settings-item__border-color);
border-bottom-width: 1px;
Expand Down Expand Up @@ -125,6 +147,13 @@
}
.settings-item__content {
grid-area: content;

font-family: var(--settings-item-content__font-family);
font-size: var(--settings-item-content__font-size);
line-height: var(--settings-item-content__line-height);
letter-spacing: var(--settings-item-content__letter-spacing);
font-weight: var(--settings-item-content__font-weight);
color: var(--settings-item-content__text-color);
}
.settings-item__forward_arrow {
grid-area: arrow;
Expand Down
2 changes: 2 additions & 0 deletions authui/src/authflowv2/components/settings-title.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,7 @@
letter-spacing: var(--settings-title__letter-spacing);
font-weight: var(--settings-title__font-weight);
color: var(--settings-title__text-color);
padding-left: var(--widget-content__px);
padding-right: var(--widget-content__px);
}
}
16 changes: 14 additions & 2 deletions authui/src/authflowv2/components/widget.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,10 @@
}

.widget-content.widget-content--settings {
@apply px-6 py-6;
@apply px-0 py-6;
@apply gap-y-5 tablet:gap-y-8;
max-width: var(--widget__max-width--settings);
--widget-content__px: 1.5rem;
}

/* In __html_head.html, there is a <noscript> element to revert this visibility. */
Expand All @@ -73,7 +74,18 @@
}

.widget-content.widget-content--settings {
@apply px-8 py-8;
@apply px-0 py-8;
--widget-content__px: 2rem;
}
}

.widget-content__item--settings {
padding-left: var(--widget-content__px);
padding-right: var(--widget-content__px);
}

.widget-content__alert--settings {
margin-left: var(--widget-content__px);
margin-right: var(--widget-content__px);
}
}
4 changes: 2 additions & 2 deletions resources/authgear/templates/en/web/authflowv2/__settings_item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,15 @@
{{/* If there is content */}}
{{ if $.Children }}
{{ $length := len $.Children }}
<p class="settings-item__content settings-description block tablet:hidden">
<p class="settings-item__content block tablet:hidden">
{{ $item := index $.Children 0}}
{{ if gt $length 1 }}
<span> {{ include "v2.page.settings.default.and-more-button-label" (dict "item" $item ) }} </span>
{{ else }}
{{ $item }}
{{ end }}
</p>
<ul class="settings-item__content settings-description hidden tablet:block break-all">
<ul class="settings-item__content hidden tablet:block break-all">
{{ range $i, $child := $.Children }}
<li>
{{ $child }}
Expand Down
6 changes: 4 additions & 2 deletions resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@
{{ define "widget" }}
<div class="widget widget--settings">
<div class="widget-content widget-content--settings">
{{ block "page-navbar" . }}
{{ end }}
<div class="widget-content__item--settings">
{{ block "page-navbar" . }}{{ end }}
</div>
{{ template "authflowv2/__alert_message.html"
(dict
"Type" "error"
"Message" (include "authflowv2/__error.html" .)
"Classname" "widget-content__alert--settings"
)
}}
{{ template "page-content" . }}
Expand Down