jeffemmett
/
postiz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Inter font

This commit is contained in:
Nevo David 2024-03-17 11:12:41 +07:00
parent 7438490550
commit cbe5906b1e
18 changed files with 48 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/frontend/src/app/auth/providers/github.provider.tsx
View File

@ -1,5 +1,6 @@
import { useCallback } from 'react';
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
import interClass from '@gitroom/react/helpers/inter.font';
export const GithubProvider = () => {
const fetch = useFetch();
@ -11,7 +12,7 @@ export const GithubProvider = () => {
return (
<div
onClick={gotoLogin}
className="cursor-pointer bg-white h-[44px] rounded-[4px] flex justify-center items-center text-[#121A2D] font-['Inter'] gap-[4px]"
className={`cursor-pointer bg-white h-[44px] rounded-[4px] flex justify-center items-center text-[#121A2D] ${interClass} gap-[4px]`}
>
<div>
<svg

8
apps/frontend/src/app/layout.tsx
View File

@ -1,18 +1,18 @@
export const dynamic = 'force-dynamic';
import interClass from '@gitroom/react/helpers/inter.font';
export const dynamic = 'force-dynamic';
import './global.css';
import 'react-tooltip/dist/react-tooltip.css';
import LayoutContext from '@gitroom/frontend/components/layout/layout.context';
import { ReactNode } from 'react';
import { Chakra_Petch, Inter } from 'next/font/google';
import { Chakra_Petch } from 'next/font/google';
const chakra = Chakra_Petch({ weight: '400', subsets: ['latin'] });
const inter = Inter({ subsets: ['latin'], display: 'swap' });
export default async function AppLayout({ children }: { children: ReactNode }) {
return (
<html className={inter.className}>
<html className={interClass}>
<head>
<link rel="icon" href="/favicon.png" sizes="any" />
</head>

3
apps/frontend/src/components/auth/login.tsx
View File

@ -9,6 +9,7 @@ import { useMemo, useState } from 'react';
import { classValidatorResolver } from '@hookform/resolvers/class-validator';
import { LoginUserDto } from '@gitroom/nestjs-libraries/dtos/auth/login.user.dto';
import { GithubProvider } from '@gitroom/frontend/app/auth/providers/github.provider';
import interClass from '@gitroom/react/helpers/inter.font';
type Inputs = {
email: string;
@ -60,7 +61,7 @@ export function Login() {
<GithubProvider />
<div className="h-[20px] mb-[24px] mt-[24px] relative">
<div className="absolute w-full h-[1px] bg-[#28344F] top-[50%] -translate-y-[50%]" />
<div className="absolute z-[1] font-['Inter'] justify-center items-center w-full left-0 top-0 flex">
<div className={`absolute z-[1] ${interClass} justify-center items-center w-full left-0 top-0 flex`}>
<div className="bg-[#0a0a0a] px-[16px]">OR</div>
</div>
</div>

3
apps/frontend/src/components/auth/register.tsx
View File

@ -11,6 +11,7 @@ import { CreateOrgUserDto } from '@gitroom/nestjs-libraries/dtos/auth/create.org
import { GithubProvider } from '@gitroom/frontend/app/auth/providers/github.provider';
import { useSearchParams } from 'next/navigation';
import { LoadingComponent } from '@gitroom/frontend/components/layout/loading';
import interClass from '@gitroom/react/helpers/inter.font';
type Inputs = {
email: string;
@ -113,7 +114,7 @@ export function RegisterAfter({
{!isAfterProvider && (
<div className="h-[20px] mb-[24px] mt-[24px] relative">
<div className="absolute w-full h-[1px] bg-[#28344F] top-[50%] -translate-y-[50%]" />
<div className="absolute z-[1] font-['Inter'] justify-center items-center w-full left-0 top-0 flex">
<div className={`absolute z-[1] ${interClass} justify-center items-center w-full left-0 top-0 flex`}>
<div className="bg-[#0a0a0a] px-[16px]">OR</div>
</div>
</div>

5
apps/frontend/src/components/billing/faq.component.tsx
View File

@ -1,5 +1,6 @@
import { FC, useCallback, useState } from 'react';
import clsx from 'clsx';
import interClass from '@gitroom/react/helpers/inter.font';
const list = [
{
@ -55,7 +56,7 @@ export const FAQSection: FC<{ title: string; description: string }> = (
className="bg-sixth p-[24px] border border-tableBorder rounded-[4px] flex flex-col"
onClick={changeShow}
>
<div className="text-[20px] text-['Inter'] cursor-pointer flex justify-center">
<div className={`text-[20px] ${interClass} cursor-pointer flex justify-center`}>
<div className="flex-1">{title}</div>
<div className="flex items-center justify-center w-[32px]">
{!show ? (
@ -101,7 +102,7 @@ export const FAQSection: FC<{ title: string; description: string }> = (
onClick={(e) => {
e.stopPropagation();
}}
className="mt-[16px] w-full text-wrap font-['Inter'] font-[400] text-[16px] text-[#D3D3D3] select-text"
className={`mt-[16px] w-full text-wrap ${interClass} font-[400] text-[16px] text-[#D3D3D3] select-text`}
dangerouslySetInnerHTML={{ __html: description }}
/>
</div>

3
apps/frontend/src/components/billing/main.billing.component.tsx
View File

@ -18,6 +18,7 @@ import { FAQComponent } from '@gitroom/frontend/components/billing/faq.component
import { useSWRConfig } from 'swr';
import { useUser } from '@gitroom/frontend/components/layout/user.context';
import { useRouter } from 'next/navigation';
import interClass from '@gitroom/react/helpers/inter.font';
export interface Tiers {
month: Array<{
@ -366,7 +367,7 @@ export const MainBillingComponent: FC<{
<div className="text-[38px] flex gap-[2px] items-center">
<div>{p.price ? '$' + totalChannels * p.price : p.name}</div>
{!!p.price && (
<div className="text-[14px] font-['Inter'] text-[#AAA]">
<div className={`text-[14px] ${interClass} text-[#AAA]`}>
{monthlyOrYearly === 'on' ? '/year' : '/month'}
</div>
)}

5
apps/frontend/src/components/launches/comments/comment.component.tsx
View File

@ -9,6 +9,7 @@ import { useUser } from '@gitroom/frontend/components/layout/user.context';
import { Input } from '@gitroom/react/form/input';
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
import interClass from '@gitroom/react/helpers/inter.font';
export const CommentBox: FC<{
value?: string;
@ -310,7 +311,7 @@ export const CommentComponent: FC<{ date: dayjs.Dayjs }> = (props) => {
>
<div className="flex gap-[8px]">
<div className="w-[40px] flex flex-col items-center">
<div className="rounded-full relative z-[2] text-blue-500 font-bold font-['Inter'] flex justify-center items-center w-[40px] h-[40px] bg-white border-tableBorder border">
<div className={`rounded-full relative z-[2] text-blue-500 font-bold ${interClass} flex justify-center items-center w-[40px] h-[40px] bg-white border-tableBorder border`}>
{comment.user.email[0].toUpperCase()}
</div>
<div className="flex-1 w-[2px] h-[calc(100%-10px)] bg-[#2E3336] absolute top-[10px] z-[1]" />
@ -336,7 +337,7 @@ export const CommentComponent: FC<{ date: dayjs.Dayjs }> = (props) => {
className={clsx(`flex gap-[8px] relative`)}
>
<div className="w-[40px] flex flex-col items-center">
<div className="rounded-full relative z-[2] text-blue-500 font-bold font-['Inter'] flex justify-center items-center w-[40px] h-[40px] bg-white border-tableBorder border">
<div className={`rounded-full relative z-[2] text-blue-500 font-bold ${interClass} flex justify-center items-center w-[40px] h-[40px] bg-white border-tableBorder border`}>
{childComment.user.email[0].toUpperCase()}
</div>
</div>

3
apps/frontend/src/components/launches/menu/menu.tsx
View File

@ -3,6 +3,7 @@ import { useClickOutside } from '@mantine/hooks';
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
import { useToaster } from '@gitroom/react/toaster/toaster';
import interClass from '@gitroom/react/helpers/inter.font';
export const Menu: FC<{
canEnable: boolean;
@ -100,7 +101,7 @@ export const Menu: FC<{
{show && (
<div
onClick={(e) => e.stopPropagation()}
className="absolute top-[100%] left-0 p-[8px] px-[20px] bg-fifth flex flex-col gap-[16px] z-[100] rounded-[8px] border border-tableBorder font-['Inter'] text-nowrap"
className={`absolute top-[100%] left-0 p-[8px] px-[20px] bg-fifth flex flex-col gap-[16px] z-[100] rounded-[8px] border border-tableBorder ${interClass} text-nowrap`}
>
{canEnable && (
<div

3
apps/frontend/src/components/launches/providers/devto/devto.tags.tsx
View File

@ -2,6 +2,7 @@ import { FC, useCallback, useEffect, useState } from 'react';
import { useCustomProviderFunction } from '@gitroom/frontend/components/launches/helpers/use.custom.provider.function';
import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
import { ReactTags } from 'react-tag-autocomplete';
import interClass from '@gitroom/react/helpers/inter.font';
export const DevtoTags: FC<{
name: string;
@ -49,7 +50,7 @@ export const DevtoTags: FC<{
return (
<div>
<div className="font-['Inter'] text-[14px] mb-[6px]">{label}</div>
<div className={`${interClass} text-[14px] mb-[6px]`}>{label}</div>
<ReactTags
suggestions={tags}
selected={tagValue}

3
apps/frontend/src/components/launches/providers/hashnode/hashnode.tags.tsx
View File

@ -2,6 +2,7 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { useCustomProviderFunction } from '@gitroom/frontend/components/launches/helpers/use.custom.provider.function';
import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
import { ReactTags } from 'react-tag-autocomplete';
import interClass from '@gitroom/react/helpers/inter.font';
export const HashnodeTags: FC<{
name: string;
@ -54,7 +55,7 @@ export const HashnodeTags: FC<{
return (
<div>
<div className="font-['Inter'] text-[14px] mb-[6px]">{label}</div>
<div className={`${interClass} text-[14px] mb-[6px]`}>{label}</div>
<ReactTags
suggestions={tags}
selected={tagValue}

3
apps/frontend/src/components/launches/providers/medium/medium.provider.tsx
View File

@ -10,6 +10,7 @@ import clsx from 'clsx';
import MDEditor from '@uiw/react-md-editor';
import localFont from 'next/font/local'
import {Canonical} from "@gitroom/react/form/canonical";
import interClass from '@gitroom/react/helpers/inter.font';
const charter = localFont({
src: [
@ -47,7 +48,7 @@ const MediumPreview: FC = () => {
return (
<div
className={clsx(
'font-[800] flex h-[1000px] w-[699.8px] text-[#242424] font-[\'Inter\'] rounded-[10px] bg-white overflow-hidden overflow-y-auto flex-col gap-[56px]'
`font-[800] flex h-[1000px] w-[699.8px] text-[#242424] ${interClass} rounded-[10px] bg-white overflow-hidden overflow-y-auto flex-col gap-[56px]`
)}
>
<div className="px-[60px] pt-[20px]">

3
apps/frontend/src/components/launches/providers/medium/medium.tags.tsx
View File

@ -1,6 +1,7 @@
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
import { ReactTags } from 'react-tag-autocomplete';
import interClass from '@gitroom/react/helpers/inter.font';
export const MediumTags: FC<{
name: string;
@ -46,7 +47,7 @@ export const MediumTags: FC<{
return (
<div>
<div className="font-['Inter'] text-[14px] mb-[6px]">{label}</div>
<div className={`${interClass} text-[14px] mb-[6px]`}>{label}</div>
<ReactTags
suggestions={suggestionsArray}
selected={tagValue}

3
apps/frontend/src/components/launches/providers/reddit/reddit.provider.tsx
View File

@ -14,6 +14,7 @@ import clsx from 'clsx';
import { useMediaDirectory } from '@gitroom/react/helpers/use.media.directory';
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
import MDEditor from '@uiw/react-md-editor';
import interClass from '@gitroom/react/helpers/inter.font';
const RenderRedditComponent: FC<{
type: string;
@ -92,7 +93,7 @@ const RedditPreview: FC = (props) => {
<div
key={index}
className={clsx(
"bg-[#0B1416] w-full p-[10px] flex flex-col font-['Inter'] border-tableBorder border"
`bg-[#0B1416] w-full p-[10px] flex flex-col ${interClass} border-tableBorder border`
)}
>
<div className="flex flex-col">

5
apps/frontend/src/components/media/media.component.tsx
View File

@ -10,6 +10,7 @@ import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.v
import EventEmitter from 'events';
import { TopTitle } from '@gitroom/frontend/components/launches/helpers/top.title.component';
import clsx from 'clsx';
import interClass from '@gitroom/react/helpers/inter.font';
const showModalEmitter = new EventEmitter();
export const ShowMediaBoxModal: FC = () => {
@ -141,7 +142,7 @@ export const MediaBox: FC<{
accept="image/*"
onChange={uploadMedia}
/>
<button className="cursor-pointer font-[500] flex justify-center items-center gap-[4px] text-[12px] rounded-[4px] w-[107px] h-[25px] bg-[#0b0f1c] text-white font-['Inter'] border-[2px] border-[#506490]">
<button className={`cursor-pointer font-[500] flex justify-center items-center gap-[4px] text-[12px] rounded-[4px] w-[107px] h-[25px] bg-[#0b0f1c] text-white ${interClass} border-[2px] border-[#506490]`}>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -180,7 +181,7 @@ export const MediaBox: FC<{
accept="image/*"
onChange={uploadMedia}
/>
<button className="cursor-pointer font-[500] flex justify-center items-center gap-[4px] text-[12px] rounded-[4px] w-[107px] h-[25px] bg-[#0b0f1c] text-white font-['Inter'] border-[2px] border-[#506490]">
<button className={`cursor-pointer font-[500] flex justify-center items-center gap-[4px] text-[12px] rounded-[4px] w-[107px] h-[25px] bg-[#0b0f1c] text-white ${interClass} border-[2px] border-[#506490]`}>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"

5
apps/frontend/src/components/notifications/notification.component.tsx
View File

@ -5,6 +5,7 @@ import useSWR from 'swr';
import { FC, useCallback, useState } from 'react';
import clsx from 'clsx';
import { useClickAway } from '@uidotdev/usehooks';
import interClass from '@gitroom/react/helpers/inter.font';
function replaceLinks(text: string) {
const urlRegex =
@ -24,7 +25,7 @@ export const ShowNotification: FC<{
return (
<div
className={clsx(
"text-white px-[16px] py-[10px] border-b border-tableBorder last:border-b-0 transition-colors font-['Inter'] overflow-hidden text-ellipsis",
`text-white px-[16px] py-[10px] border-b border-tableBorder last:border-b-0 transition-colors ${interClass} overflow-hidden text-ellipsis`,
newNotification && 'font-bold bg-[#7236f1] animate-newMessages'
)}
dangerouslySetInnerHTML={{ __html: replaceLinks(notification.content) }}
@ -41,7 +42,7 @@ export const NotificationOpenComponent = () => {
return (
<div className="opacity-0 animate-normalFadeDown mt-[10px] absolute w-[420px] min-h-[200px] top-[100%] right-0 bg-third text-white rounded-[16px] flex flex-col border border-tableBorder">
<div className="p-[16px] border-b border-tableBorder font-['Inter'] font-bold">
<div className={`p-[16px] border-b border-tableBorder ${interClass} font-bold`}>
Notifications
</div>

7
apps/frontend/src/components/settings/github.component.tsx
View File

@ -6,6 +6,7 @@ import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
import { Input } from '@gitroom/react/form/input';
import { useToaster } from '@gitroom/react/toaster/toaster';
import interClass from '@gitroom/react/helpers/inter.font';
const ConnectedComponent: FC<{
id: string;
@ -29,7 +30,7 @@ const ConnectedComponent: FC<{
}, []);
return (
<div className="my-[16px] mt-[16px] h-[90px] bg-sixth border-fifth border rounded-[4px] p-[24px]">
<div className="flex items-center gap-[8px] font-[Inter]">
<div className={`flex items-center gap-[8px] ${interClass}`}>
<div>
<Image src="/icons/github.svg" alt="GitHub" width={40} height={40} />
</div>
@ -130,7 +131,7 @@ const ConnectComponent: FC<{
return (
<div className="my-[16px] mt-[16px] h-[100px] bg-sixth border-fifth border rounded-[4px] px-[24px] flex">
<div className="flex items-center gap-[8px] font-[Inter] flex-1">
<div className={`flex items-center gap-[8px] ${interClass} flex-1`}>
<div>
<Image src="/icons/github.svg" alt="GitHub" width={40} height={40} />
</div>
@ -221,7 +222,7 @@ export const GithubComponent: FC<{
))}
{githubState.filter((f) => !f.login).length === 0 && (
<div className="my-[16px] mt-[16px] h-[90px] bg-sixth border-fifth border rounded-[4px] p-[24px]">
<div className="flex items-center gap-[8px] font-[Inter]">
<div className={`flex items-center gap-[8px] ${interClass}`}>
<div>
<Image
src="/icons/github.svg"

3
apps/frontend/src/components/settings/teams.component.tsx
View File

@ -15,6 +15,7 @@ import { AddTeamMemberDto } from '@gitroom/nestjs-libraries/dtos/settings/add.te
import { useToaster } from '@gitroom/react/toaster/toaster';
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
import copy from 'copy-to-clipboard';
import interClass from '@gitroom/react/helpers/inter.font';
const roles = [
{
@ -207,7 +208,7 @@ export const TeamsComponent = () => {
{+myLevel > +getLevel(p.role) ? (
<div className="flex-1 flex justify-end">
<Button
className="!bg-[#0b0f1c] !h-[24px] border border-[#506490] rounded-[4px] text-[12px] font-['Inter']"
className={`!bg-[#0b0f1c] !h-[24px] border border-[#506490] rounded-[4px] text-[12px] ${interClass}`}
onClick={remove(p)}
>
<div className="flex justify-center items-center gap-[4px]">

6
libraries/react-shared-libraries/src/helpers/inter.font.ts Normal file
View File

@ -0,0 +1,6 @@
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });
const interClass = inter.className;
export default interClass;