@griddo/ax 1.56.9 → 1.57.2

package/src/modules/Settings/Globals/index.tsx

@@ -1,49 +1,41 @@
-import { IImage, INavItem, IRootState, ISettingsForm } from "@ax/types";
-import { themes } from "components";
-import React, { useEffect } from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
+import { themes } from "components";
 
+import { IImage, INavItem, IRootState, ISettingsForm } from "@ax/types";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty } from "@ax/hooks";
-
 import { appActions } from "@ax/containers/App";
 import { FieldsBehavior, FieldGroup, MainWrapper, ErrorToast, Nav } from "@ax/components";
 import { sitesActions } from "@ax/containers/Sites";
-import { setIsSavedData } from "@ax/forms";
 
 import { timezones } from "./constants";
-
 import * as S from "./style";
 
 const Globals = (props: IProps): JSX.Element => {
-  const { isSaving, updateFormValue, currentSiteInfo, form, saveSettings, setHistoryPush, navItems, currentNavItem } =
+  const { isSaving, currentSiteInfo, saveSettings, setHistoryPush, navItems, currentNavItem } =
     props;
-  const { name, timezone, theme, favicon, smallAvatar, bigAvatar, thumbnail } = form;
 
   const title = "General settings";
 
-  const { isDirty } = useIsDirty(form);
+  const [form, setForm] = useState(currentSiteInfo);
+  const { name, timezone, theme, favicon, smallAvatar, bigAvatar, thumbnail } = form;
 
-  const setValue = (name: string, value: string) => updateFormValue({ [name]: value });
+  const { isDirty, setIsDirty } = useIsDirty(form);
 
-  const setNameValue = (value: string) => updateFormValue({ name: value });
-  const setTimezoneValue = (value: string) => updateFormValue({ timezone: value });
-  const setThemeValue = (value: string) => updateFormValue({ theme: value });
-  const setFaviconValue = (value: IImage) => updateFormValue({ favicon: value.url ? value.url : null });
-  const setSmallAvatarValue = (value: IImage) => updateFormValue({ smallAvatar: value.url ? value.url : null });
-  const setBigAvatarValue = (value: IImage) => updateFormValue({ bigAvatar: value.url ? value.url : null });
-  const setThumbnailValue = (value: IImage) => updateFormValue({ thumbnail: value.url ? value.url : null });
+  const setValue = (newValue: Record<string, string | null>) => setForm((state: ISettingsForm) => ({ ...state, ...newValue }));
 
-  useEffect(() => {
-    if (currentSiteInfo) {
-      Object.keys(form).forEach((key) => setValue(key, currentSiteInfo[key]));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const setNameValue = (value: string) => setValue({ name: value });
+  const setTimezoneValue = (value: string) => setValue({ timezone: value });
+  const setThemeValue = (value: string) => setValue({ theme: value });
+  const setFaviconValue = (value: IImage) => setValue({ favicon: value.url ? value.url : null });
+  const setSmallAvatarValue = (value: IImage) => setValue({ smallAvatar: value.url ? value.url : null });
+  const setBigAvatarValue = (value: IImage) => setValue({ bigAvatar: value.url ? value.url : null });
+  const setThumbnailValue = (value: IImage) => setValue({ thumbnail: value.url ? value.url : null });
 
-  const saveForm = () => {
-    setIsSavedData(true);
-    saveSettings();
+  const saveForm = async () => {
+    const isSaved = await saveSettings(form);
+    if (isSaved) setIsDirty(false);
   };
 
   const rightButtonProps = {
@@ -142,24 +134,20 @@ const Globals = (props: IProps): JSX.Element => {
 interface IProps {
   isSaving: boolean;
   currentSiteInfo: any;
-  form: ISettingsForm;
   navItems: INavItem[];
   currentNavItem: INavItem;
-  updateFormValue(value: any): void;
-  saveSettings(): void;
+  saveSettings(form: ISettingsForm): Promise<boolean>;
   setHistoryPush(path: string, isEditor?: boolean): void;
 }
 
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
-  updateFormValue: sitesActions.updateFormValue,
   saveSettings: sitesActions.saveSettings,
 };
 
 const mapStateToProps = (state: IRootState) => ({
   isSaving: state.app.isSaving,
   currentSiteInfo: state.sites.currentSiteInfo,
-  form: state.sites.form,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Globals);

package/src/modules/Settings/Languages/LanguagePanel/Form/index.tsx

@@ -33,7 +33,7 @@ const Form = (props: IProps): JSX.Element => {
     );
 
   const pathText =
-    "This domain is for the site on this language. Please, fill with the complete subdomain, included the locale prefix. Example: /the-site-url";
+    "This path is for the site on this language. Please, fill with the complete subdomain, included the locale prefix. Example: /es/name-of-school";
 
   return (
     <>

package/src/modules/Settings/Languages/Table/Item/index.tsx

@@ -77,7 +77,7 @@ const Item = (props: IItemProps): JSX.Element => {
         </S.FlagWrapper>
         {item.language}
         <S.Default>{item.isDefault ? "Default" : ""}</S.Default>
-        <FloatingMenu Button={MoreInfoButton} isWide={false}>
+        <FloatingMenu Button={MoreInfoButton}>
           {ActionMenu(actionMenuOptions)}
         </FloatingMenu>
       </S.Component>

package/src/modules/Settings/Social/index.tsx

@@ -1,5 +1,5 @@
 import { INavItem, IRootState, ISocialState } from "@ax/types";
-import React, { useCallback, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
 import { RouteLeavingGuard } from "@ax/guards";
@@ -8,47 +8,46 @@ import { useIsDirty } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
 import { FieldsBehavior, MainWrapper, ErrorToast, Nav } from "@ax/components";
 import { socialActions } from "@ax/containers/Settings/Social";
-import { setIsSavedData } from "@ax/forms";
 
 import * as S from "./style";
 
 const Social = (props: IProps): JSX.Element => {
-  const { isSaving, navItems, currentNavItem, updateFormValue, socialInfo, saveSocial, getSocial, setHistoryPush } =
+  const { isSaving, navItems, currentNavItem, socialInfo, saveSocial, getSocial, setHistoryPush } =
     props;
-  const { instagram, linkedIn, facebook, twitter, youTube, flicker, tiktok, snapchat, newsletter } = socialInfo;
 
   const title = "Social";
 
-  const { isDirty } = useIsDirty(socialInfo);
+  const socialFields: { name: string, title: string }[] = [
+    { name: "instagram", title: "Instagram URL" },
+    { name: "linkedIn", title: "LinkedIn URL" },
+    { name: "facebook", title: "Facebook URL" },
+    { name: "twitter", title: "Twitter URL" },
+    { name: "youtube", title: "YouTube URL" },
+    { name: "flicker", title: "Flicker URL" },
+    { name: "tiktok", title: "Tiktok URL" },
+    { name: "snapchat", title: "Snapchat URL" },
+    { name: "newsletter", title: "Newsletter URL" },
+  ];
 
-  const setValue = (name: string, value: string) => updateFormValue({ [name]: value });
+  const [socialForm, setSocialForm] = useState<Record<string, string>>({});
+  const changeSocialForm = (field: string, value: string) => setSocialForm((state) => ({ ...state, [field]: value }));
 
-  const setInstagramValue = (instagram: string) => updateFormValue({ instagram });
-  const setLinkedInValue = (linkedIn: string) => updateFormValue({ linkedIn });
-  const setFacebookValue = (facebook: string) => updateFormValue({ facebook });
-  const setTwitterValue = (twitter: string) => updateFormValue({ twitter });
-  const setYouTubeValue = (youTube: string) => updateFormValue({ youTube });
-  const setFlickerValue = (flicker: string) => updateFormValue({ flicker });
-  const setTikTokValue = (tiktok: string) => updateFormValue({ tiktok });
-  const setSnapchatValue = (snapchat: string) => updateFormValue({ snapchat });
-  const setNewsletterValue = (newsletter: string) => updateFormValue({ newsletter });
+  const { isDirty, resetDirty, setIsDirty } = useIsDirty(socialForm);
 
   useEffect(() => {
-    if (socialInfo) {
-      Object.keys(socialInfo).forEach((key) => setValue(key, socialInfo[key]));
-    }
+    getSocial();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const memoizedGetSocial = useCallback(() => getSocial(), [getSocial]);
-
   useEffect(() => {
-    memoizedGetSocial();
-  }, [memoizedGetSocial]);
+    setSocialForm({ ...socialInfo });
+    resetDirty();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [socialInfo]);
 
-  const saveForm = () => {
-    setIsSavedData(true);
-    saveSocial();
+  const saveForm = async () => {
+    const isSaved = await saveSocial(socialForm);
+    if (isSaved) setIsDirty(false);
   };
 
   const rightButtonProps = {
@@ -77,69 +76,16 @@ const Social = (props: IProps): JSX.Element => {
           <S.ContentWrapper>
             <ErrorToast />
             <S.FormWrapper>
-              <FieldsBehavior
-                title="Instagram URL"
-                name="instagram"
-                fieldType="TextField"
-                value={instagram || ""}
-                onChange={setInstagramValue}
-              />
-              <FieldsBehavior
-                title="LinkedIn URL"
-                name="linkedIn"
-                fieldType="TextField"
-                value={linkedIn || ""}
-                onChange={setLinkedInValue}
-              />
-              <FieldsBehavior
-                title="Facebook URL"
-                name="facebook"
-                fieldType="TextField"
-                value={facebook || ""}
-                onChange={setFacebookValue}
-              />
-              <FieldsBehavior
-                title="Twitter URL"
-                name="twitter"
-                fieldType="TextField"
-                value={twitter || ""}
-                onChange={setTwitterValue}
-              />
-              <FieldsBehavior
-                title="YouTube URL"
-                name="youTube"
-                fieldType="TextField"
-                value={youTube || ""}
-                onChange={setYouTubeValue}
-              />
-              <FieldsBehavior
-                title="Flicker URL"
-                name="flicker"
-                fieldType="TextField"
-                value={flicker || ""}
-                onChange={setFlickerValue}
-              />
-              <FieldsBehavior
-                title="TikTok URL"
-                name="tiktok"
-                fieldType="TextField"
-                value={tiktok || ""}
-                onChange={setTikTokValue}
-              />
-              <FieldsBehavior
-                title="Snapchat URL"
-                name="snapchat"
-                fieldType="TextField"
-                value={snapchat || ""}
-                onChange={setSnapchatValue}
-              />
-              <FieldsBehavior
-                title="Newsletter URL"
-                name="newsletter"
-                fieldType="TextField"
-                value={newsletter || ""}
-                onChange={setNewsletterValue}
-              />
+              {socialFields.map((field, idx) => (
+                <FieldsBehavior
+                  key={idx}
+                  title={field.title}
+                  name={field.name}
+                  fieldType="TextField"
+                  value={socialForm[field.name] || ""}
+                  onChange={(value: string) => changeSocialForm(field.name, value)}
+                />
+              ))}
             </S.FormWrapper>
           </S.ContentWrapper>
         </S.Wrapper>
@@ -153,15 +99,13 @@ interface IProps {
   socialInfo: ISocialState;
   navItems: INavItem[];
   currentNavItem: INavItem;
-  updateFormValue(value: any): void;
-  saveSocial(): void;
+  saveSocial: (form: Record<string, string>) => Promise<boolean>;
   getSocial(): void;
   setHistoryPush(path: string, isEditor?: boolean): void;
 }
 
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
-  updateFormValue: socialActions.updateFormValue,
   saveSocial: socialActions.saveSocial,
   getSocial: socialActions.getSocial,
 };

package/src/modules/Sites/SitesList/SiteModal/index.tsx

@@ -3,31 +3,24 @@ import { connect } from "react-redux";
 
 import { IRootState, ILanguage, ISettingsForm } from "@ax/types";
 import { slugify } from "@ax/helpers";
-
 import { ErrorToast, FieldsBehavior } from "@ax/components";
-import { sitesActions } from "@ax/containers/Sites";
 
 import * as S from "./style";
 
 const SiteModal = (props: ISiteModalProps): JSX.Element => {
-  const { languages, updateFormValue, form } = props;
+  const { languages, form, setForm } = props;
   const { name, defaultLanguage, path, domain } = form;
-  const globalDefaultLang = languages.find((lang: any) => lang.isDefault);
-
-  const setNameValue = (value: string) => {
-    updateFormValue({ name: value });
-    updateFormValue({ path: slugify(value) });
-  };
+  const globalDefaultLang = languages?.find((lang: ILanguage) => lang.isDefault);
 
-  const setLangValue = (value: number) => updateFormValue({ defaultLanguage: value });
+  const updateForm = (newValue: Record<string, string | number>) => setForm((state: ISettingsForm) => ({ ...state, ...newValue }));
 
-  const setPathValue = (value: string) => updateFormValue({ path: value });
-
-  const setDomainValue = (value: number) => updateFormValue({ domain: value });
+  const setNameValue = (value: string) => updateForm({ name: value, path: slugify(value) });
+  const setLangValue = (value: number) => updateForm({ defaultLanguage: value });
+  const setPathValue = (value: string) => updateForm({ path: value });
+  const setDomainValue = (value: number) => updateForm({ domain: value });
 
   useEffect(() => {
     globalDefaultLang && setLangValue(globalDefaultLang.id);
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -86,22 +79,14 @@ const SiteModal = (props: ISiteModalProps): JSX.Element => {
 
 const mapStateToProps = (state: IRootState) => ({
   languages: state.app.globalLangs,
-  form: state.sites.form,
 });
 
 interface IStateProps {
-  languages: ILanguage[];
-  form: ISettingsForm;
+  languages?: ILanguage[];
+  form: { name: string, defaultLanguage: number | null, path: string, domain: string | null };
+  setForm: React.Dispatch<React.SetStateAction<any>>;
 }
 
-interface IDispatchProps {
-  updateFormValue: (value: any) => void;
-}
-
-const mapDispatchToProps = {
-  updateFormValue: sitesActions.updateFormValue,
-};
-
-type ISiteModalProps = IDispatchProps & IStateProps;
+type ISiteModalProps = IStateProps;
 
-export default connect(mapStateToProps, mapDispatchToProps)(SiteModal);
+export default connect(mapStateToProps, null)(SiteModal);

package/src/modules/Sites/SitesList/index.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { IRootState, ISettingsForm, ISite } from "@ax/types";
+import { ISettingsForm, ISite } from "@ax/types";
 import { useModal } from "@ax/hooks";
 import { MainWrapper, Modal, ErrorToast } from "@ax/components";
 
@@ -13,12 +13,19 @@ import SiteItem from "./SiteItem";
 import * as S from "./style";
 
 const SitesList = (props: IProps): JSX.Element => {
-  const { sites, resetForm, saveSettings, setHistoryPush, form } = props;
+  const { sites, saveSettings, setHistoryPush } = props;
+
+  const initialState = {
+    name: "",
+    defaultLanguage: null,
+    path: "",
+    domain: null,
+  };
+  const [form, setForm] = useState(initialState);
 
   const { isOpen, toggleModal } = useModal();
 
   const openModal = () => {
-    resetForm();
     toggleModal();
   };
 
@@ -28,7 +35,7 @@ const SitesList = (props: IProps): JSX.Element => {
   };
 
   const saveSiteSettings = async () => {
-    const result = await saveSettings();
+    const result = await saveSettings(form);
     if (result) {
       const contentPath = "/sites/settings/globals";
       setHistoryPush(contentPath, false);
@@ -59,7 +66,7 @@ const SitesList = (props: IProps): JSX.Element => {
         mainAction={mainAction}
         secondaryAction={secondaryAction}
       >
-        <SiteModal />
+        <SiteModal form={form} setForm={setForm} />
       </Modal>
     </MainWrapper>
   );
@@ -67,25 +74,18 @@ const SitesList = (props: IProps): JSX.Element => {
 
 interface ISitesProps {
   sites: ISite[];
-  form: ISettingsForm;
 }
 
 interface IDispatchProps {
   setHistoryPush(path: string, isEditor?: boolean): void;
-  saveSettings(): Promise<boolean>;
-  resetForm(): void;
+  saveSettings(form: ISettingsForm): Promise<boolean>;
 }
 
-const mapStateToProps = (state: IRootState) => ({
-  form: state.sites.form,
-});
-
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   saveSettings: sitesActions.saveSettings,
-  resetForm: sitesActions.resetForm,
 };
 
 type IProps = ISitesProps & IDispatchProps;
 
-export default connect(mapStateToProps, mapDispatchToProps)(SitesList);
+export default connect(null, mapDispatchToProps)(SitesList);

package/src/modules/StructuredData/StructuredDataList/ContentFilters/index.tsx

@@ -45,7 +45,9 @@ const ContentFilters = (props: IProps): JSX.Element => {
                 return (
                   <MenuItem key={filterKey} onClick={handleClick} extendedAction={isSelected ? extendedAction : null}>
                     <NavLink to="#" className={selectedClass}>
-                      {name}
+                      <S.Link active={isSelected}>
+                        {name}
+                      </S.Link>
                     </NavLink>
                   </MenuItem>
                 );

package/src/modules/StructuredData/StructuredDataList/ContentFilters/style.tsx

@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 export const Heading = styled.li`
   ${p => p.theme.textStyle.headingXXS};
+  color: ${p => p.theme.color.textLowEmphasis};
   margin-bottom: ${p => p.theme.spacing.xs};
   cursor: default;
 
@@ -33,6 +34,10 @@ export const SubItem = styled.li`
   }
 `;
 
-export const Item = styled.article`
+export const Item = styled.div`
   margin-bottom: ${p => p.theme.spacing.m};
 `;
+
+export const Link = styled.div<{ active: boolean }>`
+    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+`;

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -92,7 +92,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const SeoTitleMenu = () => {
     if (metaTitle) {
       return (
-        <FloatingMenu isWide={true} Button={SeoItems.Title}>
+        <FloatingMenu Button={SeoItems.Title}>
           <S.FloatingSeo>{metaTitle}</S.FloatingSeo>
         </FloatingMenu>
       );
@@ -103,7 +103,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const SeoDescriptionMenu = () => {
     if (metaDescription) {
       return (
-        <FloatingMenu isWide={true} Button={SeoItems.Description}>
+        <FloatingMenu Button={SeoItems.Description}>
           <S.FloatingSeo>{metaDescription}</S.FloatingSeo>
         </FloatingMenu>
       );
@@ -287,7 +287,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   );
 
   const translations = isTranslatable ? (
-    <FloatingMenu Button={FlagsButton} isWide={true}>
+    <FloatingMenu Button={FlagsButton}>
       {languageMenu()}
     </FloatingMenu>
   ) : (

package/src/modules/StructuredData/StructuredDataList/HeaderMenus/Live/index.tsx

@@ -80,7 +80,7 @@ const Live = (props: ILiveProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left" closeOnSelect={false}>
+    <FloatingMenu Button={Header} position="left" closeOnSelect={false}>
       <ListTitle>Filter by status</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup options={options} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />

package/src/modules/StructuredData/StructuredDataList/HeaderMenus/Name/index.tsx

@@ -28,12 +28,18 @@ const NameHeader = ({ sortItems, sortedState }: INameHeaderProps) => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left">
+    <FloatingMenu Button={Header} position="left">
       <ListTitle>Name Sorting</ListTitle>
-      <ListItem onClick={sortAscendingName}>Ascendent</ListItem>
-      <ListItem onClick={sortDescendingName}>Descendent</ListItem>
+      <ListItem isSelected={sortedByTitle && isAscending} onClick={sortAscendingName}>
+        Ascendent
+      </ListItem>
+      <ListItem isSelected={sortedByTitle && !isAscending} onClick={sortDescendingName}>
+        Descendent
+      </ListItem>
       <ListTitle>URL Sorting</ListTitle>
-      <ListItem onClick={sortAscendingURL}>Ascendent</ListItem>
+      <ListItem isSelected={sortedByURL} onClick={sortAscendingURL}>
+        Ascendent
+      </ListItem>
     </FloatingMenu>
   );
 };

package/src/modules/StructuredData/StructuredDataList/HeaderMenus/Site/index.tsx

@@ -74,7 +74,7 @@ const Site = (props: ISiteProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left" closeOnSelect={false} isCheckGroup={true}>
+    <FloatingMenu Button={Header} position="left" closeOnSelect={false} isCheckGroup={true}>
       <ListTitle>Filter by Site</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup options={options} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />

package/src/modules/StructuredData/StructuredDataList/HeaderMenus/Status/index.tsx

@@ -27,10 +27,14 @@ const Status = ({ sortItems, sortedState }: IStatusProps) => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left">
+    <FloatingMenu Button={Header} position="left">
       <ListTitle>Sort by modified date</ListTitle>
-      <ListItem onClick={sortMostRecentModifiedDate}>Most recent</ListItem>
-      <ListItem onClick={sortOldestModifiedDate}>Oldest</ListItem>
+      <ListItem isSelected={sortedByDate && !isAscending} onClick={sortMostRecentModifiedDate}>
+        Most recent
+      </ListItem>
+      <ListItem isSelected={sortedByDate && isAscending} onClick={sortOldestModifiedDate}>
+        Oldest
+      </ListItem>
     </FloatingMenu>
   );
 };

package/src/modules/StructuredData/StructuredDataList/HeaderMenus/Translations/index.tsx

@@ -49,7 +49,7 @@ const Translations = (props: ITranslationsProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
+    <FloatingMenu Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
       <ListTitle>Filter by translations</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup options={filters} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />

package/src/modules/StructuredData/StructuredDataList/HeaderMenus/Types/index.tsx

@@ -36,7 +36,7 @@ const Types = ({ filterItems }: ITypesProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
+    <FloatingMenu Button={Header} position="left" closeOnSelect={true} isCheckGroup={true}>
       <ListTitle>Filter by type</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup

package/src/modules/StructuredData/StructuredDataList/OptionTable/index.tsx

@@ -72,11 +72,14 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
       <S.Column>
         {filters.map((item: IStructuredDataFilter, i: number) => {
           const displayFilteredOptions = () => state.selectedType !== item.value && displayOptions(item);
-          const isSelected = item.value === state.selectedType ? "selected" : "";
+          const isSelected = item.value === state.selectedType;
+          const selectedClass = isSelected ? "selected" : "";
           return (
             <MenuItem key={`${item.value}${i}`}>
-              <S.NavLink onClick={displayFilteredOptions} className={isSelected}>
-                {item.label}
+              <S.NavLink onClick={displayFilteredOptions} className={selectedClass}>
+                <S.Link active={isSelected}>
+                  {item.label}
+                </S.Link>
               </S.NavLink>
             </MenuItem>
           );

package/src/modules/StructuredData/StructuredDataList/OptionTable/style.tsx

@@ -48,3 +48,7 @@ export const Thumbnail = styled.div<{ backgroundUrl: string | boolean }>`
   min-width: calc(${(p) => p.theme.spacing.l} * 3);
   height: 100%;
 `;
+
+export const Link = styled.div<{ active: boolean }>`
+    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+`;

package/src/modules/StructuredData/StructuredDataList/StructuredDataItem/index.tsx

@@ -141,7 +141,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 
   const translations =
     currentStructuredData && currentStructuredData.translate ? (
-      <FloatingMenu Button={FlagsButton} isWide={true}>
+      <FloatingMenu Button={FlagsButton}>
         {languageMenu()}
       </FloatingMenu>
     ) : (

package/src/modules/Users/UserList/HeaderMenus/Name/index.tsx

@@ -28,13 +28,21 @@ const NameHeader = ({ sortItems, sortedState }: INameHeaderProps) => {
   );
 
   return (
-    <FloatingMenu isWide={true} Button={Header} position="left">
+    <FloatingMenu Button={Header} position="left">
       <ListTitle>Name Sorting</ListTitle>
-      <ListItem onClick={sortAscendingName}>Ascendent</ListItem>
-      <ListItem onClick={sortDescendingName}>Descendent</ListItem>
+      <ListItem isSelected={sortedByName && isAscending} onClick={sortAscendingName}>
+        Ascendent
+      </ListItem>
+      <ListItem isSelected={sortedByName && !isAscending} onClick={sortDescendingName}>
+        Descendent
+      </ListItem>
       <ListTitle>Date Created Sorting</ListTitle>
-      <ListItem onClick={sortAscendingDateCreated}>Ascendent</ListItem>
-      <ListItem onClick={sortDescendingDateCreated}>Descendent</ListItem>
+      <ListItem isSelected={sortedByDateCreated && isAscending} onClick={sortAscendingDateCreated}>
+        Ascendent
+      </ListItem>
+      <ListItem isSelected={sortedByDateCreated && !isAscending} onClick={sortDescendingDateCreated}>
+        Descendent
+      </ListItem>
     </FloatingMenu>
   );
 };

package/src/schemas/index.tsx

@@ -0,0 +1,7 @@
+import pageSchemas from "./pages";
+
+const fixedSchemas = {
+  ...pageSchemas,
+};
+
+export { fixedSchemas, pageSchemas };