Skip to content

Commit ad796a9

Browse files
tot-ratot-ra
committed
added logo, reduced paddings
1 parent 9ed2571 commit ad796a9

File tree

8 files changed

+264
-34
lines changed

8 files changed

+264
-34
lines changed

‎CHANGELOG.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
## [1.2.5] - 2021-06-02
1111

1212
### Added
13-
1413
- Service url storage to emulate managed federation
14+
- logo to navigation
15+
- dockerized light mode for faster UI development (see README)
16+
17+
### Changed
18+
- reduced paddings in UI
1519

1620
## [1.2.4] - 2021-05-25
1721

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,9 @@ Migrations are done using knex
106106
![](https://app.lucidchart.com/publicSegments/view/74fc86d4-671e-4644-a198-41d7ff681cae/image.png)
107107

108108
## Development
109+
109110
### Dockerized mode
111+
110112
```
111113
nvm use
112114
npm install
@@ -115,6 +117,7 @@ docker-compose up
115117
```
116118

117119
### Running in light mode
120+
118121
To have fast iteration of working on UI changes, you can avoid running node service in docker, and run only mysql & redis
119122

120123
```

‎client/components/TabPanel.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ function TabPanel(props) {
1515
{...other}
1616
>
1717
{value === index && (
18-
<Box p={3} key={index}>
18+
<div key={index}>
1919
{children}
20-
</Box>
20+
</div>
2121
)}
2222
</div>
2323
);

‎client/components/TopMenu.jsx

+25-21
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
1-
import { AppBar, Tab, Tabs } from '@material-ui/core';
1+
import {AppBar, Tab, Tabs} from '@material-ui/core';
22
import React from 'react';
3+
import ReactLogo from './logo';
4+
import {useHistory} from 'react-router-dom';
35

4-
import { useHistory } from 'react-router-dom';
5-
6-
export default ({ UITabs, selectedTab, handleChange }) => {
6+
export default ({UITabs, selectedTab, handleChange}) => {
77
let history = useHistory();
88

99
return (
10-
<AppBar position="static">
11-
<Tabs
12-
value={selectedTab}
13-
onChange={handleChange}
14-
aria-label="simple tabs example"
15-
>
16-
{/*<React.Fragment>*/}
17-
{UITabs.map((tab, i) => (
18-
<Tab
19-
key={i}
20-
onClick={() => history.push(tab.href)}
21-
label={tab.Title}
22-
/>
23-
))}
24-
{/*</React.Fragment>*/}
25-
</Tabs>
26-
</AppBar>
10+
<div style={{display: "flex"}}>
11+
<ReactLogo/>
12+
<AppBar position="static" color="primary" style={{backgroundColor:"#2b8223"}}>
13+
<Tabs
14+
value={selectedTab}
15+
onChange={handleChange}
16+
aria-label="simple tabs example"
17+
>
18+
{/*<React.Fragment>*/}
19+
{UITabs.map((tab, i) => (
20+
<Tab
21+
key={i}
22+
onClick={() => history.push(tab.href)}
23+
label={tab.Title}
24+
/>
25+
))}
26+
{/*</React.Fragment>*/}
27+
</Tabs>
28+
</AppBar>
29+
</div>
30+
2731
);
2832
};

‎client/components/logo.jsx

+212
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
import React from 'react';
2+
3+
export default function Logo() {
4+
return (
5+
<div>
6+
<svg version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="45" height="45">
7+
<defs>
8+
<path d="M0 0L640 0L640 640L0 640L0 0Z" id="aACFKWqId"></path>
9+
<path d="M90.39 455.37L309.93 68.35" id="abQRk6fPB"></path>
10+
<path d="M312.15 593.54L539.33 180.06" id="c43cxpRdDt"></path>
11+
<path d="M315.05 324.61L90.39 174.35" id="e1RwQ287qq"></path>
12+
<path d="M537.24 450.83L312.15 321.52" id="aOTTscD3s"></path>
13+
<path d="M539.33 173.42L312.15 66.26" id="a5hX0shUV9"></path>
14+
<path d="M312.15 596.86L312.15 328.8" id="f4aRsobM8F"></path>
15+
<path d="M312.15 324.61L91.71 450.83" id="d4df3gG5KI"></path>
16+
<path d="M90.39 176.17L309.93 66.26" id="a3f1xiOUe"></path>
17+
<path d="M539.33 450.83L539.33 180.06" id="j2kppAtKaC"></path>
18+
<path d="M312.15 596.86L539.33 450.83" id="fmMlTgAod"></path>
19+
<path d="M90.39 450.83L90.39 176.17" id="a4gSTNVKSn"></path>
20+
<path d="M312.15 593.54L90.39 455.37" id="b3WdzhfVx"></path>
21+
<path
22+
d="M360.8 63.37C360.8 89.94 339 111.51 312.15 111.51C285.3 111.51 263.5 89.94 263.5 63.37C263.5 36.8 285.3 15.22 312.15 15.22C339 15.22 360.8 36.8 360.8 63.37Z"
23+
id="b5rcw9cXTN"></path>
24+
<path d="M300.64 63.37L288.94 52.03L312.34 52.03L335.74 52.03L324.04 63.37L312.34 74.7L300.64 63.37Z" id="c1R0nOtLXZ"></path>
25+
<path
26+
d="M360.99 593.54C360.99 620.11 339.19 641.69 312.34 641.69C285.49 641.69 263.7 620.11 263.7 593.54C263.7 566.97 285.49 545.4 312.34 545.4C339.19 545.4 360.99 566.97 360.99 593.54Z"
27+
id="g59tMZda0"></path>
28+
<path d="M288.75 591.21L288.75 587.03L335.55 587.03L335.55 591.21L288.75 591.21Z" id="a9tGUK1OE"></path>
29+
<path d="M288.75 601.04L288.75 596.86L335.55 596.86L335.55 601.04L288.75 601.04Z" id="c5b12KQzOZ"></path>
30+
<path
31+
d="M585.89 176.17C585.89 202.74 564.09 224.31 537.24 224.31C510.39 224.31 488.59 202.74 488.59 176.17C488.59 149.59 510.39 128.02 537.24 128.02C564.09 128.02 585.89 149.59 585.89 176.17Z"
32+
id="baUtSPS7w"></path>
33+
<path d="M562.73 187.5L562.73 191.68L515.93 191.68L515.93 187.5L562.73 187.5Z" id="i125F4EsAe"></path>
34+
<path d="M285.75 67.55L285.75 63.37L339.81 63.37L339.81 67.55L285.75 67.55Z" id="a1nj584xmL"></path>
35+
<path d="M285.12 60.89L285.12 56.7L339.18 56.7L339.18 60.89L285.12 60.89Z" id="a6JHlaw3Z7"></path>
36+
<path d="M527.63 176.17L515.93 164.83L539.33 164.83L562.73 164.83L551.03 176.17L539.33 187.5L527.63 176.17Z" id="hE0r2Q1TQ"></path>
37+
<path
38+
d="M139.04 176.17C139.04 202.74 117.24 224.31 90.39 224.31C63.54 224.31 41.75 202.74 41.75 176.17C41.75 149.59 63.54 128.02 90.39 128.02C117.24 128.02 139.04 149.59 139.04 176.17Z"
39+
id="iDavGLfO"></path>
40+
<path
41+
d="M587.98 450.83C587.98 477.41 566.18 498.98 539.33 498.98C512.48 498.98 490.69 477.41 490.69 450.83C490.69 424.26 512.48 402.69 539.33 402.69C566.18 402.69 587.98 424.26 587.98 450.83Z"
42+
id="jPMSGJE9O"></path>
43+
<path d="M68.31 173.42L68.31 169.24L115.11 169.24L115.11 173.42L68.31 173.42Z" id="b5F6Ihm6"></path>
44+
<path d="M73.45 192.44L70.83 189.18L107.34 159.89L109.96 163.16L73.45 192.44Z" id="b2Hg1A9GwM"></path>
45+
<path d="M68.31 184.24L68.31 180.06L115.11 180.06L115.11 184.24L68.31 184.24Z" id="cqhQeCAhb"></path>
46+
<path
47+
d="M140.36 450.83C140.36 477.41 118.56 498.98 91.71 498.98C64.86 498.98 43.06 477.41 43.06 450.83C43.06 424.26 64.86 402.69 91.71 402.69C118.56 402.69 140.36 424.26 140.36 450.83Z"
48+
id="aalbRYX86"></path>
49+
<path d="M549.87 427.43L554.05 427.43L554.05 474.23L549.87 474.23L549.87 427.43Z" id="am8voaChl"></path>
50+
<path
51+
d="M362.58 324.61C362.58 351.19 340.78 372.76 313.93 372.76C287.09 372.76 265.29 351.19 265.29 324.61C265.29 298.04 287.09 276.47 313.93 276.47C340.78 276.47 362.58 298.04 362.58 324.61Z"
52+
id="a14pdItL6b"></path>
53+
<path d="M524.61 431.53L549.87 431.53L549.87 470.47L524.61 470.47L524.61 431.53Z" id="b7JJyZDlAE"></path>
54+
<path
55+
d="M101.12 432.09C101.12 437.28 96.9 441.5 91.71 441.5C86.52 441.5 82.31 437.28 82.31 432.09C82.31 426.9 86.52 422.69 91.71 422.69C96.9 422.69 101.12 426.9 101.12 432.09Z"
56+
id="fuiZXz5Im"></path>
57+
<path
58+
d="M94.26 459.96C89.26 461.36 84.06 458.45 82.66 453.45C81.25 448.45 84.17 443.26 89.16 441.85C94.16 440.44 99.36 443.36 100.76 448.35C102.17 453.35 99.25 458.55 94.26 459.96Z"
59+
id="a115Mh34n6"></path>
60+
<path
61+
d="M101.12 469.58C101.12 474.77 96.9 478.98 91.71 478.98C86.52 478.98 82.31 474.77 82.31 469.58C82.31 464.38 86.52 460.17 91.71 460.17C96.9 460.17 101.12 464.38 101.12 469.58Z"
62+
id="a4pBNc1nkM"></path>
63+
<path d="M328.07 321.52L341.05 334.09L315.09 334.09L289.13 334.09L302.11 321.52L315.09 308.94L328.07 321.52Z" id="d2erpfESzn"></path>
64+
<path d="M298.5 320.17L298.5 315.99L335.55 315.99L335.55 320.17L298.5 320.17Z" id="a2Wf92zTkv"></path>
65+
<path d="M286.9 328.8L286.9 324.61L340.96 324.61L340.96 328.8L286.9 328.8Z" id="cuV9Yd1bo"></path>
66+
</defs>
67+
<g>
68+
<g>
69+
<g>
70+
<use href="#aACFKWqId" opacity="1" fill="#ffffff" fillOpacity="1"></use>
71+
</g>
72+
<g>
73+
<g>
74+
<use href="#abQRk6fPB" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="25" strokeOpacity="1"></use>
75+
</g>
76+
</g>
77+
<g>
78+
<g>
79+
<use href="#c43cxpRdDt" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="25" strokeOpacity="1"></use>
80+
</g>
81+
</g>
82+
<g>
83+
<g>
84+
<use href="#e1RwQ287qq" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="25" strokeOpacity="1"></use>
85+
</g>
86+
</g>
87+
<g>
88+
<g>
89+
<use href="#aOTTscD3s" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="25" strokeOpacity="1"></use>
90+
</g>
91+
</g>
92+
<g>
93+
<g>
94+
<use href="#a5hX0shUV9" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="30" strokeOpacity="1"></use>
95+
</g>
96+
</g>
97+
<g>
98+
<g>
99+
<use href="#f4aRsobM8F" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="25" strokeOpacity="1"></use>
100+
</g>
101+
</g>
102+
<g>
103+
<g>
104+
<use href="#d4df3gG5KI" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="25" strokeOpacity="1"></use>
105+
</g>
106+
</g>
107+
<g>
108+
<g>
109+
<use href="#a3f1xiOUe" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="30" strokeOpacity="1"></use>
110+
</g>
111+
</g>
112+
<g>
113+
<g>
114+
<use href="#j2kppAtKaC" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="30" strokeOpacity="1"></use>
115+
</g>
116+
</g>
117+
<g>
118+
<g>
119+
<use href="#fmMlTgAod" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="30" strokeOpacity="1"></use>
120+
</g>
121+
</g>
122+
<g>
123+
<g>
124+
<use href="#a4gSTNVKSn" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="30" strokeOpacity="1"></use>
125+
</g>
126+
</g>
127+
<g>
128+
<g>
129+
<use href="#b3WdzhfVx" opacity="1" fillOpacity="0" stroke="#1e2616" strokeWidth="30" strokeOpacity="1"></use>
130+
</g>
131+
</g>
132+
<g>
133+
<use href="#b5rcw9cXTN" opacity="1" fill="#0a8400" fillOpacity="1"></use>
134+
</g>
135+
<g>
136+
<use href="#c1R0nOtLXZ" opacity="1" fill="#ffffff" fillOpacity="1"></use>
137+
</g>
138+
<g>
139+
<use href="#g59tMZda0" opacity="1" fill="#0a8400" fillOpacity="1"></use>
140+
</g>
141+
<g>
142+
<use href="#a9tGUK1OE" opacity="1" fill="#ffffff" fillOpacity="1"></use>
143+
</g>
144+
<g>
145+
<use href="#c5b12KQzOZ" opacity="1" fill="#ffffff" fillOpacity="1"></use>
146+
</g>
147+
<g>
148+
<use href="#baUtSPS7w" opacity="1" fill="#0a8400" fillOpacity="1"></use>
149+
</g>
150+
<g>
151+
<use href="#i125F4EsAe" opacity="1" fill="#ffffff" fillOpacity="1"></use>
152+
</g>
153+
<g>
154+
<use href="#a1nj584xmL" opacity="1" fill="#0a8400" fillOpacity="1"></use>
155+
</g>
156+
<g>
157+
<use href="#a6JHlaw3Z7" opacity="1" fill="#0a8400" fillOpacity="1"></use>
158+
</g>
159+
<g>
160+
<use href="#hE0r2Q1TQ" opacity="1" fill="#ffffff" fillOpacity="1"></use>
161+
</g>
162+
<g>
163+
<use href="#iDavGLfO" opacity="1" fill="#0a8400" fillOpacity="1"></use>
164+
</g>
165+
<g>
166+
<use href="#jPMSGJE9O" opacity="1" fill="#0a8400" fillOpacity="1"></use>
167+
</g>
168+
<g>
169+
<use href="#b5F6Ihm6" opacity="1" fill="#ffffff" fillOpacity="1"></use>
170+
</g>
171+
<g>
172+
<use href="#b2Hg1A9GwM" opacity="1" fill="#ffffff" fillOpacity="1"></use>
173+
</g>
174+
<g>
175+
<use href="#cqhQeCAhb" opacity="1" fill="#ffffff" fillOpacity="1"></use>
176+
</g>
177+
<g>
178+
<use href="#aalbRYX86" opacity="1" fill="#0a8400" fillOpacity="1"></use>
179+
</g>
180+
<g>
181+
<use href="#am8voaChl" opacity="1" fill="#ffffff" fillOpacity="1"></use>
182+
</g>
183+
<g>
184+
<use href="#a14pdItL6b" opacity="1" fill="#0a8400" fillOpacity="1"></use>
185+
</g>
186+
<g>
187+
<use href="#b7JJyZDlAE" opacity="1" fill="#ffffff" fillOpacity="1"></use>
188+
</g>
189+
<g>
190+
<use href="#fuiZXz5Im" opacity="1" fill="#ffffff" fillOpacity="1"></use>
191+
</g>
192+
<g>
193+
<use href="#a115Mh34n6" opacity="1" fill="#ffffff" fillOpacity="1"></use>
194+
</g>
195+
<g>
196+
<use href="#a4pBNc1nkM" opacity="1" fill="#ffffff" fillOpacity="1"></use>
197+
</g>
198+
<g>
199+
<use href="#d2erpfESzn" opacity="1" fill="#ffffff" fillOpacity="1"></use>
200+
</g>
201+
<g>
202+
<use href="#a2Wf92zTkv" opacity="1" fill="#0a8400" fillOpacity="1"></use>
203+
</g>
204+
<g>
205+
<use href="#cuV9Yd1bo" opacity="1" fill="#0a8400" fillOpacity="1"></use>
206+
</g>
207+
</g>
208+
</g>
209+
</svg>
210+
</div>
211+
);
212+
}

‎client/schema/service-details/DeactivateSchemaButton.jsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import React from 'react';
2-
import { useMutation } from '@apollo/client';
3-
import { Button } from '@material-ui/core';
2+
import {useMutation} from '@apollo/client';
3+
import {Button} from '@material-ui/core';
44
import DeleteIcon from '@material-ui/icons/Delete';
55
import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
66

77
import {
88
DEACTIVATE_SCHEMA_ENTRY,
99
ACTIVATE_SCHEMA_ENTRY,
1010
} from '../../utils/mutations';
11-
import { useParams } from 'react-router-dom';
11+
import {useParams} from 'react-router-dom';
1212

13-
const DeactivateSchemaButton = ({ schema }) => {
14-
const { serviceName } = useParams();
13+
const DeactivateSchemaButton = ({schema}) => {
14+
const {serviceName} = useParams();
1515
const [
1616
deactivateSchema,
17-
{ loading: deleting, error: deleteError },
17+
{loading: deleting, error: deleteError},
1818
] = useMutation(DEACTIVATE_SCHEMA_ENTRY);
1919

2020
const [
2121
activateSchema,
22-
{ loading: activating, error: activateError },
22+
{loading: activating, error: activateError},
2323
] = useMutation(ACTIVATE_SCHEMA_ENTRY);
2424

2525
const deleteErrorMessage = deleteError ? deleteError.message : null;
@@ -32,6 +32,7 @@ const DeactivateSchemaButton = ({ schema }) => {
3232

3333
{schema.isActive && (
3434
<Button
35+
size={"small"}
3536
variant="contained"
3637
color="secondary"
3738
disabled={deleting}
@@ -43,12 +44,13 @@ const DeactivateSchemaButton = ({ schema }) => {
4344
});
4445
}}
4546
>
46-
<DeleteIcon />
47+
<DeleteIcon/>
4748
Deactivate
4849
</Button>
4950
)}
5051
{!schema.isActive && (
5152
<Button
53+
size={"small"}
5254
variant="contained"
5355
color="primary"
5456
disabled={activating}
@@ -60,7 +62,7 @@ const DeactivateSchemaButton = ({ schema }) => {
6062
});
6163
}}
6264
>
63-
<DeleteOutlinedIcon color="white" />
65+
<DeleteOutlinedIcon color="white"/>
6466
Activate
6567
</Button>
6668
)}

‎client/schema/service-details/VersionDetails.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const VersionDetails = () => {
5959

6060
if (commitLink) {
6161
commitButton = (
62-
<Button href={data.schema.containers[0].commitLink}>
62+
<Button size={"small"} href={data.schema.containers[0].commitLink}>
6363
<CallMergeIcon /> Check commit
6464
</Button>
6565
);
@@ -81,10 +81,12 @@ const VersionDetails = () => {
8181
</VersionHeaderTime>
8282
{urlInfo}
8383
</div>
84+
<div>
8485
<ButtonGroup>
8586
<DeactivateButton schema={data.schema} />
8687
{commitButton}
8788
</ButtonGroup>
89+
</div>
8890
</VersionHeader>
8991

9092
<Tabs

0 commit comments

Comments
 (0)