MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Adjustment

Browse Source 
- Sesuaikan color palette success, info, danger, warning sesuai dengan design system Figma
- Sesuai background pagination
- Fix width form login tidak maksimal
This commit is contained in:
Hafid Nur
2025-03-27 22:28:40 +07:00
parent 6bfa48bed8
commit 2d9473ea7c
7 changed files with 127 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/backoffice/src/app/page.tsx
+6 -1
View File
@@ -1,8 +1,11 @@
import { FC, ReactElement } from 'react'; import { FC, ReactElement } from 'react';
import { useNavigate } from 'react-router';
import { Button } from '@imphnen-frontend-service/ui/atoms'; import { Button } from '@imphnen-frontend-service/ui/atoms';
import { InputForm } from '@imphnen-frontend-service/ui/molecules'; import { InputForm } from '@imphnen-frontend-service/ui/molecules';
export const Components: FC = (): ReactElement => { export const Components: FC = (): ReactElement => {
const navigate = useNavigate();
return ( return (
<div className="flex justify-center items-center min-h-screen"> <div className="flex justify-center items-center min-h-screen">
<div className="bg-white border border-primary-200 shadow-lg p-[60px] text-center flex flex-col justify-items-stretch gap-8 rounded-2xl"> <div className="bg-white border border-primary-200 shadow-lg p-[60px] text-center flex flex-col justify-items-stretch gap-8 rounded-2xl">
@@ -15,14 +18,16 @@ export const Components: FC = (): ReactElement => {
placeholder="Masukkan Email" placeholder="Masukkan Email"
type="email" type="email"
size="lg" size="lg"
className="w-full"
/> />
<InputForm <InputForm
label="Password" label="Password"
placeholder="Masukkan password" placeholder="Masukkan password"
type="password" type="password"
size="lg" size="lg"
className="w-full"
/> />
<Button>Login</Button> <Button onClick={() => navigate('/dashboard')}>Login</Button>
</div> </div>
</div> </div>
); );
apps/backoffice/src/app/transactions/page.tsx
+3 -2
View File
@@ -3,6 +3,7 @@ import {
FilterOutlined, FilterOutlined,
SearchOutlined, SearchOutlined,
FileTextOutlined, FileTextOutlined,
AuditOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Button, Input } from '@imphnen-frontend-service/ui/atoms'; import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
import { Pagination } from '@imphnen-frontend-service/ui/molecules'; import { Pagination } from '@imphnen-frontend-service/ui/molecules';
@@ -139,9 +140,9 @@ export const Components: FC = (): ReactElement => {
e.stopPropagation(); e.stopPropagation();
handleValidate(item.id); handleValidate(item.id);
}} }}
className="flex items-center gap-2" className="flex items-center gap-2 w-full"
> >
<FileTextOutlined /> Validate <AuditOutlined className="text-[16px]" /> Validate
</Button> </Button>
), ),
}, },
apps/backoffice/src/index.css
+37 -41
View File
@@ -27,49 +27,45 @@
--color-neutral-900: #2f2f2f; --color-neutral-900: #2f2f2f;
--color-neutral-950: #2b2b2b; --color-neutral-950: #2b2b2b;
--color-success-50: #e7f2ee; --color-success-100: #e0fbd8;
--color-success-100: #cde6dd; --color-success-200: #bcf8b0;
--color-success-200: #9bccbc; --color-success-300: #8eea85;
--color-success-300: #78bdab; --color-success-400: #63d564;
--color-success-400: #4ca88f; --color-success-500: #35ba43;
--color-success-500: #349078; --color-success-600: #269f3e;
--color-success-600: #2f7c66; --color-success-700: #1a8439;
--color-success-700: #26624f; --color-success-800: #106b32;
--color-success-800: #1e4a3b; --color-success-900: #0b592f;
--color-success-900: #1b513b;
--color-info-50: #e7f4f5; --color-info-100: #ccfcfe;
--color-info-100: #cce9ea; --color-info-200: #9bf3fd;
--color-info-200: #99d3d5; --color-info-300: #67e3fb;
--color-info-300: #78c4c7; --color-info-400: #42cdf8;
--color-info-400: #3aa9ad; --color-info-500: #04acf3;
--color-info-500: #279599; --color-info-600: #0185d0;
--color-info-600: #207d82; --color-info-700: #0264af;
--color-info-700: #1a666b; --color-info-800: #01478d;
--color-info-800: #124c52; --color-info-900: #003375;
--color-info-900: #093d43;
--color-warning-50: #fffce6; --color-warning-100: #fffcd3;
--color-warning-100: #fff8cc; --color-warning-200: #fffaa9;
--color-warning-200: #fef39b; --color-warning-300: #fff67d;
--color-warning-300: #fde967; --color-warning-400: #fff25d;
--color-warning-400: #fbd93d; --color-warning-500: #ffed27;
--color-warning-500: #f3c215; --color-warning-600: #dbc91d;
--color-warning-600: #d7a20f; --color-warning-700: #b7a714;
--color-warning-700: #aa7e0c; --color-warning-800: #93850b;
--color-warning-800: #805c07; --color-warning-900: #7a6d07;
--color-warning-900: #665c00;
--color-danger-50: #ffe7e7; --color-danger-100: #ffe8da;
--color-danger-100: #ffcece; --color-danger-200: #ffcbb3;
--color-danger-200: #ff9f9f; --color-danger-300: #ffaa8d;
--color-danger-300: #ff6e6e; --color-danger-400: #ff8870;
--color-danger-400: #fa4646; --color-danger-500: #ff5242;
--color-danger-500: #ef1f1f; --color-danger-600: #da3030;
--color-danger-600: #d11515; --color-danger-700: #b7212d;
--color-danger-700: #a51111; --color-danger-800: #93152a;
--color-danger-800: #7f0c0c; --color-danger-900: #7a0c27;
--color-danger-900: #5d2d2d;
--radius-none: 0px; --radius-none: 0px;
--radius-sm: 2px; --radius-sm: 2px;
@@ -137,4 +133,4 @@
font-size: 12px; font-size: 12px;
line-height: 1.2; line-height: 1.2;
} }
} }
apps/gacha/src/index.css
+37 -41
View File
@@ -27,49 +27,45 @@
--color-neutral-900: #2f2f2f; --color-neutral-900: #2f2f2f;
--color-neutral-950: #2b2b2b; --color-neutral-950: #2b2b2b;
--color-success-50: #e7f2ee; --color-success-100: #e0fbd8;
--color-success-100: #cde6dd; --color-success-200: #bcf8b0;
--color-success-200: #9bccbc; --color-success-300: #8eea85;
--color-success-300: #78bdab; --color-success-400: #63d564;
--color-success-400: #4ca88f; --color-success-500: #35ba43;
--color-success-500: #349078; --color-success-600: #269f3e;
--color-success-600: #2f7c66; --color-success-700: #1a8439;
--color-success-700: #26624f; --color-success-800: #106b32;
--color-success-800: #1e4a3b; --color-success-900: #0b592f;
--color-success-900: #1b513b;
--color-info-50: #e7f4f5; --color-info-100: #ccfcfe;
--color-info-100: #cce9ea; --color-info-200: #9bf3fd;
--color-info-200: #99d3d5; --color-info-300: #67e3fb;
--color-info-300: #78c4c7; --color-info-400: #42cdf8;
--color-info-400: #3aa9ad; --color-info-500: #04acf3;
--color-info-500: #279599; --color-info-600: #0185d0;
--color-info-600: #207d82; --color-info-700: #0264af;
--color-info-700: #1a666b; --color-info-800: #01478d;
--color-info-800: #124c52; --color-info-900: #003375;
--color-info-900: #093d43;
--color-warning-50: #fffce6; --color-warning-100: #fffcd3;
--color-warning-100: #fff8cc; --color-warning-200: #fffaa9;
--color-warning-200: #fef39b; --color-warning-300: #fff67d;
--color-warning-300: #fde967; --color-warning-400: #fff25d;
--color-warning-400: #fbd93d; --color-warning-500: #ffed27;
--color-warning-500: #f3c215; --color-warning-600: #dbc91d;
--color-warning-600: #d7a20f; --color-warning-700: #b7a714;
--color-warning-700: #aa7e0c; --color-warning-800: #93850b;
--color-warning-800: #805c07; --color-warning-900: #7a6d07;
--color-warning-900: #665c00;
--color-danger-50: #ffe7e7; --color-danger-100: #ffe8da;
--color-danger-100: #ffcece; --color-danger-200: #ffcbb3;
--color-danger-200: #ff9f9f; --color-danger-300: #ffaa8d;
--color-danger-300: #ff6e6e; --color-danger-400: #ff8870;
--color-danger-400: #fa4646; --color-danger-500: #ff5242;
--color-danger-500: #ef1f1f; --color-danger-600: #da3030;
--color-danger-600: #d11515; --color-danger-700: #b7212d;
--color-danger-700: #a51111; --color-danger-800: #93152a;
--color-danger-800: #7f0c0c; --color-danger-900: #7a0c27;
--color-danger-900: #5d2d2d;
--radius-none: 0px; --radius-none: 0px;
--radius-sm: 2px; --radius-sm: 2px;
@@ -137,4 +133,4 @@
font-size: 12px; font-size: 12px;
line-height: 1.2; line-height: 1.2;
} }
} }
libs/ui/src/index.css
+37 -41
View File
@@ -27,49 +27,45 @@
--color-neutral-900: #2f2f2f; --color-neutral-900: #2f2f2f;
--color-neutral-950: #2b2b2b; --color-neutral-950: #2b2b2b;
--color-success-50: #e7f2ee; --color-success-100: #e0fbd8;
--color-success-100: #cde6dd; --color-success-200: #bcf8b0;
--color-success-200: #9bccbc; --color-success-300: #8eea85;
--color-success-300: #78bdab; --color-success-400: #63d564;
--color-success-400: #4ca88f; --color-success-500: #35ba43;
--color-success-500: #349078; --color-success-600: #269f3e;
--color-success-600: #2f7c66; --color-success-700: #1a8439;
--color-success-700: #26624f; --color-success-800: #106b32;
--color-success-800: #1e4a3b; --color-success-900: #0b592f;
--color-success-900: #1b513b;
--color-info-50: #e7f4f5; --color-info-100: #ccfcfe;
--color-info-100: #cce9ea; --color-info-200: #9bf3fd;
--color-info-200: #99d3d5; --color-info-300: #67e3fb;
--color-info-300: #78c4c7; --color-info-400: #42cdf8;
--color-info-400: #3aa9ad; --color-info-500: #04acf3;
--color-info-500: #279599; --color-info-600: #0185d0;
--color-info-600: #207d82; --color-info-700: #0264af;
--color-info-700: #1a666b; --color-info-800: #01478d;
--color-info-800: #124c52; --color-info-900: #003375;
--color-info-900: #093d43;
--color-warning-50: #fffce6; --color-warning-100: #fffcd3;
--color-warning-100: #fff8cc; --color-warning-200: #fffaa9;
--color-warning-200: #fef39b; --color-warning-300: #fff67d;
--color-warning-300: #fde967; --color-warning-400: #fff25d;
--color-warning-400: #fbd93d; --color-warning-500: #ffed27;
--color-warning-500: #f3c215; --color-warning-600: #dbc91d;
--color-warning-600: #d7a20f; --color-warning-700: #b7a714;
--color-warning-700: #aa7e0c; --color-warning-800: #93850b;
--color-warning-800: #805c07; --color-warning-900: #7a6d07;
--color-warning-900: #665c00;
--color-danger-50: #ffe7e7; --color-danger-100: #ffe8da;
--color-danger-100: #ffcece; --color-danger-200: #ffcbb3;
--color-danger-200: #ff9f9f; --color-danger-300: #ffaa8d;
--color-danger-300: #ff6e6e; --color-danger-400: #ff8870;
--color-danger-400: #fa4646; --color-danger-500: #ff5242;
--color-danger-500: #ef1f1f; --color-danger-600: #da3030;
--color-danger-600: #d11515; --color-danger-700: #b7212d;
--color-danger-700: #a51111; --color-danger-800: #93152a;
--color-danger-800: #7f0c0c; --color-danger-900: #7a0c27;
--color-danger-900: #5d2d2d;
--radius-none: 0px; --radius-none: 0px;
--radius-sm: 2px; --radius-sm: 2px;
@@ -137,4 +133,4 @@
font-size: 12px; font-size: 12px;
line-height: 1.2; line-height: 1.2;
} }
} }
libs/ui/src/molecules/pagination/pagination.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export const Pagination: FC<PaginationProps> = ({
className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${ className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
currentPage === page currentPage === page
? 'bg-primary-500 text-white' ? 'bg-primary-500 text-white'
: 'border border-gray-200 hover:bg-gray-50' : 'bg-primary-100 hover:bg-primary-200'
}`} }`}
> >
{page} {page}
libs/ui/src/organisms/backoffice-sidebar/backoffice-sidebar.tsx
+6 -1
View File
@@ -6,10 +6,11 @@ import {
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Button } from '../../atoms'; import { Button } from '../../atoms';
import { FC, ReactElement } from 'react'; import { FC, ReactElement } from 'react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation, useNavigate } from 'react-router-dom';
export const BackofficeSidebar: FC = (): ReactElement => { export const BackofficeSidebar: FC = (): ReactElement => {
const location = useLocation(); const location = useLocation();
const navigate = useNavigate();
const isActive = (path: string) => location.pathname.includes(path); const isActive = (path: string) => location.pathname.includes(path);
return ( return (
@@ -61,7 +62,11 @@ export const BackofficeSidebar: FC = (): ReactElement => {
{/* Log Out Button */} {/* Log Out Button */}
<div className="w-full"> <div className="w-full">
<hr className="mb-5 border-primary-200" /> <hr className="mb-5 border-primary-200" />
<Button <Button
onClick={() => {
navigate('/');
}}
variant="text" variant="text"
className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full" className="items-start justify-start gap-3 px-[8px] py-[10px] text-gray-700 hover:text-red-500 transition-colors w-full"
> >