pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Changed Logo and Header 

logo has two variants. Changed story to reflect that. Updated header
pull/2032/head
t1enne 3 years ago
parent
93d69a26eb
commit
00bc662c7f
9 changed files with 213 additions and 171 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      web/components/common/Logo/Logo.module.scss
  2. 175
      web/components/common/Logo/Logo.tsx
  3. 1
      web/components/common/Logo/index.ts
  4. 1
      web/components/common/index.ts
  5. 159
      web/components/logo.tsx
  6. 2
      web/components/main-layout.tsx
  7. 3
      web/components/ui/Header/Header.module.scss
  8. 5
      web/components/ui/Header/Header.tsx
  9. 10
      web/stories/PageLogo.stories.tsx

28
web/components/common/Logo/Logo.module.scss
Unescape View File

@ -0,0 +1,28 @@ @@ -0,0 +1,28 @@
.root {
display: flex;
align-items: center;
justify-content: center;
width: max-content;
svg {
width: 50px;
height: 50px;
}
}
.contrast {
padding: 5px;
border-radius: 50%;
background-color: var(--color-owncast-gray-100);
svg {
width: 40px;
height: 40px;
}
}
.simple {
background-color: transparent;
svg {
width: 50px;
height: 50px;
}
}

175
web/components/common/Logo/Logo.tsx
Unescape View File

@ -0,0 +1,175 @@ @@ -0,0 +1,175 @@
import React from 'react';
import cn from 'classnames';
import s from './Logo.module.scss'
interface Props {
variant: 'simple' | 'contrast'
}
export default function Logo({variant = 'simple'}: Props) {
const rootClassName = cn(
s.root,
{
[s.simple]: variant === 'simple',
[s.contrast]: variant === 'contrast',
}
)
return (
<div className={rootClassName}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 95.68623352050781 104.46271514892578"
className="logo-svg"
>
<g transform="matrix(1 0 0 1 -37.08803939819336 -18.940391540527344)">
<g>
<g>
<g>
<g transform="matrix(1.0445680396949917 0 0 1.0445679172996596 36.34559138380523 18.877718021903796)">
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient120"
gradientTransform="rotate(-90 .5 .5)"
>
<stop offset="0" stopColor="#1f2022" stopOpacity="1" />
<stop offset="1" stopColor="#635e69" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient120)"
d="M91.5 75.35Q93.05 71.15 91.65 67.7 90.35 64.5 86.65 62.3 83.2 60.3 78.3 59.4 73.85 58.6 68.6 58.7 63.55 58.85 58.8 59.8 54.25 60.75 50.8 62.2 47.4 63.65 45.5 65.35 43.6 67.15 43.5 69.05 43.35 71.3 45.8 73.9 48.05 76.3 52.1 78.6 56.15 80.9 61.05 82.55 66.3 84.3 71.4 84.8 74.7 85.1 77.55 84.9 80.65 84.6 83.3 83.6 86.15 82.5 88.15 80.55 90.4 78.4 91.5 75.35M70.6 67.5Q72.3 68.4 73.1 69.7 73.9 71.15 73.45 73 73.1 74.3 72.3 75.25 71.55 76.1 70.3 76.6 69.25 77.05 67.75 77.25 66.3 77.4 64.85 77.3 62.3 77.15 59.25 76.3 56.6 75.5 54.15 74.3 51.9 73.2 50.45 72 49.05 70.75 49.1 69.8 49.2 69 50.25 68.25 51.3 67.55 53.15 67 55 66.4 57.25 66.1 59.8 65.8 62.1 65.8 64.65 65.85 66.7 66.2 68.9 66.65 70.6 67.5Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient121"
gradientTransform="rotate(-180 .5 .5)"
>
<stop offset="0" stopColor="#2087e2" stopOpacity="1" />
<stop offset="1" stopColor="#b63fff" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient121)"
d="M66.6 15.05Q66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.75 18.45 32.7 23.4 31.7 28.05 31.35 32.85 31.05 37.2 31.3 41.2 31.6 45.15 32.4 48.35 34 54.9 37.3 56.4 37.6 56.55 37.9 56.65L39.2 56.85Q39.45 56.85 39.95 56.8 42.05 56.6 44.7 55.05 47.25 53.5 50.05 50.8 53.05 47.9 55.85 44.05 58.8 40.05 61.1 35.6 63.8 30.35 65.25 25.3 66.75 19.75 66.6 15.05M47.55 23.15Q48.05 23.25 48.4 23.4 52.45 24.8 52.55 29.85 52.6 34 50 39.4 47.85 43.9 44.85 47.3 42.05 50.5 40.15 50.7L39.9 50.75 39.45 50.7 39.2 50.6Q37.8 49.95 37.25 46.35 36.7 42.7 37.3 38 37.95 32.75 39.75 28.8 41.9 24.1 45.05 23.25 45.6 23.1 45.85 23.1 46.25 23.05 46.65 23.05 47.05 23.05 47.55 23.15Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient122"
gradientTransform="rotate(-90 .5 .5)"
>
<stop offset="0" stopColor="#100f0f" stopOpacity="1" />
<stop offset="1" stopColor="#49261F" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient122)"
d="M2.7 33.6Q2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7 0 42.6 2.2 47.2 4 51 8 54.35 11.55 57.3 16 59.15 20.5 61 23.85 60.85 24.5 60.85 25.25 60.7 26 60.55 26.5 60.3 27 60.05 27.45 59.65 27.9 59.25 28.15 58.75 29.35 56.45 27.5 51.65 25.6 47 21.75 42.1 17.75 37 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6M10.1 43.55Q10.35 43.1 10.6 42.85 10.85 42.6 11.2 42.4 11.6 42.25 11.9 42.2 13.5 41.9 15.95 43.6 18.15 45.05 20.35 47.7 22.35 50.1 23.55 52.4 24.7 54.75 24.25 55.7 24.15 55.9 24 56 23.85 56.2 23.65 56.25 23.55 56.35 23.25 56.4L22.7 56.5Q21.1 56.6 18.55 55.6 16.05 54.6 13.85 52.95 11.5 51.2 10.35 49.15 9.05 46.8 9.75 44.45 9.9 43.95 10.1 43.55Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient123"
gradientTransform="rotate(-180 .5 .5)"
>
<stop offset="0" stopColor="#222020" stopOpacity="1" />
<stop offset="1" stopColor="#49261F" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient123)"
d="M34.95 74.2L34.75 74.2Q33.2 74.15 31.9 75.25 30.7 76.3 29.85 78.25 29.1 80 28.8 82.2 28.5 84.4 28.7 86.65 29.1 91.4 31.5 94.7 34.3 98.5 39.3 99.7L39.4 99.7 39.7 99.8 39.85 99.8Q45.3 100.85 47.15 97.75 48 96.3 48 94.05 47.95 91.9 47.2 89.35 46.45 86.75 45.1 84.15 43.75 81.5 42.05 79.35 40.25 77.1 38.45 75.75 36.55 74.35 34.95 74.2M33.55 80.4Q34.35 78.2 35.6 78.3L35.65 78.3Q36.9 78.45 38.6 80.9 40.3 83.35 41.15 86.05 42.1 89 41.55 90.75 40.9 92.6 38.35 92.25L38.3 92.25 38.25 92.2 38.1 92.2Q35.6 91.7 34.25 89.6 33.1 87.7 32.95 85 32.8 82.35 33.55 80.4Z"
/>
</g>
<g transform="matrix(0.9999999999999999 0 0 1 0 5.684341886080802e-14)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient124"
gradientTransform="rotate(-180 .5 .5)"
>
{' '}
<stop offset="0" stopColor="#1e1c1c" stopOpacity="1" />
<stop offset="1" stopColor="#49261F" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient124)"
d="M22.7 69.65Q22.25 69.3 21.6 69.05 20.95 68.8 20.25 68.7 19.6 68.55 18.85 68.5 16.7 68.45 14.65 69.15 12.65 69.8 11.4 71.1 10.15 72.5 10.2 74.2 10.25 76.05 11.95 78.2 12.4 78.75 13.05 79.4 13.55 79.9 14.2 80.3 14.7 80.6 15.3 80.85 16 81.1 16.4 81.1 18.2 81.35 19.9 80.35 21.55 79.4 22.75 77.65 24 75.85 24.3 73.95 24.6 71.85 23.55 70.5 23.15 70 22.7 69.65M21.7 71.7Q22.15 72.3 21.9 73.3 21.7 74.25 21 75.25 20.3 76.2 19.4 76.75 18.45 77.35 17.55 77.25L17 77.15Q16.7 77.05 16.45 76.85 16.25 76.75 15.9 76.45 15.7 76.25 15.4 75.9 14.5 74.75 14.7 73.8 14.8 72.95 15.75 72.3 16.6 71.7 17.8 71.4 19 71.1 20.1 71.15L20.65 71.2 21.1 71.3Q21.3 71.4 21.45 71.5L21.7 71.7Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient125"
gradientTransform="rotate(-360 .5 .5)"
>
<stop offset="0" stopColor="#FFFFFF" stopOpacity="0.5" />
<stop offset="1" stopColor="#FFFFFF" stopOpacity="0.2" />
</linearGradient>
</defs>
<path
fill="url(#gradient125)"
d="M52.6 19.25Q59.6 19.25 66.2 20.95 66.7 17.8 66.6 15.05 66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.85 18.3 32.8 22.85 42.25 19.25 52.6 19.25Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient126"
gradientTransform="rotate(-360 .5 .5)"
>
<stop offset="0" stopColor="#FFFFFF" stopOpacity="0.5" />
<stop offset="1" stopColor="#FFFFFF" stopOpacity="0.2" />
</linearGradient>
</defs>
<path
fill="url(#gradient126)"
d="M1.05 37.7Q0 42.6 2.2 47.2 2.95 48.8 4.05 50.25 7.55 41.65 14.4 34.75 14 34.45 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6 2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7Z"
/>
</g>
</g>
</g>
<g transform="matrix(1.219512230276127 0 0 1.2195122143630526 32.82519274395008 88.56945194723018)">
<path fill="#000000" fillOpacity="1" d="" />
</g>
</g>
</g>
</g>
</svg>
</div>
);
}

1
web/components/common/Logo/index.ts
Unescape View File

@ -0,0 +1 @@ @@ -0,0 +1 @@
export { default } from './Logo';

1
web/components/common/index.ts
Unescape View File

@ -1 +1,2 @@ @@ -1 +1,2 @@
export { default as UserDropdown } from './UserDropdown'
export { default as OwncastLogo } from './Logo'

159
web/components/logo.tsx
Unescape View File

@ -1,159 +0,0 @@ @@ -1,159 +0,0 @@
import React from 'react';
export default function Logo() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 95.68623352050781 104.46271514892578"
className="logo-svg"
>
<g transform="matrix(1 0 0 1 -37.08803939819336 -18.940391540527344)">
<g>
<g>
<g>
<g transform="matrix(1.0445680396949917 0 0 1.0445679172996596 36.34559138380523 18.877718021903796)">
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient120"
gradientTransform="rotate(-90 .5 .5)"
>
<stop offset="0" stopColor="#1f2022" stopOpacity="1" />
<stop offset="1" stopColor="#635e69" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient120)"
d="M91.5 75.35Q93.05 71.15 91.65 67.7 90.35 64.5 86.65 62.3 83.2 60.3 78.3 59.4 73.85 58.6 68.6 58.7 63.55 58.85 58.8 59.8 54.25 60.75 50.8 62.2 47.4 63.65 45.5 65.35 43.6 67.15 43.5 69.05 43.35 71.3 45.8 73.9 48.05 76.3 52.1 78.6 56.15 80.9 61.05 82.55 66.3 84.3 71.4 84.8 74.7 85.1 77.55 84.9 80.65 84.6 83.3 83.6 86.15 82.5 88.15 80.55 90.4 78.4 91.5 75.35M70.6 67.5Q72.3 68.4 73.1 69.7 73.9 71.15 73.45 73 73.1 74.3 72.3 75.25 71.55 76.1 70.3 76.6 69.25 77.05 67.75 77.25 66.3 77.4 64.85 77.3 62.3 77.15 59.25 76.3 56.6 75.5 54.15 74.3 51.9 73.2 50.45 72 49.05 70.75 49.1 69.8 49.2 69 50.25 68.25 51.3 67.55 53.15 67 55 66.4 57.25 66.1 59.8 65.8 62.1 65.8 64.65 65.85 66.7 66.2 68.9 66.65 70.6 67.5Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient121"
gradientTransform="rotate(-180 .5 .5)"
>
<stop offset="0" stopColor="#2087e2" stopOpacity="1" />
<stop offset="1" stopColor="#b63fff" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient121)"
d="M66.6 15.05Q66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.75 18.45 32.7 23.4 31.7 28.05 31.35 32.85 31.05 37.2 31.3 41.2 31.6 45.15 32.4 48.35 34 54.9 37.3 56.4 37.6 56.55 37.9 56.65L39.2 56.85Q39.45 56.85 39.95 56.8 42.05 56.6 44.7 55.05 47.25 53.5 50.05 50.8 53.05 47.9 55.85 44.05 58.8 40.05 61.1 35.6 63.8 30.35 65.25 25.3 66.75 19.75 66.6 15.05M47.55 23.15Q48.05 23.25 48.4 23.4 52.45 24.8 52.55 29.85 52.6 34 50 39.4 47.85 43.9 44.85 47.3 42.05 50.5 40.15 50.7L39.9 50.75 39.45 50.7 39.2 50.6Q37.8 49.95 37.25 46.35 36.7 42.7 37.3 38 37.95 32.75 39.75 28.8 41.9 24.1 45.05 23.25 45.6 23.1 45.85 23.1 46.25 23.05 46.65 23.05 47.05 23.05 47.55 23.15Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient122"
gradientTransform="rotate(-90 .5 .5)"
>
<stop offset="0" stopColor="#100f0f" stopOpacity="1" />
<stop offset="1" stopColor="#49261F" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient122)"
d="M2.7 33.6Q2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7 0 42.6 2.2 47.2 4 51 8 54.35 11.55 57.3 16 59.15 20.5 61 23.85 60.85 24.5 60.85 25.25 60.7 26 60.55 26.5 60.3 27 60.05 27.45 59.65 27.9 59.25 28.15 58.75 29.35 56.45 27.5 51.65 25.6 47 21.75 42.1 17.75 37 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6M10.1 43.55Q10.35 43.1 10.6 42.85 10.85 42.6 11.2 42.4 11.6 42.25 11.9 42.2 13.5 41.9 15.95 43.6 18.15 45.05 20.35 47.7 22.35 50.1 23.55 52.4 24.7 54.75 24.25 55.7 24.15 55.9 24 56 23.85 56.2 23.65 56.25 23.55 56.35 23.25 56.4L22.7 56.5Q21.1 56.6 18.55 55.6 16.05 54.6 13.85 52.95 11.5 51.2 10.35 49.15 9.05 46.8 9.75 44.45 9.9 43.95 10.1 43.55Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient123"
gradientTransform="rotate(-180 .5 .5)"
>
<stop offset="0" stopColor="#222020" stopOpacity="1" />
<stop offset="1" stopColor="#49261F" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient123)"
d="M34.95 74.2L34.75 74.2Q33.2 74.15 31.9 75.25 30.7 76.3 29.85 78.25 29.1 80 28.8 82.2 28.5 84.4 28.7 86.65 29.1 91.4 31.5 94.7 34.3 98.5 39.3 99.7L39.4 99.7 39.7 99.8 39.85 99.8Q45.3 100.85 47.15 97.75 48 96.3 48 94.05 47.95 91.9 47.2 89.35 46.45 86.75 45.1 84.15 43.75 81.5 42.05 79.35 40.25 77.1 38.45 75.75 36.55 74.35 34.95 74.2M33.55 80.4Q34.35 78.2 35.6 78.3L35.65 78.3Q36.9 78.45 38.6 80.9 40.3 83.35 41.15 86.05 42.1 89 41.55 90.75 40.9 92.6 38.35 92.25L38.3 92.25 38.25 92.2 38.1 92.2Q35.6 91.7 34.25 89.6 33.1 87.7 32.95 85 32.8 82.35 33.55 80.4Z"
/>
</g>
<g transform="matrix(0.9999999999999999 0 0 1 0 5.684341886080802e-14)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient124"
gradientTransform="rotate(-180 .5 .5)"
>
{' '}
<stop offset="0" stopColor="#1e1c1c" stopOpacity="1" />
<stop offset="1" stopColor="#49261F" stopOpacity="1" />
</linearGradient>
</defs>
<path
fill="url(#gradient124)"
d="M22.7 69.65Q22.25 69.3 21.6 69.05 20.95 68.8 20.25 68.7 19.6 68.55 18.85 68.5 16.7 68.45 14.65 69.15 12.65 69.8 11.4 71.1 10.15 72.5 10.2 74.2 10.25 76.05 11.95 78.2 12.4 78.75 13.05 79.4 13.55 79.9 14.2 80.3 14.7 80.6 15.3 80.85 16 81.1 16.4 81.1 18.2 81.35 19.9 80.35 21.55 79.4 22.75 77.65 24 75.85 24.3 73.95 24.6 71.85 23.55 70.5 23.15 70 22.7 69.65M21.7 71.7Q22.15 72.3 21.9 73.3 21.7 74.25 21 75.25 20.3 76.2 19.4 76.75 18.45 77.35 17.55 77.25L17 77.15Q16.7 77.05 16.45 76.85 16.25 76.75 15.9 76.45 15.7 76.25 15.4 75.9 14.5 74.75 14.7 73.8 14.8 72.95 15.75 72.3 16.6 71.7 17.8 71.4 19 71.1 20.1 71.15L20.65 71.2 21.1 71.3Q21.3 71.4 21.45 71.5L21.7 71.7Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient125"
gradientTransform="rotate(-360 .5 .5)"
>
<stop offset="0" stopColor="#FFFFFF" stopOpacity="0.5" />
<stop offset="1" stopColor="#FFFFFF" stopOpacity="0.2" />
</linearGradient>
</defs>
<path
fill="url(#gradient125)"
d="M52.6 19.25Q59.6 19.25 66.2 20.95 66.7 17.8 66.6 15.05 66.4 9.65 63.9 6.05 61.25 2.1 56.1 0.65 54.95 0.3 53.65 0.15 52.5 0 51.3 0.1 50.2 0.1 49.1 0.35 48.15 0.55 47 1 43.3 2.45 40.3 6.1 37.5 9.4 35.5 14.3 33.85 18.3 32.8 22.85 42.25 19.25 52.6 19.25Z"
/>
</g>
<g transform="matrix(1 0 0 1 0 0)">
<defs>
<linearGradient
x1="0"
y1="0"
x2="0"
y2="1"
id="gradient126"
gradientTransform="rotate(-360 .5 .5)"
>
<stop offset="0" stopColor="#FFFFFF" stopOpacity="0.5" />
<stop offset="1" stopColor="#FFFFFF" stopOpacity="0.2" />
</linearGradient>
</defs>
<path
fill="url(#gradient126)"
d="M1.05 37.7Q0 42.6 2.2 47.2 2.95 48.8 4.05 50.25 7.55 41.65 14.4 34.75 14 34.45 13.4 34.05 8.7 30.9 5.45 31.7 4.65 31.9 3.95 32.4 3.25 32.85 2.7 33.6 2.1 34.4 1.7 35.35 1.25 36.5 1.05 37.7Z"
/>
</g>
</g>
</g>
<g transform="matrix(1.219512230276127 0 0 1.2195122143630526 32.82519274395008 88.56945194723018)">
<path fill="#000000" fillOpacity="1" d="" />
</g>
</g>
</g>
</g>
</svg>
);
}

2
web/components/main-layout.tsx
Unescape View File

@ -21,7 +21,7 @@ import classNames from 'classnames'; @@ -21,7 +21,7 @@ import classNames from 'classnames';
import { upgradeVersionAvailable } from '../utils/apis';
import { parseSecondsToDurationString } from '../utils/format';
import OwncastLogo from './logo';
import { OwncastLogo } from './common';
import { ServerStatusContext } from '../utils/server-status-context';
import { AlertMessageContext } from '../utils/alert-message-context';

3
web/components/ui/Header/Header.module.scss
Unescape View File

@ -7,9 +7,6 @@ @@ -7,9 +7,6 @@
.logo {
display: flex;
align-items: center;
svg {
height: 60px;
}
span {
margin-left: 1rem;
font-size: 1.7rem;

5
web/components/ui/Header/Header.tsx
Unescape View File

@ -1,6 +1,5 @@ @@ -1,6 +1,5 @@
import { Layout } from 'antd';
import { UserDropdown } from '../../common';
import Logo from '../../logo';
import { OwncastLogo, UserDropdown } from '../../common';
import s from './Header.module.scss';
const { Header } = Layout;
@ -13,7 +12,7 @@ export default function HeaderComponent({ name = 'Your stream title' }: Props) { @@ -13,7 +12,7 @@ export default function HeaderComponent({ name = 'Your stream title' }: Props) {
return (
<Header className={`${s.header}`}>
<div className={`${s.logo}`}>
<Logo />
<OwncastLogo variant='contrast'/>
<span>{name}</span>
</div>
<UserDropdown />

10
web/stories/PageLogo.stories.tsx
Unescape View File

@ -1,15 +1,15 @@ @@ -1,15 +1,15 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import PageLogo from '../components/PageLogo';
import { OwncastLogo } from '../components/common';
export default {
title: 'owncast/Page Logo',
component: PageLogo,
title: 'owncast/Logo',
component: OwncastLogo,
parameters: {},
} as ComponentMeta<typeof PageLogo>;
} as ComponentMeta<typeof OwncastLogo>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const Template: ComponentStory<typeof PageLogo> = args => <PageLogo {...args} />;
const Template: ComponentStory<typeof OwncastLogo> = args => <OwncastLogo {...args} />;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Logo = Template.bind({});

Write Preview
Loading…
Cancel
Save