status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #17 from nimbus-gui/ra.add-format-check-in-ci 

ci: add step for checking formatting
This commit is contained in:
Rickard Andersson 2023-09-26 12:50:48 +03:00 committed by GitHub
parent 1d0f9ad019 7e69eafec9
commit 29952fb285
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 216 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/ui-tests.yaml vendored
View File

@ -55,6 +55,8 @@ jobs:
${{ runner.os }}-yarn-v3
- name: Build
run: yarn build
- name: Check formatting
run: yarn format:check
- name: Pull Vercel configuration
run: yarn vercel pull --yes --token ${{ secrets.vercel_token }}
- name: Build Vercel bundle

4
package.json
View File

@ -10,7 +10,9 @@
"preview": "vite preview",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
"test-storybook": "test-storybook"
"test-storybook": "test-storybook",
"format:check": "yarn prettier --check src",
"format": "yarn prettier --write src"
},
"resolutions": {
"@tamagui/web": "1.36.4",

2
src/App.css
View File

@ -1,3 +1,3 @@
#root {
width: 100%;
}
}

36
src/components/General/BreadcrumbBar/BreadcrumbBar.css
View File

@ -1,30 +1,30 @@
.breadcrumb-bar-nav {
width: 100%;
flex: 1 1 100%;
padding: 1rem 2rem;
margin: 0.5rem;
width: 100%;
flex: 1 1 100%;
padding: 1rem 2rem;
margin: 0.5rem;
}
.breadcrumb-bar-ul {
display: flex;
display: flex;
}
.breadcrumb-bar-li {
color: #647084;
font-weight: 500;
position: relative;
color: #647084;
font-weight: 500;
position: relative;
}
.breadcrumb-bar-li:last-child {
color: #09101C;
.breadcrumb-bar-li:last-child {
color: #09101c;
}
.breadcrumb-bar-li::after {
display: inline-block;
content: url("./icons/chevron.svg");
color: #09101C;
position: absolute;
top: 2px;
left: 100%;
transform: translateX(-50%);
display: inline-block;
content: url('./icons/chevron.svg');
color: #09101c;
position: absolute;
top: 2px;
left: 100%;
transform: translateX(-50%);
}
.breadcrumb-bar-li:last-child::after {
display: none;
display: none;
}

58
src/components/General/ColorPicker/ColorPicker.css
View File

@ -1,40 +1,40 @@
.color-picker-button {
width: 40px;
height: 40px;
border-radius: 50%;
margin-bottom: 10px;
margin-right: 10px;
position: relative;
outline: none;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
margin-bottom: 10px;
margin-right: 10px;
position: relative;
outline: none;
border: none;
}
.color-picker-button::before ,
.color-picker-button::after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform-origin: center;
opacity: 0;
transition: 120ms opacity ease-in-out;
.color-picker-button::before,
.color-picker-button::after {
display: block;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: center;
opacity: 0;
transition: 120ms opacity ease-in-out;
}
.color-picker-button::before {
content: "\2713";
font-size: 25px;
color: white;
content: '\2713';
font-size: 25px;
color: white;
}
.color-picker-button::after {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid currentColor;
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid currentColor;
}
.color-picker-button:focus::before,
.color-picker-button:focus::after,
.color-picker-button:focus::before,
.color-picker-button:focus::after,
.color-picker-button:hover::after {
opacity: 1;
opacity: 1;
}

18
src/components/General/CreateAvatar/CreateAvatar.css
View File

@ -1,10 +1,10 @@
.device-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
margin-right: -30px;
}
width: 80px;
height: 80px;
border-radius: 50%;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
margin-right: -30px;
}

3
src/components/General/EmojiPickerDialog.stories.tsx
View File

@ -1,7 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react'
import EmojiPickerDialog from './EmojiPickerDialog'
const meta = {
title: 'General/EmojiPickerDialog',
component: EmojiPickerDialog,
@ -15,5 +14,5 @@ export default meta
type Story = StoryObj<typeof meta>
export const DefaultColors: Story = {
args: {emojiStyle: 'TWITTER'},
args: { emojiStyle: 'TWITTER' },
}

10
src/components/General/LabelInputField.css
View File

@ -1,6 +1,6 @@
.input-container {
background-color: #fff;
border-radius: 12px;
margin-top: 8px;
width: 100%;
}
background-color: #fff;
border-radius: 12px;
margin-top: 8px;
width: 100%;
}

42
src/components/General/QuickStartBar/QuickStartBar.css
View File

@ -1,28 +1,28 @@
.quick-start-bar {
border-radius: 18px;
border: 1px solid rgba(0, 0, 0, 0.10);
opacity: 0.949999988079071;
background: rgba(255, 255, 255, 0.70);
backdrop-filter: blur(15px);
display: flex;
align-items: center;
width: 66%;
margin: 0 auto;
padding: 12px 1rem;
position: relative;
top: -18vh;
border-radius: 18px;
border: 1px solid rgba(0, 0, 0, 0.1);
opacity: 0.949999988079071;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(15px);
display: flex;
align-items: center;
width: 66%;
margin: 0 auto;
padding: 12px 1rem;
position: relative;
top: -18vh;
}
.quick-start-bar > div {
width: 100%;
border-radius: 24px;
background: rgba(100, 112, 132, 0.05);
margin-left: 1rem;
padding: 1rem 0.5rem;
width: 100%;
border-radius: 24px;
background: rgba(100, 112, 132, 0.05);
margin-left: 1rem;
padding: 1rem 0.5rem;
}
.quick-start-bar ul {
display: flex;
.quick-start-bar ul {
display: flex;
}
.quick-start-bar ul li {
color: #0D1625;
font-size: 13px;
color: #0d1625;
font-size: 13px;
}

2
src/components/General/TagContainer.css
View File

@ -1,3 +1,3 @@
/* .tag-container div:nth-child(1) {
background:transparent;
} */
} */

15
src/components/Logos/NimbusLogo.css
View File

@ -1,10 +1,9 @@
.nimbus-logomark{
display: flex;
justify-content: center;
align-items: center;
.nimbus-logomark {
display: flex;
justify-content: center;
align-items: center;
}
.nimbus-logomark svg {
width: auto;
height: 24px;
}
width: auto;
height: 24px;
}

2
src/components/PageWrappers/PageWrapperShadow.tsx
View File

@ -28,7 +28,7 @@ const PageWrapperShadow = ({
<div className="container-inner">{children}</div>
</div>
</section>
<section className="layout-right">
<div className="image-container">
<img

114
src/components/PageWrappers/layout.css
View File

@ -1,85 +1,85 @@
.layout{
background-color: #FFF;
height: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
overflow: hidden;
.layout {
background-color: #fff;
height: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.layout::after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255,255,255,0) 50%);
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
}
.layout-left {
flex: 0 0 55%;
max-width: 55%;
z-index: 2;
flex: 0 0 55%;
max-width: 55%;
z-index: 2;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: end;
height: 100%;
/* padding: 70px 0 0; */
display: flex;
flex-wrap: wrap;
justify-content: end;
height: 100%;
/* padding: 70px 0 0; */
}
.container-inner {
max-width: 70%;
flex: 1 0 70%;
display: flex;
flex-direction: column;
max-width: 70%;
flex: 1 0 70%;
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
flex-grow: 1;
}
/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
.layout-right {
flex: 0 0 45%;
max-width: 45%;
z-index: 0;
flex: 0 0 45%;
max-width: 45%;
z-index: 0;
}
.image-container {
height: 100%;
position: relative;
overflow: hidden;
color: #FFF;
height: 100%;
position: relative;
overflow: hidden;
color: #fff;
}
.image-container::before {
display: block;
content: "";
padding-bottom: 100%;
display: block;
content: '';
padding-bottom: 100%;
}
.image-container::after {
display: block;
content: "";
position: absolute;
top: 0;
left: -1%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0));
display: block;
content: '';
position: absolute;
top: 0;
left: -1%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0));
}
.image-container .background-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 140%;
width: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 140%;
width: auto;
}
.image-container .nimbus-logomark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image-container .nimbus-logomark svg {
height: 73px;
height: 73px;
}

39
src/index.css
View File

@ -1,41 +1,41 @@
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-Light.ttf") format("truetype");
font-family: 'Inter';
src: url('./Inter-font/Inter-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-Regular.ttf") format("truetype");
font-family: 'Inter';
src: url('./Inter-font/Inter-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-Medium.ttf") format("truetype");
font-family: 'Inter';
src: url('./Inter-font/Inter-Medium.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-SemiBold.ttf") format("truetype");
font-family: 'Inter';
src: url('./Inter-font/Inter-SemiBold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-Bold.ttf") format("truetype");
font-family: 'Inter';
src: url('./Inter-font/Inter-Bold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("./Inter-font/Inter-Black.ttf") format("truetype");
font-family: 'Inter';
src: url('./Inter-font/Inter-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
@ -45,11 +45,11 @@
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(0, 0, 0, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
@ -65,7 +65,12 @@ body {
min-width: 320px;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.2;
font-weight: 700;
}
@ -87,7 +92,7 @@ button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
ul{
ul {
list-style-type: none;
padding: 0;
margin: 0;
@ -98,7 +103,7 @@ ul li {
}
@media (prefers-color-scheme: light) {
:root {
color: #09101C;
color: #09101c;
background-color: #ffffff;
}
a:hover {

2
src/pages/DeviceSyncStatus/DeviceSync.stories.tsx
View File

@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react'
import DeviceSyncStatus from './DeviceSyncStatus'
const meta = {

5
src/pages/LandingPage/LandingPage.css
View File

@ -1,4 +1,3 @@
.landing-page {
height: 100%;
.landing-page {
height: 100%;
}

6
src/pages/PairDevice/SyncStatus.tsx
View File

@ -48,8 +48,8 @@ const SyncStatus = ({
const timer = convertSecondsToTimerFormat(elapsedTime)
const connectViaIpHandler = () => {
navigate('/connect-device');
};
navigate('/connect-device')
}
return (
<YStack space={'$2'}>
@ -91,7 +91,7 @@ const SyncStatus = ({
)}
{isAwaitingPairing && (
<XStack>
<Button icon={<Icon src={ConnectionIcon} />} size={40} onPress={connectViaIpHandler} >
<Button icon={<Icon src={ConnectionIcon} />} size={40} onPress={connectViaIpHandler}>
Connect via IP
</Button>
</XStack>

15
src/pages/ValidatorOnboarding/Activation/Activation.stories.ts
View File

@ -20,22 +20,21 @@ export const Default: Story = {
args: {
validatorsValue: '4',
executionSyncStatus1: {
text: "Execution Sync Status",
text: 'Execution Sync Status',
isGaugeIncluded: true,
gaugeColor: "$blue",
gaugeColor: '$blue',
gaugeSynced: 123.524,
gaugeTotal: 172.503,
},
executionSyncStatus2: {
text: "Execution Sync Status",
text: 'Execution Sync Status',
isGaugeIncluded: true,
gaugeColor: "$red",
gaugeColor: '$red',
gaugeSynced: 123.524,
gaugeTotal: 172.503,
},
currentAPRValue: "4.40%",
estimatedActivationTimeValue: "32 Days",
validatorQueueValue: "92603",
currentAPRValue: '4.40%',
estimatedActivationTimeValue: '32 Days',
validatorQueueValue: '92603',
},
}

16
src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
View File

@ -1,20 +1,20 @@
.custom-step {
background-color: #ffffff;
}
div[class*="StepMain-"] {
div[class*='StepMain-'] {
align-items: start;
}
div[class*="LabelContainer-"] span[class*="Label-"] {
div[class*='LabelContainer-'] span[class*='Label-'] {
text-align: initial;
text-transform: uppercase;
font-family: "Inter", sans-serif;
font-family: 'Inter', sans-serif;
}
div[class*="ConnectorContainer-"] {
div[class*='ConnectorContainer-'] {
right: unset;
left: calc(-100% + 28px);
width: 100%;
}
span[class*="Connector-"] {
span[class*='Connector-'] {
position: relative;
z-index: -1;
}
@ -55,7 +55,7 @@ span[class*="Connector-"] {
top: calc(100% + 4px);
left: 8px;
font-size: 12px;
font-family: "Inter", sans-serif;
color: #A2A9B0;
font-family: 'Inter', sans-serif;
color: #a2a9b0;
width: max-content;
}
}

8
src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.module.css
View File

@ -31,7 +31,7 @@
width: 100%;
font-size: 16px;
color: rgb(13, 22, 37);
font-family: "Inter", sans-serif;
font-family: 'Inter', sans-serif;
}
.input-wrapper {
@ -42,9 +42,9 @@
position: absolute;
left: 15px;
transform: translateY(-50%);
pointer-events: none;
pointer-events: none;
z-index: 2;
color: #0D162566;
color: #0d162566;
top: 48%;
}
@ -78,4 +78,4 @@
.suggestion-list::-webkit-scrollbar-thumb:hover {
background-color: transparent;
}
}

5
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.stories.tsx
View File

@ -18,6 +18,9 @@ type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {
color: 'orange', synced: 140000, total: 200000, title: 'Synced Files'
color: 'orange',
synced: 140000,
total: 200000,
title: 'Synced Files',
},
}

10
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.stories.tsx
View File

@ -4,16 +4,16 @@ import ActivationValidatorSetup from './ActivationValidatorSetup'
import { withRouter } from 'storybook-addon-react-router-v6'
const meta = {
title: 'ValidatorOnboarding/ActivationValidatorSetup',
component: ActivationValidatorSetup,
title: 'ValidatorOnboarding/ActivationValidatorSetup',
component: ActivationValidatorSetup,
tags: ['autodocs'],
decorators: [withRouter()],
tags: ['autodocs'],
decorators: [withRouter()],
} satisfies Meta<typeof ActivationValidatorSetup>
export default meta
type Story = StoryObj<typeof meta>
export const Default: Story = {
args: { },
args: {},
}

4
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
View File

@ -24,8 +24,8 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
border: isComingSoon
? '1px solid #F5F6F8'
: isSelected
? '1px solid #2A4AF5'
: '1px solid #DCE0E5',
? '1px solid #2A4AF5'
: '1px solid #DCE0E5',
borderRadius: '16px',
padding: '12px 16px',
width: '19%',

6
src/pages/ValidatorOnboarding/layoutGradient.css
View File

@ -8,11 +8,11 @@
.gradient-wrapper:after {
display: block;
content: "";
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255,255,255,0) 50%);
}
background: linear-gradient(to bottom, rgba(113, 64, 253, 0.075) 15%, rgba(255, 255, 255, 0) 50%);
}