diff --git a/next.config.mjs b/next.config.mjs index f4672921..8421cd46 100644 --- a/next.config.mjs +++ b/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; }, diff --git a/public/img/jwt-logo.svg b/public/img/jwt-logo.svg new file mode 100644 index 00000000..54d020e9 --- /dev/null +++ b/public/img/jwt-logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/jwt-symbol.svg b/public/img/jwt-symbol.svg new file mode 100644 index 00000000..63da72ae --- /dev/null +++ b/public/img/jwt-symbol.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/jwt-wordmark.svg b/public/img/jwt-wordmark.svg new file mode 100644 index 00000000..3a2ecbd0 --- /dev/null +++ b/public/img/jwt-wordmark.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/features/common/assets/download-icon.component.tsx b/src/features/common/assets/download-icon.component.tsx index c2a92fda..c7eb7ec2 100644 --- a/src/features/common/assets/download-icon.component.tsx +++ b/src/features/common/assets/download-icon.component.tsx @@ -3,33 +3,26 @@ import React from "react"; export const DownloadIconComponent: React.FC = () => { return ( + d="M8 10V2M8 10L11 7M8 10L5 7" + stroke="currentColor" + stroke-width="1.5" + stroke-linecap="round" + stroke-linejoin="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" + > ); }; diff --git a/src/features/common/assets/jwt-logo.component.tsx b/src/features/common/assets/jwt-logo.component.tsx index 57db4704..540dc371 100644 --- a/src/features/common/assets/jwt-logo.component.tsx +++ b/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 }} /> { > diff --git a/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx b/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx index 1f7d4251..7607d241 100644 --- a/src/features/common/components/bars/ribbon/assets/dark-icon.component.tsx +++ b/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 ( - + ); }; diff --git a/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx b/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx index 86bb0bab..d1f78402 100644 --- a/src/features/common/components/bars/ribbon/assets/light-icon.component.tsx +++ b/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 ( - - - - - - - - - + + + ); }; diff --git a/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx b/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx index 27be5261..dbc0ed77 100644 --- a/src/features/common/components/bars/ribbon/assets/system-icon.component.tsx +++ b/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 ( - - - + + + + ); }; diff --git a/src/features/common/components/context-menu/context-menu.module.scss b/src/features/common/components/context-menu/context-menu.module.scss new file mode 100644 index 00000000..8bfe011b --- /dev/null +++ b/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; +} diff --git a/src/features/common/components/context-menu/context-menu.tsx b/src/features/common/components/context-menu/context-menu.tsx new file mode 100644 index 00000000..8ecb97ba --- /dev/null +++ b/src/features/common/components/context-menu/context-menu.tsx @@ -0,0 +1,101 @@ +"use client"; + +import React, { FC } from "react"; +import { BrandDictionaryModel } from "@/features/localization/models/brand-dictionary.model"; +import styles from "./context-menu.module.scss"; +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 { CopyIcon } from "../icons/copy/copy-icon"; +import { DownloadIconComponent } from "../../assets/download-icon.component"; + +interface ContextMenuProps { + dictionary: BrandDictionaryModel; + position: { x: number; y: number } | null; + setIsCopied: (value: React.SetStateAction) => void; +} + +const ContextMenu: FC = ({ + dictionary, + position, + setIsCopied, +}) => { + if (!position) return null; + + const handleIconCopy = async (svgString: string) => { + if (!navigator.clipboard) { + console.error("Clipboard API not available"); + return; + } + try { + await navigator.clipboard.writeText(svgString); + setIsCopied(true); + } catch (err) { + console.error("Failed to copy SVG: ", err); + } + }; + + return ( +
+
{dictionary.menu.brand.label}
+
+ + + + {dictionary.menu.brand.svg.downloadLabel} + + + + + {dictionary.menu.brand.symbol.downloadLabel} + + + + + {dictionary.menu.brand.wordmark.downloadLabel} + +
+
+
{dictionary.menu.tools.label}
+ {dictionary.menu.tools.items.map((el) => ( + {el.label} + ))} +
+ ); +}; + +export default ContextMenu; diff --git a/src/features/common/components/footer/footer.component.tsx b/src/features/common/components/footer/footer.component.tsx index 719ff3db..ad06e00d 100644 --- a/src/features/common/components/footer/footer.component.tsx +++ b/src/features/common/components/footer/footer.component.tsx @@ -17,7 +17,7 @@ import { createUrlPath } from "@/libs/utils/path.utils"; import { SiteBrandComponent } from "@/features/common/components/site-brand/site-brand.component"; import { Button } from "react-aria-components"; import { Auth0LogoComponent } from "../../assets/auth0-logo.component"; -import { getImageDictionary } from "@/features/localization/services/images-dictionary.service"; +import { getBrandDictionary } from "@/features/localization/services/brand-dictionary.service"; interface FooterComponentProps { languageCode: string; @@ -31,7 +31,7 @@ export const FooterComponent: React.FC = ({ const [modalState, setModalState] = useState( ModalStateValues.CLOSED, ); - const images = getImageDictionary(languageCode); + const images = getBrandDictionary(languageCode); const languagePathPrefix: string = languageCode === DEFAULT_LANGUAGE_CODE @@ -158,7 +158,7 @@ export const FooterComponent: React.FC = ({ target="_blank" href="https://auth0.com/" > - + {dictionary.copyright} diff --git a/src/features/common/components/headers/header/header.module.scss b/src/features/common/components/headers/header/header.module.scss index 8843eb04..9a00d9dc 100644 --- a/src/features/common/components/headers/header/header.module.scss +++ b/src/features/common/components/headers/header/header.module.scss @@ -14,7 +14,7 @@ box-sizing: border-box; background: var(--color_bg_app_bar); border: 1px solid var(--color_bg_app_bar); - box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .04); + box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.04); backdrop-filter: blur(3rem); z-index: 100; @@ -62,7 +62,7 @@ align-items: center; justify-content: center; border-radius: 9999px; - padding: .25rem; + padding: 0.25rem; } .navList { @@ -89,13 +89,13 @@ .navList__item > a { display: flex; align-items: center; - padding: .5rem 1rem; + padding: 0.5rem 1rem; color: var(--color_fg_default); - font-size: .875rem; + font-size: 0.875rem; font-style: normal; font-weight: 600; line-height: 1.5; - letter-spacing: -.1px; + letter-spacing: -0.1px; border-radius: 9999px; &:focus-visible { @@ -103,14 +103,20 @@ outline-offset: 0.125rem; border-radius: 0.125rem; } + + &:hover { + background-color: var(--color_bg_app_bar_border); + color: var(--color_fg_bold); + transition: all 0.1s ease-out; + } } .actions { display: flex; - gap: .5rem; + gap: 0.5rem; @media #{$breakpoint-dimension-md} { gap: 1rem; margin-right: 1.5rem; } -} \ No newline at end of file +} diff --git a/src/features/common/components/icons/copy/copy-icon.tsx b/src/features/common/components/icons/copy/copy-icon.tsx new file mode 100644 index 00000000..93a104a9 --- /dev/null +++ b/src/features/common/components/icons/copy/copy-icon.tsx @@ -0,0 +1,23 @@ +export const CopyIcon = () => { + return ( + + + + + ); +}; \ No newline at end of file diff --git a/src/features/common/components/notification/notification.component.tsx b/src/features/common/components/notification/notification.component.tsx new file mode 100644 index 00000000..ca34ef0f --- /dev/null +++ b/src/features/common/components/notification/notification.component.tsx @@ -0,0 +1,27 @@ +import { useEffect } from 'react'; +import { createPortal } from 'react-dom'; +import styles from './notification.module.scss'; + +interface NotificationProps { + message: string; + onClose: () => void; +} + +const Notification = ({ message, onClose }: NotificationProps) => { + useEffect(() => { + const timer = setTimeout(() => { + onClose(); + }, 2000); + + return () => clearTimeout(timer); + }, [onClose]); + + return createPortal( +
+ {message} +
, + document.body + ); +}; + +export default Notification; \ No newline at end of file diff --git a/src/features/common/components/notification/notification.module.scss b/src/features/common/components/notification/notification.module.scss new file mode 100644 index 00000000..d3bf4a0a --- /dev/null +++ b/src/features/common/components/notification/notification.module.scss @@ -0,0 +1,46 @@ +.container { + position: fixed; + top: 1rem; + right: 1rem; + transform: translateY(0); + padding: 0.75rem 1rem; + background-color: var(--color_bg_layer_alternate-bold); + color: var(--color_fg_bold); + border-radius: 0.75rem; + font-size: 0.875rem; + font-weight: 500; + z-index: 9010; + animation: + fadeIn 0.3s forwards, + fadeOut 0.3s 1.7s forwards; + box-shadow: + 0 0 0 1px rgba(0, 0, 0, 0.12), + 0 2px 2px -1px rgba(0, 0, 0, 0.04), + 0 4px 4px -2px rgba(0, 0, 0, 0.04), + 0 8px 8px -4px rgba(0, 0, 0, 0.04), + 0 16px 16px -8px rgba(0, 0, 0, 0.04), + 0 32px 32px -16px rgba(0, 0, 0, 0.04), + inset 0 -1px 1px -0.5px rgba(0, 0, 0, 0.04); +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-100%); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeOut { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(-100%); + } +} diff --git a/src/features/common/components/site-brand/site-brand.component.tsx b/src/features/common/components/site-brand/site-brand.component.tsx index f7e7fd1b..1c1567d9 100644 --- a/src/features/common/components/site-brand/site-brand.component.tsx +++ b/src/features/common/components/site-brand/site-brand.component.tsx @@ -1,11 +1,13 @@ -import React, { PropsWithChildren } from "react"; +import React, { PropsWithChildren, useCallback, useEffect, useState } from "react"; import styles from "./site-brand.module.scss"; import Link from "next/link"; -import { getImageDictionary } from "@/features/localization/services/images-dictionary.service"; +import { getBrandDictionary } from "@/features/localization/services/brand-dictionary.service"; import { SecondaryFont } from "@/libs/theme/fonts"; import clsx from "clsx"; import { JwtLogoComponent } from "../../assets/jwt-logo.component"; import { JwtWordmarkComponent } from "../../assets/jwt-wordmark.component"; +import ContextMenu from "../context-menu/context-menu"; +import Notification from "../notification/notification.component"; interface SiteBrandComponentProps extends PropsWithChildren { path: string; @@ -16,19 +18,63 @@ export const SiteBrandComponent: React.FC = ({ path, languageCode, }) => { - const images = getImageDictionary(languageCode); + const [isCopied, setIsCopied] = useState(false); + const [isTooltipVisible, setIsTooltipVisible] = useState(false); + const [menuPosition, setMenuPosition] = useState<{ + x: number; + y: number; + } | null>(null); + + const handleRightClick: React.MouseEventHandler = (e) => { + e.preventDefault(); // Prevent the browser's default context menu + setMenuPosition({ x: e.clientX, y: e.clientY }); + }; + + const handleCloseMenu = () => { + setMenuPosition(null); + }; + + const handleNotificationClose = useCallback(() => { + setIsCopied(false); + }, []) + + useEffect(() => { + // Hide the menu on any click on the document + document.addEventListener("click", handleCloseMenu); + return () => { + document.removeEventListener("click", handleCloseMenu); + }; + }, []); + + const brandDictionary = getBrandDictionary(languageCode); return ( - -
- -
-
- -
-
- Debugger -
- +
+ setIsTooltipVisible(true)} + onMouseLeave={() => setIsTooltipVisible(false)} + onContextMenu={handleRightClick} + > +
+ +
+
+ +
+
+ Debugger +
+ {isTooltipVisible && ( +
{brandDictionary.tooltip}
+ )} + + + {isCopied && ( + + )} +
); }; diff --git a/src/features/common/components/site-brand/site-brand.module.scss b/src/features/common/components/site-brand/site-brand.module.scss index 09dbd56c..dadc015d 100644 --- a/src/features/common/components/site-brand/site-brand.module.scss +++ b/src/features/common/components/site-brand/site-brand.module.scss @@ -6,6 +6,7 @@ gap: 0.5rem; position: relative; cursor: pointer; + color: var(--color_fg_bold); svg { height: inherit; @@ -47,7 +48,7 @@ position: relative; display: flex; align-items: center; - height: 1rem; + height: 1rem; } .brand__headline { @@ -68,7 +69,25 @@ display: flex; font-size: 1rem; font-weight: 500; - line-height: .75rem; + line-height: 0.75rem; margin-top: 1px; - letter-spacing: .02rem; + letter-spacing: 0.02rem; +} + +.tooltip { + position: absolute; + top: -30px; + left: 50%; + transform: translateX(-50%); + padding: 4px 8px; + color: var(--color_fg_bold); + background-color: var(--color_bg_layer); + border: 1px solid var(--color_border_default); + border-radius: 0.5rem; + font-size: 0.75rem; + white-space: nowrap; + pointer-events: none; + transition: opacity 0.2s ease-in-out; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + z-index: 1000; } diff --git a/src/features/common/components/theme-picker/theme-picker.component.tsx b/src/features/common/components/theme-picker/theme-picker.component.tsx index 2981e145..b4a74b54 100644 --- a/src/features/common/components/theme-picker/theme-picker.component.tsx +++ b/src/features/common/components/theme-picker/theme-picker.component.tsx @@ -27,7 +27,6 @@ export const ThemePickerComponent: React.FC = ({ data-active={selectedOptionCode === option.code} title={option.label} onClick={async () => { - console.log(option.label) await handleSelection(option.code); }} > diff --git a/src/features/common/components/theme-picker/theme-picker.module.scss b/src/features/common/components/theme-picker/theme-picker.module.scss index 90049ed9..f8640e68 100644 --- a/src/features/common/components/theme-picker/theme-picker.module.scss +++ b/src/features/common/components/theme-picker/theme-picker.module.scss @@ -32,7 +32,11 @@ &[data-active="true"] { background-color: var(--color_bg_layer); color: var(--color_fg_bold); - box-shadow: 0 1px 2px rgba(0, 0, 0, .1); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + } + + &:hover { + background-color: var(--color_bg_layer_alternate-bold); } } diff --git a/src/features/localization/dictionaries/images/en.tsx b/src/features/localization/dictionaries/images/en.tsx index 0eb49401..e7829e9d 100644 --- a/src/features/localization/dictionaries/images/en.tsx +++ b/src/features/localization/dictionaries/images/en.tsx @@ -1,35 +1,32 @@ -import { BrandDictionaryModel } from "@/features/localization/models/images-dictionary.model"; +import { BrandDictionaryModel } from "../../models/brand-dictionary.model"; export const enBrandDictionary: BrandDictionaryModel = { - title: "Right-click or long-press for logo options", + alertMessage: "SVG copied to clipboard", + tooltip: "Right-click or long-press for logo options", menu: { brand: { label: "Brand", - items: [ - {icon: "", - label: "Copy Logo SVG" - }, - {icon: "", - label: "Download Logo" - }, - {icon: "", - label: "Copy Symbol SVG" - }, - {icon: "", - label: "Download Symbol" - }, - {icon: "", - label: "Copy Wordmark SVG" - }, - {icon: "", - label: "Download Wordmark" - }, - ] + svg: { + copyLabel: "Copy Logo SVG", + downloadLabel: "Download Logo", + }, + symbol: { + copyLabel: "Copy Symbol SVG", + downloadLabel: "Download Symbol", + }, + wordmark: { + copyLabel: "Copy Wordmark SVG", + downloadLabel: "Download Wordmark", + }, }, tools: { label: "Tools", items: [ - ] - } - } + { label: "Passkeys Playground", url: "https://learnpasskeys.io" }, + { label: "WebAuthn Playground", url: "https://webauthn.me" }, + { label: "OIDC Playground", url: "https://openidconnect.net" }, + { label: "SAML Tool", url: "https://samltool.io" }, + ], + }, + }, }; diff --git a/src/features/localization/dictionaries/images/ja.tsx b/src/features/localization/dictionaries/images/ja.tsx index 42dc0ebb..887bbe5d 100644 --- a/src/features/localization/dictionaries/images/ja.tsx +++ b/src/features/localization/dictionaries/images/ja.tsx @@ -1,35 +1,32 @@ -import { BrandDictionaryModel } from "@/features/localization/models/images-dictionary.model"; +import { BrandDictionaryModel } from "../../models/brand-dictionary.model"; -export const jaImagesDictionary: BrandDictionaryModel = { - title: "Right-click or long-press for logo options", +export const jaBrandDictionary: BrandDictionaryModel = { + alertMessage: "SVG copied to clipboard", + tooltip: "Right-click or long-press for logo options", menu: { brand: { label: "Brand", - items: [ - {icon: "", - label: "Copy Logo SVG" - }, - {icon: "", - label: "Download Logo" - }, - {icon: "", - label: "Copy Symbol SVG" - }, - {icon: "", - label: "Download Symbol" - }, - {icon: "", - label: "Copy Wordmark SVG" - }, - {icon: "", - label: "Download Wordmark" - }, - ] + svg: { + copyLabel: "Copy Logo SVG", + downloadLabel: "Download Logo", + }, + symbol: { + copyLabel: "Copy Symbol SVG", + downloadLabel: "Download Symbol", + }, + wordmark: { + copyLabel: "Copy Wordmark SVG", + downloadLabel: "Download Wordmark", + }, }, tools: { label: "Tools", items: [ - ] - } - } + { label: "Passkeys Playground", url: "https://learnpasskeys.io" }, + { label: "WebAuthn Playground", url: "https://webauthn.me" }, + { label: "OIDC Playground", url: "https://openidconnect.net" }, + { label: "SAML Tool", url: "https://samltool.io" }, + ], + }, + }, }; diff --git a/src/features/localization/models/brand-dictionary.model.ts b/src/features/localization/models/brand-dictionary.model.ts new file mode 100644 index 00000000..4dfcce35 --- /dev/null +++ b/src/features/localization/models/brand-dictionary.model.ts @@ -0,0 +1,30 @@ +interface ToolsMenuItem { + label: string, + url: string, +} +export interface BrandMenuItem { + copyLabel: string, + downloadLabel: string, +} +interface BrandMenuSection { + label: string; + svg: BrandMenuItem, + symbol: BrandMenuItem, + wordmark: BrandMenuItem, +} + +interface ToolsMenuSection { + label: string; + items: ToolsMenuItem[]; +} + +interface BrandMenu { + brand: BrandMenuSection; + tools: ToolsMenuSection; +} + +export interface BrandDictionaryModel { + tooltip: string; + alertMessage: string; + menu: BrandMenu; +} diff --git a/src/features/localization/models/images-dictionary.model.ts b/src/features/localization/models/images-dictionary.model.ts deleted file mode 100644 index 529fcde5..00000000 --- a/src/features/localization/models/images-dictionary.model.ts +++ /dev/null @@ -1,17 +0,0 @@ -interface BrandMenuItem { - icon: string; - label: string; -} -interface BrandMenuSection { - label: string; - items: BrandMenuItem[]; -} -interface BrandMenu { - brand: BrandMenuSection; - tools: BrandMenuSection; -} - -export interface BrandDictionaryModel { - title: string; - menu: BrandMenu; -} diff --git a/src/features/localization/services/brand-dictionary.service.tsx b/src/features/localization/services/brand-dictionary.service.tsx new file mode 100644 index 00000000..9afc22cb --- /dev/null +++ b/src/features/localization/services/brand-dictionary.service.tsx @@ -0,0 +1,13 @@ +import { enBrandDictionary } from "@/features/localization/dictionaries/images/en"; +import { jaBrandDictionary } from "@/features/localization/dictionaries/images/ja"; +import { BrandDictionaryModel } from "../models/brand-dictionary.model"; + +const brandDictionaries: { + [index: string]: BrandDictionaryModel; +} = { + en: enBrandDictionary, + ja: jaBrandDictionary, +}; + +export const getBrandDictionary = (language: string) => + brandDictionaries[language]; diff --git a/src/features/localization/services/images-dictionary.service.tsx b/src/features/localization/services/images-dictionary.service.tsx deleted file mode 100644 index 1a14acee..00000000 --- a/src/features/localization/services/images-dictionary.service.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { BrandDictionaryModel } from "@/features/localization/models/images-dictionary.model"; -import { enBrandDictionary } from "@/features/localization/dictionaries/images/en"; -import { jaImagesDictionary } from "@/features/localization/dictionaries/images/ja"; - -const imagesDictionaries: { - [index: string]: BrandDictionaryModel; -} = { - en: enBrandDictionary, - ja: jaImagesDictionary, -}; - -export const getImageDictionary = (language: string) => - imagesDictionaries[language]; diff --git a/src/libs/theme/styles/globals.scss b/src/libs/theme/styles/globals.scss index 7915f0b2..ef47609e 100644 --- a/src/libs/theme/styles/globals.scss +++ b/src/libs/theme/styles/globals.scss @@ -48,8 +48,8 @@ --color_fg_default: var(--functional-gray-200); --color_fg_link_primary: var(--cloud); - --color_bg_app_bar: hsla(0,0%,7%,.04); - --color_bg_app_bar_border: hsla(0, 0%, 7%, .12); + --color_bg_app_bar: hsla(0, 0%, 95%, 0.04); + --color_bg_app_bar_border: hsla(0, 0%, 95%, 0.12); --color_bg_app_bar_plain: rgba(17, 17, 17); --color_fg_link: var(--functional-gray-50); @@ -66,7 +66,7 @@ --color_bg_layer_bold: var(--functional-gray-700); --color_bg_layer_boldest: var(--functional-gray-50); --color_bg_layer_alternate: var(--functional-gray-850); - --color_bg_layer_alternate-bold: var(--functional-gray-800); + --color_bg_layer_alternate-bold: var(--functional-gray-850); --color_bg_layer_elevated: var(--functional-gray-900); --color_bg_layer_highlight1: var(--ocean); @@ -198,7 +198,9 @@ html[data-theme="system-light"] { --color_fg_bold: var(--charcoal2); --color_fg_link_primary: var(--sky); + --color_bg_app_bar: hsla(0, 0%, 7%, 0.04); --color_bg_app_bar_plain: rgba(241, 241, 241); + --color_bg_app_bar_border: hsla(0, 0%, 7%, 0.12); --color_fg_link: var(--charcoal2); --color_fg_link_hover: var(--charcoal2); diff --git a/tsconfig.json b/tsconfig.json index b1701cf6..6930c019 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,7 +20,8 @@ } ], "paths": { - "@/*": ["./src/*"] + "@/*": ["./src/*"], + "@/public/*": ["./public/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], diff --git a/types/svg.d.ts b/types/svg.d.ts new file mode 100644 index 00000000..c284f7d6 --- /dev/null +++ b/types/svg.d.ts @@ -0,0 +1,4 @@ +declare module "*.svg?raw" { + const content: string; + export default content; +}