witine/lookingglass
1
0
Fork 0
forked from mirrors/thatmattlove-hyperglass
Code Issues Pull requests Releases Activity

fix logo not displaying in FireFox. Closes #229

Browse source
This commit is contained in:
thatmattlove 2024-03-24 15:19:53 -04:00
parent f723e2f988
commit 0cbec73061
2 changed files with 29 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
hyperglass/ui/components/footer/footer.tsx
View file

@ -1,13 +1,12 @@
import { useMemo } from 'react';
import { Flex, HStack, useToken } from '@chakra-ui/react';
import { If, Then } from 'react-if';
import { useMemo } from 'react';
import { useConfig } from '~/context';
import { DynamicIcon } from '~/elements';
import { useStrf, useMobile, useColorValue, useBreakpointValue } from '~/hooks';
import { useBreakpointValue, useColorValue, useMobile, useStrf } from '~/hooks';
import { isLink, isMenu } from '~/types';
import { FooterButton } from './button';
import { ColorModeToggle } from './color-mode';
import { FooterLink } from './link';
import { isLink, isMenu } from '~/types';
import type { ButtonProps, LinkProps } from '@chakra-ui/react';
import type { Link, Menu } from '~/types';
@ -85,16 +84,15 @@ export const Footer = (): JSX.Element => {
);
}
})}
<If condition={web.credit.enable}>
<Then>
<FooterButton
key="credit"
side="right"
content={content.credit}
title={<DynamicIcon icon={{ fi: 'FiCode' }} boxSize={size} />}
/>
</Then>
</If>
{web.credit.enable && (
<FooterButton
key="credit"
side="right"
content={content.credit}
title={<DynamicIcon icon={{ fi: 'FiCode' }} boxSize={size} />}
/>
)}
<ColorModeToggle size={size} />
</HStack>
);

32
hyperglass/ui/components/header/title.tsx
View file

@ -1,9 +1,9 @@
import { Flex, Button, VStack } from '@chakra-ui/react';
import { Button, Flex, VStack } from '@chakra-ui/react';
import { motion } from 'framer-motion';
import { isSafari } from 'react-device-detect';
import { Switch, Case } from 'react-if';
import { Case, Switch } from 'react-if';
import { useConfig } from '~/context';
import { useFormState, useFormInteractive, useMobile } from '~/hooks';
import { useFormInteractive, useFormState, useMobile } from '~/hooks';
import { Logo } from './logo';
import { SubtitleOnly } from './subtitle-only';
import { TitleOnly } from './title-only';
@ -13,7 +13,7 @@ import type { MotionProps } from 'framer-motion';
type DWrapperProps = Omit<StackProps, 'transition'> & MotionProps;
type MWrapperProps = Omit<StackProps, 'transition'> & MotionProps;
type TextOnlyProps = Partial<MotionProps & Omit<StackProps, 'transition'>>;
type WrapperProps = Partial<MotionProps & Omit<StackProps, 'transition'>>;
const AnimatedVStack = motion(VStack);
const AnimatedFlex = motion(Flex);
@ -28,6 +28,7 @@ const MWrapper = (props: MWrapperProps): JSX.Element => {
layout
spacing={1}
alignItems={formInteractive ? 'center' : 'flex-start'}
maxWidth="25%"
{...props}
/>
);
@ -46,6 +47,7 @@ const DWrapper = (props: DWrapperProps): JSX.Element => {
animate={formInteractive}
transition={{ damping: 15, type: 'spring', stiffness: 100 }}
variants={{ results: { scale: 0.5 }, form: { scale: 1 } }}
maxWidth="25%"
{...props}
/>
);
@ -71,7 +73,7 @@ const TitleWrapper = (props: DWrapperProps | MWrapperProps): JSX.Element => {
/**
* Title sub-component if `title_mode` is set to `text_only`.
*/
const TextOnly = (props: TextOnlyProps): JSX.Element => {
const TextOnly = (props: WrapperProps): JSX.Element => {
return (
<TitleWrapper {...props}>
<TitleOnly />
@ -83,8 +85,8 @@ const TextOnly = (props: TextOnlyProps): JSX.Element => {
/**
* Title sub-component if `title_mode` is set to `logo_only`. Renders only the logo.
*/
const LogoOnly = (): JSX.Element => (
<TitleWrapper>
const LogoOnly = (props: WrapperProps): JSX.Element => (
<TitleWrapper {...props}>
<Logo />
</TitleWrapper>
);
@ -93,8 +95,8 @@ const LogoOnly = (): JSX.Element => (
* Title sub-component if `title_mode` is set to `logo_subtitle`. Renders the logo with the
* subtitle underneath.
*/
const LogoSubtitle = (): JSX.Element => (
<TitleWrapper>
const LogoSubtitle = (props: WrapperProps): JSX.Element => (
<TitleWrapper {...props}>
<Logo />
<SubtitleOnly />
</TitleWrapper>
@ -103,8 +105,8 @@ const LogoSubtitle = (): JSX.Element => (
/**
* Title sub-component if `title_mode` is set to `all`. Renders the logo, title, and subtitle.
*/
const All = (): JSX.Element => (
<TitleWrapper>
const All = (props: WrapperProps): JSX.Element => (
<TitleWrapper {...props}>
<Logo />
<TextOnly mt={2} />
</TitleWrapper>
@ -149,16 +151,16 @@ export const Title = (props: FlexProps): JSX.Element => {
>
<Switch>
<Case condition={titleMode === 'text_only'}>
<TextOnly />
<TextOnly width={web.logo.width} />
</Case>
<Case condition={titleMode === 'logo_only'}>
<LogoOnly />
<LogoOnly width={web.logo.width} />
</Case>
<Case condition={titleMode === 'logo_subtitle'}>
<LogoSubtitle />
<LogoSubtitle width={web.logo.width} />
</Case>
<Case condition={titleMode === 'all'}>
<All />
<All width={web.logo.width} />
</Case>
</Switch>
</Button>