diff --git a/packages/client/src/pages/Profile/Section/Body/index.js b/packages/client/src/pages/Profile/Section/Body/index.js index a7b4552fd6..a057c0e88d 100644 --- a/packages/client/src/pages/Profile/Section/Body/index.js +++ b/packages/client/src/pages/Profile/Section/Body/index.js @@ -22,6 +22,7 @@ const Wrapper = styled.div` @media ${tablet} { width: 100%; + max-width: 100%; } `; diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js index 4a79ddfbcb..85679d8718 100644 --- a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js +++ b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/index.js @@ -5,12 +5,15 @@ import { inject, observer } from "mobx-react"; import Text from "@docspace/components/text"; import Checkbox from "@docspace/components/checkbox"; +import RadioButtonGroup from "@docspace/components/radio-button-group"; import { ThemeKeys } from "@docspace/common/constants"; import ThemePreview from "./theme-preview"; import { Base, Dark } from "@docspace/components/themes"; +import { smallTablet } from "@docspace/components/utils/device"; + const StyledWrapper = styled.div` display: flex; flex-direction: column; @@ -23,7 +26,21 @@ const StyledWrapper = styled.div` .themes-container { display: flex; + flex-wrap: wrap; gap: 20px; + + @media ${smallTablet} { + display: none; + } + } + + .mobile-themes-container { + display: none; + + @media ${smallTablet} { + display: flex; + padding-left: 30px; + } } `; @@ -31,8 +48,6 @@ const InterfaceTheme = (props) => { const { t } = useTranslation(["Profile", "Common"]); const { theme, changeTheme, setIsLoading } = props; - console.log(theme); - const themeChange = async (theme) => { try { setIsLoading(true); @@ -49,7 +64,6 @@ const InterfaceTheme = (props) => { }; const onChangeSystemTheme = (e) => { - console.log(e); const isChecked = (e.currentTarget || e.target).checked; if (!isChecked) { @@ -98,6 +112,21 @@ const InterfaceTheme = (props) => { onChangeTheme={onChangeTheme} /> + +