Merge pull request #11958 from overleaf/ds-td-documentation-btn-refactor

Styling and HTML structure of the documentation button

GitOrigin-RevId: e643edbe05579c037ca1ec27fab765974e74d2c5

services/web/frontend/js/features/outline/components/documentation-button.tsx

@@ -33,36 +33,28 @@ function DocumentationButton() {
   function handleDocumentationLinkClick() {
     sendMB('file-tree-documentation-click')
   }
+
+  if (!showDocumentationButton) return null
+
   return (
-    <div className="outline-pane">
-      {showDocumentationButton ? (
-        <header className="outline-footer">
-          <div className="outline-header-expand-collapse-btn documentation-btn">
-            <a
-              href="/learn"
-              target="_blank"
-              rel="noreferrer"
-              className="documentation-link"
-              onClick={handleDocumentationLinkClick}
-            >
-              <Icon
-                type="question-circle"
-                className="outline-caret-icon"
-                style={{ color: 'white' }}
-              />
-              <h4 className="outline-header-name">{documentationButtonText}</h4>
-            </a>
-            <Button bsStyle="link">
-              <Icon
-                style={{ color: 'white' }}
-                type="times"
-                onClick={handleCloseClick}
-                className="outline-caret-icon"
-              />
-            </Button>
-          </div>
-        </header>
-      ) : null}
+    <div className="documentation-btn-container">
+      <a
+        href="/learn"
+        target="_blank"
+        rel="noreferrer"
+        className="documentation-link"
+        onClick={handleDocumentationLinkClick}
+      >
+        <Icon type="question-circle" className="outline-caret-icon" />
+        <h4 className="outline-header-name">{documentationButtonText}</h4>
+      </a>
+      <Button bsStyle="link" className="documentation-close">
+        <Icon
+          type="times"
+          onClick={handleCloseClick}
+          className="outline-caret-icon "
+        />
+      </Button>
     </div>
   )
 }

services/web/frontend/stylesheets/app/editor/outline.less

@@ -15,29 +15,32 @@
   opacity: 0.5;
 }
 
-.documentation-btn.outline-header-expand-collapse-btn {
-  justify-content: space-between;
-  padding-right: 0;
-}
-
-.documentation-btn .btn {
-  padding-right: 0;
-}
-
 .documentation-link {
   display: flex;
-  margin-left: 0.5em;
+  flex: 1;
 }
 
-.outline-header {
+.documentation-btn-container {
   .toolbar-small-mixin;
   .toolbar-alt-mixin;
   display: flex;
-  flex-shrink: 0;
-  border-bottom: 1px solid @toolbar-border-color;
-  border-top: 1px solid @toolbar-border-color;
+  align-items: center;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  & *,
+  & :hover {
+    color: @white;
+    text-decoration: none;
+  }
+  &:hover {
+    background-color: @outline-header-hover-bg;
+  }
 }
-.outline-footer {
+
+.documentation-close {
+  padding: 0;
+}
+
+.outline-header {
   .toolbar-small-mixin;
   .toolbar-alt-mixin;
   display: flex;