implemente all features

Author: runningonsideprojects

client/modules/IDE/components/Header/Nav.jsx

@@ -185,7 +185,7 @@ const ProjectMenu = () => {
           isDisabled={
             !user.authenticated ||
             !isLoginEnabled ||
-            (!!project?.owner && !isUserOwner)
+            (!project?.owner && !isUserOwner)
           }
           tooltipContent={
             !user.authenticated || !isLoginEnabled

client/styles/abstracts/_variables.scss

@@ -6,33 +6,33 @@ $p5js-pink-opacity: #ed225d80;
 $p5js-active-pink: #f10046;
 $white: #fff;
 $black: #000;
-$yellow: #F5DC23;
-$dodgerblue: #1E90FF;
-$p5-contrast-pink: #FFA9D9;
+$yellow: #f5dc23;
+$dodgerblue: #1e90ff;
+$p5-contrast-pink: #ffa9d9;
 
-$outline-color: #0F9DD7;
+$outline-color: #0f9dd7;
 
 // Grayscale values
-$lightest: #FFF; // primary
-$lighter: #FBFBFB;
+$lightest: #fff; // primary
+$lighter: #fbfbfb;
 
-$light: #F0F0F0; // primary
-$medium-light: #D9D9D9;
-$middle-light: #A6A6A6;
+$light: #f0f0f0; // primary
+$medium-light: #d9d9d9;
+$middle-light: #a6a6a6;
 
 // $middle-gray: #7D7D7D; // primary
 $middle-gray: #747474; // primary
 $middle-dark: #666;
-$medium-dark: #4D4D4D;
+$medium-dark: #4d4d4d;
 
 $dark: #333; // primary
-$darker: #1C1C1C;
+$darker: #1c1c1c;
 $darkest: #000;
 
 $themes: (
   light: (
-    admonition-background: #E4F8FF,
-    admonition-border: #22C8ED,
+    admonition-background: #e4f8ff,
+    admonition-border: #22c8ed,
     admonition-text: #075769,
     background-color: $lighter,
     button-active-color: $lightest,
@@ -42,11 +42,12 @@ $themes: (
     button-border-color: $middle-light,
     button-color: $black,
     button-hover-color: $lightest,
-    button-nav-inactive-color: $middle-gray,
+    button-nav-active-color: $darker,
+    button-nav-inactive-color: $middle-dark,
     button-secondary-background-color: $medium-light,
-    codefold-icon-closed: url("../images/triangle-arrow-right.svg?byUrl"),
-    codefold-icon-open: url("../images/triangle-arrow-down.svg?byUrl"),
-    console-active-arrow-color: #0071AD,
+    codefold-icon-closed: url('../images/triangle-arrow-right.svg?byUrl'),
+    codefold-icon-open: url('../images/triangle-arrow-down.svg?byUrl'),
+    console-active-arrow-color: #0071ad,
     console-arrow-color: $middle-gray,
     console-background-color: $light,
     console-color: $darker,
@@ -68,8 +69,8 @@ $themes: (
     hint-arrow-color: $lightest,
     hint-arrow-focus-outline-color: $middle-dark,
     hint-background-color: $white,
-    hint-fun-active-border-bottom-color: #0B7CA9,
-    hint-fun-text-color: #0B7CA9,
+    hint-fun-active-border-bottom-color: #0b7ca9,
+    hint-fun-text-color: #0b7ca9,
     hint-inline-text-color-light: $middle-light,
     hint-inline-text-color: $middle-gray,
     hint-item-active-background-color: $middle-gray,
@@ -79,12 +80,12 @@ $themes: (
     hint-item-active-type-text-color: $white,
     hint-item-border-bottom-color: $white,
     hint-item-hover-background-color: #f4f4f4,
-    hint-keyword-text-color: #7A5A3A,
+    hint-keyword-text-color: #7a5a3a,
     hint-no-link-background-color: $medium-light,
     hint-text-color: $dark,
     hint-type-text-color: $medium-dark,
-    hint-var-active-border-bottom-color: #D52889,
-    hint-var-text-color: #D52889,
+    hint-var-active-border-bottom-color: #d52889,
+    hint-var-text-color: #d52889,
     icon-color: $middle-gray,
     icon-hover-color: $darker,
     icon-toast-hover-color: $lightest,
@@ -116,7 +117,7 @@ $themes: (
     secondary-text-color: $medium-dark,
     shadow-color: rgba(0, 0, 0, 0.16),
     table-button-active-color: $lightest,
-    table-button-background-active-color: #00A1D3,
+    table-button-background-active-color: #00a1d3,
     table-button-background-color: $middle-gray,
     table-button-background-hover-color: $p5js-pink,
     table-button-color: $lightest,
@@ -126,12 +127,12 @@ $themes: (
     toast-background-color: $medium-dark,
     toast-text-color: $lightest,
     toolbar-button-background-color: $medium-light,
-    toolbar-button-color: $dark,
+    toolbar-button-color: $dark
   ),
   dark: (
-    admonition-background: #105A7F,
-    admonition-border: #22C8ED,
-    admonition-text: #FFFFFF,
+    admonition-background: #105a7f,
+    admonition-border: #22c8ed,
+    admonition-text: #ffffff,
     background-color: $darker,
     button-active-color: $lightest,
     button-background-active-color: $p5js-active-pink,
@@ -140,11 +141,12 @@ $themes: (
     button-border-color: $middle-dark,
     button-color: $light,
     button-hover-color: $lightest,
+    button-nav-active-color: $lightest,
     button-nav-inactive-color: $middle-light,
     button-secondary-background-color: $medium-dark,
-    codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"),
-    codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"),
-    console-active-arrow-color: #097BB3,
+    codefold-icon-closed: url('../images/triangle-arrow-right-white.svg?byUrl'),
+    codefold-icon-open: url('../images/triangle-arrow-down-white.svg?byUrl'),
+    console-active-arrow-color: #097bb3,
     console-arrow-color: $medium-light,
     console-background-color: $dark,
     console-color: $lightest,
@@ -165,8 +167,8 @@ $themes: (
     hint-arrow-color: $lightest,
     hint-arrow-focus-outline-color: #cfcfcf,
     hint-background-color: $darker,
-    hint-fun-active-border-bottom-color: #0F9DD7,
-    hint-fun-text-color: #0F9DD7,
+    hint-fun-active-border-bottom-color: #0f9dd7,
+    hint-fun-text-color: #0f9dd7,
     hint-inline-text-color-light: $middle-gray,
     hint-inline-text-color: #cfcfcf,
     hint-item-active-background-color: #cfcfcf,
@@ -176,12 +178,12 @@ $themes: (
     hint-item-active-type-text-color: $darker,
     hint-item-border-bottom-color: $darker,
     hint-item-hover-background-color: $medium-dark,
-    hint-keyword-text-color: #B58318,
+    hint-keyword-text-color: #b58318,
     hint-no-link-background-color: $medium-dark,
     hint-text-color: $light,
     hint-type-text-color: $light,
-    hint-var-active-border-bottom-color: #DE4A9B,
-    hint-var-text-color: #DE4A9B,
+    hint-var-active-border-bottom-color: #de4a9b,
+    hint-var-text-color: #de4a9b,
     icon-color: $middle-light,
     icon-hover-color: $lightest,
     icon-toast-hover-color: $lightest,
@@ -213,7 +215,7 @@ $themes: (
     secondary-text-color: $medium-light,
     shadow-color: rgba(0, 0, 0, 0.16),
     table-button-active-color: $lightest,
-    table-button-background-active-color: #00A1D3,
+    table-button-background-active-color: #00a1d3,
     table-button-background-color: $middle-gray,
     table-button-background-hover-color: $p5js-pink,
     table-button-color: $lightest,
@@ -223,11 +225,11 @@ $themes: (
     toast-background-color: $medium-light,
     toast-text-color: $dark,
     toolbar-button-background-color: $medium-dark,
-    toolbar-button-color: $lightest,
+    toolbar-button-color: $lightest
   ),
   contrast: (
     admonition-background: #000000,
-    admonition-border: #22C8ED,
+    admonition-border: #22c8ed,
     admonition-text: #ffffff,
     background-color: $darker,
     button-active-color: $dark,
@@ -237,10 +239,11 @@ $themes: (
     button-border-color: $middle-dark,
     button-color: $light,
     button-hover-color: $dark,
-    button-nav-inactive-color: $light,
+    button-nav-active-color: $lightest,
+    button-nav-inactive-color: $middle-light,
     button-secondary-background-color: $medium-dark,
-    codefold-icon-closed: url("../images/triangle-arrow-right-white.svg?byUrl"),
-    codefold-icon-open: url("../images/triangle-arrow-down-white.svg?byUrl"),
+    codefold-icon-closed: url('../images/triangle-arrow-right-white.svg?byUrl'),
+    codefold-icon-open: url('../images/triangle-arrow-down-white.svg?byUrl'),
     console-active-arrow-color: $dodgerblue,
     console-arrow-color: $lightest,
     console-background-color: $dark,
@@ -256,13 +259,13 @@ $themes: (
     form-secondary-title-color: $medium-light,
     form-title-color: $lightest,
     heavy-text-color: $yellow,
-    hint-arrow-background-active-color: #F5DC23,
-    hint-arrow-background-color: #F5DC23DD,
+    hint-arrow-background-active-color: #f5dc23,
+    hint-arrow-background-color: #f5dc23dd,
     hint-arrow-color: $darker,
     hint-arrow-focus-outline-color: $lighter,
     hint-background-color: $darkest,
     hint-fun-active-border-bottom-color: none,
-    hint-fun-text-color: #00FFFF,
+    hint-fun-text-color: #00ffff,
     hint-inline-text-color-light: $middle-gray,
     hint-inline-text-color: #cfcfcf,
     hint-item-active-background-color: unset,
@@ -272,12 +275,12 @@ $themes: (
     hint-item-active-type-text-color: $lighter,
     hint-item-border-bottom-color: $medium-dark,
     hint-item-hover-background-color: $dark,
-    hint-keyword-text-color: #F5DC23,
+    hint-keyword-text-color: #f5dc23,
     hint-no-link-background-color: $medium-dark,
     hint-text-color: $medium-light,
     hint-type-text-color: $middle-light,
     hint-var-active-border-bottom-color: none,
-    hint-var-text-color: #FFA9D9,
+    hint-var-text-color: #ffa9d9,
     icon-color: $medium-light,
     icon-hover-color: $yellow,
     icon-toast-hover-color: $yellow,
@@ -309,7 +312,7 @@ $themes: (
     secondary-text-color: $lighter,
     shadow-color: rgba(0, 0, 0, 0.16),
     table-button-active-color: $dark,
-    table-button-background-active-color: #00FFFF,
+    table-button-background-active-color: #00ffff,
     table-button-background-color: $middle-gray,
     table-button-background-hover-color: $yellow,
     table-button-color: $dark,
@@ -319,6 +322,6 @@ $themes: (
     toast-background-color: $medium-light,
     toast-text-color: $darker,
     toolbar-button-background-color: $medium-light,
-    toolbar-button-color: $dark,
+    toolbar-button-color: $dark
   )
 );