diff --git a/packages/view/src/App.scss b/packages/view/src/App.scss index 4d30f3c6..d1979c9c 100644 --- a/packages/view/src/App.scss +++ b/packages/view/src/App.scss @@ -8,20 +8,20 @@ body { .header-container { position: relative; display: flex; - height: 60px; + height: 3.75rem; justify-content: space-between; align-items: center; - padding: 0 12px 0 20px; + padding: 0 0.75rem 0 1.25rem; } .top-container { - height: 220px; + height: 13.75rem; } .middle-container { display: flex; - height: calc(100vh - 200px); - padding: 20px; + height: calc(100vh - 12.5rem); + padding: 1.25rem; } .no-commits-container { @@ -29,9 +29,9 @@ body { flex-direction: column; justify-content: center; align-items: center; - height: calc(100vh - 350px); + height: calc(100vh - 21.875rem); h1 { - margin: 40px 0 0 0; + margin: 2.5rem 0 0 0; } } diff --git a/packages/view/src/components/BranchSelector/BranchSelector.scss b/packages/view/src/components/BranchSelector/BranchSelector.scss index c2670677..12a0c1e3 100644 --- a/packages/view/src/components/BranchSelector/BranchSelector.scss +++ b/packages/view/src/components/BranchSelector/BranchSelector.scss @@ -8,9 +8,9 @@ font-weight: $font-weight-semibold; & &__select-box { - border: 1px solid $color-white; + border: 0.0625rem solid $color-white; color: $color-white; - height: 30px; + height: 1.875rem; & .MuiSvgIcon-root { color: $color-white; diff --git a/packages/view/src/components/BranchSelector/BranchSelector.tsx b/packages/view/src/components/BranchSelector/BranchSelector.tsx index 5425f30f..4a16868a 100644 --- a/packages/view/src/components/BranchSelector/BranchSelector.tsx +++ b/packages/view/src/components/BranchSelector/BranchSelector.tsx @@ -37,7 +37,7 @@ const BranchSelector = () => { sx: { backgroundColor: "#212121", color: "white", - marginTop: "1px", + marginTop: "0.0625rem", "& .MuiMenuItem-root": { backgroundColor: "#212121 !important ", "&:hover": { diff --git a/packages/view/src/components/Detail/Detail.scss b/packages/view/src/components/Detail/Detail.scss index 3e0a67e8..01b0ae11 100644 --- a/packages/view/src/components/Detail/Detail.scss +++ b/packages/view/src/components/Detail/Detail.scss @@ -10,7 +10,7 @@ margin-right: 1rem; flex-grow: 10; height: 0; - border: 1px solid $color-white; + border: 0.0625rem solid $color-white; } .detail__summary-list { @@ -19,10 +19,10 @@ .detail__summary-item { position: relative; - margin-right: 10px; + margin-right: 0.625rem; display: inline-flex; align-items: center; - gap: 4px; + gap: 0.25rem; &:last-child { margin-right: 0; @@ -48,8 +48,8 @@ .detail__commit-list { display: flex; flex-direction: column; - row-gap: 7px; - padding: 20px; + row-gap: 0.4375rem; + padding: 1.25rem; font-size: $font-size-body; .detail__commit-item { @@ -64,7 +64,7 @@ justify-content: space-between; align-items: center; width: 100%; - padding-left: 5px; + padding-left: 0.3125rem; .commit-item__avatar-message { display: flex; @@ -75,7 +75,7 @@ position: relative; overflow: visible; flex-grow: 1; - padding-right: 50px; + padding-right: 3.125rem; width: auto; .commit-item__message { @@ -84,7 +84,7 @@ -webkit-line-clamp: 1; overflow: hidden; color: $color-white; - margin: 0 4px 0 15px; + margin: 0 0.25rem 0 0.9375rem; &:hover { display: block; @@ -93,8 +93,8 @@ position: absolute; z-index: 10; background-color: $color-dark-gray; - padding-bottom: 5px; - top: -7px; + padding-bottom: 0.3125rem; + top: -0.4375rem; } } } @@ -142,4 +142,3 @@ color: $color-light-gray; } } - diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss index 10b3bec8..836bb39d 100644 --- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss +++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss @@ -3,7 +3,7 @@ .filtered-authors { display: flex; align-items: center; - column-gap: 10px; + column-gap: 0.625rem; .filtered-authors__label { font-size: $font-size-title; @@ -14,6 +14,6 @@ display: flex; align-items: center; flex-wrap: wrap; - gap: 5px; + gap: 0.3125rem; } } diff --git a/packages/view/src/components/RefreshButton/RefreshButton.scss b/packages/view/src/components/RefreshButton/RefreshButton.scss index 1328c5ae..0763dc29 100644 --- a/packages/view/src/components/RefreshButton/RefreshButton.scss +++ b/packages/view/src/components/RefreshButton/RefreshButton.scss @@ -1,6 +1,6 @@ .refresh-button { - width: 30px; - height: 30px; + width: 1.875rem; + height: 1.875rem; } .refresh-button__icon { diff --git a/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss b/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss index 55d8ed49..e9311bfb 100644 --- a/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss +++ b/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss @@ -4,7 +4,7 @@ position: relative; display: flex; align-items: center; - column-gap: 10px; + column-gap: 0.625rem; &__label { display: flex; @@ -16,17 +16,17 @@ font-weight: $font-weight-semibold; cursor: pointer; } - + &__list { position: absolute; top: 2rem; - right: -10px; - max-height: 240px; + right: -0.625rem; + max-height: 15rem; overflow-y: auto; - padding: 5px; + padding: 0.3125rem; background-color: $color-dark-gray; border-radius: 0.5rem; - box-shadow: 0px 0px 10px $color-background; + box-shadow: 0rem 0rem 0.625rem $color-background; z-index: 10; &::-webkit-scrollbar { @@ -34,10 +34,10 @@ } .selected-clusters__item { - width: 200px; + width: 12.5rem; text-overflow: ellipsis; justify-content: space-between; - margin: 5px; + margin: 0.3125rem; color: $color-white; background-color: #4f5662; } diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss index 03cf1f02..59db4ef4 100644 --- a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss +++ b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss @@ -17,10 +17,10 @@ } & &__select-box { - border: 1px solid $color-white; + border: 0.0625rem solid $color-white; color: $color-white; - height: 25px; - width: 100px; + height: 1.5625rem; + width: 6.25rem; font-size: $font-size-caption; & .MuiSvgIcon-root { @@ -34,7 +34,7 @@ &__chart { overflow: visible; - margin: 20px 40px 40px; + margin: 1.25rem 2.5rem 2.5rem; } &__axis { @@ -44,7 +44,7 @@ .tick { display: none; } - + .x-axis__label { fill: $color-white; } @@ -78,8 +78,8 @@ &__tooltip { display: none; position: absolute; - padding: 8px 16px; - border-radius: 5px; + padding: 0.5rem 1rem; + border-radius: 0.3125rem; font-size: $font-size-caption; text-align: center; line-height: 1.5; diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx index bc81fad1..eb5cd456 100644 --- a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx +++ b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx @@ -7,6 +7,7 @@ import { FormControl, MenuItem, Select } from "@mui/material"; import type { ClusterNode, AuthorInfo } from "types"; import { useGlobalData } from "hooks"; import { getAuthorProfileImgSrc } from "utils/author"; +import { pxToRem } from "utils/pxToRem"; import { useGetSelectedData } from "../Statistics.hook"; @@ -60,7 +61,7 @@ const AuthorBarChart = () => { const xAxisGroup = svg .append("g") .attr("class", "author-bar-chart__axis x-axis") - .style("transform", `translateY(${DIMENSIONS.height}px)`); + .style("transform", `translateY(${pxToRem(DIMENSIONS.height)})`); const yAxisGroup = svg.append("g").attr("class", "author-bar-chart__axis y-axis"); const barGroup = svg.append("g").attr("class", "author-bar-chart__container"); @@ -88,15 +89,15 @@ const AuthorBarChart = () => { xAxisGroup .append("text") .attr("class", "x-axis__label") - .style("transform", `translate(${DIMENSIONS.width / 2}px, ${DIMENSIONS.margins - 10}px)`) + .style("transform", `translate(${pxToRem(DIMENSIONS.width / 2)}, ${pxToRem(DIMENSIONS.margins - 10)})`) .text(`${metric} # / Total ${metric} # (%)`); // Event handler const handleMouseOver = (e: MouseEvent, d: AuthorDataType) => { tooltip .style("display", "inline-block") - .style("left", `${e.pageX - 70}px`) - .style("top", `${e.pageY - 120}px`) + .style("left", pxToRem(e.pageX - 70)) + .style("top", pxToRem(e.pageY - 120)) .html( `

${d.name}

@@ -112,7 +113,7 @@ const AuthorBarChart = () => { }; const handleMouseMove = (e: MouseEvent) => { - tooltip.style("left", `${e.pageX - 70}px`).style("top", `${e.pageY - 120}px`); + tooltip.style("left", pxToRem(e.pageX - 70)).style("top", pxToRem(e.pageY - 120)); }; const handleMouseOut = () => { tooltip.style("display", "none"); @@ -231,11 +232,11 @@ const AuthorBarChart = () => { MenuProps={{ PaperProps: { sx: { - marginTop: "1px", + marginTop: "0.0625rem", backgroundColor: "#212121", color: "white", "& .MuiMenuItem-root": { - fontSize: "12px", + fontSize: "0.75rem", backgroundColor: "#212121 !important ", "&:hover": { backgroundColor: "#333333 !important", diff --git a/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx b/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx index 08f410f5..94efced9 100644 --- a/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx +++ b/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx @@ -3,6 +3,8 @@ import type { HierarchyRectangularNode } from "d3"; import type { RefObject } from "react"; import { useEffect, useRef } from "react"; +import { pxToRem } from "utils"; + import { PRIMARY_COLOR_VARIABLE_NAME } from "../../../constants/constants"; import { useGetSelectedData } from "../Statistics.hook"; @@ -44,7 +46,7 @@ const drawIcicleTree = async ($target: RefObject, data: FileChang const svg = d3 .select($target.current) .attr("viewBox", [0, 0, WIDTH, HEIGHT]) - .style("font", `${FONT_SIZE}px sans-serif`); + .style("font", `${pxToRem(FONT_SIZE)} sans-serif`); // Position each partitions const cell = svg diff --git a/packages/view/src/components/Statistics/Statistics.scss b/packages/view/src/components/Statistics/Statistics.scss index 47590ff3..ca39d45f 100644 --- a/packages/view/src/components/Statistics/Statistics.scss +++ b/packages/view/src/components/Statistics/Statistics.scss @@ -3,7 +3,7 @@ flex-direction: column; align-items: center; gap: 5vh; - padding: 0 20px 20px; + padding: 0 1.25rem 1.25rem; overflow-y: scroll; } diff --git a/packages/view/src/components/TemporalFilter/LineChart.scss b/packages/view/src/components/TemporalFilter/LineChart.scss index 3a8ab165..a28fd260 100644 --- a/packages/view/src/components/TemporalFilter/LineChart.scss +++ b/packages/view/src/components/TemporalFilter/LineChart.scss @@ -5,7 +5,7 @@ display: flex; flex-direction: column; align-items: center; - font-size: 20px; + font-size: 1.25rem; margin: auto 0; &__chart { diff --git a/packages/view/src/components/TemporalFilter/TemporalFilter.scss b/packages/view/src/components/TemporalFilter/TemporalFilter.scss index eb1fb8e4..b7295d5a 100644 --- a/packages/view/src/components/TemporalFilter/TemporalFilter.scss +++ b/packages/view/src/components/TemporalFilter/TemporalFilter.scss @@ -45,10 +45,10 @@ .date-from, .date-to { - margin: 0 12px 0 8px; - padding: 2px; - border: solid 1px rgba(255, 255, 255, 0.22); - border-radius: 3px; + margin: 0 0.75rem 0 0.5rem; + padding: 0.125rem; + border: solid 0.0625rem rgba(255, 255, 255, 0.22); + border-radius: 0.1875rem; color: $color-white; background: rgba(255, 255, 255, 0.09); font-weight: $font-weight-light; diff --git a/packages/view/src/components/ThemeSelector/ThemeSelector.scss b/packages/view/src/components/ThemeSelector/ThemeSelector.scss index 11b936da..e661f091 100644 --- a/packages/view/src/components/ThemeSelector/ThemeSelector.scss +++ b/packages/view/src/components/ThemeSelector/ThemeSelector.scss @@ -11,20 +11,20 @@ position: absolute; top: 2.5rem; left: 0; - padding: 20px; + padding: 1.25rem; background-color: $color-dark-gray; border-radius: 0.3rem 1.5rem 1.5rem 1.5rem; z-index: 10; display: flex; flex-direction: column; - gap: 10px; + gap: 0.625rem; } &__list { display: flex; justify-content: space-between; - gap: 2px; + gap: 0.125rem; } &__header { @@ -40,15 +40,14 @@ align-items: center; justify-items: center; gap: 1rem; - padding: 10px; + padding: 0.625rem; box-sizing: border-box; - &:hover, &--selected { @extend .theme-icon; background-color: #4f5662; - border-radius: 10px; + border-radius: 0.625rem; cursor: pointer; } @@ -62,10 +61,10 @@ } &__color { - width: 42px; - height: 42px; + width: 2.625rem; + height: 2.625rem; border-radius: 100%; - margin-left: -12px; + margin-left: -0.75rem; &:nth-child(1) { margin-left: 0; } diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss index 2002a218..5b6f25ae 100644 --- a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss +++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss @@ -5,7 +5,7 @@ &__container { cursor: pointer; - min-width: 84px; + min-width: 5.25rem; &:hover { .cluster-graph__cluster-box { @@ -34,15 +34,15 @@ &__circle { fill: var(--color-primary); } - + &__tooltip { position: absolute; z-index: 10; background: $color-white; - padding: 8px 16px; + padding: 0.5rem 1rem; font-size: $font-size-caption; line-height: 1.5; - border-radius: 5px; + border-radius: 0.3125rem; color: $color-dark-gray; } -} \ No newline at end of file +} diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawSubGraph.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawSubGraph.ts index 988f0a7e..f01f96a3 100644 --- a/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawSubGraph.ts +++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawSubGraph.ts @@ -1,6 +1,8 @@ import * as d3 from "d3"; import type { RefObject } from "react"; +import { pxToRem } from "utils"; + import type { ClusterGraphElement } from "../ClusterGraph.type"; import { getStartYEndY } from "../ClusterGraph.util"; import { GRAPH_WIDTH } from "../ClusterGraph.const"; @@ -62,7 +64,7 @@ export const drawSubGraph = ( return tooltip.style("visibility", "visible"); }) .on("mousemove", (event) => { - return tooltip.style("top", `${event.pageY - 10}px`).style("left", `${event.pageX + 10}px`); + return tooltip.style("top", pxToRem(event.pageY - 10)).style("left", pxToRem(event.pageX + 10)); }) .on("mouseout", () => { return tooltip.style("visibility", "hidden"); diff --git a/packages/view/src/components/VerticalClusterList/Summary/Summary.scss b/packages/view/src/components/VerticalClusterList/Summary/Summary.scss index cd51e427..684bd43a 100644 --- a/packages/view/src/components/VerticalClusterList/Summary/Summary.scss +++ b/packages/view/src/components/VerticalClusterList/Summary/Summary.scss @@ -4,7 +4,7 @@ display: flex; flex-direction: column; flex-grow: 1; - padding-left: 10px; + padding-left: 0.625rem; width: 100%; height: 100%; overflow-x: hidden; @@ -15,7 +15,7 @@ &__item { display: flex; align-items: center; - column-gap: 10px; + column-gap: 0.625rem; } &__info { @@ -25,7 +25,7 @@ &--expanded { @extend .cluster-summary__info; - border-radius: 25px; + border-radius: 1.5625rem; background-color: $color-dark-gray; } } @@ -34,7 +34,7 @@ .summary { display: flex; align-items: center; - padding: 10px 15px; + padding: 0.625rem 0.9375rem; border: none; background-color: transparent; cursor: pointer; @@ -42,7 +42,7 @@ width: 100%; &:hover { - border-radius: 40px; + border-radius: 2.5rem; background-color: $color-dark-gray; .summary__toggle { @@ -61,12 +61,12 @@ align-items: center; justify-content: space-between; font-size: $font-size-body; - gap: 10px; + gap: 0.625rem; } &__commit-message { flex-grow: 1; - padding-left: 15px; + padding-left: 0.9375rem; text-align: left; cursor: pointer; // "width: 0" makes the "commit-message" ellipsis reponsive @@ -83,7 +83,7 @@ &:visited { color: $color-light-gray; } - + &:hover { color: var(--color-primary); } @@ -98,10 +98,10 @@ display: flex; align-items: center; justify-content: center; - margin-left: 8px; + margin-left: 0.5rem; background-color: transparent; border: none; - font-size: 24px; + font-size: 1.5rem; color: var(--color-primary); visibility: hidden; cursor: pointer; @@ -116,7 +116,7 @@ .detail { overflow: auto; - height: 220px; - max-height: 280px; - padding: 10px 30px; + height: 13.75rem; + max-height: 17.5rem; + padding: 0.625rem 1.875rem; } diff --git a/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss b/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss index 9ee81308..4d9d64c9 100644 --- a/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss +++ b/packages/view/src/components/VerticalClusterList/VerticalClusterList.scss @@ -9,8 +9,8 @@ display: flex; justify-content: space-between; align-items: center; - column-gap: 20px; - padding: 0 10px 20px; + column-gap: 1.25rem; + padding: 0 0.625rem 1.25rem; width: 100%; } } diff --git a/packages/view/src/styles/_reset.scss b/packages/view/src/styles/_reset.scss index 2d8b93f8..c6f59a97 100644 --- a/packages/view/src/styles/_reset.scss +++ b/packages/view/src/styles/_reset.scss @@ -37,13 +37,13 @@ body { display: block; } *::-webkit-scrollbar { - width: 8px; + width: 0.5rem; } *::-webkit-scrollbar-thumb { background-color: $color-dark-gray; border: none; outline: none; - border-radius: 10px; + border-radius: 0.625rem; &:hover { background-color: $color-medium-gray; @@ -51,7 +51,7 @@ body { } *::-webkit-scrollbar-track { background-color: transparent; - border-radius: 10px; + border-radius: 0.625rem; } *:hover::-webkit-scrollbar, @@ -61,6 +61,6 @@ body { *::-webkit-scrollbar:horizontal { display: none; - height: 6px; + height: 0.375rem; } } diff --git a/packages/view/src/utils/index.ts b/packages/view/src/utils/index.ts index 57992197..f64d38e8 100644 --- a/packages/view/src/utils/index.ts +++ b/packages/view/src/utils/index.ts @@ -1,2 +1,3 @@ export * from "./debounce"; export * from "./throttle"; +export * from "./pxToRem"; diff --git a/packages/view/src/utils/pxToRem.ts b/packages/view/src/utils/pxToRem.ts new file mode 100644 index 00000000..33f436c2 --- /dev/null +++ b/packages/view/src/utils/pxToRem.ts @@ -0,0 +1 @@ +export const pxToRem = (px: number) => `${px / 16}rem`;