Web:Client:Fix styles Apperance.

packages/client/src/pages/PortalSettings/categories/common/appearance.js

@@ -29,7 +29,6 @@ const Appearance = (props) => {
     sendAppearanceTheme,
     getAppearanceTheme,
     currentColorScheme,
-
     tReady,
     t,
   } = props;
@@ -373,14 +372,9 @@ const Appearance = (props) => {
               </div>
             );
           })}
-
-          {/* <div className="add-theme box" onClick={onAddTheme}>
-          <img src="/static/images/plus.theme.svg" />
-        </div> */}
         </div>
       </div>
 
-      {/* <div onClick={onClickEdit}>Edit color scheme</div> */}
       <ColorSchemeDialog
         nodeButtonsColor={nodeButtonsColor}
         nodeAccentColor={nodeAccentColor}

packages/client/src/pages/PortalSettings/categories/common/settingsAppearance/StyledApperance.js

@@ -1,22 +1,21 @@
-import styled, { css } from "styled-components";
-import { Base } from "@docspace/components/themes";
+import styled from "styled-components";
 
 const StyledComponent = styled.div`
-  padding-top: 5px;
+  padding-top: 3px;
   width: 100%;
 
   .header {
     font-weight: 700;
-    font-size: 18px;
-    line-height: 24px;
+    font-size: 16px;
+    line-height: 22px;
   }
 
   .preview-header {
-    padding-bottom: 8px;
+    padding-bottom: 20px;
   }
 
   .theme-standard {
-    padding-top: 16px;
+    padding-top: 21px;
   }
 
   .theme-name {
@@ -26,7 +25,7 @@ const StyledComponent = styled.div`
   }
 
   .theme-container {
-    padding: 16px 0 16px 0;
+    padding: 12px 0 24px 0;
     display: flex;
   }
 
@@ -50,7 +49,7 @@ const StyledComponent = styled.div`
   }
 
   .buttons-container {
-    padding-top: 32px;
+    padding-top: 24px;
   }
 `;
 

packages/client/src/pages/PortalSettings/categories/common/settingsAppearance/StyledPreview.js

@@ -59,12 +59,13 @@ const StyledComponent = styled.div`
   }
 
   .main-button-container {
-    margin: 0px 20px 24px;
+    margin: 0px 20px 23px;
   }
 
   .main-button-preview {
     cursor: auto;
     background-color: ${(props) => props.colorPreview};
+    border-radius: 3px;
   }
 
   .color-badge > div {
@@ -106,7 +107,7 @@ const StyledComponent = styled.div`
     display: flex;
     align-items: center;
 
-    padding: 10px 20px 0px;
+    padding: 10px 32px 0px;
 
     &:not(:last-child) {
       padding-bottom: 10px;
@@ -120,7 +121,7 @@ const StyledComponent = styled.div`
 
   .title-section {
     height: 12px;
-    margin: 0px 20px 4px;
+    margin: 0px 32px 4px;
   }
 
   .menu-badge {
@@ -130,6 +131,8 @@ const StyledComponent = styled.div`
   }
 
   .select {
+    padding-top: 9px;
+    padding-bottom: 9px !important;
     background: ${(props) =>
       props.themePreview === "Light" ? "#f0f0f0" : "#333333"};
   }
@@ -147,7 +150,7 @@ const StyledComponent = styled.div`
     border-width: 1px;
     border-style: solid;
     border-radius: 12px;
-    margin-bottom: 15px;
+    margin-bottom: 16px;
   }
 
   .background {
@@ -159,7 +162,7 @@ const StyledComponent = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16px 22px 16px 16px;
+    padding: 16px 16px 14px 16px;
     height: 30px;
   }
 
@@ -173,7 +176,7 @@ const StyledComponent = styled.div`
   }
 
   .action-button {
-    width: 66px;
+    width: 72px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -198,11 +201,12 @@ const StyledComponent = styled.div`
   .section-badge {
     border: none;
     cursor: auto;
-    padding-right: 10px;
+    padding-right: 12px;
+    font-size: 9px;
   }
 
   .pin {
-    padding-right: 4px;
+    padding-right: 14px;
 
     path {
       fill: ${(props) =>

packages/client/src/pages/PortalSettings/categories/common/sub-components/colorSchemeDialog.js

@@ -83,9 +83,6 @@ const ColorSchemeDialog = (props) => {
       </ModalDialog.Body>
 
       <ModalDialog.Footer>
-        {viewMobile && openHexColorPickerAccent && nodeHexColorPickerAccent}
-        {viewMobile && openHexColorPickerButtons && nodeHexColorPickerButtons}
-
         <>
           {showSaveButtonDialog && (
             <Button