Web:Studio:Added the "Automatic time zone" method to the LanguageAndTimeZone component. Added HelpButton for StudioTimeLanguageSettings header.Added an image for the HelpButton component.

public/images/combined.shape.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6V9C7 9.55228 6.55228 10 6 10C5.44772 10 5 9.55228 5 9V6ZM6 2C5.44772 2 5 2.44772 5 3C5 3.55228 5.44772 4 6 4C6.55228 4 7 3.55228 7 3C7 2.44772 6.55228 2 6 2Z" fill="#657077"/>
+</svg>

web/ASC.Web.Client/src/components/pages/Settings/categories/common/language-and-time-zone.js

@@ -1,13 +1,12 @@
 import React from "react";
 import { withTranslation } from "react-i18next";
 import styled from "styled-components";
-import { Trans } from "react-i18next";
 import FieldContainer from "@appserver/components/field-container";
-import Text from "@appserver/components/text";
+import ToggleButton from "@appserver/components/toggle-button";
 import ComboBox from "@appserver/components/combobox";
 import Loader from "@appserver/components/loader";
 import toastr from "@appserver/components/toast/toastr";
-import Link from "@appserver/components/link";
+import HelpButton from "@appserver/components/help-button";
 import SaveCancelButtons from "@appserver/components/save-cancel-buttons";
 import { saveToSessionStorage, getFromSessionStorage } from "../../utils";
 import { setDocumentTitle } from "../../../../../helpers/utils";
@@ -15,7 +14,7 @@ import { inject, observer } from "mobx-react";
 import { LANGUAGE } from "@appserver/common/constants";
 import { convertLanguage } from "@appserver/common/utils";
 import withCultureNames from "@appserver/common/hoc/withCultureNames";
-
+import LanguageTimeSettingsTooltip from "./sub-components/common-tooltips";
 const mapTimezonesToArray = (timezones) => {
   return timezones.map((timezone) => {
     return { key: timezone.id, label: timezone.displayName };
@@ -36,7 +35,7 @@ const StyledComponent = styled.div`
   }
 
   .settings-block {
-    margin-bottom: 70px;
+    margin-bottom: 24px;
   }
 
   .field-container-width {
@@ -46,6 +45,43 @@ const StyledComponent = styled.div`
   .combo-button-label {
     max-width: 100%;
   }
+
+  .field-container-flex {
+    max-width: 500px;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
+    margin-bottom: 16px;
+  }
+
+  .toggle {
+    position: inherit;
+    grid-gap: inherit;
+  }
+
+  .title {
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  .save-cancel-buttons {
+    position: inherit;
+    display: block;
+    padding: 0;
+  }
+
+  .category-item-heading {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .category-item-title {
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 22px;
+    margin-right: 4px;
+  }
 `;
 
 let languageFromSessionStorage = "";
@@ -297,38 +333,28 @@ class LanguageAndTimeZone extends React.Component {
       showReminder,
     } = this.state;
 
-    const supportEmail = "documentation@onlyoffice.com";
-    const tooltipLanguage = (
-      <Text fontSize="13px">
-        <Trans t={t} i18nKey="NotFoundLanguage" ns="Common">
-          "In case you cannot find your language in the list of the available
-          ones, feel free to write to us at
-          <Link href={`mailto:${supportEmail}`} isHovered={true}>
-            {{ supportEmail }}
-          </Link>{" "}
-          to take part in the translation and get up to 1 year free of charge."
-        </Trans>{" "}
-        <Link
-          isHovered={true}
-          href="https://helpcenter.onlyoffice.com/ru/guides/become-translator.aspx"
-        >
-          {t("Common:LearnMore")}
-        </Link>
-      </Text>
-    );
+    const tooltipLanguageTimeSettings = <LanguageTimeSettingsTooltip t={t} />;
 
     return !isLoadedData ? (
       <Loader className="pageLoader" type="rombs" size="40px" />
     ) : (
       <>
         <StyledComponent>
+          <div className="category-item-heading">
+            <div className="category-item-title">
+              {t("StudioTimeLanguageSettings")}
+            </div>
+            <HelpButton
+              iconName="static/images/combined.shape.svg"
+              size={12}
+              tooltipContent={tooltipLanguageTimeSettings}
+            />
+          </div>
           <div className="settings-block">
             <FieldContainer
               id="fieldContainerLanguage"
               className="field-container-width"
               labelText={`${t("Common:Language")}:`}
-              tooltipContent={tooltipLanguage}
-              helpButtonHeaderContent={t("Common:Language")}
               isVertical={true}
             >
               <ComboBox
@@ -345,6 +371,14 @@ class LanguageAndTimeZone extends React.Component {
               />
             </FieldContainer>
 
+            <div className="field-container-flex">
+              <div className="title">{`${t("Automatic time zone")}`}</div>
+              <ToggleButton
+                className="toggle"
+                onChange={() => toastr.info(<>Not implemented</>)}
+              />
+            </div>
+
             <FieldContainer
               id="fieldContainerTimezone"
               className="field-container-width"
@@ -367,6 +401,7 @@ class LanguageAndTimeZone extends React.Component {
           </div>
           {hasChanged && (
             <SaveCancelButtons
+              className="save-cancel-buttons"
               onSaveClick={this.onSaveLngTZSettings}
               onCancelClick={this.onCancelClick}
               showReminder={showReminder}