Node Menu Frontend

README.md

@@ -104,8 +104,11 @@ def InterLauncher(name, interface, listen=2000, **kwargs):
 
 
 ### Frontend 🖥️
-- new logo
-- appedned colours
+- Node Menu
+    - Dynamic adjust the size of node
+    - Link to gradio to host it in seprate tab
+
+![Node Menu](https://github.com/commune-ai/Gradio-Flow/blob/gradio-flow/gradio-only/new_feature.png)
 
 ### In The Works 🚧
 - Appending streamlit into gradio-flow

frontend/src/Components/Nodes/Custom.js

@@ -1,70 +1,106 @@
 import React from "react"
-
+import {TbResize} from 'react-icons/tb'
+import {BiCube} from 'react-icons/bi'
+import {BsTrash} from 'react-icons/bs'
+import {CgLayoutGridSmall} from 'react-icons/cg'
+import '../../css/counter.css'
 export default class CustomNodeIframe extends React.Component {
-    constructor({data}){
+    constructor({id , data}){
       super()
       this.myRef = React.createRef()
+      this.id = id
       this.state = {
-        reachable : true,
+        reachable : this.handelFetch,
         selected : true,
-        data : data
+        data : data,
+        width : 600,
+        height : 540,
+        size : false
       }
+ 
     }
 
     handelSelected = () => {
+      this.setState({reachable : this.state.reachable, selected : !this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size})
+    }
+
+    handelFetch = () => {
       fetch(this.state.data.host, {mode: 'no-cors'}).then((re) => {
-        this.setState({reachable : true, selected : !this.state.selected, data : this.state.data})
+        this.setState({reachable : true, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size})
       }).catch(()=>{
-        this.setState({reachable : false, selected : !this.state.selected, data : this.state.data})
+        this.setState({reachable : false, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size})
       })
     }
 
-    handelEvent = (e) => {
-      console.log(e.type)
-      if(e.type === "mousedown"){
-        console.log("down")
-      }
-      else {
-        console.log("up")
-      }
+    handelSizeState = () => {
+      this.setState({reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : !this.state.size})
+    }
+
+    onNodeClick = (id) => {
+      this.state.data.delete(id)
+    }
 
+    handelOnChange(evt, type){
+      this.setState({reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  type === "width" ? parseInt(evt.target.value) : this.state.width, height : type === "height" ? parseInt(evt.target.value) : this.state.height, size : this.state.size})
 
     }
 
+    handelSize(evt, increment, change){
+      console.log(evt,increment)
+      if (evt === "Enter"){
+        this.setState({reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  change === "width" ? increment : this.state.width, height : change === "height" ? increment : this.state.height, size : this.state.size})
+        change === "width" ? this.myRef.current.style.width = `${increment}px` : this.myRef.current.style.height = `${increment}px` 
+      } else if (evt === "increment") {
+        this.setState({reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  change === "width" ? this.state.width + increment : this.state.width, height : change === "height" ? this.state.height + increment : this.state.height, size : this.state.size})
+        change === "width" ? this.myRef.current.style.width = `${parseInt(this.state.width) + increment}px` : this.myRef.current.style.height = `${parseInt(this.state.height) + increment}px` 
+      }
 
-    render(){
-      
-      return (
-        <>
-        { this.state.selected && this.state.reachable ? 
-                <>
-                <div className="w-full h-10 top-0 hover:bg-black" onClick={this.handelEvent} onMouseDown={this.handelEvent} onMouseUp={this.handelEvent}>
-                  
-                </div>               
+    }
 
-                <div className='relative h-[540px] w-[600px] overflow-hidden m-0 p-0 shadow-2xl' onClick={()=>this.handelSelected()}>
-                  <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-20`}></div>
-                  <iframe 
-                      id="iframe"
-                      ref={this.myRef} 
-                      src={this.state.data.host} 
-                      title={this.state.data.label} 
-                      frameBorder="0" className=" -z-10 container h-full p-2 flex-grow space-iframe overflow-scroll " allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+    Counter(focus, count){
+      return (<div className="custom-number-input h-10 w-32 dark:text-white text-black ">
+                <div className="flex flex-row h-10 w-full rounded-lg relative bg-transparent">
+                  <button data-action="decrement" className=" border-2 border-dotted border-fuchsia-300 hover:border-rose-600 rounded-l-xl hover:animate-pulse h-full w-20 cursor-pointer outline-none " onClick={(e)=> {this.handelSize("increment", -5, focus)}}>
+                    <span className="m-auto text-2xl font-bold">−</span>
+                  </button>
+                  <input type="number" className="outline-none focus:outline-none border-fuchsia-300 border-y-2 border-dotted text-center w-full font-semibold text-md focus:from-fuchsia-200 md:text-basecursor-default flex items-cente outline-none bg-transparent" name="input-number" value={count} onChange={(e) => this.handelOnChange(e, focus)} onKeyDown={(e) => {this.handelSize(e.key, count, focus)}}></input>
+                  <button data-action="increment" className="border-2 border-dotted border-fuchsia-300 hover:border-Green-Emerald rounded-r-xl hover:animate-pulse h-full w-20  cursor-pointer" onClick={(e)=> {this.handelSize("increment", 5, focus)}} >
+                    <span className="m-auto text-2xl font-bold">+</span>
+                  </button>
                 </div>
-                </> :
-        <>
-        <div className='break-words'> 
-          <div className=' h-auto text-center pointer-events-none'>  
-            <div className='hexagon pointer-events-auto break-words text-center hover:animate-pulse dark:bg-black dark:text-white' onClick={()=>this.handelSelected()} >
-            <p className='z-50 pointer-events-none break-words font-sans font-bold'>{this.state.data.label}</p>
-            </div>
-          </div>
-        </div>
-        </> }
-      
-      </>
-      )
+              </div>)
     }
+    
+    render(){
+      return (<>
+        { this.state.reachable &&
+                <>
+                  <div className=" flex w-full h-10 top-0 cursor-pointer" onClick={this.handelEvent}>
+                  <div title="Collaspse Node" className=" duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-black h-10 w-10 mr-2 -mt-3 bg-Warm-Blue rounded-xl" onClick={this.handelSelected}><CgLayoutGridSmall className="h-full w-full text-white p-1"/></div>
 
-  }
-  
+                   
+                    <div className={` flex ${this.state.selected ? '' : 'w-0 hidden'}`}>
+                      <div title="Adjust Node Size" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-black h-10 w-10 mr-2 -mt-3 bg-Warm-Violet rounded-xl" onClick={this.handelSizeState}><TbResize className="h-full w-full text-white p-1"/></div>
+                      <a href={this.state.data.host} target="_blank" rel="noopener noreferrer"><div title="Gradio Host Site" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-black h-10 w-10 mr-2 -mt-3 bg-Warm-Pink rounded-xl"><BiCube className="h-full w-full text-white p-1"/></div></a>
+                      <div title="Delete Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-black h-10 w-10 mr-2 -mt-3 bg-Warm-Red rounded-xl" onClick={() => this.onNodeClick(this.id)}><BsTrash className="h-full w-full text-white p-1"/></div>
+                    
+                      { this.state.size && <div className="duration-300 flex w-[60%] h-full  mr-2 -mt-3 space-x-4">
+                        {this.Counter("width", this.state.width)}
+                        {this.Counter("height", this.state.height)}
+                      </div>}
+                    </div>
+                  
+                  </div>               
+                
+                  <div className={`relative w-[${this.state.width}px] h-[${this.state.height}px] overflow-hidden m-0 p-0 shadow-2xl`} ref={this.myRef}>
+                    <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-20`}></div>
+                    <iframe 
+                        id="iframe" 
+                        src={this.state.data.host} 
+                        title={this.state.data.label} 
+                        frameBorder="0" className=" -z-10 container h-full p-2 flex-grow space-iframe overflow-scroll " allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+                  </div>
+                </>
+        } </>)
+    }
+}

frontend/src/Components/ReactFlow/ReactFlowEnv.js

@@ -15,14 +15,15 @@ const types = {
   }
 
 export default function ReactEnviorment() {
- 
+
     const [theme, setTheme] = useState(useThemeDetector())
     const [nodes, setNodes] = useState([]);
     const [edges, setEdges] = useState([]);
     const [reactFlowInstance, setReactFlowInstance] = useState(null);
     const reactFlowWrapper = useRef(null);
-    console.log("theme",theme)
-  
+
+
+
     const onNodesChange = useCallback(
       (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
       [setNodes]
@@ -33,12 +34,13 @@ export default function ReactEnviorment() {
       [setEdges]
     );
   
-  
     const onDragOver = useCallback((event) => {
       event.preventDefault();
       event.dataTransfer.dropEffect = 'move';
     }, []);
-  
+
+    const deleteNode = (id) =>{setNodes((nds) => nds.filter(n => n.id !== id ))}
+
     const onDrop = useCallback(
       (event) => {
         event.preventDefault();
@@ -61,13 +63,13 @@ export default function ReactEnviorment() {
           id: `${name}-${nodes.length}`,
           type,
           position,
-          data: { label: `${name}`, host : `${host}`, colour : `${colour}` },
+          data: { label: `${name}`, host : `${host}`, colour : `${colour}`, delete : deleteNode },
         };
         setNodes((nds) => nds.concat(newNode));
       },
       [reactFlowInstance, nodes]);
 
-
+    
     return (
       <>          
         <div className=' absolute top-4 right-5 z-50' onClick={()=> setTheme(!theme)}>
@@ -77,7 +79,7 @@ export default function ReactEnviorment() {
           <Navbar/>
           <ReactFlowProvider>
             <div className="h-screen w-screen" ref={reactFlowWrapper}>
-              <ReactFlow nodes={nodes} edges={edges} nodeTypes={types} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance} fitView>
+              <ReactFlow nodes={nodes} edges={edges} nodeTypes={types} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onNodesDelete={deleteNode} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance}  fitView>
               <Background variant='dots' size={1} className=" bg-white dark:bg-neutral-800"/>
             </ReactFlow>
             </div>

frontend/src/css/counter.css

@@ -0,0 +1,13 @@
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.custom-number-input input:focus {
+  outline: none !important;
+}
+
+.custom-number-input button:focus {
+  outline: none !important;
+}

frontend/src/css/dist/output.css

@@ -591,6 +591,10 @@ video {
   pointer-events: auto;
 }
 
+.visible {
+  visibility: visible;
+}
+
 .absolute {
   position: absolute;
 }
@@ -620,6 +624,10 @@ video {
   bottom: 0px;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .top-4 {
   top: 1rem;
 }
@@ -628,34 +636,22 @@ video {
   right: 1.25rem;
 }
 
-.top-0 {
-  top: 0px;
-}
-
 .z-10 {
   z-index: 10;
 }
 
-.-z-10 {
-  z-index: -10;
+.-z-20 {
+  z-index: -20;
 }
 
-.-z-0 {
-  z-index: 0;
+.-z-10 {
+  z-index: -10;
 }
 
 .z-50 {
   z-index: 50;
 }
 
-.-z-20 {
-  z-index: -20;
-}
-
-.z-0 {
-  z-index: 0;
-}
-
 .float-left {
   float: left;
 }
@@ -664,6 +660,10 @@ video {
   margin: 0px;
 }
 
+.m-auto {
+  margin: auto;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -688,6 +688,18 @@ video {
   margin-right: 0.5rem;
 }
 
+.-mt-3 {
+  margin-top: -0.75rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -720,12 +732,20 @@ video {
   height: auto;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-\[600px\] {
+  height: 600px;
+}
+
 .h-\[540px\] {
   height: 540px;
 }
 
-.h-full {
-  height: 100%;
+.h-8 {
+  height: 2rem;
 }
 
 .h-5 {
@@ -744,14 +764,58 @@ video {
   width: 2.25rem;
 }
 
-.w-\[600px\] {
-  width: 600px;
+.w-\[85\%\] {
+  width: 85%;
 }
 
 .w-screen {
   width: 100vw;
 }
 
+.w-\[540px\] {
+  width: 540px;
+}
+
+.w-\[600px\] {
+  width: 600px;
+}
+
+.w-\[80\%\] {
+  width: 80%;
+}
+
+.w-\[78\%\] {
+  width: 78%;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-\[72\%\] {
+  width: 72%;
+}
+
+.w-\[70\%\] {
+  width: 70%;
+}
+
+.w-\[75\%\] {
+  width: 75%;
+}
+
+.w-\[60\%\] {
+  width: 60%;
+}
+
+.w-0 {
+  width: 0px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -770,14 +834,6 @@ video {
   cursor: pointer;
 }
 
-.cursor-s-resize {
-  cursor: s-resize;
-}
-
-.cursor-grab {
-  cursor: grab;
-}
-
 .cursor-grabbing {
   cursor: grabbing;
 }
@@ -787,6 +843,10 @@ video {
           user-select: none;
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .items-center {
   align-items: center;
 }
@@ -797,6 +857,18 @@ video {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -825,18 +897,59 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-l {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.rounded-r {
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.rounded-l-xl {
+  border-top-left-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+}
+
+.rounded-r-xl {
+  border-top-right-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-y-2 {
+  border-top-width: 2px;
+  border-bottom-width: 2px;
+}
+
 .border-r-\[1px\] {
   border-right-width: 1px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
 .border-dashed {
   border-style: dashed;
 }
 
+.border-dotted {
+  border-style: dotted;
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -852,6 +965,16 @@ video {
   border-color: rgb(220 38 38 / var(--tw-border-opacity));
 }
 
+.border-green-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(22 163 74 / var(--tw-border-opacity));
+}
+
+.border-fuchsia-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(240 171 252 / var(--tw-border-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -865,11 +988,51 @@ video {
   background-color: rgba(255,255,255, 0.18);
 }
 
+.bg-Warm-Blue {
+  --tw-bg-opacity: 1;
+  background-color: rgb(40 58 184 / var(--tw-bg-opacity));
+}
+
+.bg-Warm-Violet {
+  --tw-bg-opacity: 1;
+  background-color: rgb(141 55 158 / var(--tw-bg-opacity));
+}
+
+.bg-Warm-Pink {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 52 132 / var(--tw-bg-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+}
+
+.bg-cream {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 249 246 / var(--tw-bg-opacity));
+}
+
+.bg-Warm-Red {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 96 93 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1015,10 +1178,6 @@ video {
   --tw-gradient-to: #319B72;
 }
 
-.p-7 {
-  padding: 1.75rem;
-}
-
 .p-5 {
   padding: 1.25rem;
 }
@@ -1027,6 +1186,10 @@ video {
   padding: 1rem;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -1120,6 +1283,11 @@ video {
   line-height: 2.5rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -1128,11 +1296,49 @@ video {
   font-weight: 700;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-thin {
+  font-weight: 100;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-green-300 {
+  --tw-text-opacity: 1;
+  color: rgb(134 239 172 / var(--tw-text-opacity));
+}
+
+.text-green-400 {
+  --tw-text-opacity: 1;
+  color: rgb(74 222 128 / var(--tw-text-opacity));
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1151,11 +1357,22 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-xl {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-black {
   --tw-shadow-color: #000;
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .filter {
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1167,6 +1384,14 @@ video {
   transition-duration: 150ms;
 }
 
+.transition {
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -1215,9 +1440,39 @@ video {
   border-color: rgb(151 0 204 / var(--tw-border-opacity));
 }
 
-.hover\:bg-black:hover {
+.hover\:border-Green-Forest:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(26 76 57 / var(--tw-border-opacity));
+}
+
+.hover\:border-Green-Emerald:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(49 155 114 / var(--tw-border-opacity));
+}
+
+.hover\:border-rose-600:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(225 29 72 / var(--tw-border-opacity));
+}
+
+.hover\:border-b-Green-Forest:hover {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(26 76 57 / var(--tw-border-opacity));
+}
+
+.hover\:bg-gray-400:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
+.hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.hover\:text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
 .focus\:border-sky-500:focus {
@@ -1225,6 +1480,17 @@ video {
   border-color: rgb(14 165 233 / var(--tw-border-opacity));
 }
 
+.focus\:from-fuchsia-200:focus {
+  --tw-gradient-from: #f5d0fe;
+  --tw-gradient-to: rgb(245 208 254 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.focus\:text-black:focus {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1266,6 +1532,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:w-60 {
     width: 15rem;