Frontend Changes Style 🔥

frontend/src/components/Navagation/navbar.js

@@ -180,8 +180,9 @@ export default class Navbar extends Component{
         }else{
             //append new colours
             for(var i =0; i < d; i++){
-                c.push(random_colour());
-                j.push(random_emoji());
+                    c.push(random_colour(i === 0 ? null : c[i-1]));
+                    j.push(random_emoji(i === 0 ? null : c[i-1]));
+                
             }
             this.setState({open : this.state.open, menu : e, text: this.state.text, name: this.state.name, colour : [...this.state.colour, ...c], emoji : [...this.state.emoji, ...j], error : this.state.error, modal : this.state.modal })
         }
@@ -191,7 +192,7 @@ export default class Navbar extends Component{
      * Append a new colour, and emoji to the colour and emoji list with in the state of the component
      */
     appendTabs = () => {
-        this.setState({open : this.state.open, menu : this.state.menu, text: this.state.text, name: this.state.name, colour : [...this.state.colour, random_colour] , emoji : [...this.state.emoji, random_emoji],  error : this.state.error, modal : this.state.modal })
+        this.setState({open : this.state.open, menu : this.state.menu, text: this.state.text, name: this.state.name, colour : [...this.state.colour, random_colour(this.state.colour[this.state.colour.length - 1] )] , emoji : [...this.state.emoji, random_emoji(this.state.emoji[this.state.emoji.length - 1] )],  error : this.state.error, modal : this.state.modal })
     }
 
     /**
@@ -221,10 +222,10 @@ export default class Navbar extends Component{
         return(<>
                 <li key={`${item.name}-${item.port}`} onDragStart={(event) => this.onDragStart(event, 'custom', item, index)} 
                     className={` text-white text-md flex text-center items-center cursor-grab shadow-lg
-                                 p-5 px-2 mt-4 rounded-md ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`} `} draggable>
+                                 p-5 px-2 mt-4 rounded-md ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`}  break-all -z-20`} draggable>
 
-                    <span className="flex-1 text-4xl opacity-70">{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]}`}</span>    
-                    <div className={` absolute text-base font-bold w-[90%] h-full" ${this.state.open ? "" : "hidden"}`}>{`${item.name}`}</div>
+                    <span className=" absolute text-4xl opacity-70 left-[39.15%] z-10">{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]}`}</span>    
+                    <span className={` text-base flex-1 font-bold z-20  ${this.state.open ? "" : "hidden"}`}>{`${item.name}`}</span>
 
                 </li >      
 
@@ -287,6 +288,7 @@ export default class Navbar extends Component{
                            onChange={(e) => {
                             this.updateText(e, "name")
                            }}
+                           autoComplete='off'
                            />
                 </label>
                 </div>

frontend/src/css/dist/output.css

@@ -596,6 +596,10 @@ video {
   bottom: 0px;
 }
 
+.left-\[39\.15\%\] {
+  left: 39.15%;
+}
+
 .-right-3 {
   right: -0.75rem;
 }
@@ -624,12 +628,16 @@ video {
   right: 1.25rem;
 }
 
+.-z-20 {
+  z-index: -20;
+}
+
 .z-10 {
   z-index: 10;
 }
 
-.-z-20 {
-  z-index: -20;
+.z-20 {
+  z-index: 20;
 }
 
 .-z-10 {
@@ -692,10 +700,6 @@ video {
   display: none;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-screen {
   height: 100vh;
 }
@@ -712,12 +716,12 @@ video {
   height: auto;
 }
 
-.h-\[600px\] {
-  height: 600px;
+.h-full {
+  height: 100%;
 }
 
-.w-\[90\%\] {
-  width: 90%;
+.h-\[600px\] {
+  height: 600px;
 }
 
 .w-10 {
@@ -815,6 +819,10 @@ video {
   overflow: scroll;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -1017,6 +1025,12 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-Entrepreneurial-Lies-Gray {
+  --tw-gradient-from: #8693AB;
+  --tw-gradient-to: rgb(134 147 171 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .via-purple-500 {
   --tw-gradient-to: rgb(168 85 247 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #a855f7, var(--tw-gradient-to);
@@ -1109,6 +1123,10 @@ video {
   --tw-gradient-to: #1565C0;
 }
 
+.to-Entrepreneurial-Lies-Gray {
+  --tw-gradient-to: #8693AB;
+}
+
 .p-5 {
   padding: 1.25rem;
 }
@@ -1194,9 +1212,9 @@ video {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
 }
 
 .text-base {
@@ -1214,9 +1232,9 @@ video {
   line-height: 1.75rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
 }
 
 .font-bold {
@@ -1242,14 +1260,6 @@ video {
           text-decoration-line: underline;
 }
 
-.opacity-40 {
-  opacity: 0.4;
-}
-
-.opacity-60 {
-  opacity: 0.6;
-}
-
 .opacity-70 {
   opacity: 0.7;
 }
@@ -1399,6 +1409,24 @@ video {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-gradient-to-bl {
+  background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
+}
+
+.dark .dark\:from-Entrepreneurial-Lies-Gray {
+  --tw-gradient-from: #8693AB;
+  --tw-gradient-to: rgb(134 147 171 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.dark .dark\:to-Entrepreneurial-Lies-Gray {
+  --tw-gradient-to: #8693AB;
+}
+
+.dark .dark\:to-Entrepreneurial-Lies-White {
+  --tw-gradient-to: #BDD4E7;
+}
+
 .dark .dark\:text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

frontend/src/helper/visual.js

@@ -15,7 +15,7 @@ const colour_map = [
      'bg-gradient-to-bl from-Green-Black via-Green-Forest to-Green-Emerald',
      'bg-gradient-to-bl from-Amethyst-Light to-Amethyst-Dark',
      'bg-gradient-to-bl from-Peach-Red to-Peach-Yello',
-     'bg-gradient-to-bl from-Deep-Space-Black to-Deep-Space-Gray',
+     'bg-gradient-to-bl from-Deep-Space-Black to-Deep-Space-Gray dark:bg-gradient-to-bl dark:from-Entrepreneurial-Lies-Gray dark:to-Entrepreneurial-Lies-White ',
      'bg-gradient-to-bl from-Sunshine-Red to-Sunshine-Blue'
 ]
 
@@ -23,16 +23,24 @@ const colour_map = [
  * Get a random emoji from emote array
  * @returns random emoji from emote array
  */
-export const random_emoji = () =>{
-    return emote[Math.floor(Math.random() * emote.length)]
+export const random_emoji = (prev) =>{
+    var e = emote[Math.floor(Math.random() * emote.length)]
+    while(e === prev){
+        e = emote[Math.floor(Math.random() * emote.length)]
+    }
+    return e
 }
 
 /**
  * Get a random color string from colour_map array
  * @returns random color css string 
  */
-export const random_colour = () => {
-    return colour_map[Math.floor(Math.random() * colour_map.length)]
+export const random_colour = (prev) => {
+    var c = colour_map[Math.floor(Math.random() * colour_map.length)]
+    while(c === prev){
+        c = colour_map[Math.floor(Math.random() * colour_map.length)]
+    }
+    return c
 }
 
 

frontend/tailwind.config.js

@@ -7,6 +7,8 @@ module.exports = {
     extend: {
      
       colors : {
+        "Entrepreneurial-Lies-Gray" : "#8693AB",
+        "Entrepreneurial-Lies-White" : "#BDD4E7",
         "Amethyst-Light" : "#9D50BB",
         "Amethyst-Dark" : "#6E48AA",
         "Peach-Red" : "#ED4264",