logo change 🤗

frontend/src/Components/Navagation/navbar.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import {BsArrowLeftShort, BsSearch} from 'react-icons/bs';
 import "../../css/dist/output.css"
+import {ReactComponent as ReactLogo} from '../../images/logo.svg'
 import { random_colour, random_emoji } from "../../helper/visual";
 import { Message, Header, Modal, Button, Icon } from 'semantic-ui-react'
 
@@ -182,15 +183,6 @@ export default class Navbar extends Component{
 
 
     render(){
-
-
-        
-        // compare the menu if the menu has changed change the state of the navbar
-        
-        // states to change
-        // 1. tabs
-
-        // 2. add colour
         return (<div>
         
             <div className={`z-10 flex-1 float-left bg-white dark:bg-stone-900 h-screen p-5 pt-8 ${this.state.open ? "lg:w-72 md:64 sm:w-60" : "w-10"} duration-300 absolute shadow-2xl border-black border-r-[1px] dark:border-white dark:text-white`}>
@@ -198,7 +190,7 @@ export default class Navbar extends Component{
             <BsArrowLeftShort onClick={this.handelNavbar} className={`  bg-white text-Retro-darl-blue text-3xl rounded-full absolute -right-3 top-9 border border-black cursor-pointer ${!this.state.open && 'rotate-180'} dark:border-white duration-300 dark:text-white dark:bg-stone-900 `}/>
 
                 <div className="inline-flex w-full">
-                    <h1 className={`font-sans font-bold text-lg ${this.state.open ? "" : "hidden"} duration-500 ml-auto mr-auto`}>Gradio Flow 🤗</h1>
+                    <h1 className={`font-sans font-bold text-lg ${this.state.open ? "" : "hidden"} duration-500 ml-auto mr-auto`}> <ReactLogo className="w-9 h-9 ml-auto mr-auto"/> Gradio Flow </h1>
                 </div>
 
                 <div className={`rounded-md text-center ${this.state.open ? "" : "px-0"} py-3`} onClick={() => {this.handelModal(true)}}>

frontend/src/css/dist/output.css

@@ -586,10 +586,6 @@ video {
   bottom: 0px;
 }
 
-.top-0 {
-  top: 0px;
-}
-
 .top-4 {
   top: 1rem;
 }
@@ -602,14 +598,14 @@ video {
   z-index: 10;
 }
 
-.z-50 {
-  z-index: 50;
-}
-
 .-z-10 {
   z-index: -10;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .float-left {
   float: left;
 }
@@ -662,6 +658,10 @@ video {
   height: 100vh;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -670,24 +670,20 @@ video {
   height: auto;
 }
 
-.h-full {
-  height: 100%;
-}
-
-.h-\[95\%\] {
-  height: 95%;
+.h-\[540px\] {
+  height: 540px;
 }
 
-.h-\[500px\] {
-  height: 500px;
+.h-full {
+  height: 100%;
 }
 
-.h-\[300px\] {
-  height: 300px;
+.h-8 {
+  height: 2rem;
 }
 
-.h-\[540px\] {
-  height: 540px;
+.h-9 {
+  height: 2.25rem;
 }
 
 .w-10 {
@@ -698,28 +694,28 @@ video {
   width: 100%;
 }
 
-.w-\[1000px\] {
-  width: 1000px;
+.w-8 {
+  width: 2rem;
 }
 
-.w-\[95\%\] {
-  width: 95%;
+.w-\[600px\] {
+  width: 600px;
 }
 
 .w-screen {
   width: 100vw;
 }
 
-.w-\[900px\] {
-  width: 900px;
+.w-4 {
+  width: 1rem;
 }
 
-.w-\[800px\] {
-  width: 800px;
+.w-6 {
+  width: 1.5rem;
 }
 
-.w-\[600px\] {
-  width: 600px;
+.w-9 {
+  width: 2.25rem;
 }
 
 .flex-1 {
@@ -736,14 +732,14 @@ video {
   cursor: pointer;
 }
 
-.resize {
-  resize: both;
-}
-
 .items-center {
   align-items: center;
 }
 
+.self-center {
+  align-self: center;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -784,10 +780,6 @@ video {
   border-style: dashed;
 }
 
-.border-none {
-  border-style: none;
-}
-
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -940,14 +932,6 @@ video {
   padding-top: 0.5rem;
 }
 
-.pt-\[56\.25\%\] {
-  padding-top: 56.25%;
-}
-
-.pt-\[57\.25\%\] {
-  padding-top: 57.25%;
-}
-
 .text-left {
   text-align: left;
 }
@@ -990,11 +974,6 @@ video {
   line-height: 2.5rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
 .font-medium {
   font-weight: 500;
 }
@@ -1079,21 +1058,11 @@ video {
           animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-.hover\:border-sky-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(14 165 233 / var(--tw-border-opacity));
-}
-
 .hover\:border-Retro-purple:hover {
   --tw-border-opacity: 1;
   border-color: rgb(151 0 204 / var(--tw-border-opacity));
 }
 
-.hover\:border-l-Retro-purple:hover {
-  --tw-border-opacity: 1;
-  border-left-color: rgb(151 0 204 / var(--tw-border-opacity));
-}
-
 .focus\:border-sky-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(14 165 233 / var(--tw-border-opacity));