add icons and separator

Author: christiansamaniego-okta

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/components/context-menu/context-menu.module.scss

@@ -52,3 +52,10 @@
     background-color: var(--color_bg_layer_alternate-bold);
   }
 }
+
+.separator {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color_border_default);
+  margin: 0.25rem 0;
+}

src/features/common/components/context-menu/context-menu.tsx

@@ -7,7 +7,8 @@ import jwtLogoString from "@/public/img/jwt-logo.svg?raw";
 import jwtSymbolString from "@/public/img/jwt-symbol.svg?raw";
 import jwtWordmarkString from "@/public/img/jwt-wordmark.svg?raw";
 import { Button } from "react-aria-components";
-import { a } from "vitest/dist/suite-dWqIFb_-.js";
+import { CopyIcon } from "../icons/copy/copy-icon";
+import { DownloadIconComponent } from "../../assets/download-icon.component";
 
 interface ContextMenuProps {
   dictionary: BrandDictionaryModel;
@@ -46,48 +47,49 @@ const ContextMenu: FC<ContextMenuProps> = ({
           className={styles.menuItem}
           onPress={() => handleIconCopy(jwtLogoString)}
         >
-          <div>icon</div>
+          <CopyIcon />
           <span>{dictionary.menu.brand.svg.copyLabel}</span>
         </Button>
         <a
           className={styles.menuItem}
           href="/img/jwt-logo.svg"
           download="jwt-logo.svg"
         >
-          <div>icon</div>
+          <DownloadIconComponent />
           {dictionary.menu.brand.svg.downloadLabel}
         </a>
         <Button
           className={styles.menuItem}
           onPress={() => handleIconCopy(jwtSymbolString)}
         >
-          <div>icon</div>
+          <CopyIcon />
           <span>{dictionary.menu.brand.symbol.copyLabel}</span>
         </Button>
         <a
           className={styles.menuItem}
           href="/img/jwt-symbol.svg"
           download="jwt-symbol.svg"
         >
-          <div>icon</div>
+          <DownloadIconComponent />
           {dictionary.menu.brand.symbol.downloadLabel}
         </a>
         <Button
           className={styles.menuItem}
           onPress={() => handleIconCopy(jwtWordmarkString)}
         >
-          <div>icon</div>
+          <CopyIcon />
           <span>{dictionary.menu.brand.wordmark.copyLabel}</span>
         </Button>
         <a
           className={styles.menuItem}
           href="/img/jwt-wordmark.svg"
           download="jwt-wordmark.svg"
         >
-          <div>icon</div>
+          <DownloadIconComponent />
           {dictionary.menu.brand.wordmark.downloadLabel}
         </a>
       </div>
+      <div className={styles.separator}></div>
       <div className={styles.groupLabel}>{dictionary.menu.tools.label}</div>
       {dictionary.menu.tools.items.map((el) => (
         <a className={styles.menuItem} key={el.url} href={el.url}>{el.label}</a>

src/features/common/components/icons/copy/copy-icon.tsx

@@ -0,0 +1,23 @@
+export const CopyIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 15H12C13.6569 15 15 13.6569 15 12V8C15 6.34315 13.6569 5 12 5H8C6.34315 5 5 6.34315 5 8V12C5 13.6569 6.34315 15 8 15Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+      <path
+        d="M8 0.25C9.33915 0.25 10.5138 0.952094 11.177 2.00819C11.4679 2.47151 11.0737 3 10.5266 3C10.2123 3 9.93488 2.81318 9.7352 2.57055C9.32304 2.06973 8.6994 1.75 8 1.75H4C2.75736 1.75 1.75 2.75736 1.75 4V8C1.75 8.69927 2.06986 9.32232 2.57062 9.73428C2.81326 9.93389 3 10.2113 3 10.5255C3 11.0726 2.47146 11.4669 2.00808 11.176C0.952101 10.513 0.25 9.33902 0.25 8V4C0.25 1.92893 1.92893 0.25 4 0.25H8Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};

src/features/common/components/theme-picker/theme-picker.component.tsx

@@ -27,7 +27,6 @@ export const ThemePickerComponent: React.FC<ThemePickerComponentProps> = ({
               data-active={selectedOptionCode === option.code}
               title={option.label}
               onClick={async () => {
-                console.log(option.label)
                 await handleSelection(option.code);
               }}
             >