hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fix html font size and adjust usage of rem units (#5641)

Browse Source 
* Leave default browser font-size for the html

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix preferences helm repos layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adjust usage of rem units

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adjust namespace select filter option sizes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing ToBottom btn sizing

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing Remove Cluster dialog sizing

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing catalog sidebar title font-size

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix Notice sizing

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Update snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Update more snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-06-16 02:38:10 +03:00 committed by GitHub
parent fa32aa1b8e
commit 8349d6aa4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 364 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/behaviours/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
View File

@ -886,8 +886,9 @@ exports[`add custom helm repository in preferences when navigating to preference
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some active repository"
@ -899,6 +900,7 @@ exports[`add custom helm repository in preferences when navigating to preference
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some active repository"
@ -1370,8 +1372,9 @@ exports[`add custom helm repository in preferences when navigating to preference
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some active repository"
@ -1383,6 +1386,7 @@ exports[`add custom helm repository in preferences when navigating to preference
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some active repository"
@ -1963,8 +1967,9 @@ exports[`add custom helm repository in preferences when navigating to preference
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some active repository"
@ -1976,6 +1981,7 @@ exports[`add custom helm repository in preferences when navigating to preference
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some active repository"
@ -2455,8 +2461,9 @@ exports[`add custom helm repository in preferences when navigating to preference
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some active repository"
@ -2468,6 +2475,7 @@ exports[`add custom helm repository in preferences when navigating to preference
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some active repository"
@ -3048,8 +3056,9 @@ exports[`add custom helm repository in preferences when navigating to preference
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some active repository"
@ -3061,6 +3070,7 @@ exports[`add custom helm repository in preferences when navigating to preference
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some active repository"
@ -3817,8 +3827,9 @@ exports[`add custom helm repository in preferences when navigating to preference
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some active repository"
@ -3830,6 +3841,7 @@ exports[`add custom helm repository in preferences when navigating to preference
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some active repository"
@ -4410,8 +4422,9 @@ exports[`add custom helm repository in preferences when navigating to preference
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some active repository"
@ -4423,6 +4436,7 @@ exports[`add custom helm repository in preferences when navigating to preference
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some active repository"
@ -5179,8 +5193,9 @@ exports[`add custom helm repository in preferences when navigating to preference
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some active repository"
@ -5192,6 +5207,7 @@ exports[`add custom helm repository in preferences when navigating to preference
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some active repository"
@ -5772,8 +5788,9 @@ exports[`add custom helm repository in preferences when navigating to preference
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some active repository"
@ -5785,6 +5802,7 @@ exports[`add custom helm repository in preferences when navigating to preference
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some active repository"

40
src/behaviours/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap
View File

@ -886,8 +886,9 @@ exports[`add helm repository from list in preferences when navigating to prefere
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some already active repository"
@ -899,6 +900,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some already active repository"
@ -1372,8 +1374,9 @@ exports[`add helm repository from list in preferences when navigating to prefere
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some already active repository"
@ -1385,6 +1388,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some already active repository"
@ -1907,8 +1911,9 @@ exports[`add helm repository from list in preferences when navigating to prefere
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some already active repository"
@ -1920,6 +1925,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some already active repository"
@ -2391,8 +2397,9 @@ exports[`add helm repository from list in preferences when navigating to prefere
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some already active repository"
@ -2404,6 +2411,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some already active repository"
@ -3354,8 +3362,9 @@ exports[`add helm repository from list in preferences when navigating to prefere
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some already active repository"
@ -3367,6 +3376,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some already active repository"
@ -3382,8 +3392,9 @@ exports[`add helm repository from list in preferences when navigating to prefere
</i>
</div>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some to be added repository"
@ -3395,6 +3406,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
>
some-other-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some to be added repository"
@ -3868,8 +3880,9 @@ exports[`add helm repository from list in preferences when navigating to prefere
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some already active repository"
@ -3881,6 +3894,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some already active repository"
@ -3896,8 +3910,9 @@ exports[`add helm repository from list in preferences when navigating to prefere
</i>
</div>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some to be added repository"
@ -3909,6 +3924,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
>
some-other-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some to be added repository"
@ -4441,8 +4457,9 @@ exports[`add helm repository from list in preferences when navigating to prefere
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some already active repository"
@ -4454,6 +4471,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some already active repository"
@ -4469,8 +4487,9 @@ exports[`add helm repository from list in preferences when navigating to prefere
</i>
</div>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-Some to be added repository"
@ -4482,6 +4501,7 @@ exports[`add helm repository from list in preferences when navigating to prefere
>
some-other-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-Some to be added repository"

8
src/behaviours/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap
View File

@ -3065,8 +3065,9 @@ exports[`listing active helm repositories in preferences when navigating to pref
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-some-repository"
@ -3078,6 +3079,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
>
some-repository-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-some-repository"
@ -3093,8 +3095,9 @@ exports[`listing active helm repositories in preferences when navigating to pref
</i>
</div>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-some-other-repository"
@ -3106,6 +3109,7 @@ exports[`listing active helm repositories in preferences when navigating to pref
>
some-other-repository-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-some-other-repository"

8
src/behaviours/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap
View File

@ -886,8 +886,9 @@ exports[`remove helm repository from list of active repositories in preferences
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-some-active-repository"
@ -899,6 +900,7 @@ exports[`remove helm repository from list of active repositories in preferences
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-some-active-repository"
@ -1370,8 +1372,9 @@ exports[`remove helm repository from list of active repositories in preferences
class="repos"
>
<div
class="item flex gaps align-center justify-space-between mt-3"
class="item flex gaps align-center justify-space-between repo"
>
<div>
<div
class="repoName"
data-testid="helm-repository-some-active-repository"
@ -1383,6 +1386,7 @@ exports[`remove helm repository from list of active repositories in preferences
>
some-url
</div>
</div>
<i
class="Icon material interactive focusable"
data-testid="remove-helm-repository-some-active-repository"

7
src/renderer/components/+catalog/catalog-menu.module.scss
View File

@ -8,12 +8,15 @@
}
.parent {
@apply uppercase font-bold;
color: var(--textColorAccent);
font-size: small;
text-transform: uppercase;
font-weight: bold;
}
.catalog {
@apply p-5 font-bold text-2xl;
font-size: medium;
padding: var(--padding) calc(var(--padding) * 1.5);
font-weight: bold;
color: var(--textColorAccent);
}

6
src/renderer/components/+extensions/notice.module.scss
View File

@ -4,8 +4,12 @@
*/
.notice {
@apply p-8 flex flex-col gap-2 rounded-lg;
display: flex;
flex-direction: column;
gap: calc(var(--unit) * 2);
background-color: var(--inputControlBackground);
border: 1px solid var(--boxShadow);
color: var(--textColorTertiary);
border-radius: 4px;
padding: calc(var(--padding) * 2);
}

2
src/renderer/components/+namespaces/namespace-select-filter.scss
View File

@ -59,6 +59,8 @@
&__option {
white-space: normal;
word-break: break-all;
padding: 4px 8px;
border-radius: 3px;
}
}

14
src/renderer/components/+preferences/kubernetes/helm-charts/helm-charts.module.scss
View File

@ -4,12 +4,22 @@
*/
.repos {
@apply mt-6 flex flex-col;
display: flex;
flex-direction: column;
margin-top: calc(var(--margin) * 2);
}
.repos .repo + .repo {
margin-top: calc(var(--margin) * 1.5);
}
.contents {
display: flex;
gap: var(--padding);
}
.repoName {
font-weight: 500;
margin-bottom: 8px;
}
.repoUrl {

4
src/renderer/components/+preferences/kubernetes/helm-charts/helm-repositories.tsx
View File

@ -40,14 +40,16 @@ const NonInjectedActiveHelmRepositories = observer(({ activeHelmRepositories, re
<RemovableItem
key={repository.name}
onRemove={() => removeRepository(repository)}
className="mt-3"
className={styles.repo}
data-testid={`remove-helm-repository-${repository.name}`}
>
<div>
<div data-testid={`helm-repository-${repository.name}`} className={styles.repoName}>
{repository.name}
</div>
<div className={styles.repoUrl}>{repository.url}</div>
</div>
</RemovableItem>
))}
</div>

5
src/renderer/components/+preferences/removable-item.module.scss
View File

@ -1,7 +1,8 @@
.item {
--flex-gap: 1.2rem;
--flex-gap: 0.5rem;
@apply rounded-md px-7 py-5 shadow-sm;
background: var(--inputControlBackground);
min-height: 65px;
border-radius: 3px;
padding: calc(var(--padding) * 1.5);
}

3
src/renderer/components/app.scss
View File

@ -68,6 +68,9 @@
html, body {
height: 100%;
overflow: hidden;
}
body {
color: var(--textColorPrimary);
background-color: var(--mainBackground);
font-size: var(--font-size);

20
src/renderer/components/delete-cluster-dialog/view.module.scss
View File

@ -1,17 +1,22 @@
.warning {
@apply mt-4 flex py-4 px-6 rounded-md items-center;
display: flex;
margin-top: var(--margin);
padding: calc(var(--padding) * 2) calc(var(--padding) * 3);
border-radius: 4px;
align-items: center;
background: #fad8d7;
color: #797979;
}
.warningIcon {
@apply mr-5;
margin-right: calc(var(--margin) * 2.4);
font-size: 26px;
}
.dialog {
> div {
@apply rounded-md bg-white;
border-radius: 4px;
background-color: white;
max-width: 600px;
min-width: calc(45 * var(--unit));
}
@ -22,11 +27,14 @@
}
.dialogContent {
@apply p-9 leading-9;
padding: calc(var(--padding) * 2) calc(var(--padding) * 3);
}
.dialogButtons {
@apply flex justify-end p-7 rounded-md;
display: flex;
border-radius: 4px;
justify-content: flex-end;
padding: calc(var(--padding) * 2);
background: #f4f4f4;
> * {
@ -35,7 +43,7 @@
}
.hr {
@apply mt-7;
margin-top: calc(var(--margin) * 3);
height: 1px;
background: #dfdfdf80;
}

2
src/renderer/components/delete-cluster-dialog/view.tsx
View File

@ -204,9 +204,9 @@ class NonInjectedDeleteClusterDialog extends React.Component<Dependencies> {
<div className={styles.dialogContent}>
{this.renderDeleteMessage(state)}
{this.renderWarning(state)}
<hr className={styles.hr} />
{contexts.length > 0 && (
<>
<hr className={styles.hr} />
<div className="mt-4">
<Checkbox
data-testid="context-switch"

2
src/renderer/components/dock/dock-tab.module.scss
View File

@ -94,5 +94,5 @@
.title {
overflow: hidden;
text-overflow: ellipsis;
margin-right: 2.5rem;
margin-right: calc(var(--margin) * 3);
}

2
src/renderer/components/dock/logs/to-bottom.tsx
View File

@ -8,7 +8,7 @@ import { Icon } from "../../icon";
export function ToBottom({ onClick }: { onClick: () => void }) {
return (
<button
className="absolute top-3 right-3 z-10 rounded-md flex align-center px-1.5 py-1.5 pl-3.5"
className="absolute top-3 right-3 z-10 rounded-md flex align-center px-1 py-1 pl-3"
style={{ backgroundColor: "var(--blue)" }}
onClick={evt => {
evt.currentTarget.blur();

7
src/renderer/components/layout/sidebar-cluster.module.scss
View File

@ -6,7 +6,7 @@
.SidebarCluster {
display: flex;
align-items: center;
padding: 1.25rem;
padding: calc(var(--padding) * 1.2);
cursor: pointer;
&:hover {
@ -38,13 +38,12 @@
.menu {
width: 200px;
margin-top: -1.25rem;
margin-left: 1.25rem;
margin-top: -10px;
}
.avatar {
font-weight: 500;
margin-right: 1.25rem;
margin-right: calc(var(--margin) * 1.5);
}
.loadingAvatar {

12
src/renderer/components/layout/top-bar/top-bar.module.scss
View File

@ -24,18 +24,18 @@
-webkit-app-region: no-drag;
&:first-of-type {
padding-left: 1.5rem;
padding-left: calc(var(--padding) * 2);
& > *:not(:empty) {
margin-right: 1rem;
margin-right: calc(var(--padding) * 1.5);
}
}
&:last-of-type {
padding-right: 1.5rem;
padding-right: calc(var(--padding) * 2);
& > *:not(:empty) {
margin-left: 1rem;
margin-left: calc(var(--padding) * 1.5);
}
}
}
@ -64,7 +64,7 @@
.windowButtons {
display: flex;
margin-right: -1.5rem;
margin-right: calc(var(--padding) * -2);
> div {
@apply flex items-center justify-center;
@ -82,7 +82,7 @@
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 1.1rem;
margin-right: calc(var(--padding) * -1.5);
color: var(--textColorAccent);
svg {

4
src/renderer/components/switch/switch.module.scss
View File

@ -6,7 +6,7 @@
@import "../../components/mixins.scss";
.Switch {
--thumb-size: 2rem;
--thumb-size: 20px;
--thumb-color: hsl(0 0% 100%);
--thumb-color-highlight: hsl(0 0% 100% / 25%);
@ -66,7 +66,7 @@
}
&:not(:disabled):hover::before {
--hover-highlight-size: .5rem;
--hover-highlight-size: .3rem;
}
&:checked {