fix: styling of the documentation panel so it is a better user experience (#4203)

Author: ChitlangeSahas

src/me/components/DocSearchWidget.scss

@@ -6,7 +6,7 @@ $article-text: #d4d7dd;
 
 .WidgetSearch {
   .WidgetHelperText {
-    text-align: right;
+    color: $cf-grey-65;
     margin: 0;
   }
   .DocSearch-Modal {
@@ -87,76 +87,61 @@ $article-text: #d4d7dd;
   }
 
   .DocSearch-Hit-Container {
-    height: 100% !important;
-    padding-top: 4px !important;
+    height: 100%;
+    padding-top: 4px;
   }
 
   .DocSearch-Hit-icon {
     display: none;
   }
 
   .DocSearch-SearchBar {
-    padding: 0 !important;
-    box-shadow: none !important;
+    padding: 0;
+    box-shadow: none;
   }
   .DocSearch-Form {
     display: block;
-    width: 100% !important;
+    width: 100%;
     height: auto;
     margin: auto;
-    border-radius: 4px !important;
-    box-shadow: none !important;
+    box-shadow: none;
     outline: none;
     font-family: $cf-text-font;
-    border: $cf-input-border--default !important;
+    border: 2px solid $cf-input-border--default;
+    border-radius: 4px;
     background-color: $cf-input-background--default;
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjIuNyAyMi41IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMi43IDIyLjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2NzY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjguMSIgY3k9IjguNCIgcj0iNi44Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2NzY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjEzLjIiIHkxPSIxMi45IiB4Mj0iMjEuNSIgeTI9IjIxLjQiLz48L3N2Zz4=);
     background-position: left 17px center;
     background-repeat: no-repeat;
-    background-size: 3.5%;
-    padding: 0 !important;
+    background-size: 16px;
+    padding: 0;
     label {
       display: none;
     }
 
     transition: $cf-input--transition;
     :hover {
-      border: 2px solid $cf-input-border--hover !important;
-      border-radius: 4px !important;
-      transition: $cf-input--transition !important;
-      background-color: $cf-input-background--hover !important;
-      color: $cf-input-text--hover !important;
-      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjIuNyAyMi41IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMi43IDIyLjUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2NzY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9IjguMSIgY3k9IjguNCIgcj0iNi44Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjY2NzY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjEzLjIiIHkxPSIxMi45IiB4Mj0iMjEuNSIgeTI9IjIxLjQiLz48L3N2Zz4=);
-      background-position: left 17px center;
-      background-repeat: no-repeat;
-      background-size: 3.5%;
+      background-color: $cf-input-background--hover;
     }
 
     :focus {
-      background-color: $cf-input-background--focused !important;
-      border: 2px solid $cf-input-border--focused !important;
-      border-radius: 4px !important;
-      transition: $cf-input--transition;
-      color: $cf-input-text--focused !important;
-      background-image: none !important;
+      background-image: none;
+      background-color: $cf-input-background--focused;
     }
   }
 
-  input#docsearch-input:focus::placeholder {
-    color: transparent !important;
+  input#docsearch-input {
+    padding-left: 45px;
+    color: $cf-grey-95;
   }
 
   .DocSearch-Input {
-    font-size: 13px !important;
-    width: 100% !important;
-    box-shadow: none !important;
-    height: 40px !important;
-    padding: 10px !important;
+    width: 100%;
+    height: 40px;
   }
 
   .DocSearch-Input::placeholder {
-    padding-left: 40px !important;
-    font-style: italic !important;
+    font-size: medium;
     color: $cf-input--placeholder-text !important;
   }
 
@@ -178,6 +163,9 @@ $article-text: #d4d7dd;
     border: none !important;
   }
 
+  .DocSearch-Dropdown {
+    min-height: 7px;
+  }
   .DocSearch-Dropdown::-webkit-scrollbar-thumb {
     border: none;
     background: linear-gradient(
@@ -190,10 +178,6 @@ $article-text: #d4d7dd;
     width: 6px;
   }
 
-  .DocSearch-Dropdown {
-    padding-top: 16px !important;
-  }
-
   .DocSearch-Hits mark {
     color: $c-pool !important;
   }

src/me/components/DocSearchWidget.tsx

@@ -26,13 +26,13 @@ const supportLinks = [
   },
   {
     link: 'https://github.com/influxdata/ui/issues/new',
-    title: '🐛 Report a bug',
+    title: 'Report a bug',
   },
-  {link: 'https://community.influxdata.com', title: '💭 Community Forum'},
+  {link: 'https://community.influxdata.com', title: 'Community Forum'},
   {
     link:
       'https://github.com/influxdata/influxdb/issues/new?template=feature_request.md',
-    title: '✨ Feature Requests',
+    title: 'Feature Requests',
   },
 ]
 
@@ -42,7 +42,7 @@ const DocSearchWidget: FC = () => {
       <DocSearch type={DocSearchType.Widget} />
       <p className="WidgetHelperText">Press CTRL + M on any page to search</p>
       <div className="useful-links">
-        <h4>Useful Links</h4>
+        <h4 style={{textTransform: 'uppercase'}}>Useful Links</h4>
         <ul className="docslinks-list">
           {supportLinks.map(({link, title}) => (
             <li key={title}>

src/me/components/Resources.tsx

@@ -6,9 +6,6 @@ import {
   FlexDirection,
   ComponentSize,
   AlignItems,
-  Heading,
-  HeadingElement,
-  FontWeight,
 } from '@influxdata/clockface'
 
 // Utils
@@ -31,11 +28,6 @@ const ResourceLists: FC = () => {
       margin={ComponentSize.Small}
     >
       <Panel testID="documentation--panel">
-        <Panel.Header>
-          <Heading element={HeadingElement.H3} weight={FontWeight.Medium}>
-            <label htmlFor="documentation">Documentation</label>
-          </Heading>
-        </Panel.Header>
         <Panel.Body>
           <DocSearchWidget />
         </Panel.Body>

src/me/containers/MePage.scss

@@ -23,31 +23,20 @@
   margin-bottom: $cf-space-2xs;
 }
 
-.tutorials-list,
 .docslinks-list,
 .useful-links {
   padding: 0;
   list-style: none;
-  margin-top: 5%;
-}
 
-.tutorials-list > li {
-  font-size: 1.25em;
-  background-color: $cf-grey-5;
-  border-radius: $radius;
-  padding: $ix-marg-c;
-  margin-bottom: $ix-marg-a;
+  h4 {
+    color: $cf-grey-95;
+  }
 }
 
 .docslinks-list > li {
   font-size: 1.25em;
   background-color: transparent;
   border-radius: $radius;
-  padding: 8px;
-  margin-bottom: $ix-marg-a;
-}
-
-.useful-links > li {
-  margin-bottom: $cf-space-2xs;
   padding: 0;
+  margin-bottom: $ix-marg-c;
 }

src/shared/search/DocSearch.tsx

@@ -50,7 +50,7 @@ const DocSearch: FC<DocSearchProps> = ({type}) => {
       apiKey={GLOBALSEARCH_API_KEY}
       indexName="influxdata"
       appId={GLOBALSEARCH_APP_ID}
-      placeholder="Search our docs: "
+      placeholder="Search Documentation"
       initialScrollY={0}
       searchParameters={facetFilters}
       hitComponent={HitComponent}