From 50879233fd25bc15d4f49fcbdee3eafb5e96e520 Mon Sep 17 00:00:00 2001 From: Mel Massadian Date: Tue, 21 Feb 2023 22:36:01 +0100 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=F0=9F=8E=A8=20bake=20viewbox=20for?= =?UTF-8?q?=20refs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/icons/refs.js | 47 ++++++++++++++++------ src/pages/objkt-display/tabs/History.jsx | 10 ++--- src/utils/{with-icon.jsx => with-icon.tsx} | 16 ++++++-- 3 files changed, 52 insertions(+), 21 deletions(-) rename src/utils/{with-icon.jsx => with-icon.tsx} (65%) diff --git a/src/icons/refs.js b/src/icons/refs.js index 136ce744e..23267bd0f 100644 --- a/src/icons/refs.js +++ b/src/icons/refs.js @@ -1,30 +1,53 @@ import withIcon from '@utils/with-icon' -export const BurnIcon = withIcon(` +export const BurnIcon = withIcon( + ` -`) +`, + 16 +) export const GenerativeIcon = withIcon(` - - - + + + `) -export const SwapIcon = withIcon(` +export const SwapIcon = withIcon( + ` -`) +`, + 16 +) export const TezosIcon = withIcon( `` + />`, + 16 ) -export const MintedIcon = withIcon(` +export const MintedIcon = withIcon( + ` -`) +`, + 16 +) -export const TradeIcon = withIcon(` +export const TradeIcon = withIcon( + ` -`) +`, + 16 +) + +// export const VideoIcon = +// withIcon(` +// `) + +export const VideoIcon = withIcon( + ` +`, + 24 +) diff --git a/src/pages/objkt-display/tabs/History.jsx b/src/pages/objkt-display/tabs/History.jsx index 824acc34b..468aa9fad 100644 --- a/src/pages/objkt-display/tabs/History.jsx +++ b/src/pages/objkt-display/tabs/History.jsx @@ -125,7 +125,7 @@ export const History = () => { key={`t-${e.id}`} eventType={ <> - + { key={`t-${e.id}`} eventType={ <> - + { key={`t-${e.id}`} eventType={ <> - + { key={`t-${e.id}`} eventType={ <> - + { key={`t-${e.id}`} eventType={ <> - +
Minted
} diff --git a/src/utils/with-icon.jsx b/src/utils/with-icon.tsx similarity index 65% rename from src/utils/with-icon.jsx rename to src/utils/with-icon.tsx index 64f6a1569..b693238e7 100644 --- a/src/utils/with-icon.jsx +++ b/src/utils/with-icon.tsx @@ -1,12 +1,20 @@ import React, { memo } from 'react' import hash from 'fnv1a' -export const IconCache = React.createContext({}) +// The HOC +export const IconCache = React.createContext<{ [key: string]: string }>({}) +// The Hook export const useIconCache = () => React.useContext(IconCache) -const withIcon = (icon) => { - const Icon = (props) => { - const { size = 30, viewBox = null } = props +interface WithIconProps { + size: number + viewBox: number +} + +// SVG Icon Cache system using refs +const withIcon = (icon: string, defaultViewBox?: number) => { + const Icon = (props: WithIconProps) => { + const { size = 30, viewBox = defaultViewBox } = props const cache = useIconCache() const cachedId = cache[icon] From e106bb16d39a6e4fdaf0b9eebe621ac082a54509 Mon Sep 17 00:00:00 2001 From: Mel Massadian Date: Tue, 21 Feb 2023 22:37:00 +0100 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=F0=9F=8E=A8=20add=20icon=20for=20v?= =?UTF-8?q?ideos=20on=20feeds?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Not sure of the look as it looks like it's interactive... I think something like a film strip would look better. --- src/components/media-types/video/index.jsx | 49 ++++++++++--------- .../media-types/video/index.module.scss | 6 +++ 2 files changed, 33 insertions(+), 22 deletions(-) diff --git a/src/components/media-types/video/index.jsx b/src/components/media-types/video/index.jsx index c9b43b04e..f318f0d6e 100644 --- a/src/components/media-types/video/index.jsx +++ b/src/components/media-types/video/index.jsx @@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react' import { iOS } from '@utils/os' import styles from '@style' import ImageComponent from '../image/index' +import { VideoIcon } from '@icons/refs' /** * @param {import("@types").MediaTypeProps} renderOptions - Th options for the media renderer @@ -70,28 +71,32 @@ export const VideoComponent = ({ ) return ( - - //
- //
+ <> +
+ +
+ + ) } - +//
+//
export default VideoComponent diff --git a/src/components/media-types/video/index.module.scss b/src/components/media-types/video/index.module.scss index 224041b80..36d1b075d 100644 --- a/src/components/media-types/video/index.module.scss +++ b/src/components/media-types/video/index.module.scss @@ -16,3 +16,9 @@ max-height: 60vh; max-width: 100%; } + +.icon { + position: absolute; + top: 6px; + right: 6px; +} From 1dc54bb4157e98c57b6189e3b5cf82cab24601c5 Mon Sep 17 00:00:00 2001 From: Mel Massadian Date: Wed, 22 Feb 2023 00:34:34 +0100 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=F0=9F=8E=A8=20move=20to=20store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/atoms/select/ThemeSelection.jsx | 2 +- src/components/header/Header.jsx | 8 ++------ src/context/localSettingsStore.ts | 16 +++++++++++++--- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/src/atoms/select/ThemeSelection.jsx b/src/atoms/select/ThemeSelection.jsx index 56c8e52f0..517ed1252 100644 --- a/src/atoms/select/ThemeSelection.jsx +++ b/src/atoms/select/ThemeSelection.jsx @@ -10,7 +10,7 @@ export const ThemeSelection = (props) => {