Separate the title from the description

frontend/src/components/Footer/index.jsx

@@ -13,7 +13,7 @@ function Footer() {
     <footer className="bg-dark border-top border-secondary pt-4 pb-5">
       <Container>
         <Row className="gy-2 gx-5 row-cols-1 row-cols-sm-2 row-cols-md-3 row pt-3">
-          <Col md={5} lg={5}>
+          <Col lg={5} md={5}>
             <Nav as="ul" className="flex-column align-items-start">
               <li>
                 <Nav.Link
@@ -89,7 +89,7 @@ function Footer() {
               <span className="d-block">{t('footer.ogrn')}</span>
             </p>
           </Col>
-          <Col md={5} lg={5}>
+          <Col lg={5} md={5}>
             <div className="fw-bold mt-3 mb-2 text-white">
               {t('footer.doc')}
             </div>
@@ -243,7 +243,7 @@ function Footer() {
                 </Dropdown.Menu>
               </Dropdown> */}
           </Col>
-          <Col md={12} lg={2}>
+          <Col lg={2} md={12}>
             <div className="fw-bold mt-3 mb-2 text-white">
               {t('footer.project')}
             </div>

frontend/src/components/Modals/AttemptDuplicateSnippet.jsx

@@ -79,13 +79,13 @@ function AttemptDuplicateSnippet({ handleClose, isOpen }) {
         <Modal.Title>{t('modals.attemptDuplicateSnippet.title')}</Modal.Title>
       </Modal.Header>
       <Modal.Body className="d-flex flex-column gap-3">
-        <Button variant="primary" onClick={handleCopy}>
+        <Button onClick={handleCopy} variant="primary">
           {t('modals.attemptDuplicateSnippet.copyButton')}
         </Button>
         <p className="d-flex justify-content-center my-0">
           {t('modals.attemptDuplicateSnippet.or')}
         </p>
-        <Button variant="outline-primary" onClick={handleSignin}>
+        <Button onClick={handleSignin} variant="outline-primary">
           {t('modals.attemptDuplicateSnippet.signinButton')}
         </Button>
       </Modal.Body>

frontend/src/components/Modals/ChangeAvatar.jsx

@@ -22,55 +22,55 @@ function ChangeAvatar({ handleClose, isOpen }) {
     <Modal centered onHide={handleClose} show={isOpen} size="sm">
       <div className="m-2 text-center">
         <AvatarEditor
-          image={avatarState.img}
-          width={250}
-          height={250}
           border={0}
-          scale={avatarState.scale}
-          rotate={0}
           className="rounded-circle"
+          height={250}
+          image={avatarState.img}
+          rotate={0}
+          scale={avatarState.scale}
+          width={250}
         />
       </div>
       <Modal.Body className="text-center py-3">
         <Form.Range
+          max={20}
+          min={10}
           onChange={(e) =>
             setAvatarState({ ...avatarState, scale: e.target.value / 10 })
           }
-          min={10}
-          max={20}
         />
         <Button onClick={handleInputClick}>
           <FormLabel
-            htmlFor="customFile1"
             className="text-white m-1 fs-6"
+            htmlFor="customFile1"
             onClick={handleLabelClick}
           >
             {t('modals.changeAvatar.chooseFileButton')}
           </FormLabel>
           <FormControl
-            type="file"
+            ref={fileInputRef}
             className="form-control d-none"
             id="customFile1"
-            ref={fileInputRef}
             onChange={(e) =>
               setAvatarState({
                 ...avatarState,
                 img: e.target.files[0],
                 imageChosen: true,
               })
             }
+            type="file"
           />
         </Button>
         <div>
           <Button
-            onClick={handleClose}
             className="mt-3 me-3"
-            variant="success"
             disabled={!avatarState.imageChosen}
+            onClick={handleClose}
+            variant="success"
           >
             {t('modals.changeAvatar.uploadButton')}
           </Button>
-          <Button onClick={handleClose} className="mt-3" variant="secondary">
+          <Button className="mt-3" onClick={handleClose} variant="secondary">
             {t('modals.changeAvatar.cancelButton')}
           </Button>
         </div>

frontend/src/components/Modals/RemoveAvatar.jsx

@@ -13,10 +13,10 @@ function RemoveAvatar({ handleClose, isOpen }) {
           <p>{t('modals.removeAvatar.message')}</p>
         </div>
         <FormGroup className="d-flex justify-content-center">
-          <Button onClick={handleClose} variant="danger" className="me-5 px-4">
+          <Button className="me-5 px-4" onClick={handleClose} variant="danger">
             {t('modals.removeAvatar.removeButton')}
           </Button>
-          <Button onClick={handleClose} variant="secondary" className="px-4">
+          <Button className="px-4" onClick={handleClose} variant="secondary">
             {t('modals.removeAvatar.cancelButton')}
           </Button>
         </FormGroup>

frontend/src/components/Navigation/GuestMenu.jsx

@@ -20,7 +20,7 @@ function GuestMenu() {
   };
 
   return (
-    <Dropdown title="User Menu" align="end" as="li">
+    <Dropdown align="end" as="li" title="User Menu">
       <Dropdown.Toggle
         as={Button}
         className="d-flex p-0 px-lg-2 align-items-center nav-link"

frontend/src/components/Navigation/UserMenu.jsx

@@ -25,7 +25,7 @@ function UserMenu() {
   };
 
   return (
-    <Dropdown title="User Menu" align="end" as="li">
+    <Dropdown align="end" as="li" title="User Menu">
       <Dropdown.Toggle
         as={Button}
         className="d-flex p-0 px-lg-2 align-items-center nav-link"

frontend/src/components/Toast/index.jsx

@@ -6,15 +6,15 @@ function Toast() {
 
   return (
     <ToastContainer
-      position="top-center"
       autoClose={3000}
+      closeOnClick
+      draggable
       hideProgressBar
       newestOnTop={false}
-      closeOnClick
-      rtl={false}
       pauseOnFocusLoss
-      draggable
       pauseOnHover
+      position="top-center"
+      rtl={false}
       theme={isDarkMode ? 'dark' : 'light'}
     />
   );

frontend/src/locales/en.json

@@ -61,27 +61,17 @@
   "faq": {
     "a0": "An integrated development environment (IDE) is a software application that allows developers to write, debug, and test code using one of several programming languages. Integrated development environments are popular among developers because they speed up and simplify the work of writing code. Just as writers use word processors and accountants use spreadsheets, software developers use IDEs to increase productivity.",
     "a11": "Most IDEs include features beyond the usual code editor. It combines many different tools in a single application so that developers can quickly start programming new applications rather than having to manually integrate and configure different software. Here are a few important features of the IDE.",
-    "a110": "Local assembly automation",
-    "a111": " • IDEs increase programmer productivity by performing repetitive development tasks, which are usually part of every code change",
-    "a112": "Compilation",
-    "a113": " • The IDE compiles or converts the code written by the developer into a language that the operating system understands",
-    "a114": "Testing",
-    "a115": " • The IDE allows developers to automate unit tests locally before the software is integrated with other developers code and more complex integration tests are run",
-    "a116": "Debugging",
-    "a117": " • Helps you eliminate bugs in the code and tells you how to fix them.",
-    "a12": "Automating code editing",
-    "a13": " • The IDE knows the rules for structuring statements in programming languages and automatically edits the source code",
-    "a14": "Syntax highlighting",
-    "a15": " • The IDE identifies the language in which the code is written and highlights functions, variables and operators in different colors. This helps you to quickly read the syntax visually",
-    "a16": "Autofill",
-    "a17": " • The IDE can suggest continuing a string based on the first characters entered. This allows you to enter function and library names faster, without making syntax errors",
-    "a18": "Refactoring support",
-    "a19": " • IDEs can use auto refactoring to make the source code more efficient and readable without changing its core functionality",
+    "a110": "<strong>Local assembly automation</strong> IDEs increase programmer productivity by performing repetitive development tasks, which are usually part of every code change",
+    "a112": "<strong>Compilation</strong> The IDE compiles or converts the code written by the developer into a language that the operating system understands",
+    "a114": "<strong>Testing</strong> The IDE allows developers to automate unit tests locally before the software is integrated with other developers code and more complex integration tests are run",
+    "a116": "<strong>Debugging</strong> Helps you eliminate bugs in the code and tells you how to fix them.",
+    "a12": "<strong>Automating code editing</strong> The IDE knows the rules for structuring statements in programming languages and automatically edits the source code",
+    "a14": "<strong>Syntax highlighting</strong> The IDE identifies the language in which the code is written and highlights functions, variables and operators in different colors. This helps you to quickly read the syntax visually.",
+    "a16": "<strong>Autofill</strong> The IDE can suggest continuing a string based on the first characters entered. This allows you to enter function and library names faster, without making syntax errors",
+    "a18": "<strong>Refactoring support</strong> IDEs can use auto refactoring to make the source code more efficient and readable without changing its core functionality.",
     "a2": "Integrated development environments (IDEs) can be divided into several different categories, depending on what kind of application development they support and how they work.",
-    "a21": "Cloud IDEs",
-    "a22": " • They are used to write, edit, and compile code directly in the browser, eliminating the need to download software to local machines. Cloud IDEs have a standardized development environment, can work from any machine, and use computing resources from the cloud, which frees up local machine resources.",
-    "a23": "Local IDEs",
-    "a24": " • Installed and run directly on local machines. Require additional libraries to be downloaded and installed depending on project requirements and development language. Installation of local IDEs can be time consuming and complex, and configuration differences between the local machine and the production environment can lead to software bugs.",
+    "a21": "<strong>Cloud IDEs</strong> They are used to write, edit, and compile code directly in the browser, eliminating the need to download software to local machines. Cloud IDEs have a standardized development environment, can work from any machine, and use computing resources from the cloud, which frees up local machine resources.",
+    "a23": "<strong>Local IDEs</strong> Installed and run directly on local machines. Require additional libraries to be downloaded and installed depending on project requirements and development language. Installation of local IDEs can be time consuming and complex, and configuration differences between the local machine and the production environment can lead to software bugs.",
     "a3": "Run IT is a cloud-based integrated development environment (IDE) where you can create and run JavaScript code and debug it directly in your browser. Run IT can be run on any device, with any operating system.",
     "a31": "In the future, expanding the set of features: support for other popular programming languages, collaborative work with other participants, as well as ready-made templates with code for more convenient and faster work.",
     "dist0": "The software is distributed as an online service (SaaS solution)",