Merge branch 'main' into ndom91/fix-dep-update

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+public
+*.config.js
+tsconfig.tsbuildinfo

.eslintrc

@@ -1,9 +1,5 @@
 {
   "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "sourceType": "module",
-    "project": "./tsconfig.json"
-  },
   "plugins": ["@typescript-eslint"],
   "env": {
     "es6": true,

src/components/AppLink.tsx

@@ -47,7 +47,7 @@ const AppLink = ({ index, app }: AppLinkProps): React.ReactElement => {
       transition={spring}
       whileHover={{ scale: 1.075, rotate: Math.random() > 0.4 ? -1 : 1 }}
       whileTap={{ scale: 0.95 }}
-      tw="hover:(ring-4 ring-opacity-20) focus-within:(ring-4 ring-opacity-20) relative flex items-start justify-between p-8 h-full bg-gray-900 rounded-xl focus:outline-none shadow-lg overflow-hidden transition-shadow duration-500 ring-newtelco-500"
+      tw="hover:(ring-4 ring-opacity-20) focus-within:(ring-4 ring-opacity-20) relative flex items-start justify-between p-8 h-full bg-neutral-900 rounded-xl focus:outline-none shadow-lg overflow-hidden transition-shadow duration-500 ring-newtelco-500"
       css={[
         index === 0 && offsetStyle,
         index % 2 === 0

src/components/CrmProject.tsx

@@ -39,8 +39,8 @@ const CrmProject = ({ project }: ProjectProps): React.ReactElement => {
         <div tw="flex items-center justify-between w-full">
           <div tw="flex flex-col items-start justify-between ml-2 w-full text-sm">
             <h3 tw="mr-1 text-xl font-medium">DS{project.id}</h3>
-            <p tw="text-gray-200 font-thin">{project.status}</p>
-            <p tw="text-gray-500 font-thin">{project.description}</p>
+            <p tw="text-neutral-200 font-thin">{project.status}</p>
+            <p tw="text-neutral-500 font-thin">{project.description}</p>
           </div>
         </div>
         <svg

src/components/CrmProjects.tsx

@@ -63,7 +63,7 @@ const CrmProjects: React.FC = (): React.ReactElement => {
 
   return (
     <motion.div
-      tw="relative p-4 w-full bg-gray-900 rounded-xl shadow-lg overflow-hidden"
+      tw="relative p-4 w-full bg-neutral-900 rounded-xl shadow-lg overflow-hidden"
       variants={item}
     >
       <div tw="flex items-center justify-between mb-4 p-4 w-full">

src/components/GDirectory.tsx

@@ -88,8 +88,8 @@ const GDirectory: React.FC = () => {
 
   return (
     <motion.div
-      tw="relative p-4 w-full bg-gray-900 rounded-xl shadow-lg overflow-hidden"
-      css="height: auto;max-height: 650px"
+      tw="relative p-4 w-full bg-neutral-900 rounded-xl shadow-lg overflow-hidden"
+      css="height: auto;"
       variants={item}
     >
       <div tw="flex items-center justify-between mb-4 p-4 w-full">
@@ -114,7 +114,7 @@ const GDirectory: React.FC = () => {
         </div>
       </div>
       <div tw="focus-within:(ring-4 ring-opacity-20) relative flex mx-8 rounded-lg transition-shadow duration-300 ease-in-out ring-newtelco-500">
-        <span tw="inline-flex items-center px-3 text-gray-500 text-sm bg-gray-800 border-b border-l border-t border-gray-800 rounded-l-lg shadow-sm">
+        <span tw="inline-flex items-center px-3 text-neutral-500 text-sm bg-neutral-800 border-b border-l border-t border-neutral-800 rounded-l-lg shadow-sm">
           <svg
             height="15"
             width="15"
@@ -136,7 +136,7 @@ const GDirectory: React.FC = () => {
           type="text"
           id="searchUsers"
           onChange={(input) => handleSearch(input)}
-          tw="placeholder-gray-400 flex-1 px-4 py-2 w-full text-gray-200 text-base bg-gray-800 border border-gray-800 focus:border-transparent rounded-r-lg focus:outline-none shadow-sm appearance-none"
+          tw="placeholder-neutral-400 flex-1 px-4 py-2 w-full text-neutral-200 text-base bg-neutral-800 border border-neutral-800 focus:border-transparent rounded-r-lg focus:outline-none shadow-sm appearance-none"
           name="search"
           placeholder="Search"
         />

src/components/GDrive.tsx

@@ -58,7 +58,7 @@ const GDrive: React.FC = () => {
   }, [session])
 
   return (
-    <motion.div tw="p-4 bg-gray-900 rounded-xl shadow-lg" variants={item}>
+    <motion.div tw="p-4 bg-neutral-900 rounded-xl shadow-lg" variants={item}>
       <div tw="flex items-center justify-between mb-4 p-4 w-full">
         <div tw="flex justify-center align-middle text-center text-white text-xl font-normal">
           <svg
@@ -83,7 +83,7 @@ const GDrive: React.FC = () => {
           href="https://drive.google.com/drive/u/0/recent"
           target="_blank"
           rel="noopener noreferer"
-          tw="hover:(ring-4 ring-opacity-20) flex items-center p-2 text-gray-50 text-sm border-0 rounded-lg focus:outline-none transition duration-500 ring-newtelco-500"
+          tw="hover:(ring-4 ring-opacity-20) flex items-center p-2 text-neutral-50 text-sm border-0 rounded-lg focus:outline-none transition duration-500 ring-newtelco-500"
         >
           VIEW ALL
         </a>

src/components/GDriveFile.tsx

@@ -37,7 +37,7 @@ const GDriveFile = ({ file }: FileProps): React.ReactElement => {
           <p tw="text-white truncate">
             <span tw="mr-1 font-medium truncate">{file.name}</span>
           </p>
-          <p tw="text-gray-500 font-thin">
+          <p tw="text-neutral-500 font-thin">
             {new Date(file.modifiedTime).toLocaleString()}
           </p>
         </div>

src/components/GKeep.tsx

@@ -31,7 +31,7 @@ const GKeep: React.FC = () => {
   if (!session?.user) {
     return (
       <motion.div
-        tw="relative p-4 w-full bg-gray-900 rounded-xl shadow-lg overflow-hidden"
+        tw="relative p-4 w-full bg-neutral-900 rounded-xl shadow-lg overflow-hidden"
         css="height: auto;max-height: 650px"
         variants={item}
       >
@@ -163,7 +163,7 @@ const GKeep: React.FC = () => {
 
   return (
     <motion.div
-      tw="relative p-4 w-full bg-gray-900 rounded-xl shadow-lg overflow-hidden"
+      tw="relative p-4 w-full bg-neutral-900 rounded-xl shadow-lg overflow-hidden"
       css="height: auto;max-height: 650px"
       variants={item}
     >
@@ -194,7 +194,7 @@ const GKeep: React.FC = () => {
           value={keep.currentNote}
           placeholder="Note"
           onChange={(input) => handleInput(input)}
-          tw="placeholder-gray-600 flex-1 px-4 py-2 w-full h-12 text-gray-200 text-base font-thin bg-gray-800 border border-gray-800 focus:border-transparent rounded-l-lg focus:outline-none shadow-sm appearance-none"
+          tw="placeholder-neutral-600 flex-1 px-4 py-2 w-full h-12 text-neutral-200 text-base font-thin bg-neutral-800 border border-neutral-800 focus:border-transparent rounded-l-lg focus:outline-none shadow-sm appearance-none"
         />
         <Tooltip
           title="Save"
@@ -206,7 +206,7 @@ const GKeep: React.FC = () => {
           theme="transparent"
         >
           <button
-            tw="px-4 py-3 h-full text-gray-100 text-sm font-medium tracking-wider hover:bg-gray-600 focus:bg-gray-600 bg-gray-700 rounded-r-lg focus:outline-none transform uppercase transition-colors duration-200"
+            tw="px-4 py-3 h-full text-neutral-100 text-sm font-medium tracking-wider hover:bg-neutral-600 focus:bg-neutral-600 bg-neutral-700 rounded-r-lg focus:outline-none transform uppercase transition-colors duration-200"
             onClick={handleSubmit}
           >
             {keep.submitLoading ? (
@@ -236,7 +236,7 @@ const GKeep: React.FC = () => {
         <Loader />
       ) : (
         <div
-          tw="flex flex-col justify-start m-4 p-4 divide-gray-500 divide-opacity-20 divide-y overflow-y-scroll space-y-4"
+          tw="flex flex-col justify-start m-4 p-4 divide-neutral-500 divide-opacity-20 divide-y overflow-y-scroll space-y-4"
           css="height: calc(100vh - 450px);max-height:550px;"
         >
           {keep.notes.length > 0 ? (

src/components/KeepNote.tsx

@@ -40,9 +40,9 @@ const KeepNote: React.FC<IKeepNote> = ({
     setLoading(false)
   }
   return (
-    <div tw="p-4 font-thin bg-gray-900">
+    <div tw="p-4 font-thin bg-neutral-900">
       <div tw="flex items-center justify-between">
-        <span tw="text-gray-700 text-sm font-light">
+        <span tw="text-neutral-700 text-sm font-light">
           {new Date(note.createdAt).toLocaleString('de-DE')}
         </span>
         <Tooltip

src/components/Loader.tsx

@@ -38,7 +38,7 @@ const Loader: React.FC<ILoader> = ({
           small ? tw`mb-0! w-6 h-6` : tw`w-12 h-12`,
           extrasmall && tw`m-0! w-4 h-4`,
         ]}
-        tw="mb-4 border-4 border-t-4 border-gray-600 rounded-full ease-linear"
+        tw="mb-4 border-4 border-t-4 border-neutral-600 rounded-full ease-linear"
       ></div>
     </div>
   )

src/components/Sidebar.tsx

@@ -11,7 +11,7 @@ const Sidebar = (): React.ReactElement => {
 
   return (
     <div tw="flex flex-row h-full">
-      <nav tw="flex flex-col justify-between  w-14 sm:w-20 h-screen bg-transparent">
+      <nav tw="flex flex-col justify-between w-14 sm:w-20 h-screen bg-transparent">
         <div tw="mb-10 mt-4 sm:mt-10">
           <img
             src={session?.user.image ?? '/favicon.png'}
@@ -237,10 +237,10 @@ const Sidebar = (): React.ReactElement => {
               whileHover={{ scale: 1.1 }}
               whileTap={{ scale: 0.9 }}
               onClick={() => signOut()}
-              tw="flex items-center justify-center mx-auto my-auto w-6 h-6 text-gray-500 hover:text-newtelco-500 rounded outline-none focus:outline-none transition-all duration-500 hocus:ring-red-400 hocus:ring-offset-gray-900 hocus:ring-opacity-20 hocus:ring-4"
+              tw="flex items-center justify-center mx-auto my-auto w-6 h-6 text-neutral-500 hover:text-newtelco-500 rounded outline-none focus:outline-none transition-all duration-500 hocus:ring-red-400 hocus:ring-offset-neutral-900 hocus:ring-opacity-20 hocus:ring-4"
             >
               <svg
-                tw="mx-auto w-5 h-5 text-gray-300 hover:text-red-500 fill-current"
+                tw="mx-auto w-5 h-5 text-neutral-300 hover:text-red-500 fill-current"
                 viewBox="0 0 24 24"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"

src/components/Tabs.tsx

@@ -19,7 +19,7 @@ const Tabs: React.FC<TabsProps> = ({ children }): React.ReactElement => {
   const [activeTab, setActiveTab] = useState('Google Drive')
 
   return (
-    <div tw="relative hidden md:flex flex-1 flex-col px-2 py-4 lg:px-8 w-1/2 py-4">
+    <div tw="relative hidden md:flex flex-1 flex-col px-2 py-4 lg:px-8 w-1/2">
       <ul tw="inline-flex mb-4 font-thin justify-between">
         <AnimateSharedLayout>
           {children.map((child) => {

src/components/UserCard.tsx

@@ -19,16 +19,16 @@ const UserCard = ({ person }: UserCardProps): React.ReactElement => {
   const mobilePhone = phones[1]?.toString() ?? ''
   return (
     <motion.div
-      tw="p-4 w-full bg-gray-800 rounded-2xl shadow-lg"
+      tw="p-4 w-full bg-neutral-800 rounded-2xl shadow-lg"
       whileHover={{ scale: 1.03 }}
     >
       <div tw="flex flex-row gap-4 items-start">
         <img src={img} tw="w-20 h-20 rounded-lg" />
         <div tw="flex flex-col justify-between w-full">
           <div>
             <p tw="text-white text-xl font-medium">{name}</p>
-            <p tw="text-gray-500 text-xs">{position}</p>
-            <p tw="text-gray-500 text-xs">
+            <p tw="text-neutral-500 text-xs">{position}</p>
+            <p tw="text-neutral-500 text-xs">
               O: {officePhone.substring(0, officePhone.length - 2) ?? ''}
               <b>
                 {officePhone.substring(
@@ -37,7 +37,7 @@ const UserCard = ({ person }: UserCardProps): React.ReactElement => {
                 )}
               </b>
             </p>
-            <p tw="text-gray-500 text-xs">
+            <p tw="text-neutral-500 text-xs">
               {mobilePhone && <span>M: {mobilePhone}</span>}
             </p>
           </div>

src/pages/_document.tsx

@@ -18,10 +18,81 @@ export default class MyDocument extends Document {
       return {
         ...initialProps,
         styles: (
-          <>
-            {initialProps.styles}
-            {sheet.getStyleElement()}
-          </>
+          <Html>
+            <Head>
+              <meta name="application-name" content="NewTelco" />
+              <meta name="apple-mobile-web-app-capable" content="yes" />
+              <meta
+                name="apple-mobile-web-app-status-bar-style"
+                content="default"
+              />
+              <meta name="apple-mobile-web-app-title" content="NewTelco" />
+              <meta name="description" content="NewTelco Portal" />
+              <meta name="format-detection" content="telephone=no" />
+              <meta name="mobile-web-app-capable" content="yes" />
+              <meta name="msapplication-TileColor" content="#67B246" />
+              <meta name="msapplication-tap-highlight" content="no" />
+              <meta name="theme-color" content="#4d4d4d" />
+
+              <link rel="apple-touch-icon" href="/favicon.png" />
+              <link
+                rel="apple-touch-icon"
+                sizes="152x152"
+                href="/favicon.png"
+              />
+              <link
+                rel="apple-touch-icon"
+                sizes="180x180"
+                href="/favicon.png"
+              />
+              <link
+                rel="apple-touch-icon"
+                sizes="167x167"
+                href="/favicon.png"
+              />
+
+              <link
+                rel="icon"
+                type="image/png"
+                sizes="32x32"
+                href="/favicon.png"
+              />
+              <link
+                rel="icon"
+                type="image/png"
+                sizes="16x16"
+                href="/favicon.png"
+              />
+              <link rel="manifest" href="/manifest.json" />
+              <link rel="shortcut icon" href="/favicon.ico" />
+
+              <meta name="twitter:card" content="summary" />
+              <meta name="twitter:url" content="https://portal.newtelco.de" />
+              <meta name="twitter:title" content="NewTelco" />
+              <meta name="twitter:description" content="NewTelco Home" />
+              <meta
+                name="twitter:image"
+                content="https://portal.newtelco.de/favicon.png"
+              />
+              <meta name="twitter:creator" content="@newtelcode" />
+              <meta property="og:type" content="website" />
+              <meta property="og:title" content="NewTelco" />
+              <meta property="og:description" content="NewTelco Home" />
+              <meta property="og:site_name" content="NewTelco" />
+              <meta property="og:url" content="https://portal.newtelco.de" />
+              <meta
+                property="og:image"
+                content="https://portal.newtelco.de/favicon.png"
+              />
+
+              {initialProps.styles}
+              {sheet.getStyleElement()}
+            </Head>
+            <body>
+              <Main />
+              <NextScript />
+            </body>
+          </Html>
         ),
       }
     } finally {

tailwind.config.js

@@ -11,7 +11,7 @@ module.exports = {
         '2fr': 'minmax(0, 2fr)',
       },
       colors: {
-        gray: colors.trueGray,
+        neutral: colors.neutral,
         newtelco: {
           DEFAULT: '#67B246',
           50: '#ECF6E8',

tsconfig.json

@@ -4,7 +4,10 @@
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "jsx": "preserve",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,
@@ -14,12 +17,20 @@
     "target": "esnext",
     "baseUrl": ".",
     "paths": {
-      "@/components/*": ["src/components/*"]
+      "@/components/*": [
+        "src/components/*"
+      ]
     },
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
     "incremental": true
   },
-  "exclude": ["node_modules"],
-  "include": ["**/*.d.ts", "**/*.ts", "**/*.tsx"]
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "**/*.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }