📏 refactor size updater for node

frontend/src/components/Navagation/navbar.js

@@ -9,6 +9,7 @@ export default class Navbar extends Component{
     constructor(props){
         super(props) 
         this.temp_host = 0
+        this.fetch_classes()
         this.deleteNode = props.onDelete
         this.state = {open : true,
             menu : [],
@@ -45,7 +46,7 @@ export default class Navbar extends Component{
                 if(diff !== 0){
                    this.hanelTabs(menu, diff)
                 }
-        },1500);    
+        },1000);    
         }catch(e){
             console.log(e)
         }
@@ -225,7 +226,7 @@ export default class Navbar extends Component{
 
 
     render(){
-        this.fetch_classes()
+        
         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`}>

frontend/src/components/Nodes/Custom.js

@@ -1,14 +1,22 @@
 import React from "react"
 import {TbResize} from 'react-icons/tb'
 import {BiCube, BiRefresh} from 'react-icons/bi'
-import {BsTrash} from 'react-icons/bs'
+import {BsTrash, BsArrowDownRightSquare} from 'react-icons/bs'
 import {CgLayoutGridSmall} from 'react-icons/cg'
 import '../../css/counter.css'
 
+const MINIMUM_HEIGHT = 600;
+const MINIMUM_WIDTH = 540; 
 export default class CustomNodeIframe extends React.Component {
     constructor({id , data}){
       super()
       this.myRef = React.createRef()
+      this.original_width = 0;
+      this.original_height = 0;
+      this.original_x = 0;
+      this.original_y = 0;
+      this.original_mouse_x = 0;
+      this.original_mouse_y = 0;
       this.state = {
         id : id,
         reachable : this.isFetchable(data.host),
@@ -16,20 +24,18 @@ export default class CustomNodeIframe extends React.Component {
         data : data,
         width : 540,
         height : 600,
-        size : false,
+        size : true,
         iframe : 0,
-        initial_pos : 0,
-        initial_size : 0, 
       }
  
     }
 
     handelSelected = () => {
-      this.setState({id : this.state.id, reachable : this.state.reachable, selected : !this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
+      this.setState({id : this.state.id, reachable : this.state.reachable, selected : !this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size, iframe : this.state.iframe})
     }
 
     handelSizeState = () => {
-        this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : !this.state.size, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
+        this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : !this.state.size, iframe : this.state.iframe})
       }
 
     isFetchable = async (host) => {
@@ -51,18 +57,18 @@ export default class CustomNodeIframe extends React.Component {
       if(!this.isFetchable(this.state.data.host)){ 
         this.onNodeClick(this.state.id)
       } else{
-        this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size, iframe : this.state.iframe + 1, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
+        this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height, size : this.state.size, iframe : this.state.iframe + 1})
       }
     }
 
     handelOnChange(evt, type){
-      this.setState({id : this.state.id, 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, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
+      this.setState({id : this.state.id, 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, iframe : this.state.iframe })
         type === "width" ? this.myRef.current.style.width = `${parseInt(evt.target.value)}px` : this.myRef.current.style.height = `${parseInt(evt.target.value)}px` 
     }
 
     handelSize(evt, increment, change){
       if (evt === "increment") {
-        this.setState({id : this.state.id, 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, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
+        this.setState({id : this.state.id, 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, iframe : this.state.iframe })
         change === "width" ? this.myRef.current.style.width = `${this.state.width + increment}px` : this.myRef.current.style.height = `${this.state.height + increment}px` 
       }
 
@@ -70,13 +76,75 @@ export default class CustomNodeIframe extends React.Component {
     
     //(Experimental) resize nodes by dragging
     initial = (e) => {
-      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height , size : this.state.size, iframe : this.state.iframe, initial_pos :  e.clientY, initial_size : this.myRef.current.offsetHeight })
+      e.dataTransfer.setDragImage(new Image(), 0, 0)
+      console.log( this.myRef.current.offsetHeight,  this.myRef.current.offsetWidth, this.myRef.current.getBoundingClientRect().left, this.myRef.current.getBoundingClientRect().top )
+      this.original_width = this.myRef.current.offsetWidth
+      this.original_height = this.myRef.current.offsetHeight
+
+      this.original_x = this.myRef.current.getBoundingClientRect().left;
+      this.original_y = this.myRef.current.getBoundingClientRect().top;
+
+      this.original_mouse_x = e.pageX
+      this.original_mouse_y = e.pageY
     }
 
-    resize = (e) => {
-      var new_height = parseInt(this.state.initial_size) + parseInt(e.clientY - this.state.initial_pos)
-      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  this.state.width, height : new_height, size : this.state.size, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
-      this.myRef.current.style.height = `${new_height}px`
+    resize = (e, point) => {
+      var height = 0;
+      var width = 0;
+      // e.dataTransfer.setDragImage(new Image(), 0, 0)
+      if (point === 'bottom-right'){
+        width = this.original_width + (e.pageX - this.original_mouse_x);
+        height = this.original_height + (e.pageY - this.original_mouse_y)
+        if (width > MINIMUM_WIDTH) {
+          this.myRef.current.style.width = `${width}px`
+        }
+        if (height > MINIMUM_HEIGHT) {
+          this.myRef.current.style.height = `${height}px`
+        }
+
+      } else if (point === "bottom-left"){
+        height = this.original_height + (e.pageY - this.original_mouse_y)
+        width = this.original_width - (e.pageX - this.original_mouse_x);
+        if (height > MINIMUM_HEIGHT) {
+          this.myRef.current.style.height = `${height}px`
+        }
+        if (width > MINIMUM_WIDTH) {
+          this.myRef.current.style.width = `${width}px`
+          this.myRef.current.style.left = this.original_x + (e.pageX - this.original_mouse_x) + 'px'
+
+        }
+      } else if (point === "top-right"){
+        width = this.original_width + (e.pageX - this.original_mouse_x);
+        height = this.original_height - (e.pageY - this.original_mouse_y)
+
+        if (width > MINIMUM_WIDTH) {
+          this.myRef.current.style.width = `${width}px`
+        }
+        if (height > MINIMUM_HEIGHT) {
+          this.myRef.current.style.height = `${height}px`
+          this.myRef.current.style.top = this.original_y + (e.pageY - this.original_mouse_y) + 'px'
+        }
+      } else {
+        height = this.original_height - (e.pageY - this.original_mouse_y)
+        width = this.original_width - (e.pageX - this.original_mouse_x);
+        if (width > MINIMUM_WIDTH) {
+          this.myRef.current.style.width = `${width}px`
+          this.myRef.current.style.left = this.original_x + (e.pageX - this.original_mouse_x) + 'px'
+
+        }
+        if (height > MINIMUM_HEIGHT) {
+          this.myRef.current.style.height = `${height}px`
+          this.myRef.current.style.top = this.original_y + (e.pageY - this.original_mouse_y) + 'px'
+        }
+      }
+
+      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  parseInt(width) , height : parseInt(height), size : this.state.size, iframe : this.state.iframe})
+      
+    }
+
+    OnDragEnd = () => {
+      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : parseInt(this.myRef.current.style.width), height : parseInt(this.myRef.current.style.height), size : this.state.size, iframe : this.state.iframe})
+      
     }
 
     Counter(focus, size){
@@ -96,7 +164,6 @@ export default class CustomNodeIframe extends React.Component {
     render(){
       if (!this.state.reachable) {this.onNodeClick(this.state.id) }
       return (<>
-                <>
                   <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 border-white 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>
 
@@ -115,24 +182,35 @@ export default class CustomNodeIframe extends React.Component {
                   
                   </div>               
                 
-                  <div id="draggable" className={`relative w-[540px] h-[600px] overflow-hidden m-0 p-0 shadow-2xl`} ref={this.myRef}>
-                    <div className={`absolute h-full w-full ${this.state.data.colour} border-1 shadow-2xl rounded-xl -z-20`}></div>
+                  <div id={`draggable`} className={`relative w-[540px] h-[600px] overflow-hidden m-0 p-0 shadow-2xl`} ref={this.myRef}>
+
+                    <div className={`absolute p-5 h-full w-full ${this.state.data.colour} shadow-2xl rounded-xl -z-20`}></div>
                     <iframe 
                         id="iframe" 
                         key={this.state.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 " 
-                        sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+                        title={this.state.data.label}
+                        frameBorder="0"
+                        scrolling="no" 
+                        className=" -z-10 container h-full p-2 flex-grow space-iframe overflow-auto" 
+                        sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
+                        ></iframe>
                   </div>
-                  {/* (Experimental) Do not uncomment */}
-                   <div className={`absolute bottom-0 w-full h-10 bg-transparent border-1 shadow-2xl rounded-xl z-10 cursor-ns-resize`} 
-                       draggable
-                       onDragStart={(e) => { this.initial(e) }}
-                       onDrag={(e) => { this.resize(e) }}
-                       ></div> 
-                </>
+                  { this.state.size && <>
+                  
+                  <div id="remove-ghost" className={`absolute select-none -bottom-0 right-0 w-5 h-5border-2 shadow-2xl rounded-xl z-10 cursor-nwse-resize `}
+                       style={{"userDrag": "none"}} 
+                         draggable
+                         onDragStart={(e) => { this.initial(e) }}
+                         onDrag={(e) => { this.resize(e, 'bottom-right') }}
+                         onDragEnd={() => {this.OnDragEnd()}}
+                         >
+                          <BsArrowDownRightSquare className=" text-selected-text text-2xl bg-white"/>
+                          </div> 
+  
+                      </>
+                  }
+
         </>)
     }
-}
+}

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -103,10 +103,10 @@ export default function ReactEnviorment() {
 
     return (
       <div className={`${theme ? "dark" : ""}`}>          
-        <div className={` absolute ${tool ? "h-[13rem]" : "h-[4rem]"} top-4 right-5 z-50 cursor-default select-none text-4xl bg-white dark:bg-stone-900 p-3  rounded-full border border-black dark:border-white duration-500`}  >
-          <CgMoreVerticalAlt className={`text-black dark:text-white ${tool ? "-rotate-0" : "rotate-90"} duration-150`} onClick={() => setTool(!tool)}/>
-          <h1 title={theme ? 'Dark Mode' : 'Light Mode'} className={`py-2 ${tool ? "visible delay-[170ms]" : "invisible"} `} onClick={() => setTheme(!theme)} >{theme  ? '🌙' : '☀️'}</h1> 
-          <h1 title="Save" className={`py-2 ${tool ? "visible delay-[170ms]" : "invisible"} `} onClick={() => onSave()}>💾</h1> 
+        <div className={` absolute w-auto h-auto text-4xl top-4 right-5 z-50 cursor-default select-none bg-white dark:bg-stone-900 rounded-full border border-black dark:border-white duration-500`}  >
+          <CgMoreVerticalAlt className={` text-black dark:text-white ${tool ? "-rotate-0 mr-auto ml-auto" : "rotate-90 m-1"} duration-15 `} onClick={() => setTool(!tool)}/>
+          <h1 title={theme ? 'Dark Mode' : 'Light Mode'} className={`p-4 px-1 ${tool ? "visible delay-[170ms]" : "hidden invisible"} text-3xl`} onClick={() => setTheme(!theme)} >{theme  ? '🌙' : '☀️'}</h1> 
+          <h1 title="Save" className={`p-4 px-1 ${tool ? "visible delay-[170ms]" : " hidden invisible"} text-3xl`} onClick={() => onSave()}>💾</h1> 
         </div>
         <div className={`flex h-screen w-screen ${theme ? "dark" : ""} transition-all`}>    
           <Navbar onDelete={deleteNodeContains} colour={JSON.parse(localStorage.getItem('colour'))} emoji={JSON.parse(localStorage.getItem('emoji'))}/>

frontend/src/css/dist/output.css

@@ -624,6 +624,14 @@ video {
   top: 0px;
 }
 
+.-bottom-1 {
+  bottom: -0.25rem;
+}
+
+.-right-2 {
+  right: -0.5rem;
+}
+
 .top-4 {
   top: 1rem;
 }
@@ -632,6 +640,14 @@ video {
   right: 1.25rem;
 }
 
+.-bottom-0 {
+  bottom: -0px;
+}
+
+.right-0 {
+  right: 0px;
+}
+
 .-z-20 {
   z-index: -20;
 }
@@ -664,6 +680,14 @@ video {
   margin: 0px;
 }
 
+.m-5 {
+  margin: 1.25rem;
+}
+
+.m-1 {
+  margin: 0.25rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -692,6 +716,18 @@ video {
   margin-top: -0.75rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
 .block {
   display: block;
 }
@@ -732,44 +768,32 @@ video {
   height: 600px;
 }
 
-.h-20 {
-  height: 5rem;
+.h-5 {
+  height: 1.25rem;
 }
 
-.h-12 {
-  height: 3rem;
-}
-
-.h-14 {
-  height: 3.5rem;
+.h-\[13rem\] {
+  height: 13rem;
 }
 
-.h-16 {
+.h-\[4rem\] {
   height: 4rem;
 }
 
-.h-\[4\.5rem\] {
-  height: 4.5rem;
+.h-\[10rem\] {
+  height: 10rem;
 }
 
-.h-60 {
-  height: 15rem;
+.h-\[11rem\] {
+  height: 11rem;
 }
 
-.h-0 {
-  height: 0px;
+.h-\[31\.5px\] {
+  height: 31.5px;
 }
 
-.h-\[14rem\] {
-  height: 14rem;
-}
-
-.h-\[4rem\] {
-  height: 4rem;
-}
-
-.h-\[13rem\] {
-  height: 13rem;
+.h-\[39\.750px\] {
+  height: 39.750px;
 }
 
 .w-10 {
@@ -804,10 +828,26 @@ video {
   width: 540px;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
 .w-screen {
   width: 100vw;
 }
 
+.w-\[31\.5\] {
+  width: 31.5;
+}
+
+.w-\[31\.5px\] {
+  width: 31.5px;
+}
+
+.w-\[29\.5px\] {
+  width: 29.5px;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -826,26 +866,14 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.rotate-90 {
-  --tw-rotate: 90deg;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-rotate-90 {
-  --tw-rotate: -90deg;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-rotate-180 {
-  --tw-rotate: -180deg;
+.-rotate-0 {
+  --tw-rotate: -0deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-rotate-0 {
-  --tw-rotate: -0deg;
+.rotate-90 {
+  --tw-rotate: 90deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -866,6 +894,10 @@ video {
   cursor: default;
 }
 
+.cursor-nwse-resize {
+  cursor: nwse-resize;
+}
+
 .select-none {
   -webkit-user-select: none;
           user-select: none;
@@ -949,6 +981,10 @@ video {
   border-width: 2px;
 }
 
+.border-\[3px\] {
+  border-width: 3px;
+}
+
 .border-y-2 {
   border-top-width: 2px;
   border-bottom-width: 2px;
@@ -991,6 +1027,11 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.border-Happy-Cool-Blue {
+  --tw-border-opacity: 1;
+  border-color: rgb(80 142 231 / var(--tw-border-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1029,16 +1070,6 @@ video {
   background-color: rgb(254 169 89 / var(--tw-bg-opacity));
 }
 
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
-.bg-stone-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
-}
-
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1239,10 +1270,6 @@ video {
   padding: 0.5rem;
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1268,9 +1295,24 @@ video {
   padding-right: 1.5rem;
 }
 
-.py-5 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.px-\[0\.5px\] {
+  padding-left: 0.5px;
+  padding-right: 0.5px;
+}
+
+.py-\[0\.5px\] {
+  padding-top: 0.5px;
+  padding-bottom: 0.5px;
 }
 
 .pt-8 {
@@ -1305,10 +1347,6 @@ video {
   padding-top: 0.5rem;
 }
 
-.pt-5 {
-  padding-top: 1.25rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1342,6 +1380,11 @@ video {
   line-height: 2rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1369,6 +1412,16 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-cream {
+  --tw-text-opacity: 1;
+  color: rgb(250 249 246 / var(--tw-text-opacity));
+}
+
+.text-selected-text {
+  --tw-text-opacity: 1;
+  color: rgb(0 83 215 / var(--tw-text-opacity));
+}
+
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1418,18 +1471,6 @@ video {
   transition-duration: 150ms;
 }
 
-.delay-500 {
-  transition-delay: 500ms;
-}
-
-.delay-200 {
-  transition-delay: 200ms;
-}
-
-.delay-150 {
-  transition-delay: 150ms;
-}
-
 .delay-\[170ms\] {
   transition-delay: 170ms;
 }
@@ -1557,9 +1598,9 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-black {
+.dark .dark\:text-cream {
   --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+  color: rgb(250 249 246 / var(--tw-text-opacity));
 }
 
 @media (min-width: 640px) {