Client: Profile: fix style, add mobile view

packages/client/src/pages/Profile/Section/Body/index.js

@@ -22,6 +22,7 @@ const Wrapper = styled.div`
 
   @media ${tablet} {
     width: 100%;
+    max-width: 100%;
   }
 `;
 

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}
         />
       </div>
+
+      <div className="mobile-themes-container">
+        <RadioButtonGroup
+          orientation="vertical"
+          name="interface-theme"
+          options={[
+            { value: ThemeKeys.BaseStr, label: t("LightTheme") },
+            { value: ThemeKeys.DarkStr, label: t("DarkTheme") },
+          ]}
+          onClick={onChangeTheme}
+          selected={theme}
+          spacing="12px"
+          isDisabled={isSystemTheme}
+        />
+      </div>
     </StyledWrapper>
   );
 };

packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js

@@ -1,10 +1,17 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { tablet } from "@docspace/components/utils/device";
 
 export const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
   border: ${(props) => props.theme.profile.themePreview.border};
   border-radius: 12px;
+  height: 284px;
+  width: 318px;
+
+  @media ${tablet} {
+    width: 100%;
+  }
 
   .header {
     padding: 12px 20px;
@@ -14,6 +21,7 @@ export const StyledWrapper = styled.div`
 
 export const StyledPreview = styled.div`
   display: flex;
+  flex-direction: row;
   overflow: hidden;
 
   .article {

packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/theme-preview.js

@@ -2,7 +2,6 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import RadioButton from "@docspace/components/radio-button";
 import Text from "@docspace/components/text";
-//import ThemeProvider from "@docspace/components/theme-provider";
 
 import { StyledWrapper, StyledPreview } from "./styled-preview";
 
@@ -16,6 +15,7 @@ const ThemePreview = (props) => {
     onChangeTheme,
     value,
   } = props;
+
   return (
     <StyledWrapper>
       <div className="header">