From 419de74611f2e0dd045f3e503120ca26b57d7110 Mon Sep 17 00:00:00 2001 From: Tung Wu Date: Thu, 19 Dec 2024 19:07:26 +0800 Subject: [PATCH 01/13] Reflect changes in border radius immediately --- portal/src/components/design/BorderRadius.tsx | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/portal/src/components/design/BorderRadius.tsx b/portal/src/components/design/BorderRadius.tsx index a5a6f1dd8a..cd2581bd03 100644 --- a/portal/src/components/design/BorderRadius.tsx +++ b/portal/src/components/design/BorderRadius.tsx @@ -64,12 +64,21 @@ const BorderRadius: React.VFC = function BorderRadius( [radiusValue, onChange] ); - const onBorderRadiusChange = useCallback((_: any, value?: string) => { - if (value == null) { - return; - } - setRadiusValue(value); - }, []); + const onBorderRadiusChange = useCallback( + (_: any, value?: string) => { + if (value == null) { + return; + } + setRadiusValue(value); + if (value !== "") { + onChange({ + type: "rounded", + radius: value, + }); + } + }, + [onChange] + ); const onBorderRadiusBlur = useCallback( (ev: React.FocusEvent) => { From a3ed9b1189ae7e9cd96c57051afc192bb2f4d19a Mon Sep 17 00:00:00 2001 From: Tung Wu Date: Thu, 19 Dec 2024 19:35:19 +0800 Subject: [PATCH 02/13] Fix hiding authgear logo is not working correctly --- authui/src/authflowv2/components/watermark.css | 10 ++++++---- portal/src/model/themeAuthFlowV2.ts | 4 ++-- .../templates/en/web/authflowv2/__watermark.html | 6 ++++-- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/authui/src/authflowv2/components/watermark.css b/authui/src/authflowv2/components/watermark.css index b033db7d57..b804b7585c 100644 --- a/authui/src/authflowv2/components/watermark.css +++ b/authui/src/authflowv2/components/watermark.css @@ -1,10 +1,10 @@ @layer components { :root { - --watermark-display: inline-block; + --watermark-display: block; } html[data-watermark-enabled="false"] { - --watermark-display: hidden; + --watermark-display: none; } .watermark { @@ -15,12 +15,14 @@ } .watermark__container { - @apply mt-8 flex justify-center; + /* Use gap to implement the top padding, so that when watermark is not displayed, + the margin is also hidden */ + @apply gap-y-8 flex flex-col items-center; } @media (min-width: theme("screens.tablet")) { .watermark__container { - @apply mt-16; + @apply gap-y-16; } } } diff --git a/portal/src/model/themeAuthFlowV2.ts b/portal/src/model/themeAuthFlowV2.ts index 5736b8ef1e..c7e6ea6266 100644 --- a/portal/src/model/themeAuthFlowV2.ts +++ b/portal/src/model/themeAuthFlowV2.ts @@ -124,8 +124,8 @@ export interface LogoStyle { height: string; } -export const WatermarkEnabledDisplay = "inline-block"; -export const WatermarkDisabledDisplay = "hidden"; +export const WatermarkEnabledDisplay = "block"; +export const WatermarkDisabledDisplay = "none"; export interface CustomisableTheme { page: PageStyle; diff --git a/resources/authgear/templates/en/web/authflowv2/__watermark.html b/resources/authgear/templates/en/web/authflowv2/__watermark.html index 214037fa98..eab776b7d0 100644 --- a/resources/authgear/templates/en/web/authflowv2/__watermark.html +++ b/resources/authgear/templates/en/web/authflowv2/__watermark.html @@ -1,13 +1,15 @@ {{ define "authflowv2/__watermark.html" }}
+ +
{{ if $.IsNativePlatform }}
{{ else }} - + {{ end }} -
+ {{ end }} From 8c05c9b83d4a3824d79e5af10adb0aa6b26cbbac Mon Sep 17 00:00:00 2001 From: Tung Wu Date: Fri, 20 Dec 2024 15:50:36 +0800 Subject: [PATCH 03/13] Remove horizontal padding in portal layout --- .../components/settings-action-item.css | 2 ++ .../components/settings-content.css | 3 ++ .../components/settings-description.css | 2 ++ .../authflowv2/components/settings-item.css | 31 ++++++++++++++++++- .../authflowv2/components/settings-title.css | 2 ++ authui/src/authflowv2/components/widget.css | 16 ++++++++-- .../en/web/authflowv2/__settings_item.html | 4 +-- .../web/authflowv2/__settings_page_frame.html | 6 ++-- 8 files changed, 59 insertions(+), 7 deletions(-) diff --git a/authui/src/authflowv2/components/settings-action-item.css b/authui/src/authflowv2/components/settings-action-item.css index 651f76d185..cdc594a835 100644 --- a/authui/src/authflowv2/components/settings-action-item.css +++ b/authui/src/authflowv2/components/settings-action-item.css @@ -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; diff --git a/authui/src/authflowv2/components/settings-content.css b/authui/src/authflowv2/components/settings-content.css index 0786d84a30..4a77c48e54 100644 --- a/authui/src/authflowv2/components/settings-content.css +++ b/authui/src/authflowv2/components/settings-content.css @@ -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); diff --git a/authui/src/authflowv2/components/settings-description.css b/authui/src/authflowv2/components/settings-description.css index e3d9c2bcb2..f24f72254c 100644 --- a/authui/src/authflowv2/components/settings-description.css +++ b/authui/src/authflowv2/components/settings-description.css @@ -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 { diff --git a/authui/src/authflowv2/components/settings-item.css b/authui/src/authflowv2/components/settings-item.css index ba1ca1254f..0d3e633532 100644 --- a/authui/src/authflowv2/components/settings-item.css +++ b/authui/src/authflowv2/components/settings-item.css @@ -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 { @@ -55,6 +72,10 @@ --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); + } } .settings-item { @@ -62,7 +83,8 @@ @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; @@ -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; diff --git a/authui/src/authflowv2/components/settings-title.css b/authui/src/authflowv2/components/settings-title.css index 3a0f1baf7c..3759ae8ace 100644 --- a/authui/src/authflowv2/components/settings-title.css +++ b/authui/src/authflowv2/components/settings-title.css @@ -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); } } diff --git a/authui/src/authflowv2/components/widget.css b/authui/src/authflowv2/components/widget.css index b122f9031d..29c9ec42d4 100644 --- a/authui/src/authflowv2/components/widget.css +++ b/authui/src/authflowv2/components/widget.css @@ -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