fix: adjust vertical alignment

near · Feb 22, 2024 · 5bd5ed6 · 5bd5ed6
1 parent e1f063e
commit 5bd5ed6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/components/navigation/desktop/MainNavigationMenu.tsx b/src/components/navigation/desktop/MainNavigationMenu.tsx
@@ -146,12 +146,14 @@ const Icon = styled.i`
   font-weight: 'bold';
   font-size: 18px;
   color: #868682;
+  margin-top: -0.3em;
 `;
 
 const NavSection = styled.div`
   display: flex;
   flex-direction: row;
   gap: 3px;
+  align-items: center;
 `;
 
 export const MainNavigationMenu = () => {
@@ -175,7 +177,7 @@ export const MainNavigationMenu = () => {
 
                         {section.links.map((link) => (
                           <NavSection key={link.title}>
-                            {link.icon && <Icon className={link.icon} />}
+                            <Icon className={link.icon} />
                             <NavLink asChild>
                               <Link href={link.url} target={link.url.indexOf('http') === 0 ? '_blank' : undefined}>
                                 {link.title}

diff --git a/src/components/navigation/mobile/AccordionMenu.tsx b/src/components/navigation/mobile/AccordionMenu.tsx
@@ -115,11 +115,13 @@ const Icon = styled.i`
   font-size: 18px;
   color: #868682;
   padding-left: 1rem;
+  margin-top: -0.3em;
 `;
 
 const NavSection = styled.div`
   display: flex;
   flex-direction: row;
+  align-items: center;
 `;
 
 export const AccordionMenu = (props: Props) => {
@@ -146,7 +148,7 @@ export const AccordionMenu = (props: Props) => {
 
                     {section.links.map((link) => (
                       <NavSection key={link.title}>
-                        {link.icon && <Icon className={link.icon} />}
+                        <Icon className={link.icon} />
                         <Link
                           href={link.url}
                           target={link.url.indexOf('http') === 0 ? '_blank' : undefined}

diff --git a/src/components/navigation/navigation-categories.ts b/src/components/navigation/navigation-categories.ts
@@ -147,42 +147,42 @@ export const navigationCategories = [
           {
             title: 'Discord',
             url: 'http://near.chat/',
-            icon: null,
+            icon: '',
           },
           {
             title: 'Discourse',
             url: 'https://gov.near.org/',
-            icon: null,
+            icon: '',
           },
           {
             title: 'GitHub',
             url: 'https://github.com/near',
-            icon: null,
+            icon: '',
           },
           {
             title: 'Reddit',
             url: 'https://www.reddit.com/r/nearprotocol/',
-            icon: null,
+            icon: '',
           },
           {
             title: 'Telegram',
             url: 'https://t.me/cryptonear',
-            icon: null,
+            icon: '',
           },
           {
             title: 'WeChat',
             url: 'https://pages.near.org/wechat',
-            icon: null,
+            icon: '',
           },
           {
             title: 'X',
             url: 'https://twitter.com/nearprotocol',
-            icon: null,
+            icon: '',
           },
           {
             title: 'YouTube',
             url: 'https://www.youtube.com/channel/UCuKdIYVN8iE3fv8alyk1aMw',
-            icon: null,
+            icon: '',
           },
         ],
       },