Tiny menu/tabs/naming adjustments (#4923)

packages/apps/src/Menu/ChainInfo.tsx

@@ -58,7 +58,7 @@ function ChainInfo ({ className }: Props): React.ReactElement<Props> {
 
 export default React.memo(styled(ChainInfo)`
   box-sizing: border-box;
-  padding: 0.5rem 1rem 0.5rem 1.5rem;
+  padding: 0.5rem 1rem 0.5rem 0;
   margin: 0;
 
   .apps--SideBar-logo-inner {

packages/apps/src/Menu/Grouping.tsx

@@ -53,7 +53,7 @@ export default React.memo(styled(Grouping)`
 
   .groupHdr {
     border-radius: 0.25rem;
-    padding: 0.857rem 0.857em 0.857rem 1rem;
+    padding: 0.857rem 1.375rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.214rem;
@@ -67,12 +67,7 @@ export default React.memo(styled(Grouping)`
     background-color: var(--bg-tabs);
     font-size: 1rem;
     font-weight: 400;
-    padding: 0.857rem 1.429rem;
     margin-bottom: 0;
-
-    &:hover {
-      padding: 0.857rem 1.429rem;
-    }
   }
 
   .groupMenu {

packages/apps/src/Menu/NodeInfo.tsx

@@ -35,7 +35,7 @@ export default React.memo(styled(NodeInfo)`
   background: transparent;
   font-size: 0.9rem;
   line-height: 1.2;
-  padding: 0 1.5rem 0 1rem;
+  padding: 0 0 0 1rem;
   text-align: right;
 
   > div {

packages/apps/src/Menu/index.tsx

@@ -219,7 +219,7 @@ export default React.memo(styled(Menu)`
     }
 
     > li + li {
-      margin-left: 0.5rem
+      margin-left: 0.375rem
     }
   }
 

packages/page-extrinsics/src/index.tsx

@@ -16,7 +16,7 @@ function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
   const itemsRef = useRef([{
     isRoot: true,
     name: 'create',
-    text: t<string>('Extrinsic submission')
+    text: t<string>('Submission')
   }]);
 
   return (

packages/page-js/src/Playground.tsx

@@ -90,7 +90,7 @@ function Playground ({ basePath, className = '' }: Props): React.ReactElement<Pr
     {
       isRoot: true,
       name: 'playground',
-      text: t<string>('JavaScript')
+      text: t<string>('Console')
     }
   ]);
 

packages/react-components/src/FilterOverlay.tsx

@@ -21,11 +21,11 @@ function FilterOverlay ({ children, className }: Props): React.ReactElement<Prop
 
 export default React.memo(styled(FilterOverlay)`
   display: none;
+  right: calc(50% - var(--width-half) + 1.5rem);
 
   .ui--Labelled label {
     display: none;
   }
-  right: calc(50% - var(--width-half) + 1.5rem);
 
   && .ui--Input {
     margin: 0.29rem 0;
@@ -50,7 +50,8 @@ export default React.memo(styled(FilterOverlay)`
     }
   `};
 
-  @media (max-width: var(--width-full)) {
+  /* hardcoded: var(--width-full) doesn't work in media */
+  @media (max-width: 1750px) {
     right: 1.5rem;
   }
 `);

packages/react-components/src/Tabs/Tab.tsx

@@ -80,6 +80,7 @@ export default React.memo(styled(Tab)`
   &.tabLinkActive {
     color: var(--color-text) !important;
     font-weight: 400;
+
     &:hover {
       cursor: default;
     }

packages/react-components/src/Tabs/index.tsx

@@ -22,6 +22,7 @@ interface Props {
 
 function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactElement<Props> {
   const location = useLocation();
+  const { icon, text } = React.useContext(SectionContext);
 
   // redirect on invalid tabs
   useEffect((): void => {
@@ -44,15 +45,15 @@ function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactE
     ? items.filter(({ name }) => !hidden.includes(name))
     : items;
 
-  const { icon, text } = React.useContext(SectionContext);
-
   return (
     <header className={`ui--Tabs ${className}`}>
       <div className='tabs-container'>
-        {
-          text && icon && <CurrentSection icon={icon}
-            text={text}/>
-        }
+        {text && icon && (
+          <CurrentSection
+            icon={icon}
+            text={text}
+          />
+        )}
         <TabsSectionDelimiter />
         <ul className='ui--TabsList'>
           {filtered.map((tab, index) => (
@@ -81,8 +82,9 @@ export default React.memo(styled(Tabs)`
     display: flex;
     align-items: center;
     width: 100%;
-    margin: 0 auto;    max-width: var(--width-full);
-    padding: 0 1.5rem;
+    margin: 0 auto;
+    max-width: var(--width-full);
+    padding: 0 1.5rem 0 0;
     height: 3.286rem;
   }