Table fixes

src/App.tsx

@@ -16,28 +16,19 @@ import { getThemeConfig } from './styles/themeConfig';
 import { trackClicks } from './config/mixpanel';
 import { trackGAClicks } from './config/ga';
 import { reloadUserProfile } from './api/user.api';
-import { setUser } from './store/slices/userSlice';
+import { fetchUserProfile, setUser } from './store/slices/userSlice';
 
 const App: React.FC = () => {
   const { language } = useLanguage();
   const theme = useAppSelector((state) => state.theme.theme);
   const user = useAppSelector(state => state.user.user);
   const currentTheme = themeObject[theme];
   const themeConfig = React.useMemo(() => getThemeConfig(currentTheme), [currentTheme]);
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    if (!user) {
-      reloadUserProfile()
-        .then((data) => dispatch(setUser(data)))
-        .catch((err) => console.error(err));
-    }
-  }, [user, dispatch]);
 
   useEffect(() => {
     document.addEventListener('click', event => trackClicks(event, user));
     return () => document.removeEventListener('click', event => trackClicks(event, user));
-  }, [user]);
+  }, []);
 
   useEffect(() => {
     document.addEventListener('click', trackGAClicks);

src/components/auth/SecurityCodeForm/SecurityCodeForm.styles.ts

@@ -21,7 +21,6 @@ export const VerifyEmailDescription = styled.div`
 `;
 
 export const NoCodeText = styled.div`
-  margin-top: 1rem;
   color: ${({ theme }) => theme.primary};
   font-size: ${({ theme }) => theme.fontSizes.xs};
   font-weight: ${({ theme }) => theme.fontWeights.regular};

src/components/auth/SecurityCodeForm/SecurityCodeForm.tsx

@@ -126,6 +126,7 @@ export const SecurityCodeForm: React.FC<SecurityCodeFormProps> = ({
           ) : (
             <VerificationCodeInput autoFocus onChange={setSecurityCode} />
           )}
+          <br></br>
           <BaseButton type="link" onClick={() => onResendCode?.()}>
             <S.NoCodeText>{t('auth.securityCodeNoCode')}</S.NoCodeText>
           </BaseButton>

src/components/common/BaseButton/BaseButton.styles.ts

@@ -4,7 +4,6 @@ import { Button as AntButton } from 'antd';
 
 export const Button = styled(AntButton)`
   && {
-    height: 40px;
     padding: 0 24px;
     border: none;
     border-radius: 20px;

src/components/common/BaseDropdown/BaseDropdown.tsx

@@ -6,9 +6,12 @@ interface BaseDropdownProps extends DropdownProps {
   children?: ReactNode;
 }
 
-export const BaseDropdown: React.FC = ({ children, ...props }: BaseDropdownProps) => {
+export const BaseDropdown: React.FC<BaseDropdownProps> = ({ children, ...props }) => {
   return (
-    <S.Dropdown getPopupContainer={(triggerNode) => triggerNode} {...props}>
+    <S.Dropdown 
+      getPopupContainer={() => document.body} 
+      {...props}
+    >
       {children}
     </S.Dropdown>
   );

src/components/common/BaseTable/BaseTable.styles.ts

@@ -36,7 +36,6 @@ export const Table = styled(AntTable)`
 
   /* Remove default AntD container border for "bordered" tables */
   .ant-table-container {
-    border-radius: 16px; /* Ensures corners are consistently rounded */
     background: transparent; /* Let the parent's gradient show through */
     overflow: hidden;
   }

src/components/coupons/Coupons.styles.ts

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import { BaseCard } from '../common/BaseCard/BaseCard';
+import { BaseButton } from '../common/BaseButton/BaseButton';
+
+export const NeumorphicContainer = styled.div`
+  background: #2a2a2a;
+  border-radius: 20px;
+  padding: 2rem;
+  box-shadow: 
+    8px 8px 16px rgba(0, 0, 0, 0.4),
+    -8px -8px 16px rgba(255, 255, 255, 0.05);
+`;
+
+export const StatsCard = styled(BaseCard)`
+  background: linear-gradient(145deg, #2d2d2d, #262626);
+  border: none;
+  border-radius: 15px;
+
+  /* Convex effect */
+  box-shadow:
+    6px 6px 12px rgba(0, 0, 0, 0.5),
+    -6px -6px 12px rgba(255, 255, 255, 0.05);
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+`;
+
+export const RedeemButton = styled(BaseButton)`
+  /* Concave effect when not pressed */
+  background: linear-gradient(145deg, #262626, #2d2d2d);
+  border: none;
+  box-shadow: 
+    inset 4px 4px 8px rgba(0, 0, 0, 0.5),
+    inset -4px -4px 8px rgba(255, 255, 255, 0.05);
+
+  /* Pressed state */
+  &:active {
+    background: linear-gradient(145deg, #2d2d2d, #262626);
+    box-shadow:
+      inset 6px 6px 12px rgba(0, 0, 0, 0.7),
+      inset -6px -6px 12px rgba(255, 255, 255, 0.07);
+  }
+`;
+
+export const StatsContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+
+  /* Flat neumorphic effect */
+  background: #2a2a2a;
+  padding: 1.5rem;
+  border-radius: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 
+    4px 4px 8px rgba(0, 0, 0, 0.2),
+    -4px -4px 8px rgba(255, 255, 255, 0.03);
+`;

src/components/coupons/Coupons.tsx

@@ -1,15 +1,14 @@
 import { useAppSelector } from '@app/hooks/reduxHooks';
-import { BaseRow } from '../common/BaseRow/BaseRow';
 import { isEmailValid } from '@app/utils/utils';
-import { BaseButton } from '../common/BaseButton/BaseButton';
 import { useTranslation } from 'react-i18next';
-import { BaseCol } from '../common/BaseCol/BaseCol';
 import { useNavigate } from 'react-router-dom';
 import { useResponsive } from '@app/hooks/useResponsive';
-import { BaseCard } from '../common/BaseCard/BaseCard';
-import { BaseSpace } from '../common/BaseSpace/BaseSpace';
 import { CouponTable } from './couponTable/CouponTable';
 import { EmailUpdateForm } from '../auth/EmailUpdateForm/EmailUpdateForm';
+import { NeumorphicContainer, RedeemButton, StatsContainer } from './Coupons.styles';
+import { BaseRow } from '../common/BaseRow/BaseRow';
+import { BaseCol } from '../common/BaseCol/BaseCol';
+import { BaseCard } from '../common/BaseCard/BaseCard';
 
 export const Coupons = () => {
   const { t } = useTranslation();
@@ -19,23 +18,24 @@ export const Coupons = () => {
   const navigate = useNavigate();
 
   const content = (
-    <BaseRow gutter={[0, 20]}>
-      <BaseCol span={24}>
-        {!(user?.email && isEmailValid(user.email.name)) ? (
-          <BaseSpace align="center" style={{ color: '#ffa500' }}>
-            *
-            <BaseButton type="link" onClick={() => navigate('/redeem-coupon')} style={{ padding: '0' }}>
-              {t('common.clickHere')}
-            </BaseButton>
-            {t('common.addEmailWarning')}
-          </BaseSpace>
-        ) : null}
-      </BaseCol>
+    <NeumorphicContainer>
+      <BaseRow gutter={[0, 20]}>
+        <BaseCol span={24}>
+          {!(user?.email && isEmailValid(user.email.name)) ? (
+            <StatsContainer>
+              Please<a type="link" onClick={() => window.open('/redeem-coupon', '_self')}>
+                click here
+              </a>
+              <span style={{ color: '#ffa500' }}>{t('common.addEmailWarning')}</span>
+            </StatsContainer>
+          ) : null}
+        </BaseCol>
 
-      <BaseCol span={24}>
-        <CouponTable />
-      </BaseCol>
-    </BaseRow>
+        <BaseCol span={24}>
+          <CouponTable />
+        </BaseCol>
+      </BaseRow>
+    </NeumorphicContainer>
   );
 
   if (!user) return null;

src/components/dashboard/DashboardTerminal/DashboardTerminal.tsx

@@ -42,13 +42,6 @@ const PremiumDocCard = styled(DocumentationCard)`
     font-weight: bold;
   }
 
-  /* Style the card body */
-  .ant-card-body {
-    background-color: rgba(255, 255, 255, 0.1);
-    color: #fff;
-    padding: 1.5rem;
-  }
-
   /* Add a diagonal 'PREMIUM' badge */
   &::after {
     content: 'PREMIUM';
@@ -77,9 +70,10 @@ export const DashboardTerminal: React.FC<DashboardTerminalProps> = ({ repoDetail
   const user = useAppSelector((state) => state.user.user);
   if (!user) return null;
   if (!repoDetails) return null;
-  let shouldShowPremium = [PlanType.PREMIUM, PlanType.PRO].includes(repoDetails.plan_type);
+  let shouldShowPremium = ![PlanType.PREMIUM, PlanType.PRO].includes(repoDetails.plan_type);
   shouldShowPremium = shouldShowPremium || user.countRepoGen > 0;
 
+
 
 
   return (