Skip to content

Commit

Permalink
Sidebar fix and texts (#161)
Browse files Browse the repository at this point in the history 
* fixed sidebar and texts. also added regn/revi

* fixed rollegrupper error

* new fix with er-views

* changed entire view, and logic

* fixed view for er-rolle and dark mode

* Fixed sidepanel
  • Loading branch information
@espenhalsen
espenhalsen authored Feb 14, 2025
1 parent d2cefe3 commit 7f8a493
Show file tree
Hide file tree
Showing 7 changed files with 374 additions and 159 deletions.
12 changes: 6 additions & 6 deletions backend/src/altinn-support-dashboard.backend/backend.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@
</ItemGroup>

<ItemGroup>
<PackageReference Include="Altinn.ApiClients.Maskinporten" Version="9.2.0" />
<PackageReference Include="AspNetCore.Authentication.Basic" Version="8.0.0" />
<PackageReference Include="Azure.Extensions.AspNetCore.Configuration.Secrets" Version="1.3.2" />
<PackageReference Include="Azure.Identity" Version="1.13.0" />
<PackageReference Include="Altinn.ApiClients.Maskinporten" Version="9.2.1" />
<PackageReference Include="AspNetCore.Authentication.Basic" Version="9.0.0" />
<PackageReference Include="Azure.Extensions.AspNetCore.Configuration.Secrets" Version="1.4.0" />
<PackageReference Include="Azure.Identity" Version="1.13.2" />
<PackageReference Include="Microsoft.AspNetCore.SpaProxy">
<Version>8.*-*</Version>
<Version>9.0.2</Version>
</PackageReference>
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
<PackageReference Include="Swashbuckle.AspNetCore" Version="7.2.0" />
</ItemGroup>

<ItemGroup>
Expand Down
16 changes: 11 additions & 5 deletions ...test/altinn-support-dashboard.backend.Tests/altinn-support-dashboard.backend.Tests.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,17 @@
</PropertyGroup>

<ItemGroup>
<PackageReference Include="coverlet.collector" Version="6.0.0" />
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.8.0" />
<PackageReference Include="Moq" Version="4.20.70" />
<PackageReference Include="xunit" Version="2.5.3" />
<PackageReference Include="xunit.runner.visualstudio" Version="2.5.3" />
<PackageReference Include="coverlet.collector" Version="6.0.4">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.13.0" />
<PackageReference Include="Moq" Version="4.20.72" />
<PackageReference Include="xunit" Version="2.9.3" />
<PackageReference Include="xunit.runner.visualstudio" Version="3.0.2">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
</ItemGroup>

<ItemGroup>
Expand Down
Binary file added frontend/altinn-support-dashboard.client/public/asd_128_white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
168 changes: 92 additions & 76 deletions frontend/altinn-support-dashboard.client/src/app/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');


/* Global Styles */
* {
margin: 0;
box-sizing: border-box;
Expand Down Expand Up @@ -30,57 +28,78 @@ html {
}

.nav-button {
position: relative;
width: calc(100% + 16px);
padding: 15px;
font-size: 18px;
background-color: transparent;
color: #eef4fa;
border: none;
border-radius: 30px;
display: block;
padding: 10px;
border-radius: 25px;
cursor: pointer;
text-align: center;
margin: 0 -10px 10px -10px;
transition: background-color 0.3s, color 0.3s;
}

.nav-button.selected {
background-color: #eef4fa;
color: #004a70;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.nav-button.selected::after {
content: '';
position: absolute;
top: 0;
right: -10px;
width: 20px;
height: 100%;
background-color: inherit;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

/* Hover Effects */
.nav-button:hover {
background-color: #d1e3f3;
}
margin: 0 10px 10px 0;
transition: all 0.3s ease;
color: #fff;
text-decoration: none;
background-color: transparent;
position: relative;
width: calc(100% - 10px);

}

.nav-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.nav-button.selected {
background-color: #f0f2f5;
color: #004A70;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-right: -32px;
padding-right: 32px;
width: calc(100% + 26px);
}

.nav-button.selected::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 0px;
height: 100%;
background-color: #004A70;
}

/* Adjust for Dark Mode */
html[data-ds-color-mode="dark"] .nav-button {
color: #e0e0e0;
}

html[data-ds-color-mode="dark"] .nav-button.selected {
background-color: #1a1a1a;
color: #fff;
}
html[data-ds-color-mode="dark"] .nav-button.selected {
background-color: #1e1e1e;
color: #4dabff;
}

html[data-ds-color-mode="dark"] .nav-button:hover {
background-color: rgba(255, 255, 255, 0.08);
}

html[data-ds-color-mode="dark"] .no-search-message {
color: #b0b0b0;
}

html[data-ds-color-mode="dark"] .error-message {
background-color: #2d2d2d;
color: #ff5c5c;
border-color: #ff5c5c;
}

html[data-ds-color-mode="dark"] .error-response {
background-color: rgba(255, 92, 92, 0.1);
border-color: #ff5c5c;
color: #ff8080;
}

html[data-ds-color-mode="dark"] .nav-button:hover {
background-color: #444;
}
html[data-ds-color-mode="dark"] .settings-content {
color: #e0e0e0;
}

/* Main Content Styling */
.main-content {
Expand Down Expand Up @@ -109,11 +128,11 @@ html[data-ds-color-mode="dark"] .nav-button {
transition: all 0.5s ease;
}

.org-list.hidden {
opacity: 0;
width: 0;
visibility: hidden;
}
.org-list.hidden {
opacity: 0;
width: 0;
visibility: hidden;
}

.org-details {
flex: 2;
Expand All @@ -125,10 +144,10 @@ html[data-ds-color-mode="dark"] .nav-button {
transition: all 0.5s ease;
}

.org-details.full-width {
flex: 1;
width: 100%;
}
.org-details.full-width {
flex: 1;
width: 100%;
}

/* Subunits */
.subunits {
Expand All @@ -149,6 +168,11 @@ html[data-ds-color-mode="dark"] .nav-button {
opacity: 0.8;
}

.no-search-message p {
margin: 5px 0;
font-size: 1.1rem;
}

/* Error Message Styling */
.error-message {
display: flex;
Expand Down Expand Up @@ -204,16 +228,11 @@ html[data-ds-color-mode="dark"] .nav-button {
padding-top: 20px;
}

.settings-footer p {
margin: 5px 0;
color: #666;
}

/* Sidebar Time and Date Styling */
.sidebar-time-date {
text-align: center;
margin-bottom: 20px;
.settings-footer p {
margin: 5px 0;
color: #666;
}

/* Sidebar Time and Date Styling */
.sidebar-time-date {
text-align: center;
Expand Down Expand Up @@ -244,20 +263,17 @@ html[data-ds-color-mode="dark"] .nav-button {
opacity: 0.8; /* Slightly transparent */
}

/* Optional: Adjust the font size and spacing */
.no-search-message p {
margin: 5px 0;
font-size: 1.1rem;
}

/* Smooth transitions for sidebar collapse/expand */
.MuiBox-root {
transition: width 0.3s ease, min-width 0.3s ease;
}

.sidebar-time {
font-size: 2em;
font-weight: bold;
color: #fff;
/* Tooltip animations */
.MuiTooltip-popper {
transition: opacity 0.2s ease !important;
}

.sidebar-date {
font-size: 1em;
color: #fff;
/* Icon button hover effect */
.MuiIconButton-root:hover {
background-color: rgba(255, 255, 255, 0.1);
}
57 changes: 53 additions & 4 deletions frontend/altinn-support-dashboard.client/src/app/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,63 @@ const App: React.FC = () => {
palette: {
mode: isDarkMode ? 'dark' : 'light',
primary: {
main: '#004a70',
main: isDarkMode ? '#4dabff' : '#004a70',
},
secondary: {
main: '#0163ba',
main: isDarkMode ? '#66b3ff' : '#0163ba',
},
background: {
default: isDarkMode ? grey[900] : '#f0f2f5',
paper: isDarkMode ? grey[800] : '#ffffff',
default: isDarkMode ? '#121212' : '#f0f2f5',
paper: isDarkMode ? '#1e1e1e' : '#ffffff',
},
text: {
primary: isDarkMode ? '#e0e0e0' : 'rgba(0, 0, 0, 0.87)',
secondary: isDarkMode ? '#b0b0b0' : 'rgba(0, 0, 0, 0.6)',
},
divider: isDarkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
error: {
main: isDarkMode ? '#ff5c5c' : '#d32f2f',
},
warning: {
main: isDarkMode ? '#ffb74d' : '#ed6c02',
},
info: {
main: isDarkMode ? '#4dabff' : '#0288d1',
},
success: {
main: isDarkMode ? '#66bb6a' : '#2e7d32',
},
action: {
active: isDarkMode ? '#fff' : 'rgba(0, 0, 0, 0.54)',
hover: isDarkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)',
selected: isDarkMode ? 'rgba(255, 255, 255, 0.16)' : 'rgba(0, 0, 0, 0.08)',
disabled: isDarkMode ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.26)',
disabledBackground: isDarkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
},
},
components: {
MuiPaper: {
styleOverrides: {
root: {
backgroundImage: 'none',
},
},
},
MuiTableCell: {
styleOverrides: {
root: {
borderColor: isDarkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(224, 224, 224, 1)',
},
},
},
MuiButton: {
styleOverrides: {
root: {
'&.Mui-disabled': {
color: isDarkMode ? 'rgba(255, 255, 255, 0.3)' : undefined,
},
},
},
},
},
typography: {
Expand Down
Loading

0 comments on commit 7f8a493

Please sign in to comment.