[EDX-548, EDX-560, EDX-563, EDX-478, EDX-582] Multiple bug fixes (#1759)

* Add search related fixes

* Hide button on smaller screens

* Add list styles

* Change font-size for paragraph

src/components/Header/TopMainNav/SearchBar/KeyIcon.module.css

@@ -1,4 +1,4 @@
 .keyIcon {
-    @apply text-dark-grey hidden md:flex items-center justify-center rounded shadow-tooltip w-24 h-24 font-light pt-2;
+    @apply text-dark-grey hidden md:flex items-center justify-center rounded shadow-container-levitate w-24 h-24 font-light pt-2;
     min-width: 24px;
 }

src/components/Header/TopMainNav/SearchBar/SearchBar.module.css

@@ -1,4 +1,5 @@
 .searchInput {
-  @apply font-light bg-transparent ml-12 mr-4 outline-none w-full;
+  @apply font-light bg-transparent pr-8 mr-4 outline-none w-full h-48;
   max-width: 400px;
+  padding-left: 50px;
 }

src/components/Header/TopMainNav/SearchBar/SearchBar.tsx

@@ -51,7 +51,7 @@ export const SearchBar = ({ displayMode }: { displayMode: DisplayMode }) => {
 
   return (
     <SearchDisplay ref={searchDisplayRef} onClick={focusOnSearchInput} displayMode={displayMode}>
-      <Icon name="icon-gui-search" size="1.5rem" />
+      <Icon name="icon-gui-search" size="24px" additionalCSS="absolute left-16 top-10" />
       <input
         type="text"
         ref={textInput}
@@ -61,7 +61,7 @@ export const SearchBar = ({ displayMode }: { displayMode: DisplayMode }) => {
         onChange={handleSearch}
       />
       <KeyIcon className="mr-4">{isMac ? '⌘' : '^'}</KeyIcon>
-      <KeyIcon>K</KeyIcon>
+      <KeyIcon className="mr-16">K</KeyIcon>
       <SuggestionBox results={results} error={error} query={query} isActive={isInFocus} />
     </SearchDisplay>
   );

src/components/Header/TopMainNav/SearchBar/SearchDisplay.tsx

@@ -23,7 +23,7 @@ export const SearchDisplay = forwardRef(
       ref={ref}
       onClick={onClick}
       className={cn(
-        'my-8 px-16 bg-light-grey border border-mid-grey rounded-lg hover:border-light-grey relative focus-within:bg-white focus-within:shadow-input focus-within:border-transparent focus-within:outline-gui-focus',
+        'my-8 bg-light-grey border border-mid-grey rounded-lg hover:border-light-grey relative focus-within:bg-white focus-within:shadow-input focus-within:border-transparent focus-within:outline-gui-focus',
         {
           'md:hidden max-w-4/5 m-24 flex transition-input': displayMode === DisplayMode.MOBILE,
           'hidden md:flex mx-16 items-center justify-center': displayMode === DisplayMode.FULL_SCREEN,

src/components/Header/TopMainNav/SearchBar/SuggestionBox.tsx

@@ -47,12 +47,7 @@ export const SuggestionBox = ({ results, isActive, error, query }: Props) => {
       {results && totalResults > 0 ? (
         results.map((hit, index) => {
           const { title, highlight, meta_description, url, id } = hit;
-          const [pageTitle, ...breadcrumbs] = title.split(' / ').filter(
-            (item) =>
-              // We need to get rid of 'Docs' because it's redundant
-              !DOCUMENTATION_PATH.toLowerCase().includes(item.trim().toLowerCase()),
-          );
-
+          const [pageTitle, ...breadcrumbs] = title.split(' / ');
           const body = meta_description ?? highlight;
 
           return (
@@ -71,7 +66,16 @@ export const SuggestionBox = ({ results, isActive, error, query }: Props) => {
               <h4 className={cn('text-menu2 mb-6 font-medium', titleStyle)}>{pageTitle}</h4>
               <div className="text-menu3 font-light text-charcoal-grey leading-5">{htmr(body)}</div>
               {breadcrumbs.length > 0 && (
-                <div className="text-dark-grey font-light text-menu3 mt-8">{breadcrumbs.join(' > ').toLowerCase()}</div>
+                <div className="text-dark-grey font-light text-menu3 mt-8">
+                  {breadcrumbs
+                    .filter(
+                      (item) =>
+                        // We need to get rid of 'Docs' because it's redundant
+                        !DOCUMENTATION_PATH.toLowerCase().includes(item.trim().toLowerCase()),
+                    )
+                    .join(' > ')
+                    .toLowerCase()}
+                </div>
               )}
             </a>
           );

src/components/Header/TopMainNav/TopMainNavUser/DesktopSignedOut.tsx

@@ -9,8 +9,10 @@ export const DesktopSignedOut = () => (
     <TopMainNavLink href="/login" dataId="meganav-link">
       Login
     </TopMainNavLink>
-    <a href="/sign-up" data-id="meganav-sign-up-btn" className="ui-btn p-btn-small bg-cool-black text-white my-8">
-      Sign up free
-    </a>
+    <div className="hidden md:block">
+      <a href="/sign-up" data-id="meganav-sign-up-btn" className="ui-btn p-btn-small my-8">
+        Sign up free
+      </a>
+    </div>
   </>
 );

src/components/blocks/list/Li.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import GenericHtmlBlock from '../Html/GenericHtmlBlock';
 
 const StyledLi: FC = ({ children, ...props }) => (
-  <li {...props} className="ui-text-p1 mb-16">
+  <li {...props} className="ui-text-p2">
     {children}
   </li>
 );

src/components/blocks/list/Ol.tsx

@@ -1,12 +1,6 @@
-import styled from 'styled-components';
+import React, { FC } from 'react';
 import GenericHtmlBlock from '../Html/GenericHtmlBlock';
-import { resetStyles } from './reset-styles';
 
-const StyledOl = styled.ol`
-  list-style: decimal;
-  ${resetStyles}
-`;
+const Ol: FC = (props) => <ol {...props} className="ui-text-p2 pl-16 pb-32 list-decimal -mt-16" />;
 
-const Ol = GenericHtmlBlock(StyledOl);
-
-export default Ol;
+export default GenericHtmlBlock(Ol);

src/components/blocks/list/Ul.tsx

@@ -1,13 +1,6 @@
-import styled from 'styled-components';
+import React, { FC } from 'react';
 import GenericHtmlBlock from '../Html/GenericHtmlBlock';
-import { resetStyles } from './reset-styles';
 
-// Unset these values inherited from AblyUI/reset.css
-const StyledUl = styled.ul`
-  list-style: unset;
-  ${resetStyles}
-`;
+const Ul: FC = (props) => <ul {...props} className="ui-text-p2 pl-16 pb-32 list-disc -mt-16" />;
 
-const Ul = GenericHtmlBlock(StyledUl);
-
-export default Ul;
+export default GenericHtmlBlock(Ul);

src/components/blocks/typography/P/index.tsx

@@ -9,9 +9,11 @@ const Paragraph = ({ data, attribs }: HtmlComponentProps<'p'> & { attribs: { ['d
   const isTip = attribsContainClass('tip', attribs);
   const BaseComponent = isTip ? Tip : GenericHtmlBlock('p');
   const ParagraphComponent = PendingClassName({ data, attribs }, BaseComponent);
+
   if (attribs.className && attribs.className.includes('definition')) {
     return ParagraphComponent('font-mono font-semibold text-code');
   }
+
   switch (attribs['data-variant']) {
     case 'p1-strong':
       return ParagraphComponent('ui-text-p1 font-medium mb-32');
@@ -42,7 +44,7 @@ const Paragraph = ({ data, attribs }: HtmlComponentProps<'p'> & { attribs: { ['d
     case 'menu-label-3':
       return ParagraphComponent('ui-text-menu3 ');
     default:
-      return ParagraphComponent('ui-text-p1 mb-32');
+      return ParagraphComponent('ui-text-p2 mb-24');
   }
 };
 

tailwind.config.js

@@ -63,6 +63,7 @@ module.exports = extendConfig((ablyUIConfig) => ({
       ...ablyUIConfig.theme.boxShadow,
       'container-avoid-left': '40px 40px 40px 0px rgba(0,0,0,0.1)',
       'container-hover': '0px 24px 32px rgba(0, 0, 0, 0.05)',
+      'container-levitate': '0px 4px 10px rgba(0, 0, 0, 0.06)',
     },
     spacing: {
       ...ablyUIConfig.theme.spacing,