synced/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2025-03-25 14:05:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): changed to interfonts

Browse Source
This commit is contained in:
akhilmhdh
2023-01-23 22:08:01 +05:30
parent e67d68a7b9
commit 062c287e75
17 changed files with 39 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/package-lock.json generated
View File

@ -7,6 +7,7 @@
"dependencies": {
"@emotion/css": "^11.10.0",
"@emotion/server": "^11.10.0",
"@fontsource/inter": "^4.5.15",
"@fortawesome/fontawesome-svg-core": "^6.1.2",
"@fortawesome/free-brands-svg-icons": "^6.1.2",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
@ -2793,6 +2794,11 @@
"react-dom": ">=16.8.0"
}
},
"node_modules/@fontsource/inter": {
"version": "4.5.15",
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.15.tgz",
"integrity": "sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q=="
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz",
@ -24164,6 +24170,11 @@
"use-isomorphic-layout-effect": "^1.1.1"
}
},
"@fontsource/inter": {
"version": "4.5.15",
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.15.tgz",
"integrity": "sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q=="
},
"@fortawesome/fontawesome-common-types": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz",

1
frontend/package.json
View File

@ -14,6 +14,7 @@
"dependencies": {
"@emotion/css": "^11.10.0",
"@emotion/server": "^11.10.0",
"@fontsource/inter": "^4.5.15",
"@fortawesome/fontawesome-svg-core": "^6.1.2",
"@fortawesome/free-brands-svg-icons": "^6.1.2",
"@fortawesome/free-regular-svg-icons": "^6.1.1",

2
frontend/src/components/v2/Button/Button.tsx
View File

@ -15,7 +15,7 @@ const buttonVariants = cva(
[
'button',
'transition-all',
'font-medium',
'font-inter font-medium',
'cursor-pointer',
'inline-flex items-center justify-center',
'relative'

2
frontend/src/components/v2/Card/Card.tsx
View File

@ -47,7 +47,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
<div
ref={ref}
className={twMerge(
'flex flex-col w-full text-gray-200 bg-mineshaft-700 shadow-md',
'flex flex-col w-full font-inter text-gray-200 bg-mineshaft-700 shadow-md',
isFullHeight && 'h-full',
isRounded && 'rounded-md',
isPlain && 'shadow-none',

2
frontend/src/components/v2/Checkbox/Checkbox.tsx
View File

@ -25,7 +25,7 @@ export const Checkbox = ({
...props
}: CheckboxProps): JSX.Element => {
return (
<div className="flex items-center text-bunker-300">
<div className="flex items-center font-inter text-bunker-300">
<CheckboxPrimitive.Root
className={twMerge(
'flex items-center justify-center w-5 h-5 mr-3 transition-all rounded shadow hover:bg-bunker-200 bg-bunker-300',

2
frontend/src/components/v2/Dropdown/Dropdown.tsx
View File

@ -62,7 +62,7 @@ export const DropdownMenuItem = <T extends ElementType = 'button'>({
<DropdownMenuPrimitive.Item
{...props}
className={twMerge(
'text-sm block px-4 py-2 data-[highlighted]:bg-gray-700 00 outline-none cursor-pointer',
'text-sm block font-inter px-4 py-2 data-[highlighted]:bg-gray-700 outline-none cursor-pointer',
className
)}
>

4
frontend/src/components/v2/FormControl/FormControl.tsx
View File

@ -13,7 +13,7 @@ export type FormLabelProps = {
export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
<Label.Root className="text-mineshaft-300 text-sm font-medium block mb-1 ml-0.5" htmlFor={id}>
{label}
{isRequired && <span className="text-red ml-1">*</span>}
{isRequired && <span className="ml-1 text-red">*</span>}
</Label.Root>
);
@ -25,7 +25,7 @@ export type FormHelperTextProps = {
export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
<div
className={twMerge(
'text-xs flex items-center opacity-90 text-mineshaft-300 mt-2',
'text-xs font-inter flex items-center opacity-90 text-mineshaft-300 mt-2',
isError && 'text-red-600'
)}
>

2
frontend/src/components/v2/IconButton/IconButton.tsx
View File

@ -14,7 +14,7 @@ const iconButtonVariants = cva(
[
'button',
'transition-all',
'font-medium',
'font-inter font-medium',
'cursor-pointer',
'inline-flex items-center justify-center',
'relative'

2
frontend/src/components/v2/Input/Input.tsx
View File

@ -38,7 +38,7 @@ const inputVariants = cva(
}
);
const inputParentContainerVariants = cva('inline-flex items-center border relative', {
const inputParentContainerVariants = cva('inline-flex font-inter items-center border relative', {
variants: {
isRounded: {
true: ['rounded-md'],

2
frontend/src/components/v2/Menu/Menu.tsx
View File

@ -35,7 +35,7 @@ export const MenuItem = <T extends ElementType = 'button'>({
}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
<li
className={twMerge(
'px-2 py-3 flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
'px-2 py-3 font-inter flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
isSelected && 'text-primary',
isDisabled && 'text-gray-500 hover:bg-transparent cursor-not-allowed',
className

8
frontend/src/components/v2/Modal/Modal.tsx
View File

@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
import { Card, CardBody, CardFooter, CardTitle } from '../Card';
import { IconButton } from '../IconButton';
export type ModalContentProps = Omit<DialogPrimitive.DialogContentProps, 'open'> & {
export type ModalContentProps = DialogPrimitive.DialogContentProps & {
title?: ReactNode;
subTitle?: string;
footerContent?: ReactNode;
@ -48,8 +48,10 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
ModalContent.displayName = 'ModalContent';
export const Modal = DialogPrimitive.Root;
export type ModalProps = DialogPrimitive.DialogProps;
export type ModalProps = Omit<DialogPrimitive.DialogProps, 'open'> & { isOpen?: boolean };
export const Modal = ({ isOpen, ...props }: ModalProps) => (
<DialogPrimitive.Root open={isOpen} {...props} />
);
export const ModalTrigger = DialogPrimitive.Trigger;
export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;

6
frontend/src/components/v2/Select/Select.tsx
View File

@ -22,8 +22,8 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
<SelectPrimitive.Trigger
ref={ref}
className={twMerge(
`select inline-flex items-center justify-between
px-4 py-2.5 text-sm text-white rounded-md bg-mineshaft-800`,
`inline-flex items-center justify-between data-[placeholder]:text-gray-500
px-4 py-2.5 font-inter text-sm text-white rounded-md bg-mineshaft-800`,
className
)}
>
@ -36,7 +36,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
<SelectPrimitive.Content
position="popper"
sideOffset={5}
className="overflow-hidden text-white rounded-md shadow-md bg-mineshaft-800"
className="overflow-hidden text-white rounded-md shadow-md font-inter bg-mineshaft-800"
style={{ width: 'var(--radix-select-trigger-width)' }}
>
<SelectPrimitive.ScrollUpButton>

2
frontend/src/components/v2/Switch/Switch.tsx
View File

@ -19,7 +19,7 @@ export const Switch = ({
isRequired,
...props
}: SwitchProps): JSX.Element => (
<div className="flex items-center text-bunker-300">
<div className="flex items-center text-bunker-300 font-inter">
<label className="text-sm" htmlFor={id}>
{children}
{isRequired && <span className="pl-1 text-red">*</span>}

2
frontend/src/components/v2/Table/Table.tsx
View File

@ -14,7 +14,7 @@ export const TableContainer = ({
}: TableContainerProps): JSX.Element => (
<div
className={twMerge(
'overflow-x-auto shadow-md relative border border-solid border-mineshaft-700',
'overflow-x-auto font-inter shadow-md relative border border-solid border-mineshaft-700',
isRounded && 'rounded-md',
className
)}

2
frontend/src/components/v2/TextArea/TextArea.tsx
View File

@ -10,7 +10,7 @@ type Props = {
};
const textAreaVariants = cva(
'textarea w-full p-2 border border-solid text-gray-400 placeholder-gray-500 placeholder-opacity-50',
'textarea w-full p-2 border border-solid text-gray-400 font-inter placeholder-gray-500 placeholder-opacity-50',
{
variants: {
size: {

8
frontend/src/styles/globals.css
View File

@ -2,8 +2,6 @@
@tailwind components;
@tailwind utilities;
@layer components {
.select[data-placeholder] {
color: theme("colors.gray.500")
}
}
@import '@fontsource/inter/400.css';
@import '@fontsource/inter/500.css';
@import '@fontsource/inter/700.css';

4
frontend/tailwind.config.js
View File

@ -7,6 +7,7 @@ const round = (num) =>
const rem = (px) => `${round(px / 16)}rem`;
const em = (px, base) => `${round(px / base)}em`;
// TODO(akhilmhdh): Clean up this later
let defaultModifiers = {
sm: {
css: [
@ -1238,6 +1239,9 @@ module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
fontFamily: {
inter: ['Inter']
},
colors: {
// You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/
primary: {