Skip to content

Commit 5ee6926

Browse files
timea-solidtimea-solid
committed
improved styles and tests
1 parent f42a6c9 commit 5ee6926

6 files changed

Lines changed: 118 additions & 118 deletions

File tree

‎src/style.js‎

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ import styleConstants from './styleConstants'
88
export const style = { // styleModule
99

1010
checkboxStyle: 'color: black; font-size: 100%; padding-left: 0.5 em; padding-right: 0.5 em;',
11-
checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em',
11+
checkboxInputStyle: 'font-size: 150%; height: 1.2em; width: 1.2em; background-color: #eef; border-radius:0.2em; margin: 0.1em;',
1212

1313
fieldLabelStyle: 'color: #3B5998; text-decoration: none;',
1414
formSelectStyle:
15-
'background-color: #eef; padding: 0.5em; border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.4em;',
15+
'background-color: #eef; padding: 0.5em; border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.4em;',
1616
textInputStyle:
17-
'background-color: #eef; padding: 0.5em; border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.4em;',
17+
'background-color: #eef; padding: 0.5em; border: .05em solid #88c; border-radius:0.2em; font-size: 100%; margin:0.4em;',
1818
textInputStyleUneditable: // Color difference only
19-
'background-color: white; padding: 0.5em; border: .05em solid white; border-radius:0.2em; font-size: 100%; margin:0.4em;',
19+
'background-color: white; padding: 0.5em; border: .05em solid white; border-radius:0.2em; font-size: 100%; margin:0.4em;',
2020
buttonStyle:
21-
'background-color: #fff; padding: 0.7em; border: .01em solid white; border-radius:0.2em; font-size: 100%; margin: 0.3em;', // 'background-color: #eef;
21+
'background-color: #fff; padding: 0.7em; border: .01em solid white; border-radius:0.2em; font-size: 100%; margin: 0.3em;', // 'background-color: #eef;
2222
commentStyle: 'padding: 0.7em; border: none; font-size: 100%; white-space: pre-wrap;',
2323
iconStyle: 'width: 3em; height: 3em; margin: 0.1em; border-radius: 1em;',
2424
smallButtonStyle: 'margin: 0.2em; width: 1em; height:1em;',
@@ -53,7 +53,7 @@ export const style = { // styleModule
5353
`padding-left: 2em; border: 0.2em solid ${styleConstants.formBorderColor}; border-radius: 0.2em;` // @@ pink
5454
],
5555

56-
formFieldLabelStyle: `'color: ${styleConstants.lowProfileLinkColor}; text-decoration: none;'`,
56+
formFieldLabelStyle: `color: ${styleConstants.lowProfileLinkColor}; text-decoration: none;`,
5757
formFieldNameBoxStyle: `padding: 0.3em; vertical-align: middle; width:${styleConstants.formFieldNameBoxWidth};`,
5858
multilineTextInputStyle: 'font-size:100%; white-space: pre-wrap; background-color: #eef;' +
5959
' border: 0.07em solid gray; padding: 1em 0.5em; margin: 1em 1em;',
@@ -64,64 +64,64 @@ export const style = { // styleModule
6464
linkDivStyle: 'width:2em; padding:0.5em; height: 4em;',
6565

6666
// ACL
67-
aclControlBoxContainer: 'margin: 1em',
68-
aclControlBoxHeader: 'font-size: 120%; margin: 0 0 1rem',
69-
aclControlBoxStatus: 'display: none; margin: 1rem 0',
70-
aclControlBoxStatusRevealed: 'display: block',
71-
aclGroupContent: 'maxWidth: 650',
72-
accessGroupList: 'display: grid; grid-template-columns: 1fr; margin: 1em; width: 100%',
73-
accessGroupListItem: 'display: grid; grid-template-columns: 100px auto 30%',
74-
defaultsController: 'display: flex',
75-
defaultsControllerNotice: 'color: #888; flexGrow: 1; fontSize: 80%',
76-
bigButton: 'background-color: white; border: 0.1em solid #888; border-radius: 0.3em; max-width: 50%; padding-bottom: 1em; padding-top: 1em',
77-
group: 'color: #888',
78-
group1: 'color: green',
79-
group2: 'color: #cc0',
80-
group3: 'color: orange',
81-
group5: 'color: red',
82-
group9: 'color: blue',
83-
group13: 'color: purple',
84-
85-
trustedAppAddApplicationsTable: 'background-color: #eee',
86-
trustedAppCancelButton: 'float: right',
87-
trustedAppControllerI: 'border-color: orange; borderRadius: 1em; borderWidth: 0.1em',
88-
temporaryStatusInit: 'background: green',
89-
temporaryStatusEnd: 'background: transparent; transition: background 5s linear',
67+
aclControlBoxContainer: 'margin: 1em;',
68+
aclControlBoxHeader: 'font-size: 120%; margin: 0 0 1rem;',
69+
aclControlBoxStatus: 'display: none; margin: 1rem 0;',
70+
aclControlBoxStatusRevealed: 'display: block;',
71+
aclGroupContent: 'maxWidth: 650;',
72+
accessGroupList: 'display: grid; grid-template-columns: 1fr; margin: 1em; width: 100%;',
73+
accessGroupListItem: 'display: grid; grid-template-columns: 100px auto 30%;',
74+
defaultsController: 'display: flex;',
75+
defaultsControllerNotice: 'color: #888; flexGrow: 1; fontSize: 80%;',
76+
bigButton: 'background-color: white; border: 0.1em solid #888; border-radius: 0.3em; max-width: 50%; padding-bottom: 1em; padding-top: 1em;',
77+
group: 'color: #888;',
78+
group1: 'color: green;',
79+
group2: 'color: #cc0;',
80+
group3: 'color: orange;',
81+
group5: 'color: red;',
82+
group9: 'color: blue;',
83+
group13: 'color: purple;',
84+
85+
trustedAppAddApplicationsTable: 'background-color: #eee;',
86+
trustedAppCancelButton: 'float: right;',
87+
trustedAppControllerI: 'border-color: orange; border-radius: 1em; border-width: 0.1em;',
88+
temporaryStatusInit: 'background: green;',
89+
temporaryStatusEnd: 'background: transparent; transition: background 5s linear;',
9090

9191
// header
92-
headerUserMenuLink: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; text-decoration: none',
93-
headerUserMenuLinkHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; text-decoration: none; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
94-
headerUserMenuTrigger: 'background: none; border: 0; cursor: pointer; width: 60px; height: 60px',
95-
headerUserMenuTriggerImg: 'border-radius: 50%; height: 56px; width: 28px !important',
96-
headerUserMenuButton: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%',
97-
headerUserMenuButtonHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%)',
98-
headerUserMenuList: 'list-style: none; margin: 0; padding: 0',
99-
headerUserMenuListDisplay: 'list-style: none; margin: 0; padding: 0; display:true',
100-
headerUserMenuNavigationMenu: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: true',
101-
headerUserMenuNavigationMenuNotDisplayed: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: none',
102-
headerUserMenuListItem: 'border-bottom: solid 1px #000000',
103-
headerUserMenuPhoto: 'border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; height: 50px; width: 50px',
104-
headerBanner: 'box-shadow: 0px 1px 4px #000000; display: flex; justify-content: space-between; padding: 0 1.5em; margin-bottom: 4px',
105-
headerBannerLink: 'display: block',
106-
headerBannerRightMenu: 'display: flex',
107-
headerBannerLogin: 'margin-left: auto',
108-
allChildrenVisible: 'display:true',
109-
headerBannerUserMenu: 'border-left: solid 1px #000000; margin-left: auto',
110-
headerBannerHelpMenu: 'border-left: solid 1px #000000; margin.left: auto',
111-
headerBannerIcon: 'background-size: 65px 60px !important; height: 60px !important; width: 65px !important', // may just be 65px round($icon-size * 352 / 322);
92+
headerUserMenuLink: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; text-decoration: none;',
93+
headerUserMenuLinkHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; text-decoration: none; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%);',
94+
headerUserMenuTrigger: 'background: none; border: 0; cursor: pointer; width: 60px; height: 60px;',
95+
headerUserMenuTriggerImg: 'border-radius: 50%; height: 56px; width: 28px !important;',
96+
headerUserMenuButton: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%;',
97+
headerUserMenuButtonHover: 'background: none; border: 0; color: black; cursor: pointer; display: block; font-family: Arial; font-size: 1em; text-align: left; padding: 1em; width: 100%; background-image: linear-gradient(to right, #7C4DFF 0%, #18A9E6 50%, #01C9EA 100%);',
98+
headerUserMenuList: 'list-style: none; margin: 0; padding: 0;',
99+
headerUserMenuListDisplay: 'list-style: none; margin: 0; padding: 0; display:true;',
100+
headerUserMenuNavigationMenu: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: true;',
101+
headerUserMenuNavigationMenuNotDisplayed: 'background: white; border: solid 1px #000000; border-right: 0; position: absolute; right: 0; top: 60px; width: 200px; z-index: 1; display: none;',
102+
headerUserMenuListItem: 'border-bottom: solid 1px #000000;',
103+
headerUserMenuPhoto: 'border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: cover; height: 50px; width: 50px;',
104+
headerBanner: 'box-shadow: 0px 1px 4px #000000; display: flex; justify-content: space-between; padding: 0 1.5em; margin-bottom: 4px;',
105+
headerBannerLink: 'display: block;',
106+
headerBannerRightMenu: 'display: flex;',
107+
headerBannerLogin: 'margin-left: auto;',
108+
allChildrenVisible: 'display:true;',
109+
headerBannerUserMenu: 'border-left: solid 1px #000000; margin-left: auto;',
110+
headerBannerHelpMenu: 'border-left: solid 1px #000000; margin-left: auto;',
111+
headerBannerIcon: 'background-size: 65px 60px !important; height: 60px !important; width: 65px !important;', // may just be 65px round($icon-size * 352 / 322);
112112

113113
// footer
114-
footer: 'border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em',
114+
footer: 'border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em;',
115115

116116
// buttons
117-
primaryButton: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
118-
primaryButtonHover: 'background-color: #9f7dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
119-
primaryButtonNoBorder: 'background-color: #ffffff; color: #7c4dff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
120-
primaryButtonNoBorderHover: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
121-
secondaryButton: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
122-
secondaryButtonHover: 'background-color: #37cde6; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em;text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
123-
secondaryButtonNoBorder: 'background-color: #ffffff; color: #01c9ea; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none',
124-
secondaryButtonNoBorderHover: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out',
117+
primaryButton: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
118+
primaryButtonHover: 'background-color: #9f7dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
119+
primaryButtonNoBorder: 'background-color: #ffffff; color: #7c4dff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
120+
primaryButtonNoBorderHover: 'background-color: #7c4dff; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
121+
secondaryButton: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
122+
secondaryButtonHover: 'background-color: #37cde6; color: #ffffff; font-family: Raleway, Roboto, sans-serif;border-radius: 0.25em; border-color: #7c4dff; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
123+
secondaryButtonNoBorder: 'background-color: #ffffff; color: #01c9ea; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none;',
124+
secondaryButtonNoBorderHover: 'background-color: #01c9ea; color: #ffffff; font-family: Raleway, Roboto, sans-serif; border-radius: 0.25em; border-color: #01c9ea; border: 1px solid; cursor: pointer; font-size: .8em; text-decoration: none; padding: 0.5em 4em; transition: 0.25s all ease-in-out; outline: none; transition: 0.25s all ease-in-out;',
125125

126126
// media
127127
controlStyle: `border-radius: 0.5em; margin: 0.8em; width:${styleConstants.mediaModuleCanvasWidth}; height:${styleConstants.mediaModuleCanvasHeight};`,
@@ -137,8 +137,8 @@ export const style = { // styleModule
137137

138138
// pad
139139
notepadStyle: 'padding: 1em; overflow: auto; resize: horizontal; min-width: 40em;',
140-
upstreamStatus: 'width:50%',
141-
downstreamStatus: 'width:50%',
140+
upstreamStatus: 'width: 50%;',
141+
downstreamStatus: 'width: 50%;',
142142
baseStyle: 'font-size: 100%; font-family: monospace; width: 100%; border: none; white-space: pre-wrap;',
143143
headingCore: 'font-family: sans-serif; font-weight: bold; border: none;',
144144
headingStyle: [
@@ -157,7 +157,7 @@ export const style = { // styleModule
157157
tabsRootElement: 'display: flex; height: 100%; width: 100%;',
158158
tabsMainElement: 'margin: 0; width:100%; height: 100%;',
159159
tabContainer: 'list-style-type: none; display: flex; height: 100%; width: 100%; margin: 0; padding: 0;',
160-
makeNewSlot: 'background: none; border: none; font: inherit; cursor: pointer',
160+
makeNewSlot: 'background: none; border: none; font: inherit; cursor: pointer;',
161161
ellipsis: 'position: absolute; right: 0; bottom: 0; width: 20%; background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit;'
162162

163163
}

‎test/unit/footer/__snapshots__/index.test.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`createControllerInfoBlock makes use of options 1`] = `
44
<div
5-
style="border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em"
5+
style="border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em;"
66
>
77
<span />
88
<a
@@ -22,7 +22,7 @@ exports[`createControllerInfoBlock makes use of options 1`] = `
2222

2323
exports[`createControllerInfoBlock runs createControllerInfoBlock 1`] = `
2424
<div
25-
style="border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em"
25+
style="border-top: solid 1px $divider-color; font-size: 0.9em; padding: 0.5em 1.5em;"
2626
>
2727
<span />
2828
<a

0 commit comments

Comments
 (0)