Client: HotkeysPanel: Added a header component.

packages/client/src/components/panels/HotkeysPanel/StyledHotkeys.js

@@ -43,26 +43,6 @@ const StyledHotkeysPanel = styled.div`
     }
   }
 
-  .hotkeys_header {
-    border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
-
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            padding-right: 16px;
-            padding-left: 37px;
-          `
-        : css`
-            padding-left: 16px;
-            padding-right: 37px;
-          `}
-
-    .hotkeys_heading {
-      font-weight: 700;
-      font-size: 18px;
-    }
-  }
-
   .hotkeys_sub-header {
     font-weight: 700;
     font-size: 16px;

packages/client/src/components/panels/HotkeysPanel/index.js

@@ -90,12 +90,8 @@ const HotkeyPanel = ({
         visible={visible}
         onClose={onClose}
         withoutBodyScroll={true}
+        header={t("Common:Hotkeys")}
       >
-        <div className="hotkeys_header">
-          <Heading className="hotkeys_heading" truncate>
-            {t("Common:Hotkeys")}
-          </Heading>
-        </div>
         <StyledScrollbar ref={scrollRef}>
           <Heading className="hotkeys_sub-header">
             {t("HotkeysNavigation")}