Navbar dropdown

next.config.mjs

@@ -3,18 +3,26 @@ import createMDX from "@next/mdx";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: {
-        loader: "@svgr/webpack",
-        options: {
-          svgoConfig: {
-            plugins: ["prefixIds"],
+    config.module.rules.push(
+      {
+        test: /\.svg$/,
+        resourceQuery: { not: /raw/ },
+        use: {
+          loader: "@svgr/webpack",
+          options: {
+            svgoConfig: {
+              plugins: ["prefixIds"],
+            },
+            ref: true,
           },
-          ref: true,
         },
       },
-    });
+      {
+        test: /\.svg$/i,
+        resourceQuery: /raw/, // Only apply this rule if '?raw' is present
+        type: "asset/source",
+      }
+    );
 
     return config;
   },

src/features/common/assets/download-icon.component.tsx

@@ -3,33 +3,26 @@ import React from "react";
 export const DownloadIconComponent: React.FC = () => {
   return (
     <svg
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M2.25 12.75V15C2.25 15.8284 2.92157 16.5 3.75 16.5H14.25C15.0784 16.5 15.75 15.8284 15.75 15V12.75"
-        stroke="#FBFBFB"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+        d="M8 10V2M8 10L11 7M8 10L5 7"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
       <path
-        d="M6 9L9 12L12 9"
-        stroke="#FBFBFB"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M9 1.5V12"
-        stroke="#FBFBFB"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+        d="M1 11V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V11"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
     </svg>
   );
 };

src/features/common/assets/jwt-logo.component.tsx

@@ -11,15 +11,15 @@ export const JwtLogoComponent: React.FC = () => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M18.3683 8.60806V0H13.5682V8.60806L15.9683 11.9041L18.3683 8.60806Z"
-        fill="#191919"
-        style={{ fill: '#191919', fillOpacity: 1 }}
+        fill="currentColor"
+        style={{ fillOpacity: 1 }}
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M13.5682 23.3919V32H18.3683V23.3919L15.9683 20.0959L13.5682 23.3919Z"
-        fill="#191919"
-        style={{ fill: '#191919', fillOpacity: 1 }}
+        fill="currentColor"
+        style={{ fillOpacity: 1 }}
       />
       <path
         fillRule="evenodd"

src/features/common/assets/jwt-wordmark.component.tsx

@@ -9,20 +9,20 @@ export const JwtWordmarkComponent: React.FC = () => {
     >
       <path
         d="M7 0V12C7 15.3137 4.31371 18 1 18V18"
-        stroke="black"
-        style={{ stroke: 'black', strokeOpacity: 1 }}
+        stroke="currentColor"
+        style={{ strokeOpacity: 1 }}
         strokeWidth="4"
       />
       <path
         d="M13.8932 0V14.5C13.8932 16.433 15.4602 18 17.3932 18V18C19.3262 18 20.8932 16.433 20.8932 14.5V5C20.8932 3.34315 22.2363 2 23.8932 2V2C25.55 2 26.8932 3.34315 26.8932 5V14.5C26.8932 16.433 28.4602 18 30.3932 18V18C32.3262 18 33.8932 16.433 33.8932 14.5V0"
-        stroke="black"
-        style={{ stroke: 'black', strokeOpacity: 1 }}
+        stroke="currentColor"
+        style={{ strokeOpacity: 1 }}
         strokeWidth="4"
       />
       <path
         d="M38.8932 2H44.8932M44.8932 2V20M44.8932 2H50.8932"
-        stroke="black"
-        style={{ stroke: 'black', strokeOpacity: 1 }}
+        stroke="currentColor"
+        style={{ strokeOpacity: 1 }}
         strokeWidth="4"
       />
     </svg>

src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx

@@ -3,20 +3,18 @@ import React from "react";
 export const DarkIconComponent: React.FC = () => {
   return (
     <svg
-      role="img"
-      aria-label="Crescent moon"
-      xmlns="http://www.w3.org/2000/svg"
-      width="1em"
-      height="1em"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="css-light-0"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      <path
+        d="M14.2252 10.0845C14.54 9.95039 14.8559 10.244 14.7134 10.555C14.3379 11.3742 13.8066 12.1157 13.1463 12.7369C12.2739 13.5575 11.2056 14.1406 10.0435 14.4303C8.88133 14.7201 7.6643 14.7068 6.50878 14.3918C5.35325 14.0767 4.29789 13.4705 3.44363 12.631C2.58937 11.7915 1.9648 10.7469 1.62965 9.59707C1.2945 8.44722 1.25998 7.23061 1.52941 6.06361C1.79883 4.89661 2.36318 3.81825 3.16847 2.9317C3.76901 2.27056 4.48855 1.73258 5.28668 1.34413C5.59577 1.1937 5.88975 1.51373 5.74469 1.82539V1.82539C3.32126 7.032 8.59731 12.4835 13.8804 10.2315L14.2252 10.0845Z"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linejoin="round"
+      ></path>
     </svg>
   );
 };

src/features/common/components/bars/ribbon/assets/light-icon.component.tsx

@@ -3,28 +3,31 @@ import React from "react";
 export const LightIconComponent: React.FC = () => {
   return (
     <svg
-      role="img"
-      aria-label="Sun"
-      xmlns="http://www.w3.org/2000/svg"
-      width="1em"
-      height="1em"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="css-light-0"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="12" cy="12" r="5"></circle>
-      <line x1="12" y1="1" x2="12" y2="3"></line>
-      <line x1="12" y1="21" x2="12" y2="23"></line>
-      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-      <line x1="1" y1="12" x2="3" y2="12"></line>
-      <line x1="21" y1="12" x2="23" y2="12"></line>
-      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+      <rect
+        x="5"
+        y="5"
+        width="6"
+        height="6"
+        rx="3"
+        stroke="currentColor"
+        stroke-width="1.5"
+      ></rect>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8 0.25C7.58579 0.25 7.25 0.585786 7.25 1L7.25391 1.07715C7.29248 1.45517 7.6118 1.75 8 1.75C8.41421 1.75 8.75 1.41421 8.75 1C8.75 0.585786 8.41421 0.25 8 0.25ZM8 14.25C7.58579 14.25 7.25 14.5858 7.25 15L7.25391 15.0771C7.29248 15.4552 7.6118 15.75 8 15.75C8.41421 15.75 8.75 15.4142 8.75 15C8.75 14.5858 8.41421 14.25 8 14.25ZM15.0771 7.25391C15.4552 7.29248 15.75 7.6118 15.75 8C15.75 8.3882 15.4552 8.70752 15.0771 8.74609L15 8.75C14.5858 8.75 14.25 8.41421 14.25 8C14.25 7.58579 14.5858 7.25 15 7.25L15.0771 7.25391ZM1.75 8C1.75 7.6118 1.45517 7.29248 1.07715 7.25391L1 7.25C0.585786 7.25 0.25 7.58579 0.25 8C0.25 8.41421 0.585786 8.75 1 8.75L1.07715 8.74609C1.45517 8.70752 1.75 8.3882 1.75 8Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M3.64135 12.3586C3.93421 12.6515 3.93414 13.1264 3.64135 13.4193C3.34846 13.7122 2.87358 13.7122 2.58069 13.4193C2.30619 13.1448 2.28888 12.7105 2.5289 12.416L2.58069 12.3586C2.87359 12.0659 3.34849 12.0658 3.64135 12.3586ZM3.63237 2.57723C3.87239 2.87181 3.85508 3.30608 3.58058 3.58058C3.30608 3.85508 2.87181 3.87239 2.57724 3.63237L2.51992 3.58058C2.22703 3.28769 2.22703 2.81281 2.51992 2.51992C2.81282 2.22702 3.28769 2.22702 3.58058 2.51992L3.63237 2.57723ZM13.4711 12.416C13.7111 12.7105 13.6938 13.1448 13.4193 13.4193C13.1448 13.6938 12.7105 13.7111 12.416 13.4711L12.3587 13.4193C12.0659 13.1264 12.0658 12.6515 12.3587 12.3586C12.6515 12.0658 13.1264 12.0659 13.4193 12.3586L13.4711 12.416ZM13.4801 2.51992C13.773 2.81281 13.773 3.28769 13.4801 3.58058C13.1872 3.87347 12.7123 3.87347 12.4194 3.58058C12.1449 3.30608 12.1276 2.87181 12.3676 2.57723L12.4194 2.51992C12.7123 2.22702 13.1872 2.22702 13.4801 2.51992Z"
+        fill="currentColor"
+      ></path>
     </svg>
   );
 };

src/features/common/components/bars/ribbon/assets/system-icon.component.tsx

@@ -3,22 +3,41 @@ import React from "react";
 export const SystemIconComponent: React.FC = () => {
   return (
     <svg
-      role="img"
-      aria-label="computer monitor"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="feather feather-monitor"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
-      <line x1="8" y1="21" x2="16" y2="21"></line>
-      <line x1="12" y1="17" x2="12" y2="21"></line>
+      <path
+        d="M1 4V12C1 13.6569 2.34315 15 4 15H12C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1H4C2.34315 1 1 2.34315 1 4Z"
+        stroke="currentColor"
+        stroke-width="1.5"
+      ></path>
+      <rect
+        x="4"
+        y="4"
+        width="8"
+        height="5"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linejoin="round"
+      ></rect>
+      <rect
+        x="11.25"
+        y="11.25"
+        width="1.5"
+        height="1.5"
+        rx="0.75"
+        fill="currentColor"
+      ></rect>
+      <path
+        d="M4 12H10"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
     </svg>
   );
 };

src/features/common/components/context-menu/context-menu.module.scss

@@ -0,0 +1,61 @@
+.container {
+  max-width: calc(-24px + 100vw);
+  max-height: calc(-24px + 100vh);
+  position: fixed;
+  background-color: var(--color_bg_layer);
+  border: 1px solid var(--color_border_default);
+  font-size: 0.875rem;
+  z-index: 9009;
+  cursor: default;
+  border-radius: 1rem;
+  overflow: hidden;
+  padding: 0.25rem;
+  min-width: 180px;
+  box-shadow:
+    0 1px 1px -0.5px rgba(0, 0, 0, 0.04),
+    0 3px 3px -1.5px rgba(0, 0, 0, 0.04),
+    0 6px 6px -3px rgba(0, 0, 0, 0.04),
+    0 12px 12px -6px rgba(0, 0, 0, 0.04),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+
+.groupLabel {
+  width: 100%;
+  padding: 0.5rem 0.75rem 0.25rem;
+  font-size: 0.8125rem;
+  color: var(--color_fg_default);
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  list-style-type: none;
+  flex-direction: column;
+}
+
+.menuItem {
+  width: 100%;
+  justify-content: flex-start;
+  position: relative;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.75rem;
+  color: var(--color_fg_bold);
+  gap: 0.5rem;
+  font-family: var(--font-primary);
+  border: none;
+  background-color: var(--color_bg_layer);
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color_bg_layer_alternate-bold);
+  }
+}
+
+.separator {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color_border_default);
+  margin: 0.25rem 0;
+}