fix(appmenu): fixes and improvements (#1213)

Author: OggyKUN

src/components/appMenu/CircularMenu/CircularMenuItem.module.scss

@@ -11,6 +11,7 @@
   align-items: center;
   display: flex;
   pointer-events: auto;
+  transition: 0.2s ease-in-out 0s;
 }
 
 .menuItem.active {
@@ -23,6 +24,7 @@
 .menuItem:hover {
   border: 1px solid #4ed6ae;
   box-shadow: 0px 0px 8px #4ed6ae inset, 0px 0px 13px #4ed6ae;
+  transform: scale(1.2);
 }
 
 .itemContainer {
@@ -40,6 +42,13 @@
   display: flex;
 }
 
+.navLink {
+  display: block;
+  padding: 10px;
+  position: inherit;
+  margin: -10px;
+}
+
 .external {
   display: block;
   position: absolute;

src/components/appMenu/CircularMenu/CircularMenuItem.tsx

@@ -19,7 +19,7 @@ function CircularMenuItem({ item, onClick, selected }: Props) {
         <NavLink
           to={item.to}
           onClick={onClick}
-          style={{ position: 'inherit' }}
+          className={styles.navLink}
           {...(isExternal && { target: '_blank', rel: 'noreferrer noopener' })}
         >
           <img src={item.icon} className={styles.icon} alt="img" />

src/pages/oracle/landing/OracleLanding.module.scss

@@ -1,6 +1,6 @@
 @import '../../../layouts/variables.module.scss';
 
-$mobile-breakpoint: 480px;
+$mobile-breakpoint: 1279px;
 
 :export {
   mobileBreakpoint: $mobile-breakpoint;