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.

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

Implement settings profile pages #4704

Merged
merged 114 commits into from
Sep 6, 2024
Merged
Show file tree
Hide file tree
Changes from 112 commits
Commits
Show all changes
114 commits
Select commit Hold shift + click to select a range
3450199
Scaffold profile edit handler
cychiuae Aug 28, 2024
77be9d5
Handle save attributes
cychiuae Aug 28, 2024
b52f60f
Align auth ui v2 handlers' name
cychiuae Aug 29, 2024
31a6633
Scaffold v2 settings profile page
cychiuae Aug 23, 2024
c3b315d
Render settings profile navbar
cychiuae Aug 23, 2024
a37b26b
Implement user profile pic component
cychiuae Aug 27, 2024
1218d86
Render user profile pic
cychiuae Aug 27, 2024
880340a
Show user's name
cychiuae Aug 27, 2024
9a14bd4
Show user's gender
cychiuae Aug 27, 2024
e4e79c5
Show user's birthdate
cychiuae Aug 27, 2024
146ccfa
Show user's timezone
cychiuae Aug 27, 2024
ca89ee7
Show user's language
cychiuae Aug 27, 2024
d98624c
Show user's address
cychiuae Aug 27, 2024
8f6703b
Navigate to edit page
cychiuae Aug 27, 2024
8b05cea
Use settings item to render profile item
cychiuae Aug 29, 2024
29f1f6f
Generate material icons
cychiuae Aug 29, 2024
bc2ac5f
Use printf
cychiuae Sep 2, 2024
a7a2520
Provide zh-HK and zh-TW translations
cychiuae Sep 2, 2024
c30cb5f
Fix send more content than declared in content length
cychiuae Sep 2, 2024
6f56c83
Generate material icons
cychiuae Aug 29, 2024
1caf68d
Route to settings profile gender edit
yyorkchan Aug 28, 2024
2befbc9
Introduce radio component
yyorkchan Aug 29, 2024
779892e
Introduce gender select page
yyorkchan Aug 29, 2024
db25b9a
Make gender page mobile responsive
yyorkchan Sep 2, 2024
a625468
Seperate radio custom input as param
yyorkchan Sep 2, 2024
e3c410e
Remove duplicate translation & Use new translation for save btn
yyorkchan Sep 2, 2024
eb1a85d
Sort translation
cychiuae Sep 3, 2024
d9133be
Fix indentation
cychiuae Sep 3, 2024
5e7438c
Rename radio.css -> settings-radio.css
cychiuae Sep 3, 2024
7664902
Use turbo to submit form
cychiuae Sep 3, 2024
2314275
Use a better abstraction to render extra content
cychiuae Sep 3, 2024
a053790
Fix wire generation after rebase onto authgear/main
cychiuae Sep 3, 2024
4860282
Scaffold edit name page
cychiuae Aug 29, 2024
31b70e1
Configure edit name page navbar
cychiuae Sep 3, 2024
4881d46
Add settings text input
cychiuae Aug 29, 2024
fcc37fd
Implement edit name form
cychiuae Aug 29, 2024
1d651ec
Fix missing back button in edit name page
cychiuae Sep 3, 2024
bd7d194
Provide translation
cychiuae Sep 3, 2024
ae1592b
Amend translation key in edit gender page
cychiuae Sep 3, 2024
9c4aa68
Create localeInput handler TS
Kuixz Aug 28, 2024
327d9ce
Create edit locale HTML
Kuixz Aug 28, 2024
bd0369d
Rename typo variable
Kuixz Aug 28, 2024
a14e160
Add css to locale input
Kuixz Aug 29, 2024
196b28b
Register locale editor in central edit router
Kuixz Aug 29, 2024
6385f1e
Fix localization
Kuixz Aug 30, 2024
70cccd4
Add media query for responsive gap
Kuixz Sep 2, 2024
688bcc3
Switch errant templates to translates
Kuixz Sep 2, 2024
43e3a3f
Fix indentation / extraneous HTML
Kuixz Sep 3, 2024
851d878
Fix typo leads to compilation error
cychiuae Sep 3, 2024
f7dd6ad
Clean up template indentation
cychiuae Sep 3, 2024
2838396
Refactor locale input
cychiuae Sep 3, 2024
bd3aae3
Remove settings profile editor styles
cychiuae Sep 3, 2024
2dbab81
Provide zhhk zhtw translation
cychiuae Sep 3, 2024
76eb206
Scaffold edit timezone page
cychiuae Aug 28, 2024
f1e93d6
Render edit timezone page navbar
cychiuae Aug 28, 2024
71041d6
Make timezone json marshal-able
cychiuae Aug 28, 2024
e182e6a
Fix phone input lose focus when closing country picker
cychiuae Sep 2, 2024
5b4da99
Implement time zone input
cychiuae Sep 2, 2024
21ed154
Implement edit zoneinfo form
cychiuae Sep 2, 2024
846dfc2
Show current user timezone
cychiuae Sep 2, 2024
b443a61
Fix missing back title in back button
cychiuae Sep 3, 2024
324cdab
Hide back title in mobile layout
cychiuae Sep 3, 2024
030b3ca
Fix navbar styles in mobile view
cychiuae Sep 3, 2024
9682238
Re-layout settings profile pages
cychiuae Sep 3, 2024
d23fb2a
Generate translation for zhhk and zhtw
cychiuae Sep 3, 2024
06785f5
Create date input HTML
Kuixz Aug 30, 2024
9a0b2cb
Add CSS to date input
Kuixz Aug 30, 2024
b429f1a
Localize label of date input
Kuixz Aug 30, 2024
255eb3e
Register birthdate editor under central router.go
Kuixz Aug 30, 2024
942dc26
Add media query for responsive gap
Kuixz Sep 2, 2024
b443c2f
Add newline and remove extraneous attributes from date input
Kuixz Sep 3, 2024
c96e220
Reuse existing styles
Kuixz Sep 3, 2024
a9692c8
Remove extraneous in edit birthdate
Kuixz Sep 3, 2024
6e8bbb6
Update edit birthdate page
cychiuae Sep 3, 2024
cf5cf26
Add translation for zhhk and zhtw
cychiuae Sep 3, 2024
9940a0b
Rename settings_gender_edit -> settings_profile_edit_gender
cychiuae Sep 3, 2024
f4cd853
Add permission check to edit profile attribute
cychiuae Sep 3, 2024
8f96088
Refactor Dialog for reusability
yyorkchan Aug 30, 2024
705d669
Route to settings profile picture edit
yyorkchan Aug 30, 2024
0cc9d28
Introduce profile picture html and style
yyorkchan Aug 30, 2024
de97e2c
Import image picker into authflowv2
yyorkchan Sep 2, 2024
37458cb
Introduce Completed profile picture page
yyorkchan Sep 2, 2024
22d0af6
Make dialog classname customizable
yyorkchan Sep 4, 2024
27c29e6
Sort settings profile edit template order by template name
yyorkchan Sep 4, 2024
75fcde0
Update navbar
yyorkchan Sep 4, 2024
8bb6140
move dialog btn class as dialog-close-btn template base class
yyorkchan Sep 4, 2024
c022f67
Scaffold edit address page
cychiuae Sep 3, 2024
197b0ce
Scaffold country input component
cychiuae Sep 3, 2024
e1eaf10
Fix previous select input styles
cychiuae Sep 3, 2024
4a029d3
Implement country input
cychiuae Sep 3, 2024
3cec4ab
Replace all select inputs with a generic select input
cychiuae Sep 3, 2024
1fc3517
Implement address form
cychiuae Sep 3, 2024
9ad37e2
Modify v2.page.settings.default.button-label-and-more taking item input
yyorkchan Sep 4, 2024
004685f
Generate translations
cychiuae Sep 4, 2024
4b61461
Run translation linter
cychiuae Sep 4, 2024
8f52182
Fix accidentally removed set aria-expanded
cychiuae Sep 5, 2024
07ecadf
Remove timezone json serialization
cychiuae Sep 5, 2024
f176e0d
Update translation keys format
cychiuae Sep 5, 2024
5a9609f
Fix gender input styles
cychiuae Sep 5, 2024
2116404
Fix select box selected item text color in dark mode
cychiuae Sep 5, 2024
558d1c7
Fix date input calendar icon color in dark mode
cychiuae Sep 5, 2024
e12ef3d
Adopt vite for build
cychiuae Sep 5, 2024
26675e3
Fix targetting wrong layer
cychiuae Sep 5, 2024
ad41abd
Create specific tailwind token for profile pic edit button
cychiuae Sep 5, 2024
645959e
Use specific translation keys for `Not provided`
cychiuae Sep 5, 2024
ede59fd
Fix edit button position in rtl
cychiuae Sep 6, 2024
854d688
Fix arrow icon in rtl
cychiuae Sep 6, 2024
4e10cc9
Change edit gender screen title translation key
cychiuae Sep 6, 2024
30f1b89
Fix cannot show custom gender
cychiuae Sep 6, 2024
4fd9fc4
Fix cannot render date calendar icon in light mode
cychiuae Sep 6, 2024
971466c
Fix settings item alignment in rtl
cychiuae Sep 6, 2024
c77b787
Fix showing wrong gender when switch from a specific gender to custom…
cychiuae Sep 6, 2024
8d609fc
Use unset instead of empty value
cychiuae Sep 6, 2024
84790d3
Run translation linter
cychiuae Sep 6, 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
26 changes: 21 additions & 5 deletions .make-lint-translation-keys-expect
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
resources/authgear/templates/en/web/authflowv2/__base_page_frame.html:43:12: translation key not defined: "page-frame-content"
resources/authgear/templates/en/web/authflowv2/__bot_protection_dialog.html:4:25: translation key not defined: "dialog-controller-str"
resources/authgear/templates/en/web/authflowv2/__bot_protection_dialog.html:5:19: translation key not defined: "dialog-content"
resources/authgear/templates/en/web/authflowv2/__bot_protection_dialog.html:5:27: translation key not defined: "dialog-controller-str"
resources/authgear/templates/en/web/authflowv2/__bot_protection_dialog.html:6:21: translation key not defined: "dialog-content"
resources/authgear/templates/en/web/authflowv2/__bot_protection_dialog.html:19:14: translation key not defined: "dialog-close-btn"
resources/authgear/templates/en/web/authflowv2/__country_input.html:6:16: invalid translation key: "$labelKey"
resources/authgear/templates/en/web/authflowv2/__csrf_error_page_layout.html:28:18: translation key not defined: "page-content"
resources/authgear/templates/en/web/authflowv2/__dialog.html:9:14: translation key not defined: "dialog-attr"
resources/authgear/templates/en/web/authflowv2/__dialog.html:27:14: translation key not defined: "dialog-attr"
resources/authgear/templates/en/web/authflowv2/__error.html:134:18: translation key not defined: "authflowv2/__error_account"
resources/authgear/templates/en/web/authflowv2/__error.html:166:20: translation key not defined: "authflowv2/__error_account"
resources/authgear/templates/en/web/authflowv2/__error.html:201:31: translation key not defined: "customer-support-link"
resources/authgear/templates/en/web/authflowv2/__html_head.html:4:19: invalid translation key: "app.name"
resources/authgear/templates/en/web/authflowv2/__locale_input.html:6:16: invalid translation key: "$labelKey"
resources/authgear/templates/en/web/authflowv2/__page_frame.html:12:18: translation key not defined: "page-content"
resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html:46:18: translation key not defined: "page-content"
resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html:46:15: translation key not defined: "page-navbar"
resources/authgear/templates/en/web/authflowv2/__settings_page_frame.html:48:18: translation key not defined: "page-content"
resources/authgear/templates/en/web/authflowv2/__toc_pp_footer.html:23:54: invalid translation key: "terms-of-service-link"
resources/authgear/templates/en/web/authflowv2/__toc_pp_footer.html:24:53: invalid translation key: "privacy-policy-link"
resources/authgear/templates/en/web/authflowv2/account_linking.html:94:21: invalid translation key: "printf "v2.component.oauth-branding.%s.label" .ProviderType"
Expand All @@ -21,9 +25,21 @@ resources/authgear/templates/en/web/authflowv2/login.html:252:25: invalid transl
resources/authgear/templates/en/web/authflowv2/login.html:274:25: invalid translation key: "printf "v2.component.ldap-branding.default.label-%s" .server_name"
resources/authgear/templates/en/web/authflowv2/select_account.html:13:24: invalid translation key: "app.name"
resources/authgear/templates/en/web/authflowv2/settings_layout.html:3:14: translation key not defined: "widget"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:29:18: translation key not defined: "__settings_profile_item"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:49:18: translation key not defined: "__settings_profile_item"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:66:22: translation key not defined: "__settings_profile_date_item"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:68:18: translation key not defined: "__settings_profile_item"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:85:22: translation key not defined: "__settings_profile_address_item"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:87:18: translation key not defined: "__settings_profile_item"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:105:18: translation key not defined: "__settings_profile_item"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:121:23: translation key not defined: "__settings_profile_locale_item"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:123:18: translation key not defined: "__settings_profile_item"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:172:22: invalid translation key: "$label"
resources/authgear/templates/en/web/authflowv2/settings_profile.html:183:29: invalid translation key: "printf "territory-%s" $.AddressCountry"
resources/authgear/templates/en/web/authflowv2/settings_profile_edit_gender.html:57:33: translation key not defined: "__settings_gender_edit_custom_gender_input"
resources/authgear/templates/en/web/authflowv2/signup.html:40:18: invalid translation key: "app.name"
resources/authgear/templates/en/web/authflowv2/signup.html:237:23: invalid translation key: "printf "v2.component.oauth-branding.%s.label" .provider_type"
resources/authgear/templates/en/web/authflowv2/signup.html:259:23: invalid translation key: "printf "v2.component.ldap-branding.default.label-%s" .server_name"
resources/authgear/templates/en/web/authflowv2/verify_login_link.html:4:18: invalid translation key: "app.name"
27 errors found
43 errors found
exit status 1
5 changes: 5 additions & 0 deletions authui/src/authflowv2.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import "cropperjs/dist/cropper.min.css";
import { start } from "@hotwired/turbo";
import { Application } from "@hotwired/stimulus";
import axios from "axios";
Expand Down Expand Up @@ -47,6 +48,8 @@ import { BotProtectionController } from "./authflowv2/botprotection/botProtectio
import { BotProtectionDialogController } from "./authflowv2/botprotection/botProtectionDialog";
import { DialogController } from "./authflowv2/dialog";
import { BotProtectionStandalonePageController } from "./authflowv2/botprotection/botProtectionStandalonePage";
import { ImagePickerController } from "./imagepicker";
import { SelectInputController } from "./authflowv2/selectInput";

axios.defaults.withCredentials = true;

Expand Down Expand Up @@ -89,6 +92,7 @@ Stimulus.register("custom-select", CustomSelectController);
Stimulus.register("phone-input", PhoneInputController);
Stimulus.register("countdown", CountdownController);
Stimulus.register("copy-button", CopyButtonController);
Stimulus.register("image-picker", ImagePickerController);

Stimulus.register("text-field", TextFieldController);
Stimulus.register("dialog", DialogController);
Expand Down Expand Up @@ -129,5 +133,6 @@ Stimulus.register("cloudflare-turnstile", CloudflareTurnstileController);
Stimulus.register("recaptcha-v2", RecaptchaV2Controller);
Stimulus.register("bot-protection", BotProtectionController);
Stimulus.register("bot-protection-dialog", BotProtectionDialogController);
Stimulus.register("select-input", SelectInputController);

injectCSSAttrs(document.documentElement);
6 changes: 6 additions & 0 deletions authui/src/authflowv2/components.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,23 @@
@import "./components/password-strength-meter.css";
@import "./components/select.css";
@import "./components/phone-input.css";
@import "./components/date-input.css";
@import "./components/screen-icon.css";
@import "./components/screen-icon-layout.css";
@import "./components/password-policy.css";
@import "./components/icon.css";
@import "./components/close-btn.css";
@import "./components/checkbox.css";
@import "./components/settings-radio.css";
@import "./components/overlay.css";
@import "./components/dialog.css";
@import "./components/watermark.css";
@import "./components/settings-header.css";
@import "./components/settings-content.css";
@import "./components/settings-title.css";
@import "./components/settings-description.css";
@import "./components/settings-item.css";
@import "./components/settings-text-input.css";
@import "./components/navbar.css";
@import "./components/settings-user-profile-pic.css";
@import "./components/select-input.css";
15 changes: 15 additions & 0 deletions authui/src/authflowv2/components/date-input.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@layer components {
:root {
--date-input--calendar-icon-filter:;
Copy link
Collaborator

Choose a reason for hiding this comment

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

: initial or : unset? Empty seems weird.

}
:root.dark {
--date-input--calendar-icon-filter: invert(100%);
}
.date-input {
&::-webkit-calendar-picker-indicator {
filter: var(--date-input--calendar-icon-filter);
height: 1.5rem;
width: 1.5rem;
}
}
}
4 changes: 2 additions & 2 deletions authui/src/authflowv2/components/dialog.css
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
}
}

.close-btn {
.dialog-close-btn--bot-protection {
/* close button icon distance to top/right edge = 21px
* close button icon size = 14px
* close button button size = 44px
Expand Down Expand Up @@ -152,7 +152,7 @@
transform: none; /* slide animation only wanted on mobile */
}

.close-btn {
.dialog-close-btn--bot-protection {
/* close button icon distance to top/right edge = 25px
* close button icon size = 14px
* close button button size = 44px
Expand Down
5 changes: 5 additions & 0 deletions authui/src/authflowv2/components/icon.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
:root {
--alternative-icon__font-size: 1.5rem; /* 24 / 16 = 1.5 */
--country-flag-icon__font-size: 1.5rem; /* 24 / 16 = 1.5 */
--settings-item-icon__font-size: 1.5rem;
}

:root.dark {
Expand All @@ -15,4 +16,8 @@
.country-flag-icon {
font-size: var(--country-flag-icon__font-size);
}

.settings-item-icon {
font-size: var(--settings-item-icon__font-size);
}
}
37 changes: 28 additions & 9 deletions authui/src/authflowv2/components/navbar.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@
--navbar__title-line-height: var(--typography-title-large__line-height);
--navbar__title-text-color: var(--color-neutral-700);

--navbar__title--mobile-font-family: var(--navbar__title-font-family);
--navbar__title--mobile-font-size: 1.125rem;
--navbar__title--mobile-font-weight: var(--navbar__title-font-weight);
--navbar__title--mobile-letter-spacing: var(--navbar__title-letter-spacing);
--navbar__title--mobile-line-height: var(--navbar__title-line-height);
--navbar__title--mobile-text-color: var(--navbar__title-text-color);

--navbar__item-font-family: var(--typography-label-large__font-family);
--navbar__item-font-size: var(--typography-label-large__font-size);
--navbar__item-font-weight: var(--typography-label-large__font-weight);
Expand All @@ -33,12 +40,21 @@
}

.navbar__title {
color: var(--navbar__title-text-color);
font-family: var(--navbar__title-font-family);
font-size: var(--navbar__title-font-size);
font-weight: var(--navbar__title-font-weight);
letter-spacing: var(--navbar__title-letter-spacing);
line-height: var(--navbar__title-line-height);
color: var(--navbar__title--mobile-text-color);
font-family: var(--navbar__title--mobile-font-family);
font-size: var(--navbar__title--mobile-font-size);
font-weight: var(--navbar__title--mobile-font-weight);
letter-spacing: var(--navbar__title--mobile-letter-spacing);
line-height: var(--navbar__title--mobile-line-height);

@media (min-width: theme("screens.tablet")) {
color: var(--navbar__title-text-color);
font-family: var(--navbar__title-font-family);
font-size: var(--navbar__title-font-size);
font-weight: var(--navbar__title-font-weight);
letter-spacing: var(--navbar__title-letter-spacing);
line-height: var(--navbar__title-line-height);
}

@apply absolute inset-0;
@apply flex justify-center items-center;
Expand All @@ -53,9 +69,12 @@
font-weight: var(--navbar__item-font-weight);
letter-spacing: var(--navbar__item-letter-spacing);
line-height: var(--navbar__item-line-height);
}

.navbar__item_icon {
font-size: var(--navbar__item-icon-font-size);
&::before {
/* arrow_back_ios (<) in ltr and arrow_forward_ios (>) in rtl */
@apply ltr:content-['arrow\_back\_ios'] rtl:content-['arrow\_forward\_ios'];
Copy link
Contributor Author

Choose a reason for hiding this comment

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

LTR

Screenshot 2024-09-06 at 2 37 23 PM

RTL

Screenshot 2024-09-06 at 2 37 41 PM

@apply material-icons;
font-size: var(--navbar__item-icon-font-size);
}
}
}
59 changes: 59 additions & 0 deletions authui/src/authflowv2/components/select-input.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
@layer components {
:root {
--select-input__font-size: var(--typography-body-large__font-size);

--select-input__placeholder_color: var(--color-neutral-200);
--select-input__trigger-ring-color: var(--color-neutral-100);
--select-input__trigger-ring-color--focus: var(
--color-primary-theme-primary
);
--select-input__trigger-ring-color--error: var(--color-error);
--select-input__trigger-ring-width: var(--border-width-regular);
--select-input__trigger-ring-width--focus: var(
--border-width-regular--active
);
--select-input__trigger-border-radius: calc(
var(--select-input__font-size) * 14 / 16
)
/* 14 / 16 ratio to font size */;
--select-input__trigger-padding: 1em;
}

:root.dark {
--select-input__text-color: var(--color-neutral-100);
--select-input__trigger-ring-color: var(--color-neutral-500);
}

.select-input__trigger {
@apply flex justify-between items-center;
color: var(--select-input__text-color);
padding: var(--select-input__trigger-padding);
border-radius: var(--select-input__trigger-border-radius);
@apply ring-inset
ring-[length:var(--select-input\_\_trigger-ring-width)]
ring-[color:var(--select-input\_\_trigger-ring-color)];

&:focus {
@apply ring-inset
ring-[length:var(--select-input\_\_trigger-ring-width--focus)]
ring-[color:var(--select-input\_\_trigger-ring-color--focus)];
}

&::after {
@apply material-icons;
content: "arrow_forward_ios";
font-size: 1.125rem;
@apply rotate-90;
}

&.custom-select__trigger-no-value {
color: var(--select-input__placeholder_color);
}

&.select__trigger--expanded {
&::after {
@apply -rotate-90;
}
}
}
}
12 changes: 12 additions & 0 deletions authui/src/authflowv2/components/settings-content.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@layer components {
:root {
--settings-content__width: 21.5625rem;
}

.settings-content {
@media (min-width: theme("screens.tablet")) {
margin: 0 auto;
width: var(--settings-content__width);
}
}
}
22 changes: 18 additions & 4 deletions authui/src/authflowv2/components/settings-item.css
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@

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

background-color: var(--settings-item__bg-color);
Expand All @@ -54,23 +55,28 @@
border-bottom-width: 1px;
border-style: solid;

--settings-item__grid-col-icon-width: 0;
&.with-icon {
--settings-item__grid-col-icon-width: 1.5rem;
}

&.with-content {
/* When Mobile View */
grid-template-areas:
"icon title arrow"
". content arrow";
grid-template-columns: 2rem auto 1.125rem;
grid-template-columns: var(--settings-item__grid-col-icon-width) auto 1.125rem;

/* When Not Mobile View */
@media (min-width: theme("screens.tablet")) {
grid-template-areas: "icon title content arrow";
grid-template-columns: 2rem 9rem auto 1.125rem;
grid-template-columns: var(--settings-item__grid-col-icon-width) 9rem auto 1.125rem;
}
}

&.without-content {
grid-template-areas: "icon title arrow";
grid-template-columns: 2rem auto 1.125rem;
grid-template-columns: var(--settings-item__grid-col-icon-width) auto 1.125rem;
}

&:hover {
Expand All @@ -90,8 +96,9 @@
}
}

.settings-item > .settings-item_icon {
.settings-item > .settings-item_icon-container {
grid-area: icon;
@apply flex items-center;
}
.settings-item > .settings-item__label {
grid-area: title;
Expand All @@ -115,4 +122,11 @@
.settings-item__forward_arrow {
font-size: var(--settings-item__forward-arrow-font-size);
color: var(--settings-item__forward-arrow-color);

@apply flex items-center;

&::before {
@apply material-icons;
@apply ltr:content-['arrow\_forward\_ios'] rtl:content-['arrow\_back\_ios'];
}
}
Loading
Loading