Neumorhpiv desgign 2

src/components/apiKeys/ApiKeys.tsx

@@ -13,9 +13,7 @@ export const ApiKeys: React.FC = () => {
   if (!user) return null;
 
   const content = (
-    <BaseCard>
       <ApiKeyTable />
-    </BaseCard>
   );
 
   return isDesktop ? (

src/components/apiKeys/apiKeysTable/ActionRow.tsx

@@ -0,0 +1,57 @@
+import { DeleteOutlined, CheckCircleOutlined, StopOutlined } from '@ant-design/icons';
+import React from 'react';
+import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
+import { ActionRowContainer } from './ApiKeysTable.style';
+import { ApiTableRow } from '@app/api/apiToken.api';
+
+interface ActionRowProps {
+  record: ApiTableRow;
+  handleToggleRow: (id: number) => void;
+  handleDeleteRow: (id: number) => void;
+  isCreating?: boolean; // If record.id === -1
+  t: (key: string) => string;
+}
+
+export const ActionRow: React.FC<ActionRowProps> = ({ 
+  record, 
+  handleToggleRow, 
+  handleDeleteRow,
+  isCreating,
+  t 
+}) => {
+  if (isCreating) {
+    // If your record has id === -1, you might show a "Create" button or something else
+    return (
+      <ActionRowContainer>
+        <BaseButton className="action-btn" onClick={() => handleToggleRow(record.id)}>
+          {t('apiTable.create')}
+        </BaseButton>
+      </ActionRowContainer>
+    );
+  }
+
+  // Normal row: show activate/deactivate and delete
+  return (
+    <ActionRowContainer>
+      <BaseButton
+        className="action-btn"
+        ghost
+        onClick={() => handleToggleRow(record.id)}
+        icon={record.isActive ? <StopOutlined /> : <CheckCircleOutlined />}
+      >
+        {record.isActive ? t('apiTable.deactivate') : t('apiTable.activate')}
+      </BaseButton>
+
+      <div className="divider" />
+
+      <BaseButton
+        className="action-btn delete-btn"
+        danger
+        onClick={() => handleDeleteRow(record.id)}
+        icon={<DeleteOutlined />}
+      >
+        {t('apiTable.delete')}
+      </BaseButton>
+    </ActionRowContainer>
+  );
+};

src/components/apiKeys/apiKeysTable/ApiKeysTable.style.ts

@@ -0,0 +1,46 @@
+// ApiKeyTable.styles.ts (example filename)
+import styled from 'styled-components';
+
+export const ActionRowContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center; /* center in the column */
+  gap: 1rem; /* space between buttons */
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+
+  /* Eye-catching gradient for the action area */
+//   background: unset;
+
+  /* Optional subtle shadow for a “raised” look */
+//   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+
+  /* A small vertical divider between activate/deactivate and delete */
+  .divider {
+    width: 1px;
+    height: 24px;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  /* Style the buttons to match the gradient background */
+  .action-btn {
+    color: #fff;
+    border: none;
+    transition: background-color 0.2s, color 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.15);
+      color: #fff;
+    }
+
+    /* For “danger” or “delete” buttons, you might want a slight
+       variation in color or an icon. (Example: a red accent.)
+    */
+    &.delete-btn {
+      background-color: rgba(255, 0, 0, 0.2);
+      &:hover {
+        background-color: rgba(255, 0, 0, 0.3);
+      }
+    }
+  }
+`;

src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx

@@ -15,6 +15,7 @@ import { ColumnsType } from 'antd/es/table';
 import dayjs from 'dayjs';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ActionRow } from './ActionRow';
 
 const initialPagination: Pagination = {
   current: 1,
@@ -127,37 +128,32 @@ export const ApiKeyTable: React.FC = () => {
     {
       title: t('apiTable.key'),
       dataIndex: 'key',
-      render: (text: string) => <span>{text}</span>,
+      render: (text: string, record) => {
+      return !record.isActive ?<span>{text}</span> : <span style={{ color: '#cccccc82' }}>{text}</span>;
+      },
     },
     {
       title: t('apiTable.createdAt'),
       dataIndex: 'createdAt',
       render: (text: string, record: ApiTableRow) =>
-        record.id !== -1 ? <span>{dayjs(text).format('DD-MM-YYYY HH:mm:ss')}</span> : <span></span>,
+        !record.isActive ?(record.id !== -1 ? <span>{dayjs(text).format('DD-MM-YYYY HH:mm:ss')}</span> : <span></span>): (record.id !== -1 ? <span style={{ color: '#cccccc82' }}>{dayjs(text).format('DD-MM-YYYY HH:mm:ss')}</span> : <span></span>),
     },
     {
       title: t('apiTable.actions'),
       dataIndex: 'actions',
       width: '15%',
-      render: (_, record) => (
-        <BaseSpace>
-          {record.id === -1 ? (
-            <BaseButton ghost onClick={() => handleCreateRow()}>
-              {t('apiTable.create')}
-            </BaseButton>
-          ) : (
-            <>
-              <BaseButton ghost onClick={() => handleToggleRow(record.id)}>
-                {record.isActive ? t('apiTable.deactivate') : t('apiTable.activate')}
-              </BaseButton>
-              <BaseButton type="default" danger onClick={() => handleDeleteRow(record.id)}>
-                {t('apiTable.delete')}
-              </BaseButton>
-            </>
-          )}
-        </BaseSpace>
-      ),
-    },
+      render: (_, record) => {
+        const isCreating = record.id === -1;
+      return (
+        <ActionRow
+          record={record}
+          isCreating={isCreating}
+          handleToggleRow={handleToggleRow}
+          handleDeleteRow={handleDeleteRow}
+          t={t}
+        />);
+      },
+    }
   ];
 
   return (
@@ -169,6 +165,7 @@ export const ApiKeyTable: React.FC = () => {
       onChange={handleTableChange}
       scroll={{ x: 800 }}
       bordered
+      style={{ padding: '2rem' }}
     />
   );
 };

src/components/auth/LoginForm/LoginForm.tsx

@@ -93,43 +93,8 @@ export const LoginForm: React.FC = () => {
           password: '',
         }}
       >
-        <Auth.FormTitle>{t('auth.common.login')}</Auth.FormTitle>
-        <S.LoginDescription>{t('auth.login.loginInfo')}</S.LoginDescription>
-        <Auth.FormItem
-          name="email"
-          label={t('auth.common.email')}
-          rules={[
-            { required: true, message: t('auth.common.requiredField') },
-            {
-              type: 'email',
-              message: t('auth.common.notValidEmail'),
-            },
-          ]}
-        >
-          <Auth.FormInput placeholder={t('auth.common.email')} />
-        </Auth.FormItem>
-        <Auth.FormItem
-          label={t('auth.common.password')}
-          name="password"
-          rules={[{ required: true, message: t('auth.common.requiredField') }]}
-        >
-          <Auth.FormInputPassword placeholder={t('auth.common.password')} />
-        </Auth.FormItem>
-        <Auth.ActionsWrapper>
-          <BaseForm.Item name="rememberMe" valuePropName="checked" noStyle>
-            <Auth.FormCheckbox>
-              <S.RememberMeText>{t('auth.login.rememberMe')}</S.RememberMeText>
-            </Auth.FormCheckbox>
-          </BaseForm.Item>
-          <Link to="/auth/forgot-password">
-            <S.ForgotPasswordText>{t('auth.common.forgotPass')}</S.ForgotPasswordText>
-          </Link>
-        </Auth.ActionsWrapper>
-        <BaseForm.Item noStyle>
-          <Auth.SubmitButton type="primary" htmlType="submit" loading={isLoading}>
-            {t('auth.common.login')}
-          </Auth.SubmitButton>
-        </BaseForm.Item>
+        <Auth.FormTitle style={{textAlign: "center"}}>{t('auth.common.login')}</Auth.FormTitle>
+        <hr></hr>      
         <BaseForm.Item noStyle>
           <Auth.SocialButton type="default" htmlType="button" onClick={handleGoogleLogin}>
             <Auth.SocialIconWrapper>

src/components/auth/SignUpForm/SignUpForm.tsx

@@ -95,62 +95,8 @@ export const SignUpForm: React.FC = () => {
         requiredMark="optional"
         initialValues={initValues}
       >
-        <S.Title>{t('auth.common.signUp')}</S.Title>
-        <Auth.FormItem
-          name="firstName"
-          label={t('common.firstName')}
-          rules={[{ required: true, message: t('auth.common.requiredField') }]}
-        >
-          <Auth.FormInput placeholder={t('common.firstName')} />
-        </Auth.FormItem>
-        <Auth.FormItem
-          name="lastName"
-          label={t('common.lastName')}
-          rules={[{ required: true, message: t('auth.common.requiredField') }]}
-        >
-          <Auth.FormInput placeholder={t('common.lastName')} />
-        </Auth.FormItem>
-        <Auth.FormItem
-          name="email"
-          label={t('auth.common.email')}
-          rules={[
-            { required: true, message: t('auth.common.requiredField') },
-            {
-              type: 'email',
-              message: t('auth.common.notValidEmail'),
-            },
-          ]}
-        >
-          <Auth.FormInput placeholder={t('auth.common.email')} />
-        </Auth.FormItem>
-        <Auth.FormItem
-          label={t('auth.common.password')}
-          name="password"
-          rules={[{ required: true, message: t('auth.common.requiredField') }]}
-        >
-          <Auth.FormInputPassword placeholder={t('auth.common.password')} />
-        </Auth.FormItem>
-        <Auth.ActionsWrapper>
-          <BaseForm.Item name="termOfUse" valuePropName="checked" noStyle>
-            <Auth.FormCheckbox>
-              <Auth.Text>
-                {t('auth.signup.agree')}{' '}
-                <Link to={tocUrl} target="_blank">
-                  <Auth.LinkText>{t('auth.signup.termOfUse')}</Auth.LinkText>
-                </Link>{' '}
-                {t('auth.signup.and')}{' '}
-                <Link to={privacyPolicyUrl} target="_blank">
-                  <Auth.LinkText>{t('auth.signup.privacyOPolicy')}</Auth.LinkText>
-                </Link>
-              </Auth.Text>
-            </Auth.FormCheckbox>
-          </BaseForm.Item>
-        </Auth.ActionsWrapper>
-        <BaseForm.Item noStyle>
-          <Auth.SubmitButton type="primary" htmlType="submit" loading={isLoading}>
-            {t('auth.common.signUp')}
-          </Auth.SubmitButton>
-        </BaseForm.Item>
+        <S.Title style={{textAlign: "center"}}>{t('auth.common.signUp')}</S.Title>
+        <hr></hr>
         <BaseForm.Item noStyle>
           <Auth.SocialButton type="default" htmlType="button" onClick={handleGoogleSignUp}>
             <Auth.SocialIconWrapper>
@@ -175,14 +121,28 @@ export const SignUpForm: React.FC = () => {
             {t('auth.signup.bitbucketLink')}
           </Auth.SocialButton>
         </BaseForm.Item>
+
         <Auth.FooterWrapper>
+
           <Auth.Text>
             {t('auth.signup.alreadyHaveAccount')}{' '}
             <Link to="/auth/login">
               <Auth.LinkText>{t('auth.common.here')}</Auth.LinkText>
             </Link>
           </Auth.Text>
         </Auth.FooterWrapper>
+        <Auth.FooterWrapper>
+          <Auth.Text style={{fontSize: "11px"}}>
+            {t('auth.signup.agree')}{' '}
+            <Link to={tocUrl} target="_blank" >
+              <Auth.LinkText style={{fontSize: "11px"}}>{t('auth.signup.termOfUse')}</Auth.LinkText>
+            </Link>{' '}
+            {t('auth.signup.and')}{' '}
+            <Link to={privacyPolicyUrl} target="_blank">
+              <Auth.LinkText style={{fontSize: "11px"}}>{t('auth.signup.privacyOPolicy')}</Auth.LinkText>
+            </Link>
+          </Auth.Text>
+        </Auth.FooterWrapper>
       </BaseForm>
     </Auth.FormWrapper>
   );