Files
Francesco SansalvadoreandJonathan Summers-Muir be9590c890 Multiple themes management (#18871)
* set up multiple themes in studio

* set up multiple themes in studio

* set up multiple themes in docs and www

* update all resolvedTheme to also include deep-dark

* update all resolvedTheme checks to also include deep-dark

* update tailwind.config.js tokens

* update tailwind.config.js tokens

* update leftover scale12 token

* update if resolvedTheme _doesn't_ include 'dark'

* update more styling tokens

* add dynamic themes to CmdK

* fix nav and footer for multi theme

* add data-theme selector output to transformTokens.js

* update code-hike.css to target data-theme css

* update tailwindcss to ^3.3.5

* ThemeImage with light and dark src for www and docs

* add brand-button styling token

* update old dark theme boolean

* update old dark theme boolean

* make homepage product visuals themeable

* update product page themed images

* update badge green with brand

* fix roles list appearance

* fix auth widget in auth page

* update more dark logic

* update more dark logic

* add button default bg and border

* update pricing page theme styling

* clean up Themeimage

* remove forceDark in homepage

* update dark:border-dark occurrences

* update dark:border-dark occurrences

* fix dark mode base colors

* remove foreground-strong

* fix notification badge bg

* remove some dark: selectors

* update dark: selectors

* update code-hike deep dark bg color

* fix comment typo

* update border-button-hover token

* fix customer story logo

* remove some more dark: selectors

* restore forceDark in www homepage

* fix auth react icon

* fix homepage product visuals

* remove theme

* add brand-link token

* fix checkbox bg

* npm install

* more visible EntityListItem active bg

* fix --background-alternative-default css vars

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2023-11-16 16:41:53 +00:00

42 lines
1.1 KiB
TypeScript

import { Announcement as AnnouncementType } from '../../types'
export const Announcement = (props: AnnouncementType) => {
const containerClasses = []
let imgSrc = ''
let imgAlt = ''
switch (props.type) {
case 'soc2':
containerClasses.push('text-blue-1200 border-blue-500 bg-blue-200')
imgSrc = '/images/launchweek/soc-2-icon.png'
imgAlt = 'soc2'
break
case 'producthunt':
containerClasses.push('text-amber-1200 border-amber-500 bg-amber-300')
imgSrc =
'https://www.pngkey.com/png/full/1-10768_product-hunt-original-logo-product-hunt-kitty.png'
imgAlt = 'producthunt'
default:
break
}
return (
<button
className={[
'flex items-start gap-6 rounded-full border p-3 px-6 pr-8',
containerClasses,
].join(' ')}
>
<div className="w-12 text-blue-900">
<img src={imgSrc} alt={imgAlt} />
</div>
<div className="flex flex-col items-start gap-0">
<span className="text-xl">{props.title}</span>
<span className="text-blue-1000">{props.description}</span>
</div>
</button>
)
}
export default Announcement