From 8f2fd891cc6ea67c9f767b746b29d936149b362e Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 24 Mar 2021 14:58:32 +0100
Subject: [PATCH] Tiny menu/tabs/naming adjustments (#4923)

---
 packages/apps/src/Menu/ChainInfo.tsx           |  2 +-
 packages/apps/src/Menu/Grouping.tsx            |  7 +------
 packages/apps/src/Menu/NodeInfo.tsx            |  2 +-
 packages/apps/src/Menu/index.tsx               |  2 +-
 packages/page-extrinsics/src/index.tsx         |  2 +-
 packages/page-js/src/Playground.tsx            |  2 +-
 .../react-components/src/FilterOverlay.tsx     |  5 +++--
 packages/react-components/src/Tabs/Tab.tsx     |  1 +
 packages/react-components/src/Tabs/index.tsx   | 18 ++++++++++--------
 9 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/apps/src/Menu/ChainInfo.tsx b/packages/apps/src/Menu/ChainInfo.tsx
index 844c03f9db..6f4777905a 100644
--- a/packages/apps/src/Menu/ChainInfo.tsx
+++ b/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 {
diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx
index 9f3878aec8..d0ca425eb9 100644
--- a/packages/apps/src/Menu/Grouping.tsx
+++ b/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 {
diff --git a/packages/apps/src/Menu/NodeInfo.tsx b/packages/apps/src/Menu/NodeInfo.tsx
index 82e7fbafe1..54ad452ec4 100644
--- a/packages/apps/src/Menu/NodeInfo.tsx
+++ b/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 {
diff --git a/packages/apps/src/Menu/index.tsx b/packages/apps/src/Menu/index.tsx
index 469856da90..841caa1dc6 100644
--- a/packages/apps/src/Menu/index.tsx
+++ b/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
     }
   }
 
diff --git a/packages/page-extrinsics/src/index.tsx b/packages/page-extrinsics/src/index.tsx
index 85267d4a1d..e82a65f1b3 100644
--- a/packages/page-extrinsics/src/index.tsx
+++ b/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 (
diff --git a/packages/page-js/src/Playground.tsx b/packages/page-js/src/Playground.tsx
index 5bf804c747..6b4143f81c 100644
--- a/packages/page-js/src/Playground.tsx
+++ b/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')
     }
   ]);
 
diff --git a/packages/react-components/src/FilterOverlay.tsx b/packages/react-components/src/FilterOverlay.tsx
index 0398422b46..67067e17d1 100644
--- a/packages/react-components/src/FilterOverlay.tsx
+++ b/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;
   }
 `);
diff --git a/packages/react-components/src/Tabs/Tab.tsx b/packages/react-components/src/Tabs/Tab.tsx
index 953a2490e7..cb641fe223 100644
--- a/packages/react-components/src/Tabs/Tab.tsx
+++ b/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;
     }
diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx
index 5864d3c606..67d65f6c25 100644
--- a/packages/react-components/src/Tabs/index.tsx
+++ b/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;
   }