Skip to content

Commit

Permalink
feat: Extended utility classes and updated color palette (#11047)
Browse files Browse the repository at this point in the history
benjackwhite authored Aug 1, 2022
1 parent 07c4b9c commit 8c42c70
Showing 249 changed files with 1,827 additions and 1,281 deletions.
10 changes: 9 additions & 1 deletion .storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -42,7 +42,15 @@ export const parameters = {
showPanel: true,
storySort: {
method: 'alphabetical',
order: ['Lemon UI', ['Overview', 'Icons'], 'Components', 'Forms', ['Field'], 'Filters', 'Layout'],
order: [
'Lemon UI',
['Overview', 'Utilities', 'Icons'],
'Components',
'Forms',
['Field'],
'Filters',
'Layout',
],
includeName: true,
},
},
2 changes: 1 addition & 1 deletion frontend/src/exporter/ExportedInsight/ExportedInsight.tsx
Original file line number Diff line number Diff line change
@@ -76,7 +76,7 @@ export function ExportedInsight({
>
<InsightViz insight={insight as any} style={{ top: 0, left: 0, position: 'relative' }} />
{showLegend ? (
<div className="pa">
<div className="p-4">
<InsightLegend horizontal readOnly />
</div>
) : null}
4 changes: 2 additions & 2 deletions frontend/src/exporter/Exporter.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '../styles/breakpoints';
@import '../styles/mixins';

html.export-type-image {
// We don't want scrollbars to show in image captures
@@ -36,7 +36,7 @@ html.export-type-embed {
display: none;
}

@media screen and (min-width: $md) {
@include screen($md) {
display: flex;
justify-content: space-between;
align-items: center;
8 changes: 4 additions & 4 deletions frontend/src/exporter/Exporter.tsx
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ export function Exporter(props: ExportedData): JSX.Element {
<FriendlyLogo style={{ fontSize: '1.125rem' }} />
</a>
<div className="SharedDashboard-header-title">
<h1 className="mb-05" data-attr="dashboard-item-title">
<h1 className="mb-2" data-attr="dashboard-item-title">
{dashboard.name}
</h1>
<span>{dashboard.description}</span>
@@ -54,7 +54,7 @@ export function Exporter(props: ExportedData): JSX.Element {
</a>
) : type === ExportType.Image ? (
<>
<h1 className="mb-05">{dashboard.name}</h1>
<h1 className="mb-2">{dashboard.name}</h1>
<p>{dashboard.description}</p>
</>
) : null
@@ -69,11 +69,11 @@ export function Exporter(props: ExportedData): JSX.Element {
placement={type === ExportType.Image ? DashboardPlacement.Export : DashboardPlacement.Public}
/>
) : (
<h1 className="text-center pa">Something went wrong...</h1>
<h1 className="text-center p-4">Something went wrong...</h1>
)}

{!whitelabel && dashboard && (
<div className="text-center pb">
<div className="text-center pb-4">
{type === ExportType.Image ? <FriendlyLogo style={{ fontSize: '1.125rem' }} /> : null}
<div>
Made with{' '}
4 changes: 2 additions & 2 deletions frontend/src/layout/ErrorBoundary/ErrorBoundary.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.ErrorBoundary {
background: var(--depr-rgba-danger-0-1);
background: var(--danger-highlight);
border-radius: var(--radius);
margin: 1.5rem;
padding: 0.75rem 1rem 1rem;
@@ -13,7 +13,7 @@
}
pre {
margin-bottom: 0.75rem;
background: var(--depr-rgba-danger-0-1);
background: var(--danger-highlight);
border-radius: var(--radius);
padding: 0.75rem 1rem;
}
6 changes: 3 additions & 3 deletions frontend/src/layout/navigation/Breadcrumbs/Breadcrumbs.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '../../../styles/breakpoints';
@import '../../../styles/mixins';

.Breadcrumbs {
display: flex;
@@ -10,7 +10,7 @@
margin-top: 1rem;
cursor: default;
overflow-x: auto;
@media screen and (min-width: $md) {
@include screen($md) {
// Disable fullwidth hacks for viewport widths where the sidebar affects layout
width: auto;
padding: 0;
@@ -27,7 +27,7 @@
user-select: none;

&--current {
color: var(--text-default);
color: var(--default);
cursor: default;
}

13 changes: 7 additions & 6 deletions frontend/src/layout/navigation/SideBar/SideBar.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '../../../styles/breakpoints';
@import '../../../styles/mixins';

.SideBar__layout {
position: relative;
@@ -16,12 +16,13 @@
width: 15.5rem;
background: var(--bg-side);
border-right: 1px solid var(--border);

.SideBar--hidden & {
// As an optimization we use transform instead of margin on mobile,
// because the sidebar does not affect the rest of the layout on mobile
transform: translateX(-15.5rem);
}
@media screen and (min-width: $lg) {
@include screen($lg) {
height: initial;
position: relative;
.SideBar--hidden & {
@@ -37,12 +38,12 @@
position: absolute;
height: 100%;
width: 100%;
background: var(--text-muted);
background: var(--muted);
.SideBar--hidden & {
opacity: 0;
pointer-events: none;
}
@media screen and (min-width: $lg) {
@include screen($lg) {
display: none;
}
}
@@ -61,7 +62,7 @@

.SideBar__heading {
margin-left: 0.5rem;
color: var(--text-muted);
color: var(--muted);
line-height: 1.5rem;
font-size: 0.75rem;
font-weight: 600;
@@ -75,7 +76,7 @@

.ProjectSwitcher__label {
padding: 0 0.5rem;
color: var(--text-muted);
color: var(--muted);
line-height: 1.5rem;
font-size: 0.75rem;
font-weight: 600;
2 changes: 1 addition & 1 deletion frontend/src/layout/navigation/TopBar/SitePopover.tsx
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
function SitePopoverSection({ title, children }: { title?: string | JSX.Element; children: any }): JSX.Element {
return (
<div className="SitePopover__section">
{title && <h5 className="flex-center">{title}</h5>}
{title && <h5 className="flex items-center">{title}</h5>}
{children}
</div>
)
10 changes: 5 additions & 5 deletions frontend/src/layout/navigation/TopBar/TopBar.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '../../../styles/breakpoints';
@import '../../../styles/mixins';

.TopBar {
z-index: var(--z-main-nav);
@@ -12,7 +12,7 @@
background: var(--bg-bridge);
border-bottom: 1px solid var(--border);
gap: 1rem;
@media screen and (min-width: $sm) {
@include screen($sm) {
padding: 0.5rem 1rem;
}
.anticon-caret-down {
@@ -53,7 +53,7 @@
vertical-align: middle;
}

@media screen and (min-width: $md) {
@include screen($md) {
width: auto;
overflow: hidden;
font-size: 1rem;
@@ -77,7 +77,7 @@
&--hidden {
margin-top: -3rem;
}
@media screen and (min-width: $sm) {
@include screen($sm) {
padding: 0 1rem;
}
p {
@@ -103,7 +103,7 @@
.Announcement__close {
position: absolute;
right: 0.5rem;
@media screen and (min-width: $sm) {
@include screen($sm) {
right: 1rem;
}
}
2 changes: 1 addition & 1 deletion frontend/src/lib/colors.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* Insight series colors. */
const dataColorVars = [
'ultramarine',
'brand-blue',
'purple',
'viridian',
'magenta',
4 changes: 2 additions & 2 deletions frontend/src/lib/components/ActionComponents.scss
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@
width: 100%;

.caption {
color: var(--text-muted);
color: var(--muted);
font-size: 0.75rem;
line-height: 1rem;
padding-bottom: 16px;
@@ -49,7 +49,7 @@

&.active {
background-color: var(--primary) !important;
color: var(--text-light);
color: var(--light);
}
}
}
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@
color: var(--muted-alt);

strong {
color: var(--text-default);
color: var(--default);
}
}
}
Original file line number Diff line number Diff line change
@@ -155,7 +155,7 @@ export function AddToDashboardModal({
</AutoSizer>
</div>
</section>
<section className="space-between-items">
<section className="flex justify-between">
<LemonButton type="secondary" size="small" onClick={addNewDashboard} disabled={!canEditInsight}>
Add to a new dashboard
</LemonButton>
6 changes: 3 additions & 3 deletions frontend/src/lib/components/AlertMessage/AlertMessage.scss
Original file line number Diff line number Diff line change
@@ -8,16 +8,16 @@
text-align: left;

&.info {
background-color: var(--depr-rgba-primary_alt-0-09);
background-color: var(--primary-alt-highlight);
}

&.warning {
background-color: var(--depr-rgba-warning-0-09);
background-color: var(--warning-highlight);
color: var(--warning);
}

&.error {
background-color: var(--depr-rgba-danger-0-09);
background-color: var(--danger-highlight);
color: var(--danger);
}

Original file line number Diff line number Diff line change
@@ -19,6 +19,9 @@ Info.args = { type: 'info', children: 'PSA: Every dish can be improved by adding
export const Warning = Template.bind({})
Warning.args = { type: 'warning', children: 'This spacecraft is about to explode. Please evacuate immediately.' }

export const Error = Template.bind({})
Error.args = { type: 'error', children: 'This spacecraft has exploded. Too late...' }

export const Closable = Template.bind({})
Closable.args = {
type: 'info',
6 changes: 3 additions & 3 deletions frontend/src/lib/components/CommandPalette/index.scss
Original file line number Diff line number Diff line change
@@ -19,9 +19,9 @@
width: 36rem;
max-width: 100%;
max-height: 60%;
color: var(--text-light);
color: var(--light);
border-radius: var(--radius);
background-color: var(--bg-menu);
background-color: var(--default);
overflow: hidden;

@media (max-width: 500px) {
@@ -83,7 +83,7 @@
}

.palette__result--focused {
background: var(--depr-darken-bg_menu-10);
background: var(--default-dark);
&::before,
&::after {
content: '';
2 changes: 1 addition & 1 deletion frontend/src/lib/components/DateDisplay/DateDisplay.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.dated-highlight {
color: var(--text-muted);
color: var(--muted);
margin-right: 4px;
padding: 2px 4px;
border: 1px solid var(--border-light);
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@
height: 2rem;
padding: 1.25rem 0.5rem;
align-items: center;
color: var(--text-default);
color: var(--default);
font-weight: normal;
font-size: 0.875rem;
line-height: 1.375em;
@@ -17,7 +17,7 @@

&.RollingDateRangeFilter--selected {
background: var(--primary-bg-hover);
color: var(--text-default);
color: var(--default);
}

input::-webkit-outer-spin-button,
Original file line number Diff line number Diff line change
@@ -46,7 +46,7 @@
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-muted);
color: var(--muted);
}

.definition-popup-header-row-buttons {
@@ -60,7 +60,7 @@
}

.definition-popup-disabled-button {
color: var(--text-muted);
color: var(--muted);
cursor: not-allowed;
}
}
@@ -119,7 +119,7 @@

&.empty {
font-style: italic;
color: var(--text-muted);
color: var(--muted);
}
}

@@ -163,7 +163,7 @@
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-muted);
color: var(--muted);
margin-bottom: 4px;
}

Original file line number Diff line number Diff line change
@@ -66,7 +66,7 @@ function TaxonomyIntroductionSection(): JSX.Element {
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
color: 'var(--text-muted)',
color: 'var(--muted)',
}}
>
<Tooltip title="Viewing ingestion data requires a premium license">
@@ -122,7 +122,7 @@ export function VerifiedEventCheckbox({
Verified event
{compact && (
<Tooltip title={copy}>
<InfoCircleOutlined style={{ marginLeft: '0.5rem', color: 'var(--text-muted)' }} />
<InfoCircleOutlined style={{ marginLeft: '0.5rem', color: 'var(--muted)' }} />
</Tooltip>
)}
</span>
Loading

0 comments on commit 8c42c70

Please sign in to comment.