Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: Update icons #1220

Merged
merged 4 commits into from
Oct 17, 2023
Merged

style: Update icons #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aa1547c
chore: Update icons
bprusinowski Oct 17, 2023
9f2b0a7
style: Use correct combo chart icons
bprusinowski Oct 17, 2023
8251a35
fix: Highlighting of combo chart column icons
bprusinowski Oct 17, 2023
cf45f7b
style: Update chart type selection section style
bprusinowski Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/configurator/components/chart-type-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,8 +225,8 @@ const ChartTypeSelectorMenu = (props: ChartTypeSelectorMenuProps) => {
props;

return (
<Flex sx={{ flexDirection: "column", gap: 3 }}>
<Typography variant="body2" sx={{ mx: "auto", fontWeight: "bold" }}>
<Flex sx={{ flexDirection: "column", gap: 2 }}>
<Typography variant="caption" sx={{ mx: "auto", color: "grey.800" }}>
{title}
</Typography>
<Box
Expand Down
5 changes: 3 additions & 2 deletions app/configurator/components/ui-helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,10 +165,11 @@ export const getIconName = (name: string): IconName => {
case "map":
return "chartMap";
case "comboLineSingle":
return "chartMultiLine";
case "comboLineDual":
return "chartDualAxisLine";
case "comboLineColumn":
// FIXME: Use a proper icon.
return "star";
return "chartColumnLine";
case "baseLayer":
return "mapMaptype";
case "areaLayer":
Expand Down
31 changes: 31 additions & 0 deletions app/icons/components/IcChartColumnLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from "react";
function SvgIcChartColumnLine(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
{...props}
>
<filter id="greyscale">
<feColorMatrix
type="matrix"
values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"
/>
</filter>
<path
d="M10.529 13.701L2.887 21 1.5 19.675l9.029-8.623 3.432 3.278 7.152-6.83L22.5 8.825l-8.539 8.154z"
fill="currentColor"
fillRule="evenodd"
/>
<g fill="currentColor" filter="url(#greyscale)">
<path d="M10.535 9.03l.867.828V6.789H7.508v5.132l2.017-1.927zM7.508 18.617v2.386H11.4v-4.449l-.866-.827zM6.376 11.523H2.453v5.216l3.923-3.747zM6.374 21v-1.312L5 21zM13.954 19l-1.01-.963-.35-.335v3.297h3.896v-4.42l-1.527 1.458zM17.625 21h3.923v-5.625h-3.787l-.136.13zM16.49 9.886V3h-3.896v8.01l1.36 1.299z" />
</g>
</svg>
);
}
export default SvgIcChartColumnLine;
42 changes: 42 additions & 0 deletions app/icons/components/IcChartDualAxisLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import * as React from "react";
function SvgIcChartDualAxisLine(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
{...props}
>
<filter id="grayscale">
<feColorMatrix
type="matrix"
values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"
/>
</filter>
<path
d="M20.346 12.923l.078-.073-.078-.073-1.057-.99-.068-.064-.069.064-4.633 4.34-3.95-3.7-.069-.064-.068.064-1.057.99-.078.073.078.073 5.075 4.755.069.064.068-.064zM6.875 11.064l.068.064.069-.064 1.056-.99.078-.072-.078-.073-2.086-1.955-.069-.064-.068.064-2.023 1.895-.078.073.078.073 1.057.99.068.064.069-.064.897-.841z"
fill="currentColor"
stroke="currentColor"
strokeWidth={0.2}
filter="url(#grayscale)"
/>
<path
d="M4.988 16.163l.069.064.068-.064 5.754-5.391 2.547 2.386.068.064.069-.064 6.505-6.095.078-.073-.078-.073-1.056-.99-.069-.064-.068.064-5.38 5.04-2.547-2.385-.069-.064-.068.064-6.88 6.445-.077.073.078.073z"
fill="currentColor"
stroke="currentColor"
strokeWidth={0.2}
/>
<path d="M1 2h1.396v20H1z" fill="currentColor" />
<path
d="M21.602 2h1.396v20h-1.396z"
fill="currentColor"
filter="url(#grayscale)"
/>
</svg>
);
}
export default SvgIcChartDualAxisLine;
34 changes: 34 additions & 0 deletions app/icons/components/IcChartMultiLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import * as React from "react";
function SvgIcChartMultiLine(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
{...props}
>
<filter id="grayscale">
<feColorMatrix
type="matrix"
values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"
/>
</filter>
<g fillRule="evenodd">
<path
d="M23.003 12.848l-1.452-1.405-6.465 6.249-5.526-5.34-1.453 1.403 6.979 6.745zM3.785 9.574l1.416 1.368 1.453-1.404-2.869-2.772-2.781 2.688 1.453 1.404 1.328-1.284z"
fill="currentColor"
filter="url(#grayscale)"
/>
<path
d="M10.463 10.074l-8.006 7.738-1.453-1.404 9.459-9.142 3.596 3.475L21.55 3.5l1.453 1.404-8.945 8.646z"
fill="currentColor"
/>
</g>
</svg>
);
}
export default SvgIcChartMultiLine;
17 changes: 6 additions & 11 deletions app/icons/components/IcTwitter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,18 @@
import * as React from "react";

function SvgIcTwitter(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 24 24"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g fill="none" fillRule="evenodd">
<path d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M22.689 5.472a9.231 9.231 0 01-2.16 2.232v.552c0 1.168-.168 2.328-.504 3.48a12.793 12.793 0 01-1.536 3.336 12.224 12.224 0 01-2.472 2.808c-.96.8-2.112 1.456-3.456 1.968-1.344.512-2.792.752-4.344.72-2.416 0-4.624-.648-6.624-1.944.304.048.648.072 1.032.072 2.016 0 3.808-.616 5.376-1.848a4.39 4.39 0 01-2.52-.864 4.226 4.226 0 01-1.536-2.136c.304.032.576.048.816.048.384 0 .768-.048 1.152-.144a4.297 4.297 0 01-2.496-1.488c-.656-.784-.984-1.704-.984-2.76v-.048a4.43 4.43 0 001.968.552 4.493 4.493 0 01-1.416-1.536 4.128 4.128 0 01-.528-2.064c0-.784.2-1.512.6-2.184a12.495 12.495 0 003.936 3.192c1.536.8 3.2 1.24 4.992 1.32a4.24 4.24 0 01-.12-.984c0-1.2.424-2.216 1.272-3.048.848-.832 1.864-1.256 3.048-1.272 1.264 0 2.32.456 3.168 1.368a8.384 8.384 0 002.736-1.056c-.32 1.024-.952 1.824-1.896 2.4a9.053 9.053 0 002.496-.672z"
/>
</g>
<path
d="M4.039 4.5l6.177 8.273L4 19.5h1.4l5.442-5.89 4.397 5.89H20l-6.525-8.739L19.26 4.5h-1.4L12.85 9.924 8.8 4.5zm2.057 1.032h2.188l9.658 12.936h-2.187z"
fill="#1c2834"
/>
</svg>
);
}

export default SvgIcTwitter;
8 changes: 8 additions & 0 deletions app/icons/components/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,11 @@ import { default as Categories } from "@/icons/components/IcCategories";
import { default as ChartArea } from "@/icons/components/IcChartArea";
import { default as ChartBar } from "@/icons/components/IcChartBar";
import { default as ChartColumn } from "@/icons/components/IcChartColumn";
import { default as ChartColumnLine } from "@/icons/components/IcChartColumnLine";
import { default as ChartDualAxisLine } from "@/icons/components/IcChartDualAxisLine";
import { default as ChartLine } from "@/icons/components/IcChartLine";
import { default as ChartMap } from "@/icons/components/IcChartMap";
import { default as ChartMultiLine } from "@/icons/components/IcChartMultiLine";
import { default as ChartPie } from "@/icons/components/IcChartPie";
import { default as ChartScatterplot } from "@/icons/components/IcChartScatterplot";
import { default as Check } from "@/icons/components/IcCheck";
Expand Down Expand Up @@ -49,6 +52,7 @@ import { default as Dragndrop } from "@/icons/components/IcDragndrop";
import { default as Edit } from "@/icons/components/IcEdit";
import { default as Embed } from "@/icons/components/IcEmbed";
import { default as Excel } from "@/icons/components/IcExcel";
import { default as Exclamation } from "@/icons/components/IcExclamation";
import { default as Eye } from "@/icons/components/IcEye";
import { default as Facebook } from "@/icons/components/IcFacebook";
import { default as Feed } from "@/icons/components/IcFeed";
Expand Down Expand Up @@ -156,9 +160,12 @@ export const Icons = {
categories: Categories,
chartArea: ChartArea,
chartBar: ChartBar,
chartColumnLine: ChartColumnLine,
chartColumn: ChartColumn,
chartDualAxisLine: ChartDualAxisLine,
chartLine: ChartLine,
chartMap: ChartMap,
chartMultiLine: ChartMultiLine,
chartPie: ChartPie,
chartScatterplot: ChartScatterplot,
check: Check,
Expand Down Expand Up @@ -188,6 +195,7 @@ export const Icons = {
edit: Edit,
embed: Embed,
excel: Excel,
exclamation: Exclamation,
eye: Eye,
facebook: Facebook,
feed: Feed,
Expand Down
5 changes: 3 additions & 2 deletions app/icons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@ export const getChartIcon = (chartType: ChartType): IconName => {
return "chartScatterplot";
case "table":
return "table";
// FIXME: use proper icons
case "comboLineSingle":
return "chartMultiLine";
case "comboLineDual":
return "chartDualAxisLine";
case "comboLineColumn":
return "star";
return "chartColumnLine";
default:
const _exhaustiveCheck: never = chartType;
return _exhaustiveCheck;
Expand Down
1 change: 1 addition & 0 deletions app/icons/svg/ic_chart-column-line.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions app/icons/svg/ic_chart-dual-axis-line.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions app/icons/svg/ic_chart-multi-line.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion app/icons/svg/ic_twitter.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading