bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make bg-shape colors configurable

Browse source
This commit is contained in:
Alex Gleason 2022-03-22 16:25:52 -05:00
parent 9e16d992e6
commit 8f85fd01d5
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 33 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/images/bg-shape.svg
View file

@ -1 +0,0 @@
<svg width="1754" height="1336" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-18.1%" y="-15.3%" width="136.3%" height="130.7%" filterUnits="objectBoundingBox" id="c"><feGaussianBlur stdDeviation="50" in="SourceGraphic"/></filter><filter x="-16.5%" y="-11.7%" width="133%" height="123.3%" filterUnits="objectBoundingBox" id="d"><feGaussianBlur stdDeviation="50" in="SourceGraphic"/></filter><path id="a" d="M0 0h1754v1336H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path d="M1257.79 335.852C1262 527.117 897.55 530.28 792.32 977.19 600.48 981.41 435.29 545.31 431.08 354.046 426.871 162.782 578.976 4.31 770.815.088c191.844-4.222 482.764 144.5 486.974 335.764Z" fill="#E7F5FF" fill-rule="nonzero" filter="url(#c)" transform="translate(309.54 -367.538)"/><path d="M71.127 1126.654c206.164 179.412 502.452 211.232 661.777 71.072 159.325-140.163 295.165-510.155 8.23-504.412-320.079 6.405-381.35-817.422-540.675-677.258-31 368-335.497 931.182-129.332 1110.598Z" fill="#5448EE" fill-rule="nonzero" filter="url(#d)" transform="translate(309.54 -141.056)" opacity=".1"/></g></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.2 KiB

22
app/soapbox/features/ui/components/background_shapes.js
View file

@ -1,10 +1,28 @@
import React from 'react';
import InlineSVG from 'react-inlinesvg';
export default () => (
<div className='fixed top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none'>
<div className='flex-none flex justify-center'>
<InlineSVG src={require('../../../../images/bg-shape.svg')} className='flex-none max-w-none' />
<svg width='1754' height='1336' xmlns='http://www.w3.org/2000/svg'>
<defs>
<filter x='-18.1%' y='-15.3%' width='136.3%' height='130.7%' filterUnits='objectBoundingBox' id='c'>
<feGaussianBlur stdDeviation='50' in='SourceGraphic' />
</filter>
<filter x='-16.5%' y='-11.7%' width='133%' height='123.3%' filterUnits='objectBoundingBox' id='d'>
<feGaussianBlur stdDeviation='50' in='SourceGraphic' />
</filter>
<path id='a' d='M0 0h1754v1336H0z' />
</defs>
<g fill='none' fill-rule='evenodd'>
<mask id='b' fill='#fff'>
<use xlinkHref='#a' />
</mask>
<g mask='url(#b)'>
<path className='fill-primary-100' d='M1257.79 335.852C1262 527.117 897.55 530.28 792.32 977.19 600.48 981.41 435.29 545.31 431.08 354.046 426.871 162.782 578.976 4.31 770.815.088c191.844-4.222 482.764 144.5 486.974 335.764Z' fill-rule='nonzero' filter='url(#c)' transform='translate(309.54 -367.538)' />
<path className='fill-accent-300' d='M71.127 1126.654c206.164 179.412 502.452 211.232 661.777 71.072 159.325-140.163 295.165-510.155 8.23-504.412-320.079 6.405-381.35-817.422-540.675-677.258-31 368-335.497 931.182-129.332 1110.598Z' fill-rule='nonzero' filter='url(#d)' transform='translate(309.54 -141.056)' opacity='.1' />
</g>
</g>
</svg>
</div>
</div>
);

13
app/soapbox/utils/theme.ts
View file

@ -97,6 +97,19 @@ const legacyColorsToTailwind = (brandColor: string, accentColor: string): Tailwi
return {
primary: tintify(brandColor),
accent: tintify(accentColor ? accentColor : generateAccent(brandColor)),
gray: {
50: '#f9fafb',
100: '#f3f4f6',
200: '#e5e7eb',
300: '#d1d5db',
400: '#9ca3af',
500: '#6b7280',
600: '#4b5563',
700: '#374151',
800: '#1f2937',
900: '#111827',
},
'sea-blue': '#2feecc',
};
};