- added page managebandi;

- improved styles of the pages and sections;
This commit is contained in:
Vitalii Kiiko
2024-08-14 08:28:54 +02:00
parent c09127a675
commit 76b5dd2ece
28 changed files with 945 additions and 56 deletions

View File

@@ -0,0 +1,10 @@
.appForm {
display: flex;
flex-direction: column;
gap: 24px;
}
.appForm__field {
display: flex;
flex-direction: column;
gap: 14px;
}

View File

@@ -1,22 +0,0 @@
.appPage {
display: flex;
flex-direction: column;
h1 {
color: var(--primary-color);
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin: 28px 0;
}
h2 {
color: var(--Black);
font-size: 21px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin: 24px 0;
}
}

View File

@@ -0,0 +1,67 @@
.appPage {
display: flex;
flex-direction: column;
h1 {
color: var(--primary-color);
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
}
.appPageSection {
display: flex;
flex-direction: column;
h2 {
color: var(--Black);
font-size: 21px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin: 0 0 24px;
}
}
.appTableHeader {
display: flex;
justify-content: space-between;
}
.appPage__pageHeader {
display: flex;
flex-direction: column;
gap: 14px;
padding: 28px;
h1, h2, h3 {
margin: 0;
}
p, span {
color: var(--text-color-secondary);
font-size: 17.5px;
font-style: normal;
font-weight: 400;
line-height: 120%;
margin: 0;
}
span {
margin-left: 10px;
text-transform: uppercase;
}
}
.appPage__spacer {
width: 100%;
padding: 24px 0;
}
.appPageSection__actions {
display: flex;
gap: 24px;
margin-bottom: 24px;
}

View File

@@ -0,0 +1,7 @@
.bandoStatusTag {
text-transform: uppercase;
font-size: 10.5px;
font-style: normal;
font-weight: 600;
line-height: 150%;
}

View File

@@ -1,7 +1,4 @@
.statsBigBadges {
display: flex;
flex-direction: column;
padding: 24px 0;
}
.statsBigBadges__grid {
display: grid;

View File

@@ -0,0 +1,44 @@
/* montserrat-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('../../fonts/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: italic;
font-weight: 400;
src: url('../../fonts/montserrat-v26-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
src: url('../../fonts/montserrat-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url('../../fonts/montserrat-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
src: url('../../fonts/montserrat-v26-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

View File

@@ -1,6 +1,6 @@
$primaryColor: #4A644E;
$primaryDarkColor: #4A644E;
$primaryDarkerColor: #4A644E;
$primaryColor: #3B7C43;
$primaryDarkColor: #3B7C43;
$primaryDarkerColor: #3B7C43;
$primaryTextColor: #ffffff;
$chipBg: $primaryColor;
@@ -10,6 +10,7 @@ $chipFocusBg: $primaryColor;
$chipFocusTextColor: $primaryTextColor;
$colors: (
"grey": #6B7280,
"blue": #2196F3,
"green": #4caf50,
"yellow": #FBC02D,

View File

@@ -147,13 +147,16 @@ $successButtonActiveBorderColor: #388E3C;
$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%);
$warningButtonBg: #FFC107;
$warningButtonBg: #F97316;
$closedButtonBg: #6B7280;
$warningButtonTextColor: $textColor;
$warningButtonBorder: 1px solid #FFC107;
$warningButtonBorder: 1px solid #F97316;
$warningButtonHoverBg: #FFB300;

View File

@@ -67,7 +67,7 @@
&.p-tag-warning {
background-color: $warningButtonBg;
color: $warningButtonTextColor;
color: $dangerButtonTextColor;
}
&.p-tag-danger {

View File

@@ -20,7 +20,7 @@
&.p-tag-warning {
background-color: $warningButtonBg;
color: $warningButtonTextColor;
color: $dangerButtonTextColor;
}
&.p-tag-danger {
@@ -28,6 +28,11 @@
color: $dangerButtonTextColor;
}
&.p-tag-closed {
background-color: $closedButtonBg;
color: $dangerButtonTextColor;
}
.p-tag-icon {
margin-right: math.div($inlineSpacing, 2);
font-size: $badgeFontSize;

View File

@@ -16,22 +16,38 @@
--card-full-background-color-1: #3B7C43;
}
body {
margin: 0;
}
.wrapper {
html {
min-height: 100%;
display: flex;
flex-direction: column;
height: 100vh;
min-height: 0;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 0;
font-family: 'Montserrat';
p, span, input, label, textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button {
font-family: 'Montserrat';
}
}
#root, .wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.inner {
display: flex;
height: 100%;
min-height: 0;
flex-grow: 1;
> sidebar {
> aside {
flex: 0 0 320px;
border-right: 1px solid var(--menu-borderColor);
@@ -42,11 +58,13 @@ body {
margin: 0;
padding: 0;
li a {
li a, li button {
display: flex;
padding: 10.5px 17.5px;
align-items: center;
gap: 7px;
width: 100%;
border: 0;
border-bottom: 1px solid var(--menu-borderColor);
color: var(--menuitem-color);
background-color: transparent;
@@ -56,6 +74,10 @@ body {
line-height: 100%;
text-decoration: none;
&:hover {
cursor: pointer;
}
i {
color: var(--text-color-secondary);
}
@@ -75,10 +97,12 @@ body {
> main {
flex: 1 1 auto;
box-sizing: border-box;
padding: 0 24px;
padding: 0 24px 50px;
}
}
@import "./components/topBar.css";
@import "./components/appPage.css";
@import "./components/statsBigBadges.css";
@import "./components/topBar.scss";
@import "./components/appPage.scss";
@import "./components/statsBigBadges.scss";
@import "./components/bandoStatusTag.scss";
@import "./components/appForm.scss";