frontend css update

frontend/src/components/Modal/importer.js

@@ -10,38 +10,38 @@ export default function Import(props){
     const [tab, setTab] = useState("gradio")
     const [subTab, setSubTab] = useState(0)
     
-    
     return (<div>
         <Modal
             basic
+            className=''
             open={props.open}
-            size='larg'
+            size='fullscreen'
             >
                 <div className='w-full shadow-lg rounded-lg'>
-                    <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-100 rounded-t-lg border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
-                        <li class="mr-2" onClick={()=>{setTab("gradio")}}>
-                            <button id="gradio-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 rounded-tl-lg ${ tab === "gradio" ? 'bg-gray-200'  : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Gradio className=" w-20 h-10"/></button>
+                    <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-100 rounded-t-lg border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-neutral-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
+                        <li class="" onClick={()=>{setTab("gradio")}}>
+                            <button id="gradio-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 rounded-tl-lg ${ tab === "gradio" ? 'bg-gray-200 dark:bg-neutral-700'  : 'hover:bg-gray-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 focus:bg-neutral-700'}`}><Gradio className=" w-20 h-10"/></button>
                         </li>
-                        <li class="mr-2">
-                            <button id="services-tab" data-tabs-target="#Streamlit" type="button" role="tab" aria-controls="services" aria-selected="false" className="inline-block p-4 opacity-30"><Streamlit className=" w-20 h-10"/></button>
+                        <li class="" onClick={()=>{setTab("streamlit")}}>
+                            <button id="services-tab" data-tabs-target="#Streamlit" type="button" role="tab" aria-controls="services" aria-selected="false" className={`inline-block p-4 h-full ${ tab === "streamlit" ? 'bg-gray-200 dark:bg-neutral-700'  : 'hover:bg-gray-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 focus:bg-neutral-700'}`}><Streamlit className=" w-20 h-8"/></button>
                         </li>
                     </ul>
                     <div className='absolute right-5 top-5 z-20 mr-5'
                          onClick={()=>{props.quitHandeler(false)}}>
                         <button type="button"
-                                className=" bg-neutral-300 rounded-2xl p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-300 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
-                        <Exit className="w-[20px] h-[20px]"/>
+                                className=" bg-neutral-300 rounded-2xl p-2 inline-flex items-center justify-center dark:bg-neutral-700 hover:opacity-70 focus:outline-none">
+                        <Exit className=" w-[20px] h-[20px] text-gray-400 dark:text-white"/>
                         </button>
                     </div> 
                 </div>
                     { tab === "gradio" &&
                         <div className='w-full bg-white'>
-                        <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-200 border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
+                        <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-200 border-gray-200 dark:border-gray-800 dark:text-gray-400 dark:bg-neutral-900" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
                             <li class="" onClick={()=>{setSubTab(0)}}>
-                                <button id="local-sub-tab" data-tabs-target="#local" type="button" role="tab" aria-controls="local-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold ${subTab === 0 ? 'bg-gray-300' : '' } hover:bg-gray-300 `}>Local</button>
+                                <button id="local-sub-tab" data-tabs-target="#local" type="button" role="tab" aria-controls="local-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-9 text-base font-sans font-bold ${subTab === 0 ? 'bg-gray-300 dark:bg-neutral-800' : '' } hover:bg-gray-300 hover:dark:bg-neutral-800 `}>Local</button>
                             </li>
                             <li class="" onClick={()=>{setSubTab(1)}}>
-                            <button id="shared-sub-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="shared-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-6 text-base font-sans font-bold  ${subTab === 1 ? 'bg-gray-300' : '' }  hover:bg-gray-300  `}>Shared</button>
+                            <button id="shared-sub-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="shared-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 pl-[1.82rem] pr-[1.82rem] text-base font-sans font-bold  ${subTab === 1 ? 'bg-gray-300 dark:bg-neutral-800' : '' }  hover:bg-gray-300 hover:dark:bg-neutral-800`}>Shared</button>
                             </li>
                         </ul>
                         {subTab === 0 && <Local/>}
@@ -75,8 +75,8 @@ export default function Import(props){
 
 function Local(props){
     return (
-        <div className='p-5'>
-        <Message floating color=''>
+        <div className='p-5 dark:bg-neutral-700'>
+        <Message floating color={props.dark ? 'black' : ''}>
             
             <Message.Header>🏗️ Comming soon...</Message.Header> 
             <Message.Content className='p-5'>
@@ -112,13 +112,13 @@ function Shared(props){
             if (e.key.includes("Enter")) props.appendHandler()
         }}>
             <div className='p-5'>
-            <Message color='' floating>            
-                         <div className={`flex items-center rounded-md bg-light-white mt-6 border-dashed`}>
+            <Message floating>            
+                         <div className={`flex items-center rounded-md bg-light-white dark:bg-[#1b1c1d] mt-6 border-dashed`}>
                             <label className="relative block w-full p-5 focus:shadow-xl">
                                 <span className={`absolute inset-y-0 left-0 flex items-center pl-8`}>
                                     <BsSearch className="block float-left cursor-pointer text-gray-500"/>
                                 </span>
-                                <input className={`placeholder:italic placeholder:text-slate-400 text-black block w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`}  
+                                <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`}  
                                     placeholder={`URL`}
                                     type="text" name="search"
                                     onChange={(e) => {
@@ -137,12 +137,12 @@ function Shared(props){
                                 </div>
                             </div>
                         </div>}
-                        <div className={`flex items-center rounded-md bg-light-white mt-6  border-dashed`}>
+                        <div className={`flex items-center rounded-md bg-light-white dark:bg-[#1b1c1d] mt-6  border-dashed`}>
                     <label className="relative block p-5 w-full focus:shadow-xl">
                         <span className={`absolute inset-y-0 left-0 flex items-center pl-7`}>
                             <Icon className=" text-gray-500 block float-left cursor-pointer mr-2" name="address card"/>
                         </span>
-                        <input className={`placeholder:italic placeholder:text-slate-400 text-black block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
+                        <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
                             placeholder={`Name` }
                             type="text" name="search"
                             autoComplete='off'
@@ -155,7 +155,7 @@ function Shared(props){
                     <div className=' right-0 ml-5'>
                         <button className="relative inline-flex justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-sans font-bold text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
                                 onClick={()=>{props.appendHandler()}}>
-                            <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
+                            <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-[#1b1c1d] rounded-md group-hover:bg-opacity-0">
                                 Enter
                             </span>
                         </button>

frontend/src/components/Navagation/navbar.js

@@ -247,7 +247,8 @@ export default class Navbar extends Component{
                         quitHandeler={this.handelModal}
                         textHandler={this.updateText}
                         appendHandler={this.append_gradio}
-                        catch={this.state.error}/>
+                        catch={this.state.error}
+                        theme={this.theme}/>
                 {/* <Modal
                     basic
                     open={this.state.modal}

frontend/src/css/dist/output.css

@@ -583,6 +583,10 @@ video {
   }
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .visible {
   visibility: visible;
 }
@@ -616,36 +620,64 @@ video {
   left: 0px;
 }
 
-.top-0 {
-  top: 0px;
+.-right-3 {
+  right: -0.75rem;
+}
+
+.top-9 {
+  top: 2.25rem;
 }
 
 .bottom-0 {
   bottom: 0px;
 }
 
-.-right-\[25px\] {
-  right: -25px;
+.top-0 {
+  top: 0px;
+}
+
+.-bottom-0 {
+  bottom: -0px;
 }
 
 .right-0 {
   right: 0px;
 }
 
-.-right-3 {
-  right: -0.75rem;
+.top-4 {
+  top: 1rem;
 }
 
-.top-9 {
-  top: 2.25rem;
+.-right-4 {
+  right: -1rem;
 }
 
-.-bottom-0 {
-  bottom: -0px;
+.-right-\[17px\] {
+  right: -17px;
 }
 
-.top-4 {
-  top: 1rem;
+.-right-\[20px\] {
+  right: -20px;
+}
+
+.-right-\[30px\] {
+  right: -30px;
+}
+
+.-right-\[28px\] {
+  right: -28px;
+}
+
+.-right-\[25px\] {
+  right: -25px;
+}
+
+.-right-\[22px\] {
+  right: -22px;
+}
+
+.-right-\[23px\] {
+  right: -23px;
 }
 
 .z-20 {
@@ -704,12 +736,8 @@ video {
   margin-left: auto;
 }
 
-.-ml-\[5px\] {
-  margin-left: -5px;
-}
-
-.ml-5 {
-  margin-left: 1.25rem;
+.ml-4 {
+  margin-left: 1rem;
 }
 
 .mt-4 {
@@ -728,6 +756,70 @@ video {
   margin-top: 0.25rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
+.-ml-3 {
+  margin-left: -0.75rem;
+}
+
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.-ml-0 {
+  margin-left: -0px;
+}
+
+.-ml-\[8px\] {
+  margin-left: -8px;
+}
+
+.-ml-\[10px\] {
+  margin-left: -10px;
+}
+
+.-ml-\[4px\] {
+  margin-left: -4px;
+}
+
+.-ml-\[5px\] {
+  margin-left: -5px;
+}
+
+.ml-96 {
+  margin-left: 24rem;
+}
+
+.ml-\[30rem\] {
+  margin-left: 30rem;
+}
+
+.ml-\[46rem\] {
+  margin-left: 46rem;
+}
+
+.ml-\[40rem\] {
+  margin-left: 40rem;
+}
+
+.ml-\[44rem\] {
+  margin-left: 44rem;
+}
+
+.ml-5 {
+  margin-left: 1.25rem;
+}
+
 .block {
   display: block;
 }
@@ -760,10 +852,6 @@ video {
   height: 20rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-screen {
   height: 100vh;
 }
@@ -776,6 +864,10 @@ video {
   height: auto;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-\[600px\] {
   height: 600px;
 }
@@ -788,6 +880,14 @@ video {
   height: 41px;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -929,6 +1029,22 @@ video {
   overflow: hidden;
 }
 
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
 .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -1089,6 +1205,16 @@ video {
   background-color: rgb(254 169 89 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1295,10 +1421,6 @@ video {
   padding: 1.25rem;
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
 .p-0\.5 {
   padding: 0.125rem;
 }
@@ -1311,6 +1433,14 @@ video {
   padding: 0.25rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1321,11 +1451,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -1351,6 +1476,31 @@ video {
   padding-bottom: 0.75rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.px-9 {
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+}
+
+.px-7 {
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
+}
+
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -1395,6 +1545,42 @@ video {
   padding-bottom: 0px;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pl-\[1\.80rem\] {
+  padding-left: 1.80rem;
+}
+
+.pr-\[1\.80rem\] {
+  padding-right: 1.80rem;
+}
+
+.pl-\[1\.90rem\] {
+  padding-left: 1.90rem;
+}
+
+.pr-\[1\.90rem\] {
+  padding-right: 1.90rem;
+}
+
+.pl-\[1\.85rem\] {
+  padding-left: 1.85rem;
+}
+
+.pr-\[1\.85rem\] {
+  padding-right: 1.85rem;
+}
+
+.pl-\[1\.82rem\] {
+  padding-left: 1.82rem;
+}
+
+.pr-\[1\.82rem\] {
+  padding-right: 1.82rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1489,6 +1675,16 @@ video {
   color: rgb(0 83 215 / var(--tw-text-opacity));
 }
 
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+.text-cyan-50 {
+  --tw-text-opacity: 1;
+  color: rgb(236 254 255 / var(--tw-text-opacity));
+}
+
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1618,6 +1814,11 @@ video {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -1646,6 +1847,11 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-neutral-700:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
 .focus\:from-fuchsia-200:focus {
   --tw-gradient-from: #f5d0fe;
   --tw-gradient-to: rgb(245 208 254 / 0);
@@ -1724,6 +1930,16 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.dark .dark\:border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-neutral-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(64 64 64 / var(--tw-border-opacity));
+}
+
 .dark .dark\:bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -1744,6 +1960,36 @@ video {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-\[\#1b1c1d\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(27 28 29 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-neutral-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-neutral-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-neutral-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1768,11 +2014,31 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-cream {
+  --tw-text-opacity: 1;
+  color: rgb(250 249 246 / var(--tw-text-opacity));
+}
+
 .dark .dark\:hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.dark .hover\:dark\:bg-gray-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.dark .hover\:dark\:bg-neutral-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-neutral-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:focus\:ring-blue-800:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));