Do not abuse --alignment-logo to hidden logo

ref DEV-1691
authgear · Aug 16, 2024 · cc6b1d1 · cc6b1d1
2 parents e32f62c + 5aa83df
commit cc6b1d1
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 23 deletions.
diff --git a/portal/src/components/common/BaseImagePicker.tsx b/portal/src/components/common/BaseImagePicker.tsx
@@ -51,6 +51,13 @@ const BaseImagePicker: React.VFC<BaseImagePickerProps> =
                   base64EncodedData: dataURIToBase64EncodedData(result),
                   extension,
                 });
+                if (inputRef.current) {
+                  // The way that we use <input type=file> is we read the full inut as bytes.
+                  // After reading, the value of the input is no longer relevant to us.
+                  // Also in Chrome, if the same file is selected again, onChange will NOT be called.
+                  // Therefore, every time we finish reading, we reset the value to empty.
+                  inputRef.current.value = "";
+                }
               }
             });
             reader.readAsDataURL(file);
@@ -68,9 +75,6 @@ const BaseImagePicker: React.VFC<BaseImagePickerProps> =
     }, [base64EncodedData]);
 
     const clearImage = useCallback(() => {
-      if (inputRef.current) {
-        inputRef.current.value = "";
-      }
       onChange(null);
     }, [onChange]);
 

diff --git a/portal/src/graphql/portal/DesignScreen/form.ts b/portal/src/graphql/portal/DesignScreen/form.ts
@@ -555,12 +555,6 @@ export function useBrandDesignForm(appID: string): BranchDesignForm {
         ),
         image
       );
-      resourceMutator.updateCustomisableTheme((prev) => {
-        return produce(prev, (draft) => {
-          // Set to center if exist so that dark mode icon still show if user delete light mode icon
-          draft.logo.alignment = image == null ? "hidden" : "center";
-        });
-      }, targetTheme);
     },
     [resourceMutator]
   );

diff --git a/portal/src/model/themeAuthFlowV2.test.ts b/portal/src/model/themeAuthFlowV2.test.ts
@@ -54,7 +54,6 @@ describe("StyleCssVisitor", () => {
     --input__border-radius: 0.875em;
     --phone-input__trigger-border-radius: 0.875em;
     --body-text__link-color: #176df3;
-    --alignment-logo: hidden;
     --brand-logo__height: 2.5rem
 }`;
     const customisableThemeStyleGroup = new CustomisableThemeStyleGroup(
@@ -104,7 +103,6 @@ describe("StyleCssVisitor", () => {
         color: "#176df3",
       },
       logo: {
-        alignment: "hidden",
         height: "2.5rem",
       },
     });
@@ -167,9 +165,7 @@ describe("CssAstVisitor", () => {
       link: {
         color: "#2f7bf4",
       },
-      logo: {
-        alignment: "center",
-      },
+      logo: {},
     });
     const expectedStyleSheet = `:root {
     --layout__bg-color: #1c1c1e;
@@ -183,7 +179,6 @@ describe("CssAstVisitor", () => {
     --input__border-radius: 0.875em;
     --phone-input__trigger-border-radius: 0.875em;
     --body-text__link-color: #2f7bf4;
-    --alignment-logo: center;
     --brand-logo__height: 2.5rem
 }`;
     const styleVisitor = new CssAstVisitor(ThemeTargetSelector.Light);

diff --git a/portal/src/model/themeAuthFlowV2.ts b/portal/src/model/themeAuthFlowV2.ts
@@ -44,7 +44,6 @@ export const enum CSSVariable {
   InputFiledBorderRadius = "--input__border-radius",
   LinkColor = "--body-text__link-color",
   WatermarkDisplay = "--watermark-display",
-  AlignmentLogo = "--alignment-logo",
   LogoHeight = "--brand-logo__height",
   PhoneInputTriggerBorderRadius = "--phone-input__trigger-border-radius",
 }
@@ -108,7 +107,6 @@ export interface LinkStyle {
 }
 
 export interface LogoStyte {
-  alignment: Alignment | Hidden;
   height: string;
 }
 
@@ -189,7 +187,6 @@ export const DEFAULT_LIGHT_THEME: CustomisableTheme = {
     color: "#176df3",
   },
   logo: {
-    alignment: "center",
     height: "2.5rem",
   },
 };
@@ -233,7 +230,6 @@ export const DEFAULT_DARK_THEME: CustomisableTheme = {
     color: "#2f7bf4",
   },
   logo: {
-    alignment: "center",
     height: "2.5rem",
   },
 };
@@ -565,10 +561,6 @@ export class CustomisableThemeStyleGroup extends StyleGroup<PartialCustomisableT
       }),
 
       logo: new StyleGroup({
-        alignment: new AlignOrHideItemsStyleProperty(
-          CSSVariable.AlignmentLogo,
-          value.logo.alignment
-        ),
         height: new HeightStyleProperty(
           CSSVariable.LogoHeight,
           value.logo.height