@designcrowd/library.brand-page 6.1.6-use-isadminmaker-2 → 6.1.6-use-isadminmaker-3

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -111,7 +111,7 @@ const InitialiseMakerStores = (options: {
   prepurchase?: {};
   postpurchase?: {};
   isDesignCom?: boolean;
-  isAdmin?: boolean;
+  isAdminMaker?: boolean;
 }) => {
   const isPrePurchase = !!options.prepurchase;
 
@@ -274,12 +274,12 @@ const InitialiseMakerStores = (options: {
   });
 
   userStore.setUserState({
-    isAdmin: options.isAdmin,
+    isAdmin: options.isAdminMaker,
     hasPremiumSubscription: false,
     brandPageCommissionPercentage: 0.1,
   });
 
-  brandPageContainerStore.isAdminMaker = options.isAdmin ?? false;
+  brandPageContainerStore.isAdminMaker = options.isAdminMaker ?? false;
 };
 
 const FABRIC_RENDER_BASE_URL = 'https://localhost:6006/';
@@ -485,7 +485,7 @@ SampleBanner.story = {
 };
 
 export const SamplePersonalised = (): any => {
-  InitialiseMakerStores({ isAdmin: true });
+  InitialiseMakerStores({ isAdminMaker: true });
 
   return defineComponent({
     components: {
@@ -511,7 +511,7 @@ export const SamplePersonalised = (): any => {
     template: `
       <BrandPageMaker :view-model="viewModel"/>
     `,
-    pinia: setupStoryPinia({ isAdmin: true }),
+    pinia: setupStoryPinia({ isAdminMaker: true }),
   });
 };
 
@@ -1364,7 +1364,7 @@ export const SampleNoUserMedia = (): any => {
 };
 
 export const SampleAdminMode = (): any => {
-  InitialiseMakerStores({ isAdmin: true });
+  InitialiseMakerStores({ isAdminMaker: true });
 
   const pinia = setupStoryPinia();
 
@@ -1412,7 +1412,7 @@ export const SampleAdminModeBrandSite: Story = {
   name: 'Sample (admin mode brandsite1)',
   render: () => ({
     setup() {
-      InitialiseMakerStores({ isAdmin: true });
+      InitialiseMakerStores({ isAdminMaker: true });
     },
     components: {
       BrandPageMaker,

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.vue

@@ -5,7 +5,7 @@
     class="tw-font-sans"
   >
     <MakerNavigation
-      :is-admin="isAdmin"
+      :is-admin-maker="isAdminMaker"
       :is-published="isPublished"
       :is-saving="isSaving"
       :brand-crowd-url="brandCrowdUrl"

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/store-fixture.ts

@@ -9,7 +9,7 @@ export const setupStoryPinia = (
     customDomain?: CustomDomainModel;
     designDraftToken?: string;
     endpoints?: Endpoints;
-    isAdmin?: boolean;
+    isAdminMaker?: boolean;
     noUserMedia?: boolean;
     noPaymentConfig?: boolean;
     disableMock?: boolean;

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.ts

@@ -75,7 +75,7 @@ export default defineComponent({
       canUseRichTextEditor: computed(
         () => brandPageMakerUserStore.features.canUseRichTextEditor,
       ),
-      isAdmin: computed(() => brandPageContainerStore.isAdminMaker),
+      isAdminMaker: computed(() => brandPageContainerStore.isAdminMaker),
       logoTheme: computed(() => uiStore.logoTheme),
       contentSettingsStore,
       brandPageMakerStore,
@@ -294,7 +294,7 @@ export default defineComponent({
       ) {
         let selectedItem = item;
 
-        if (this.isAdmin) {
+        if (this.isAdminMaker) {
           const currentItem = this.items.find(
             (i: { id: string }) => i.id === item.id,
           );

package/src/brand-page-maker/components/brandpage-settings/BrandPageSettings.vue

@@ -140,7 +140,7 @@
         >
           <div class="tw-mt-2">
             <SaveContact
-              :is-admin="isAdmin"
+              :is-admin-maker="isAdminMaker"
               :is-pre-purchase="isPrePurchase"
               :is-design-com="isDesignCom"
             />
@@ -248,7 +248,7 @@ const brandPageViewModel = computed(
   () => brandPageMakerStore.brandPageViewModel,
 );
 const features = computed(() => userStore.features);
-const isAdmin = computed(() => containerStore.isAdminMaker);
+const isAdminMaker = computed(() => containerStore.isAdminMaker);
 const isDesignCom = computed(() => containerStore.isDesignCom);
 const ogImageUrl = computed(() => brandPageMakerStore.ogImageUrl);
 const isPublished = computed(() => containerStore.isPublished);
@@ -265,7 +265,7 @@ const data = reactive({
 });
 
 const isPaymentProvidersSectionEnabled = computed((): boolean => {
-  return !isAdmin.value && features.value.canAddRequestPaymentContents;
+  return !isAdminMaker.value && features.value.canAddRequestPaymentContents;
 });
 
 const isAddPaymentProviderButtonEnabled = computed((): boolean => {

package/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.ts

@@ -30,7 +30,7 @@ export default defineComponent({
 
     return {
       mode: computed(() => brandPageMakerStore.mode),
-      isAdmin: computed(() => containerStore.isAdminMaker),
+      isAdminMaker: computed(() => containerStore.isAdminMaker),
       brandPageMakerStore,
       userStore,
     };

package/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.vue

@@ -4,7 +4,7 @@
       :section-title="sectionTitle"
       :media-settings="mediaSettings"
       :image-extension="mediaExtension"
-      :is-admin="isAdmin"
+      :is-admin-maker="isAdminMaker"
       :mode="mode"
       :active-tabs="activeTabs"
       :media-type="mediaType"

package/src/brand-page-maker/components/navigation/Navigation.mixin.ts

@@ -4,7 +4,7 @@ import { navigationTr } from '@src/composables/useTranslate';
 
 export default defineComponent({
   props: {
-    isAdmin: {
+    isAdminMaker: {
       type: Boolean,
       required: false,
       default: false,

package/src/brand-page-maker/components/navigation/Navigation.vue

@@ -3,14 +3,14 @@
     data-component="navigation"
     class="js-bp-header tw-h-24 lg:tw-h-16 tw-box-border lg:tw-py-4 lg:tw-px-5 tw-z-30 tw-fixed tw-w-full lg:tw-relative"
     :class="{
-      'tw-bg-grayscale-800': !isAdmin,
+      'tw-bg-grayscale-800': !isAdminMaker,
     }"
   >
     <div
       class="tw-flex tw-flex-col lg:tw-flex-row tw-justify-between lg:tw-items-center lg:tw-gap-4"
     >
       <div
-        v-if="!isAdmin"
+        v-if="!isAdminMaker"
         class="tw-px-2 lg:tw-px-0 tw-h-12 lg:tw-h-auto tw-flex tw-items-center"
       >
         <Logo
@@ -21,7 +21,7 @@
       </div>
       <WebsiteBreadcrumb v-if="showBreadcrumb" class="tw-hidden lg:tw-flex" />
       <Button
-        v-if="isAdmin || !showBreadcrumb"
+        v-if="isAdminMaker || !showBreadcrumb"
         :label="backButtonLabel"
         variant="no-border"
         icon-left="chevron-left"

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isAdmin" class="tw-p-3">
+  <div v-if="isAdminMaker" class="tw-p-3">
     <p
       class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mb-2 tw-mt-4"
     >
@@ -11,7 +11,7 @@
       :name="name + 'TextStyle'"
       :value="textColorValue"
       :options="colorConvertor.convert(props.styles)"
-      :is-admin="isAdmin"
+      :is-admin-maker="isAdminMaker"
       :logo-theme="logoTheme"
       :show-color-pallet="false"
       :is-toggled="true"
@@ -38,7 +38,7 @@
       :name="name"
       :value="textBackgroundColorValue"
       :options="backgroundColorConvertor.convert(props.styles)"
-      :is-admin="isAdmin"
+      :is-admin-maker="isAdminMaker"
       :show-color-pallet="false"
       :logo-theme="logoTheme"
       :is-toggled="false"
@@ -161,7 +161,7 @@
             :icon-type="'text-color'"
             :disable-transparent="true"
             :value="fontSettings.selectedTextColor"
-            :is-admin="isAdmin"
+            :is-admin-maker="isAdminMaker"
             :logo-theme="logoTheme"
             :is-toggled="true"
             :popup="true"
@@ -248,7 +248,7 @@
             :is-rich-text-editor="true"
             :icon-type="'text-background-color'"
             :value="fontSettings.selectedBackgroundColor"
-            :is-admin="isAdmin"
+            :is-admin-maker="isAdminMaker"
             :logo-theme="logoTheme"
             :is-toggled="true"
             :popup="true"
@@ -569,7 +569,7 @@ const isSpacingDropdownOpen = ref(false);
 const containerStore = useBrandPageContainerStore();
 const uiStore = useUiStore();
 
-const isAdmin = computed(() => containerStore.isAdminMaker);
+const isAdminMaker = computed(() => containerStore.isAdminMaker);
 const logoTheme = computed(() => uiStore.logoTheme);
 
 const fontSettings = reactive({
@@ -686,7 +686,7 @@ const textColorValue = computed(() => toggleTextColor.value);
 watch(
   () => props.styles.color,
   (newColor) => {
-    if (isAdmin.value) {
+    if (isAdminMaker.value) {
       toggleTextColor.value = newColor ?? '';
       isTextColorPickerDisabled.value = hasLogoColorVar(newColor ?? '');
     }
@@ -702,7 +702,7 @@ const textBackgroundColorValue = computed(
 watch(
   () => props.styles.backgroundColor,
   (newColor) => {
-    if (isAdmin.value) {
+    if (isAdminMaker.value) {
       toggleTextBackgroundColor.value = newColor ?? '';
       isBackgroundColorPickerDisabled.value = hasLogoColorVar(newColor ?? '');
     }
@@ -715,7 +715,7 @@ watch(
       ?.color,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   (_newColor) => {
-    if (isAdmin.value) {
+    if (isAdminMaker.value) {
       if (props.textItemIndex !== undefined && selectedGlobalTextStyles) {
         toggleTextColor.value =
           selectedGlobalTextStyles.value.style.color ?? '';
@@ -735,7 +735,7 @@ watch(
   },
 );
 
-if (isAdmin.value) initializeDisabledStates();
+if (isAdminMaker.value) initializeDisabledStates();
 
 watch(
   () => props.styles.textStyleType,
@@ -748,7 +748,7 @@ watch(
       copyGlobalStyleSettings(globalStyle);
 
       // syncing with admin global color match feature
-      if (isAdmin.value) {
+      if (isAdminMaker.value) {
         if (
           globalStyle.color &&
           (globalStyle.color.includes(STYLE_THEME_KEYS.LogoTextColor) ||

package/src/brand-page-maker/components/save-contact/SaveContact.vue

@@ -27,7 +27,7 @@
       </div>
       <div class="tw-flex-none tw-mt-4">
         <div
-          v-if="!isAdmin && !isPrePurchase && isSavingEnabled"
+          v-if="!isAdminMaker && !isPrePurchase && isSavingEnabled"
           class="tw-flex tw-items-center tw-justify-between tw-cursor-pointer tw-gap-1"
           @click="onHideBranding"
         >
@@ -86,7 +86,7 @@ import {
 } from '../../composables/useEventTracker';
 
 interface Props {
-  isAdmin: boolean;
+  isAdminMaker: boolean;
   isPrePurchase: boolean;
   isDesignCom: boolean;
 }

package/src/brand-page-maker/components/shop/ReplaceImageSettingsForShop.vue

@@ -1,7 +1,7 @@
 <template>
   <div data-component="replace-image-settings-for-shop">
     <ReplaceImageBaseSettings
-      :is-admin="false"
+      :is-admin-maker="false"
       :transparent-bg="true"
       mode="images"
       :media-settings="imageSettings"

package/src/brand-page-maker/components/template-preview/TemplatePreview.mixin.ts

@@ -81,7 +81,7 @@ export default defineComponent({
       runtimeEnvironment: computed(
         () => brandPageContainerStore.runtimeEnvironment,
       ),
-      isAdmin: computed(() => brandPageContainerStore.isAdminMaker),
+      isAdminMaker: computed(() => brandPageContainerStore.isAdminMaker),
       userToken: computed(() => brandPageMakerUserStore.userToken),
       isBrandSite: computed(
         () => brandPageMakerStore.brandPageType === BRAND_PAGE_TYPES.brandSite,
@@ -313,7 +313,7 @@ export default defineComponent({
   },
   watch: {
     template() {
-      if (this.isAdmin) {
+      if (this.isAdminMaker) {
         this.updateViewModel();
       } else {
         // Reset loading state when template changes for image-based previews
@@ -323,20 +323,20 @@ export default defineComponent({
     },
     logoTheme: {
       handler() {
-        if (this.isAdmin) {
+        if (this.isAdminMaker) {
           this.updateViewModel();
         }
       },
       deep: true,
     },
     logoImageBase64Url() {
-      if (this.isAdmin) {
+      if (this.isAdminMaker) {
         this.updateViewModel();
       }
     },
     previewImageUrl() {
       // Reset loading state whenever the preview URL changes
-      if (!this.isAdmin) {
+      if (!this.isAdminMaker) {
         this.imageLoading = true;
         this.imageLoadError = false;
       }
@@ -406,7 +406,7 @@ export default defineComponent({
 
     async updateViewModel(forceUpdate = true) {
       // Only update view model for admin or pre-purchase mode
-      if (!this.isAdmin) {
+      if (!this.isAdminMaker) {
         return;
       }
 

package/src/shared/background-settings/components/BackgroundSettings.vue

@@ -47,9 +47,9 @@
             id="background-overlay-color"
             name="overlayColor"
             :value="overlayColorValue"
-            :is-admin="isAdmin"
+            :is-admin-maker="isAdminMaker"
             :logo-theme="logoTheme"
-            :enable-color-match="isAdmin"
+            :enable-color-match="isAdminMaker"
             disable-transparent
             :label="backgroundSettingsTr('overlayColor')"
             @update:model-value="onOverlayColorChange"
@@ -80,7 +80,7 @@
       <!-- Shape section — admin always sees it; customers only when the
            template has at least one shape (main or array). -->
       <CollapsiblePanel
-        v-if="isAdmin || hasSingleShape || hasMultipleShapes"
+        v-if="isAdminMaker || hasSingleShape || hasMultipleShapes"
         data-component="collapsible-panel"
         :title="backgroundSettingsTr('shape')"
       >
@@ -158,7 +158,7 @@ const recommendedLogoColors = computed(
 const logoColors = computed(() => backgroundSettingsStore.logoColors);
 const logoTheme = computed(() => uiStore.logoTheme);
 const backgroundMode = computed(() => backgroundSettingsStore.backgroundMode);
-const isAdmin = computed(() => containerStore.isAdminMaker);
+const isAdminMaker = computed(() => containerStore.isAdminMaker);
 const isPersonalisationEnabled = computed(
   () => uiStore.isPersonalisationEnabled,
 );
@@ -166,7 +166,7 @@ const isPersonalisationEnabled = computed(
 defineEmits(['on-intent-image-replace']);
 
 const showPersonalisationField = computed(() => {
-  return isAdmin.value && isPersonalisationEnabled.value;
+  return isAdminMaker.value && isPersonalisationEnabled.value;
 });
 
 const personalisationRole = computed(() => {
@@ -251,10 +251,10 @@ const hasMultipleShapes = computed(
 
 const shapeTabs = computed(() => {
   const tabs: string[] = [];
-  if (isAdmin.value || hasSingleShape.value) {
+  if (isAdminMaker.value || hasSingleShape.value) {
     tabs.push(backgroundSettingsTr('singleShape'));
   }
-  if (isAdmin.value || hasMultipleShapes.value) {
+  if (isAdminMaker.value || hasMultipleShapes.value) {
     tabs.push(backgroundSettingsTr('multipleShapes'));
   }
   return tabs;

package/src/shared/background-settings/components/MultiBackgroundShapes.vue

@@ -5,9 +5,9 @@
       id="background-shapes"
       name="shapeColor"
       :value="shapeColorValue"
-      :is-admin="isAdmin"
+      :is-admin-maker="isAdminMaker"
       :logo-theme="logoTheme"
-      :enable-color-match="isAdmin"
+      :enable-color-match="isAdminMaker"
       :disable-transparent="true"
       :custom-groups="customGroups"
       :label="backgroundSettingsTr('shapeColor')"
@@ -72,7 +72,7 @@
 
         <template v-if="backgroundShapes[option.index]">
           <!-- Screen placement comes first (admin-only, template building) -->
-          <template v-if="isAdmin">
+          <template v-if="isAdminMaker">
             <p
               class="tw-mt-3 tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mb-1"
             >
@@ -143,7 +143,7 @@
 
     <!-- Adding items is admin-only -->
     <Button
-      v-if="isAdmin"
+      v-if="isAdminMaker"
       variant="outline"
       :label="shapeFieldTr('addItemLabel')"
       size="small"
@@ -187,7 +187,7 @@ defineProps({
 
 const store = useUiBackgroundSettingsStore();
 const containerStore = useBrandPageContainerStore();
-const isAdmin = computed(() => containerStore.isAdminMaker);
+const isAdminMaker = computed(() => containerStore.isAdminMaker);
 
 const {
   backgroundShapes,

package/src/shared/background-settings/components/ReplaceImageSettingsForBackgroundSettings.vue

@@ -4,7 +4,7 @@
       :section-title="sectionTitle"
       :media-settings="mediaSettings"
       :image-extension="mediaExtension"
-      :is-admin="isAdmin"
+      :is-admin-maker="isAdminMaker"
       :mode="backgroundMode"
       :active-tabs="activeTabs"
       :media-type="mediaType"
@@ -58,7 +58,7 @@ const contentSettingsStore = useUiContentSettingsStore();
 const bpEventTracker = useEventTracker();
 
 const backgroundMode = computed(() => backgroundSettingsStore.backgroundMode);
-const isAdmin = computed(() => containerStore.isAdminMaker);
+const isAdminMaker = computed(() => containerStore.isAdminMaker);
 
 const mediaSettings = computed((): ReplaceImageSettingsBase | undefined => {
   return brandPageMakerStore.fieldSettings?.replaceImageSettings;

package/src/shared/background-settings/components/SingleBackgroundShape.vue

@@ -14,9 +14,9 @@
         id="background-shape"
         name="shapeColor"
         :value="shapeColorValue"
-        :is-admin="isAdmin"
+        :is-admin-maker="isAdminMaker"
         :logo-theme="logoTheme"
-        :enable-color-match="isAdmin"
+        :enable-color-match="isAdminMaker"
         :disable-transparent="true"
         :custom-groups="customGroups"
         :label="backgroundSettingsTr('shapeColor')"
@@ -66,7 +66,7 @@ defineProps({
 
 const store = useUiBackgroundSettingsStore();
 const containerStore = useBrandPageContainerStore();
-const isAdmin = computed(() => containerStore.isAdminMaker);
+const isAdminMaker = computed(() => containerStore.isAdminMaker);
 
 const {
   shapeUrl,

package/src/shared/background-settings/components/background-color/BackgroundColorSettings.vue

@@ -4,16 +4,16 @@
       id="background-color"
       name="background"
       :value="backgroundStyles.style.background || ''"
-      :is-admin="isAdmin"
+      :is-admin-maker="isAdminMaker"
       :logo-theme="logoTheme"
-      :enable-color-match="isAdmin"
+      :enable-color-match="isAdminMaker"
       show-gradients
       disable-transparent
       :label="backgroundSettingsTr(`backgroundColor`)"
       @update:model-value="onBackgroundColorChange"
     />
     <HelloBar
-      v-if="colorMatched && isAdmin"
+      v-if="colorMatched && isAdminMaker"
       label="Color Matched Logo"
       description="The color of the background is matched to the customers logo. If you change the color of the background, it will not longer be matched to the customer's logo."
       class="tw-mb-4 tw-mt-4"
@@ -47,7 +47,7 @@ const containerStore = useBrandPageContainerStore();
 const backgroundSettingsStore = useUiBackgroundSettingsStore();
 
 // Computed
-const isAdmin = computed(() => containerStore.isAdminMaker);
+const isAdminMaker = computed(() => containerStore.isAdminMaker);
 const backgroundStyles = computed(
   () => backgroundSettingsStore.backgroundStyles,
 );

package/src/shared/background-settings/components/background-shapes/BackgroundShapeSettings.mixin.ts

@@ -34,7 +34,7 @@ export default defineComponent({
     const backgroundSettingsStore = useUiBackgroundSettingsStore();
 
     return {
-      isAdmin: computed(() => containerStore.isAdminMaker),
+      isAdminMaker: computed(() => containerStore.isAdminMaker),
       backgroundStyles: computed(
         () => backgroundSettingsStore.backgroundStyles,
       ),

package/src/shared/background-settings/components/background-shapes/BackgroundShapeSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <HelloBar
-      v-if="colorMatched && isAdmin"
+      v-if="colorMatched && isAdminMaker"
       label="Color Matched Logo"
       description="The color of the shapes is matched to the customers logo. If you change the color of the shapes, it will not longer be matched to the customer's logo."
       class="tw-mb-4"

package/src/shared/content-settings/components/button-configuration-field/ButtonConfigurationField.vue

@@ -130,13 +130,13 @@ interface Props {
   pages?: Array<{ slug: string; title: string }>;
   titleLength?: number;
   descriptionLength?: number;
-  isAdmin?: boolean;
+  isAdminMaker?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   titleLength: MAX_TITLE_LENGTH,
   descriptionLength: MAX_DESCRIPTION_LENGTH,
-  isAdmin: false,
+  isAdminMaker: false,
   pages: undefined,
 });
 

package/src/shared/content-settings/components/color-field/ColorField.vue

@@ -4,8 +4,8 @@
     class="tw-flex"
     :class="{
       'tw-mt-4': !!label,
-      'tw-flex-col tw-gap-y-2 tw-w-full': isAdmin,
-      'tw-gap-2 tw-justify-between tw-items-center': !isAdmin,
+      'tw-flex-col tw-gap-y-2 tw-w-full': isAdminMaker,
+      'tw-gap-2 tw-justify-between tw-items-center': !isAdminMaker,
     }"
   >
     <span
@@ -18,7 +18,7 @@
       class="tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-between"
     >
       <Toggle
-        v-if="isAdmin && enableColorMatch"
+        v-if="isAdminMaker && enableColorMatch"
         :id="`${id}-${name}-color-matched${toggleIdSuffix}`"
         :model-value="isOptionColorMatched"
         color="info"
@@ -43,7 +43,7 @@
       </div>
 
       <!-- Start Admin Style Theme Key Select -->
-      <div v-if="isAdmin && !isRichTextEditor && isOptionColorMatched">
+      <div v-if="isAdminMaker && !isRichTextEditor && isOptionColorMatched">
         <select
           class="c-select c-button-style tw-border tw-appearance-none tw-border-none tw-h-10 tw-pl-2 tw-rounded tw-cursor-pointer tw-transition-all tw-duration-300 tw-bg-white"
           @change.stop="
@@ -100,7 +100,7 @@ interface Props {
     string | undefined
   >;
   label?: string;
-  isAdmin: boolean;
+  isAdminMaker: boolean;
   logoTheme: LogoTheme;
   toggleUniqueId?: string;
   enableColorMatch?: boolean;
@@ -333,7 +333,7 @@ watch(
       return;
     }
 
-    if (props.isAdmin && !newVal) {
+    if (props.isAdminMaker && !newVal) {
       newColor.value = '';
       changeColor();
       return;

package/src/shared/content-settings/components/color-replacements-field/ColorReplacementsField.vue

@@ -3,8 +3,8 @@
     data-component="color-replacements-field"
     class="tw-flex"
     :class="{
-      'tw-flex-col tw-gap-y-2 tw-w-full': isAdmin,
-      'tw-gap-2 tw-justify-between tw-items-center': !isAdmin,
+      'tw-flex-col tw-gap-y-2 tw-w-full': isAdminMaker,
+      'tw-gap-2 tw-justify-between tw-items-center': !isAdminMaker,
     }"
   >
     <span
@@ -14,7 +14,9 @@
     </span>
     <Toggle
       v-if="
-        isAdmin && data.colorReplacements && data.colorReplacements.length > 0
+        isAdminMaker &&
+        data.colorReplacements &&
+        data.colorReplacements.length > 0
       "
       :id="`${id}-${name}-color-matched${toggleIdSuffix}`"
       :model-value="isOptionColorMatched"
@@ -35,18 +37,18 @@
         :key="`${colorReplacement.attribute}-${colorReplacement.originalColor}`"
       >
         <ColorField
-          v-if="!isAdmin || !isOptionColorMatched"
+          v-if="!isAdminMaker || !isOptionColorMatched"
           name="fill"
           :disable-transparent="true"
           :value="colorReplacement.replacementColor"
-          :is-admin="isAdmin"
+          :is-admin-maker="isAdminMaker"
           :logo-theme="logoTheme"
           @update:model-value="onColorPickerInput($event, index)"
         />
       </div>
       <div
         v-if="
-          isAdmin &&
+          isAdminMaker &&
           data.colorReplacements &&
           data.colorReplacements.length > 0 &&
           isOptionColorMatched
@@ -90,7 +92,7 @@ const props = defineProps<{
   id: string;
   name: string;
   value: ColorReplacement[];
-  isAdmin: boolean;
+  isAdminMaker: boolean;
   label?: string;
   toggleUniqueId?: string;
   logoTheme: LogoTheme;

package/src/shared/content-settings/components/content-settings/ContentSettings.mixin.ts

@@ -59,7 +59,7 @@ export default defineComponent({
       contentSettingsSelectedItemId: computed(
         () => contentSettingsStore.selectedItemId,
       ),
-      isAdmin: computed(() => containerStore.isAdminMaker),
+      isAdminMaker: computed(() => containerStore.isAdminMaker),
       canUseRichTextEditor: computed(
         () => userStore.features.canUseRichTextEditor,
       ),