From e45a96165469c33c3992618f2d0efb41160b6bd4 Mon Sep 17 00:00:00 2001
From: CHEYNE <contact@ch3yne.com>
Date: Wed, 15 May 2024 14:21:59 +0800
Subject: [PATCH] [#3386] fix(web): fix font family of the gravitino title
 (#3387)

### What changes were proposed in this pull request?

Fix font family of the Gravitino title.

Before:

<img width="185" alt="image"
src="https://github.com/datastrato/gravitino/assets/17310559/2e7b7b5b-9482-4343-b9ad-493aa7934014">


After:

<img width="171" alt="image"
src="https://github.com/datastrato/gravitino/assets/17310559/00b6365e-3766-4c33-898a-e84dcb5b21fd">


### Why are the changes needed?

Fix: #3386

### Does this PR introduce _any_ user-facing change?

Change to the true font family.

### How was this patch tested?

N/A
---
 web/LICENSE                      |  3 +++
 web/src/app/login/page.js        | 11 +++++++++--
 web/src/app/rootLayout/AppBar.js | 16 +++++++++++-----
 web/src/lib/styles/globals.css   |  6 ++----
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/web/LICENSE b/web/LICENSE
index 2f135a0dd4a..28d3111e34a 100644
--- a/web/LICENSE
+++ b/web/LICENSE
@@ -215,3 +215,6 @@
    ./src/types/axios.d.ts
    ./src/lib/enums/httpEnum.ts
    ./src/lib/utils/index.js (parts of)
+
+   Third party SIL Open Font License v1.1 (OFL-1.1)
+   (SIL OPEN FONT LICENSE Version 1.1) The Alata font family (https://github.com/SorkinType/Alata)
diff --git a/web/src/app/login/page.js b/web/src/app/login/page.js
index d6efd0eff7f..6d914d0b657 100644
--- a/web/src/app/login/page.js
+++ b/web/src/app/login/page.js
@@ -7,9 +7,11 @@
 
 import { useRouter } from 'next/navigation'
 import Image from 'next/image'
+import { Alata } from 'next/font/google'
 
 import { Box, Card, Grid, Button, CardContent, Typography, TextField, FormControl, FormHelperText } from '@mui/material'
 
+import clsx from 'clsx'
 import * as yup from 'yup'
 import { useForm, Controller } from 'react-hook-form'
 import { yupResolver } from '@hookform/resolvers/yup'
@@ -17,6 +19,8 @@ import { yupResolver } from '@hookform/resolvers/yup'
 import { useAppDispatch } from '@/lib/hooks/useStore'
 import { loginAction } from '@/lib/store/auth'
 
+const fonts = Alata({ subsets: ['latin'], weight: ['400'], display: 'swap' })
+
 const defaultValues = {
   grant_type: 'client_credentials',
   client_id: '',
@@ -63,12 +67,15 @@ const LoginPage = () => {
           <CardContent className={`twc-p-12`}>
             <Box className={`twc-mb-8 twc-flex twc-items-center twc-justify-center`}>
               <Image
-                src={`${process.env.NEXT_PUBLIC_BASE_PATH}/icons/gravitino.svg`}
+                src={`${process.env.NEXT_PUBLIC_BASE_PATH ?? ''}/icons/gravitino.svg`}
                 width={24}
                 height={24}
                 alt='logo'
               />
-              <Typography variant='h6' className={`twc-ml-2 twc-font-semibold twc-text-[1.5rem] logoText`}>
+              <Typography
+                variant='h6'
+                className={clsx('twc-ml-2 twc-font-semibold twc-text-[1.5rem]', fonts.className)}
+              >
                 Gravitino
               </Typography>
             </Box>
diff --git a/web/src/app/rootLayout/AppBar.js b/web/src/app/rootLayout/AppBar.js
index 94d885365b4..d170e7bae82 100644
--- a/web/src/app/rootLayout/AppBar.js
+++ b/web/src/app/rootLayout/AppBar.js
@@ -7,6 +7,9 @@
 
 import Link from 'next/link'
 import Image from 'next/image'
+import { Alata } from 'next/font/google'
+
+import { useState, useEffect } from 'react'
 
 import {
   Box,
@@ -20,6 +23,8 @@ import {
   MenuItem
 } from '@mui/material'
 
+import clsx from 'clsx'
+
 import VersionView from './VersionView'
 import LogoutButton from './Logout'
 import { useSearchParams } from 'next/navigation'
@@ -27,7 +32,7 @@ import { useRouter } from 'next/navigation'
 import { useAppSelector, useAppDispatch } from '@/lib/hooks/useStore'
 import { fetchMetalakes } from '@/lib/store/metalakes'
 
-import { useState, useEffect } from 'react'
+const fonts = Alata({ subsets: ['latin'], weight: ['400'], display: 'swap' })
 
 const AppBar = () => {
   const searchParams = useSearchParams()
@@ -65,16 +70,17 @@ const AppBar = () => {
           >
             <Link href='/metalakes' className={'twc-flex twc-items-center twc-no-underline twc-mr-8'}>
               <Image
-                src={process.env.NEXT_PUBLIC_BASE_PATH + '/icons/gravitino.svg'}
+                src={process.env.NEXT_PUBLIC_BASE_PATH ?? '' + '/icons/gravitino.svg'}
                 width={32}
                 height={32}
                 alt='logo'
               />
               <Typography
                 variant='h5'
-                className={
-                  'logoText twc-ml-2 twc-leading-none twc-font-bold twc-tracking-[-0.45px] twc-normal-case twc-text-[1.75rem]'
-                }
+                className={clsx(
+                  'twc-ml-2 twc-leading-none twc-tracking-[-0.45px] twc-normal-case twc-text-[1.75rem]',
+                  fonts.className
+                )}
               >
                 Gravitino
               </Typography>
diff --git a/web/src/lib/styles/globals.css b/web/src/lib/styles/globals.css
index 8cf4250b6ab..9cb2eeaf62d 100644
--- a/web/src/lib/styles/globals.css
+++ b/web/src/lib/styles/globals.css
@@ -7,13 +7,11 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
-
 html,
 body {
   min-height: 100%;
 }
 
-.logoText {
-  font-family: 'Alata' !important;
+a {
+  -webkit-user-drag: none;
 }