I am pretty much there exept for when using forms inside a card things go a bit wonky.
so I have the following:
Theme:
@{
light = @{
palette = @{
Common = @{
black = ‘#000’
white = ‘#fff’
}
primary = @{
main = ‘#939b38’
light = ‘#7986cb’
dark = ‘#303f9f’
contrastText = ‘#fff’
}
secondary = @{
light = ‘#ff4081’
main = ‘#f50057’
dark = ‘#c51162’
contrastText = ‘#fff’
}
error = @{
light = ‘#e57373’
main = ‘#f44336’
dark = ‘#d32f2f’
contrastText = ‘#fff’
}
warning = @{
light = ‘#ffb74d’
main = ‘#ff9800’
dark = ‘#f57c00’
contrastText = ‘rgba(0, 0, 0, 0.87)’
}
info = @{
light = ‘#64b5f6’
main = ‘#2196f3’
dark = ‘#1976d2’
contrastText = ‘#fff’
}
success = @{
light = ‘#81c784’
main = ‘#4caf50’
dark = ‘#388e3c’
contrastText = ‘rgba(0, 0, 0, 0.87)’
}
grey = @{
50 = ‘#fafafa’
100 = ‘#f5f5f5’
200 = ‘#eeeeee’
300 = ‘#e0e0e0’
400 = ‘#bdbdbd’
500 = ‘#9e9e9e’
600 = ‘#757575’
700 = ‘#616161’
800 = ‘#424242’
900 = ‘#212121’
A100 = ‘#d5d5d5’
A200 = ‘#aaaaaa’
A400 = ‘#303030’
A700 = ‘#616161’
contrastThreshold = ‘3’
getContrastText = ‘f E()’
augmentColor = ‘f B()’
tonalOffset = ‘0.2’
}
text = @{
primary = ‘#fff’
secondary = ‘rgba(255, 255, 255, 0.7)’
disabled = ‘rgba(255, 255, 255, 0.5)’
hint = ‘rgba(255, 255, 255, 0.5)’
icon = ‘rgba(255, 255, 255, 0.5)’
divider = ‘rgba(255, 255, 255, 0.12)’
}
background = @{
default = ‘#303030’
paper = ‘#424242’
}
action= @{
active = ‘#fff’
hover = ‘rgba(255, 255, 255, 0.08)’
hoverOpacity = ‘0.08’
selected = ‘rgba(255, 255, 255, 0.16)’
selectedOpacity = ‘0.16’
disabled = ‘rgba(255, 255, 255, 0.3)’
disabledBackground = ‘rgba(255, 255, 255, 0.12)’
disabledOpacity = ‘0.38’
focus = ‘rgba(255, 255, 255, 0.12)’
focusOpacity = ‘0.12’
activatedOpacity = ‘0.24’
}
}
}
dark = @{
palette = @{
Common = @{
black = ‘#000’
white = ‘#fff’
}
primary = @{
main = ‘#939b38’
light = ‘#7986cb’
dark = ‘#303f9f’
contrastText = ‘#fff’
}
secondary = @{
light = ‘#ff4081’
main = ‘#f50057’
dark = ‘#c51162’
contrastText = ‘#fff’
}
error = @{
light = ‘#e57373’
main = ‘#f44336’
dark = ‘#d32f2f’
contrastText = ‘#fff’
}
warning = @{
light = ‘#ffb74d’
main = ‘#ff9800’
dark = ‘#f57c00’
contrastText = ‘rgba(0, 0, 0, 0.87)’
}
info = @{
light = ‘#64b5f6’
main = ‘#2196f3’
dark = ‘#1976d2’
contrastText = ‘#fff’
}
success = @{
light = ‘#81c784’
main = ‘#4caf50’
dark = ‘#388e3c’
contrastText = ‘rgba(0, 0, 0, 0.87)’
}
grey = @{
50 = ‘#fafafa’
100 = ‘#f5f5f5’
200 = ‘#eeeeee’
300 = ‘#e0e0e0’
400 = ‘#bdbdbd’
500 = ‘#9e9e9e’
600 = ‘#757575’
700 = ‘#616161’
800 = ‘#424242’
900 = ‘#212121’
A100 = ‘#d5d5d5’
A200 = ‘#aaaaaa’
A400 = ‘#303030’
A700 = ‘#616161’
contrastThreshold = ‘3’
getContrastText = ‘f E()’
augmentColor = ‘f B()’
tonalOffset = ‘0.2’
}
text = @{
primary = ‘rgba(0, 0, 0, 0.87)’
secondary = ‘rgba(0, 0, 0, 0.54)’
disabled = ‘rgba(0, 0, 0, 0.38)’
hint = ‘rgba(0, 0, 0, 0.38)’
divider = ‘rgba(0, 0, 0, 0.12)’
}
background = @{
default = ‘#fafafa’
paper = ‘#fff’
}
action= @{
active = ‘rgba(0, 0, 0, 0.54)’
hover = ‘rgba(0, 0, 0, 0.04)’
hoverOpacity = ‘0.04’
selected = ‘rgba(0, 0, 0, 0.08)’
selectedOpacity = ‘0.8’
disabled = ‘rgba(0, 0, 0, 0.26)’
disabledBackground = ‘rgba(0, 0, 0, 0.12)’
disabledOpacity = ‘0.38’
focus = ‘rgba(0, 0, 0, 0.12)’
focusOpacity = ‘0.12’
activatedOpacity = ‘0.12’
}
}
}
}
Style:
$GlobalStyle =’
#logoImage{
max-width: auto;
max-height: auto;
display: block;
margin-left: -5%;
}
.MuiCardContent-root {
justify-content: center;
}
.MuiPaper-root {
text-align: center;
margin-left: 10%;
margin-right: 10%;
border-radius: 20px;
}
.MuiTypography-body1 {
font-size: 18px;
font-weight: 600;
font-family: cursive
}
.MuiTypography-body2 {
font-size: 14px;
font-weight: 300;
}
’
Dashboard
$UDScriptRoot = $PSScriptRoot
New-UDDashboard -theme (. “$UDScriptRoot\Theme\Theme.ps1”) -Title “EdgeCloud Services” -Content {
. “$UDScriptRoot\Theme\Style.ps1”
New-UDTabs -RenderOnActive -Tabs {
foreach ($Devolutions_Tab in (Get-ChildItem “$UDScriptRoot\pages” -Recurse -filter *.ps1)) {
New-UDTab -Text $Devolutions_Tab.name.split(’.’)[0] -Content {. $Devolutions_Tab.fullname}
}
}
}
Everything loads as expected and while all my other pages look great when I use a form the layout is a is off and it varies on each tab for example:
While centered I need to padd the Imputs to center them to the title. Thats not a problem I know how to do that. But as you can see the second select has the wording cut off. How do I make sure its displayed fully? If I dont use a card as a wrapper I dont seem to get this issue.
Secondly when we go to the next tab things get weirder:
As you can see the Validate and Button are off to the left.
Does anyone have any ideas or can help me fix this as the site looks exactly how I want it now just with these couple of issues.
Thanks