From 292a6c2ede59e009c3bfec54328d9b36c476bc3a Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Tue, 11 Jan 2022 13:21:04 -0800
Subject: [PATCH] adding nice metronic font

---
 pages/_app.js        |  6 +++++-
 pages/teams/demo.tsx | 43 +++++++++++++++++++++++++------------------
 styles/globals.css   | 44 ++++++++++++++++++++++----------------------
 tailwind.config.js   |  6 +++++-
 4 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/pages/_app.js b/pages/_app.js
index 4c4c39c..1b79c69 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -26,9 +26,13 @@ function MyApp({ Component, pageProps }) {
           href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap"
           rel="stylesheet"
         />
+
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
       </Head>
 
-      <Component {...pageProps} />
+      <main>
+        <Component {...pageProps} />
+      </main>
   </>
 }
 
diff --git a/pages/teams/demo.tsx b/pages/teams/demo.tsx
index d783487..14856e2 100644
--- a/pages/teams/demo.tsx
+++ b/pages/teams/demo.tsx
@@ -1,7 +1,15 @@
 import Head from 'next/head'
 import Image from 'next/image';
 import React from 'react';
-import { FaMicrophoneAlt, FaHeadphonesAlt, FaTh, FaAngleDown, FaPlusSquare, FaBroom, FaBell, FaFilePdf } from "react-icons/fa";
+import { FaMicrophoneAlt, 
+    FaHeadphonesAlt, 
+    FaTh, 
+    FaAngleDown, 
+    FaPlusSquare, 
+    FaBroom, 
+    FaBell, 
+    FaFilePdf,
+    FaCopy } from "react-icons/fa";
 import { IoPulseOutline, IoRemoveOutline } from "react-icons/io5";
 import { BsThreeDots } from "react-icons/bs";
 
@@ -146,8 +154,8 @@ export default class Demo extends React.Component<MyProps, MyState> {
                     <section className="flex-1 flex flex-row items-center justify-between py-5">
                         {/* welcome message */}
                         <span className='flex flex-col'>
-                            <span className="font-sans font-bold text-xl text-white">👋Hey Arjun, Good Afternoon!</span>
-                            <span className="font-sans text-md text-gray-300">you collabed <span className="text-green-500">1.5 hours</span> and worked <span className="text-orange-500">2 hours</span> yesterday</span>
+                            <span className="font-bold text-xl text-white">👋Hey Arjun, Good Afternoon!</span>
+                            <span className="text-md text-gray-300">you collabed <span className="text-green-500">1.5 hours</span> and worked <span className="text-orange-500">2 hours</span> yesterday</span>
                         </span>
                         
                         {/* avatar */}
@@ -215,7 +223,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
 												
                         <div className='flex grow flex-col space-y-5 items-baseline shrink-0'>
                             {/* announcements */}
-                            <section className='p-5 w-full flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
+                            <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
                                 <span className='flex flex-row justify-end space-x-2 pb-5'>
                                     <span className="text-white mr-auto">ANNOUNCEMENTS</span>
 
@@ -246,7 +254,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
                             </section>
 
                             {/* rooms */}
-                            <section className='p-5 w-full flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
+                            <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
                                 <span className='flex flex-row justify-end space-x-2 pb-5 items-center'>
                                     <span className="text-white mr-auto">ROOMS</span>
 
@@ -263,7 +271,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
                                 <span className='flex flex-row space-x-2'>
 
                                     {/* bugs room */}
-                                    <span className='flex flex-col bg-white bg-opacity-60 p-5 rounded-lg'>
+                                    <span className='flex flex-col bg-white bg-opacity-80 py-5 px-3 rounded-lg'>
                                         <span className='flex flex-row justify-between items-center space-x-1'>
  
                                             <span className='flex flex-row pr-10'>
@@ -276,9 +284,8 @@ export default class Demo extends React.Component<MyProps, MyState> {
                                                     </span>
                                                 </span>
                                                 
-
                                                 <span className='flex flex-col items-baseline'>
-                                                    <span className='font-bold text-black mr-auto'>Bugs</span>
+                                                    <span className='text-grey-300 mr-auto'>Bugs</span>
                                                     <span className='text-xs text-gray-400'>started 5 minutes ago</span>
                                                 </span>
                                                 
@@ -295,29 +302,29 @@ export default class Demo extends React.Component<MyProps, MyState> {
                             </section>
                         </div>
 
-                        {/* files */}
-                        <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
+                        
+                    </div>
+
+                    {/* files */}
+                    <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> 
                             <span className='flex flex-row justify-end space-x-2 pb-5 items-center'>
                                 <span className="text-white mr-auto">FILES</span>
                             </span>
                             
 
                             <div className='flex flex-row'>
-                                <div className='flex flex-row bg-white p-5 rounded-lg items-center justify-start'>
+                                <div className='flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 rounded-lg items-center justify-start'>
                                     <FaFilePdf className='text-4xl text-orange-300' />
 
-                                    <span className="text-gray-400 text-sm">report.pdf</span>
+                                    <span className="text-gray-200 text-sm mr-10">report.pdf</span>
 
-                                    <button className='p-2 text-mx'>
-                                        
+                                    <button className='ml-auto p-2 text-sm'>
+                                        <FaCopy className='text-gray-200'/>
                                     </button>
                                 </div>
                                 
                             </div>
                         </section>
-                    </div>
-
-                    
                     
                 </div>
                 
@@ -341,7 +348,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
                             <span className='flex flex-col'>
                                 <span className="text-sm text-black font-bold">{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].name} </span>
         
-                                <span className={"text-xs font-sans text-gray-300 text-black"}>{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].role}</span>
+                                <span className={"text-xs text-gray-300 text-black"}>{this.state.selectedChannel == null ? "" : testFriends[this.state.selectedChannel].role}</span>
                             </span> 
                         </span>
 
diff --git a/styles/globals.css b/styles/globals.css
index 1c80bb8..8daae31 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,5 +1,3 @@
-
-
 html,
 body {
   padding: 0;
@@ -17,10 +15,10 @@ a {
   box-sizing: border-box;
 }
 
-
 /* my personal css */
-html { 
-  background: url('/wallpapers/dark-mountains.jpg') no-repeat center center fixed; 
+html {
+  background: url("/wallpapers/dark-mountains.jpg") no-repeat center center
+    fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -29,10 +27,14 @@ html {
 
 main {
   padding: 4em;
+  font-family: "Poppins", sans-serif;
 }
 
 .font-satisfy {
-  font-family: 'Satisfy', cursive;
+  font-family: "Satisfy", cursive;
+}
+.font-poppins {
+  font-family: "Poppins", sans-serif;
 }
 
 .text-teal {
@@ -40,30 +42,29 @@ main {
 }
 
 #main-title {
-  font-family: 'Satisfy', cursive;
+  font-family: "Satisfy", cursive;
   font-size: 2em;
   color: teal;
 }
 #side-note {
-  font-family: 'Baloo Bhaijaan 2', cursive;
+  font-family: "Baloo Bhaijaan 2", cursive;
   font-size: 1.5em;
 }
 
 p {
-  font-family: 'Baloo Bhaijaan 2', cursive;
+  font-family: "Baloo Bhaijaan 2", cursive;
   font-size: 2em;
-  color:white;
+  color: white;
 }
 
 #marquee-text {
-   font-style: italic;
-   font-size: 1.5em;
-   font-family: 'Baloo Bhaijaan 2', cursive;
+  font-style: italic;
+  font-size: 1.5em;
+  font-family: "Baloo Bhaijaan 2", cursive;
 }
 
-
- /* Mobile :320px. */
- @media (max-width: 767px) {
+/* Mobile :320px. */
+@media (max-width: 767px) {
   main {
     padding: 0em;
   }
@@ -74,17 +75,16 @@ p {
   #side-note {
     font-size: 1em;
   }
-  
+
   p {
     font-size: 1.5em;
   }
 
   #marquee-text {
     font-size: 1em;
- }
- 
- }
+  }
+}
 
- @tailwind base;
+@tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
index 5ec9672..ba5e68b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,7 +4,11 @@ module.exports = {
     "./components/**/*.{js,ts,jsx,tsx}"
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        'poppins': ['"Poppins"', 'san serif']
+      }
+    },
   },
   plugins: [],
 }